/* MR CHAPA — Sistema de gestión · paleta oficial B1 */
:root{
  --blue:#0066FF; --blue-d:#0052D6; --blue-soft:#e8f0ff;
  --navy:#0A1B3D; --navy-2:#12294f; --cyan:#3FE0FF; --green:#16C172;
  --ice:#F2F4F7; --line:#e5eaf2; --text:#0A1B3D; --t2:#55617a; --t3:#8a93a6;
  --warn:#F59E0B; --danger:#e05252;
  --r:14px; --sh:0 10px 30px rgba(10,27,61,.09); --sh-sm:0 2px 10px rgba(10,27,61,.06);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',system-ui,sans-serif;background:var(--ice);color:var(--text);line-height:1.55;}
h1,h2,h3,h4,.num{font-family:'Plus Jakarta Sans','Inter',sans-serif;letter-spacing:-.02em;font-weight:800;}
a{color:inherit;text-decoration:none;}
.hidden{display:none!important;}
::selection{background:var(--blue);color:#fff;}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:6px;}

/* --- Botones --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:10px;font-family:'Inter';font-size:14px;font-weight:700;cursor:pointer;border:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s;white-space:nowrap;}
.btn:active{transform:scale(.97);}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:9px;}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(0,102,255,.24);}
.btn-primary:hover{background:var(--blue-d);transform:translateY(-1px);}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--text);}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
.btn-ok{background:rgba(22,193,114,.12);border:1px solid rgba(22,193,114,.45);color:#0e7a48;}
.btn-danger{background:rgba(224,82,82,.1);border:1px solid rgba(224,82,82,.4);color:#c0392b;}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-2);}
.w100{width:100%;}

/* --- Login --- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(900px 500px at 70% 10%,rgba(0,102,255,.28),transparent 60%),linear-gradient(160deg,#0b2151,#0a1633 60%,#070f22);}
.login-card{background:#fff;border-radius:20px;padding:38px 34px;width:100%;max-width:400px;box-shadow:0 30px 70px rgba(0,0,0,.4);}
.login-brand{text-align:center;margin-bottom:26px;}
.lb-mark{font-family:'Plus Jakarta Sans';font-size:28px;font-weight:800;color:var(--navy);letter-spacing:-.03em;display:block;}
.lb-mark span{color:var(--blue);}
.lb-tag{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--t3);font-weight:600;}
.login-error{display:none;background:rgba(224,82,82,.09);border:1px solid rgba(224,82,82,.35);color:#c0392b;padding:10px 13px;border-radius:9px;font-size:13px;margin-bottom:12px;}
.login-note{text-align:center;font-size:11.5px;color:var(--t3);margin-top:18px;}

/* --- Campos --- */
.field{display:flex;flex-direction:column;margin-bottom:14px;}
.field label{font-size:12.5px;font-weight:600;color:var(--t2);margin-bottom:5px;}
input,select,textarea{background:var(--ice);border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:14px;color:var(--text);font-family:'Inter';outline:none;transition:border-color .2s,background .2s;width:100%;}
input:focus,select:focus,textarea:focus{border-color:var(--blue);background:#fff;}
textarea{resize:vertical;min-height:70px;line-height:1.5;}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}

/* --- Layout app --- */
#appView{display:flex;min-height:100vh;}
.side{width:246px;background:var(--navy);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:60;transition:transform .3s var(--ease);}
.side-brand{padding:22px 20px 16px;border-bottom:1px solid rgba(255,255,255,.09);}
.sb-mark{font-family:'Plus Jakarta Sans';font-size:20px;font-weight:800;color:#fff;letter-spacing:-.03em;display:block;}
.sb-mark span{color:var(--cyan);}
.sb-tag{font-size:11px;color:rgba(255,255,255,.55);margin-top:2px;display:block;}
.side-nav{flex:1;overflow-y:auto;padding:12px 10px;}
.side-nav button{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;color:rgba(255,255,255,.75);font-family:'Inter';font-size:14px;font-weight:600;padding:11px 13px;border-radius:10px;cursor:pointer;text-align:left;transition:background .2s,color .2s;}
.side-nav button:hover{background:rgba(255,255,255,.07);color:#fff;}
.side-nav button.on{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(0,102,255,.3);}
.side-nav .sep{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.35);padding:16px 13px 6px;font-weight:700;}
.side-foot{padding:16px 18px;border-top:1px solid rgba(255,255,255,.09);}
.su-name{font-size:13.5px;font-weight:700;}
.su-rol{font-size:11.5px;color:var(--cyan);margin-bottom:10px;text-transform:capitalize;}
.main{flex:1;margin-left:246px;min-width:0;}
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:14px 26px;display:flex;align-items:center;gap:14px;}
.topbar h1{font-size:19px;flex:1;}
.burger{display:none;background:none;border:none;font-size:21px;cursor:pointer;color:var(--navy);}
.top-actions{display:flex;gap:8px;align-items:center;}
.chip{font-size:11px;font-weight:700;padding:5px 11px;border-radius:99px;background:var(--blue-soft);color:var(--blue);border:1px solid rgba(0,102,255,.2);}
.chip.on{background:rgba(22,193,114,.12);color:#0e7a48;border-color:rgba(22,193,114,.4);}
.chip-plan{background:var(--navy);color:#fff;border-color:transparent;}
.content{padding:26px;max-width:1220px;}

/* --- Tarjetas --- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:18px;box-shadow:var(--sh-sm);}
.card h2{font-size:16px;margin-bottom:6px;}
.card h3{font-size:14.5px;margin-bottom:10px;}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.note{font-size:12.5px;color:var(--t2);line-height:1.6;margin-top:10px;}
.note code{background:var(--ice);padding:1px 6px;border-radius:5px;font-size:12px;}
.muted{color:var(--t3);}

/* --- KPIs --- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px;}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh-sm);}
.kpi.hero{background:linear-gradient(140deg,var(--navy),#12345f);border-color:transparent;}
.kpi .kv{font-family:'Plus Jakarta Sans';font-size:25px;font-weight:800;line-height:1.1;color:var(--navy);}
.kpi.hero .kv{color:#fff;}
.kpi .kl{font-size:12px;color:var(--t2);margin-top:4px;}
.kpi.hero .kl{color:rgba(255,255,255,.7);}
.kpi .ks{font-size:11.5px;color:var(--green);font-weight:700;margin-top:3px;}

/* --- Tablas --- */
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;color:var(--t3);font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:9px 8px;border-bottom:1px solid var(--line);font-weight:700;}
td{padding:11px 8px;border-bottom:1px solid #f1f4f9;vertical-align:middle;}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;}
tr:hover td{background:#fbfcfe;}
.tag{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:99px;display:inline-block;}
.tag.on{background:rgba(22,193,114,.13);color:#0e7a48;}
.tag.off{background:#eef1f6;color:var(--t3);}
.tag.warn{background:rgba(245,158,11,.14);color:#a16207;}
.tag.blue{background:var(--blue-soft);color:var(--blue);}
.empty{text-align:center;color:var(--t3);padding:26px;font-size:13.5px;}

/* --- Split y barras --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.bd-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:7px 0;border-bottom:1px solid #f1f4f9;}
.bd-row .bn{color:var(--t2);font-weight:600;}
.bd-row .bv{font-weight:700;font-variant-numeric:tabular-nums;}
.bar{height:9px;background:#eef1f6;border-radius:99px;overflow:hidden;margin-top:7px;}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:99px;transition:width .5s var(--ease);}
.bar i.ok{background:linear-gradient(90deg,#16C172,#4ade80);}
.bar i.warn{background:linear-gradient(90deg,#F59E0B,#fbbf24);}

/* --- Chat --- */
.chat{display:flex;flex-direction:column;height:440px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ice);}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;}
.msg{max-width:82%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;}
.msg.user{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px;}
.msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;}
.msg.sys{align-self:center;background:transparent;color:var(--t3);font-size:11.5px;text-align:center;}
.chat-in{display:flex;gap:8px;padding:12px;background:#fff;border-top:1px solid var(--line);}
.chat-in input{flex:1;}

/* --- Gantt --- */
.gantt{overflow-x:auto;padding-bottom:8px;}
.g-row{display:grid;grid-template-columns:230px 1fr;align-items:center;gap:12px;margin-bottom:7px;min-width:760px;}
.g-lbl{font-size:12.5px;color:var(--t2);display:flex;align-items:center;gap:8px;}
.g-lbl input{width:15px;height:15px;flex-shrink:0;accent-color:var(--blue);}
.g-track{position:relative;height:22px;background:#eef1f6;border-radius:6px;}
.g-bar{position:absolute;top:0;height:100%;border-radius:6px;font-size:10px;color:#fff;display:flex;align-items:center;padding:0 7px;font-weight:700;overflow:hidden;white-space:nowrap;}
.g-now{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--danger);z-index:3;}
.g-head{display:grid;grid-template-columns:230px 1fr;gap:12px;margin-bottom:8px;min-width:760px;}
.g-weeks{display:flex;font-size:9.5px;color:var(--t3);}
.g-weeks span{flex:1;text-align:center;}

/* --- Modal --- */
.modal-overlay{position:fixed;inset:0;background:rgba(10,27,61,.55);backdrop-filter:blur(3px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:#fff;border-radius:16px;padding:26px;max-width:620px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 30px 70px rgba(0,0,0,.35);}
.modal h3{font-size:18px;margin-bottom:16px;}
.modal-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}

/* --- Toast --- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--navy);color:#fff;padding:12px 22px;border-radius:11px;font-size:13.5px;font-weight:600;z-index:300;transition:transform .3s var(--ease);box-shadow:var(--sh);max-width:90vw;}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast.err{background:#c0392b;}

/* --- Áreas del business system --- */
.areas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;}
.area-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh-sm);border-top:3px solid var(--blue);}
.area-card h3{font-size:16px;display:flex;align-items:center;gap:9px;}
.area-card .mis{font-size:13px;color:var(--t2);margin:8px 0 12px;}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.chips span{font-size:11px;background:var(--ice);color:var(--t2);padding:3px 9px;border-radius:99px;}
.rut{font-size:12px;color:var(--t2);margin-top:8px;}
.rut b{color:var(--navy);font-size:11px;text-transform:uppercase;letter-spacing:.5px;}
.rut ul{margin:3px 0 0 16px;}

.ger-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;}
.ger{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh-sm);cursor:pointer;transition:transform .3s var(--ease),border-color .2s,box-shadow .3s var(--ease);}
.ger:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:var(--sh);}
.ger.on{border-color:var(--blue);background:var(--blue-soft);}
.ger .gn{font-family:'Plus Jakarta Sans';font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px;}
.ger .gr{font-size:12px;color:var(--t2);margin-top:2px;}
.ger .gf{font-size:11.5px;color:var(--blue);font-weight:700;margin-top:6px;}

.tabs{display:flex;gap:6px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:12px;padding:5px;margin-bottom:18px;box-shadow:var(--sh-sm);}
.tabs button{flex:1;min-width:110px;padding:9px 8px;border:none;background:transparent;border-radius:9px;font-family:'Inter';font-size:13px;font-weight:700;color:var(--t2);cursor:pointer;transition:background .2s,color .2s;}
.tabs button:hover{background:var(--ice);}
.tabs button.on{background:var(--blue);color:#fff;}

.matriz{overflow-x:auto;}
.matriz td.si{color:var(--green);font-weight:800;text-align:center;}
.matriz td.no{color:#d6dce8;text-align:center;}

@media(max-width:900px){
  .side{transform:translateX(-100%);}
  .side.open{transform:none;}
  .main{margin-left:0;}
  .burger{display:block;}
  .row,.row3,.row4,.split{grid-template-columns:1fr;}
  .content{padding:18px;}
}