:root{
  /* ── BRANDING SiCoGa ─────────────────────────────────
     #3FB950 verde leaf · #1A3B24 verde forest · #58A6FF azul
     #1C2430 navy oscuro · #F4F7F5 off-white                  */
  --brand-green:#3FB950;--brand-green-soft:#6CD581;--brand-green-deep:#1A3B24;
  --brand-blue:#58A6FF;--brand-navy:#1C2430;--brand-light:#F4F7F5;

  /* Superficies — tema claro */
  --bg:#F4F7F5;--surface:#FFFFFF;--s2:#FFFFFF;--s3:#F1F5F2;
  --bdr:#E1E8E3;--bdr2:#CFD8D0;
  --tx:#1C2430;--txd:#5C6770;--txb:#0A1018;

  /* Acentos saturados (fondos sólidos) + tints suaves */
  --gn:#3FB950;--gnd:#E8F5EA;
  --bl:#58A6FF;--bld:#E5F0FF;
  --am:#F0A020;--amd:#FFF4E0;
  --rd:#E03B3B;--rdd:#FCE5E8;
  --pu:#A06CFF;--pud:#F0E8FF;
  --tl:#1FB7AA;--tld:#DCFCF7;

  /* Texto legible sobre tints (cumple contraste AA en blanco/tints) */
  --gnt:#1A3B24;--blt:#1A56AB;--amt:#7A4A0A;
  --rdt:#9A1F1F;--put:#5B26A6;--tlt:#0F6B65;

  --font:Arial,Helvetica,sans-serif;--mono:Arial,Helvetica,sans-serif;
  --sw:258px;--hh:52px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
.sem,.nbg,.kval,.mn,.wlbl,.wval,.cc .cn,.cv,.tls,.srow .sv,.auth-tag,.auth-pillars,.auth-foot,.tbl td,.tbl th,input[type="number"]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum","zero" 0;}
body{
  font-family:var(--font);color:var(--tx);
  font-feature-settings:"zero" 0;
  height:100vh;display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(ellipse at 0% 0%,rgba(63,185,80,.07),transparent 45%),
    radial-gradient(ellipse at 100% 100%,rgba(88,166,255,.06),transparent 50%),
    var(--bg);
  background-attachment:fixed;
}

/* HEADER */
header{height:var(--hh);background:var(--surface);border-bottom:1px solid var(--bdr);display:flex;align-items:center;padding:0 20px;gap:14px;position:fixed;top:0;left:0;right:0;z-index:100;box-shadow:0 1px 3px rgba(28,36,48,.04);}
.logo{font-weight:700;font-size:15px;color:var(--txb);} .logo span{color:var(--am);}
.sem{margin-left:auto;background:var(--amd);border:1px solid var(--am);color:var(--amt);font-family:var(--mono);font-size:12px;padding:3px 10px;border-radius:4px;}

/* BRAND LOCKUP (header + login) */
.brand-link{display:flex;align-items:center;gap:9px;text-decoration:none;line-height:1;}
.brand-iso{height:36px;width:auto;flex-shrink:0;display:block;}
.hdr-r{display:flex;align-items:center;gap:12px;}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--bld);border:1px solid var(--bl);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--blt);font-weight:600;text-decoration:none;}

/* LAYOUT */
.layout{display:flex;margin-top:var(--hh);height:calc(100vh - var(--hh));overflow:hidden;}

/* SIDEBAR */
aside{width:var(--sw);min-width:var(--sw);background:var(--surface);border-right:1px solid var(--bdr);overflow-y:auto;display:flex;flex-direction:column;padding-bottom:20px;box-shadow:1px 0 3px rgba(28,36,48,.03);}
.nsec{padding:13px 12px 3px;font-size:10px;font-weight:700;color:var(--txd);letter-spacing:1.4px;text-transform:uppercase;}
.ni{display:flex;align-items:center;gap:9px;padding:7px 14px;cursor:pointer;border-radius:6px;margin:1px 6px;font-size:12.5px;color:var(--txd);transition:all .15s;border:1px solid transparent;}
.ni:hover{background:var(--s3);color:var(--tx);}
.ni.active{background:var(--bld);color:var(--blt);border-color:var(--bl);font-weight:600;}
.ni .ico{width:16px;text-align:center;font-size:13px;flex-shrink:0;}
.nbg{margin-left:auto;font-size:10px;font-family:var(--mono);padding:1px 6px;border-radius:10px;}
.nbg.r{background:var(--rdd);color:var(--rdt);}
.nbg.a{background:var(--amd);color:var(--amt);}
.nbg.d{background:var(--s3);color:var(--txd);}
.ndiv{height:1px;background:var(--bdr);margin:6px 12px;}

/* MAIN */
main{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:18px;}
.page{display:none;flex-direction:column;gap:18px;}
.page.active{display:flex;animation:fi .15s ease;}
@keyframes fi{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* PAGE HEADER */
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.ptitle{font-size:21px;font-weight:700;color:var(--txb);}
.psub{font-size:12.5px;color:var(--txd);margin-top:2px;}
.bg{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer;border:none;transition:all .15s;font-family:var(--font);}
.bp{background:var(--bl);color:#0A1018;} .bp:hover{background:#3F8FE6;}
.bo{background:var(--surface);border:1px solid var(--bdr2);color:var(--tx);} .bo:hover{border-color:var(--bl);color:var(--blt);}
.ba{background:var(--am);color:#000;} .ba:hover{background:#FFB83F;}
.bsm{padding:4px 10px;font-size:11.5px;}

/* KPI */
.kg{display:grid;gap:12px;}
.k4{grid-template-columns:repeat(4,1fr);}
.k3{grid-template-columns:repeat(3,1fr);}
.k2{grid-template-columns:repeat(2,1fr);}
.kpi{background:var(--s2);border:1px solid var(--bdr);border-radius:10px;padding:14px;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(28,36,48,.04);}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.kpi.g::before{background:var(--gn);} .kpi.b::before{background:var(--bl);}
.kpi.a::before{background:var(--am);} .kpi.r::before{background:var(--rd);}
.kpi.p::before{background:var(--pu);} .kpi.t::before{background:var(--tl);}
.klbl{font-size:10.5px;color:var(--txd);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;}
.kval{font-size:26px;font-weight:700;color:var(--txb);font-family:var(--mono);line-height:1;}
.ksub{font-size:11px;color:var(--txd);margin-top:4px;}
.kdelta{font-size:11px;margin-top:3px;} .kdelta.up{color:var(--gnt);} .kdelta.dn{color:var(--rdt);}

/* CARD */
.card{background:var(--s2);border:1px solid var(--bdr);border-radius:10px;padding:16px;box-shadow:0 1px 3px rgba(28,36,48,.04);}
.ct{font-size:12.5px;font-weight:600;color:var(--txb);margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.g2-21{display:grid;grid-template-columns:2fr 1fr;gap:14px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
@media (max-width:900px){.g2-21{grid-template-columns:1fr;}}
/* Form fields en dos columnas (campos full-width quedan con .fg2-full) */
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
.fg2 .fg-field{margin-bottom:12px;}
.fg2 .fg-full{grid-column:1 / -1;}
@media (max-width:760px){.fg2{grid-template-columns:1fr;}}

/* TABLE */
.tbl{width:100%;border-collapse:collapse;font-size:12px;}
.tbl th{background:var(--s3);color:var(--txd);text-align:left;padding:7px 11px;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--bdr);font-weight:600;white-space:nowrap;}
.tbl td{padding:8px 11px;border-bottom:1px solid var(--bdr);color:var(--tx);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:var(--s3);}
/* Centrado de tabla: usar clase .tbl.tc para alinear thead/tbody al centro */
.tbl.tc th,.tbl.tc td{text-align:center;}
/* Autoajuste de columnas: th puede envolver títulos largos pero las
   celdas de datos (fechas, números) se mantienen en una sola línea
   para que la columna se expanda lo necesario sin cortar valores. */
.tbl.auto{table-layout:auto;}
.tbl.auto th{white-space:normal;}
.tbl.auto td{white-space:nowrap;}
/* Wrapper "Excel-like": cabecera fija al scrollear vertical y horizontal.
   Mantiene visibles las dos filas de thead (grupos + columnas). */
.tbl-stick{max-height:calc(100vh - 280px);overflow:auto;}
.tbl-stick thead tr.thg th{position:sticky;top:0;z-index:3;}
.tbl-stick thead tr:not(.thg) th{position:sticky;top:30px;z-index:2;background:var(--s3);}
/* Sombra inferior para reemplazar el border-bottom que desaparece con sticky */
.tbl-stick thead tr:not(.thg) th{box-shadow:inset 0 -1px 0 var(--bdr);}
/* Grupos coloreados en thead (fila superior con colspan).
   Tonos saturados al estilo del Excel del cliente.
   Paleta Disponibilidad: gen/pry/reim/alim/disp.
   Paleta Programa de Reimplantes: r-pry/r-imp/r-alim (clases dedicadas
   porque los grupos coinciden de nombre pero el cliente pidió colores
   distintos). */
.thg th{font-size:11px;font-weight:700;color:#0A1018;letter-spacing:.5px;border-bottom:1px solid var(--bdr);padding:6px 8px;text-align:center;text-transform:uppercase;}
/* Disponibilidad */
.thg .gen{background:#D9D9D9;color:#1A1A1A;}
.thg .pry{background:#FFE45C;color:#5A4500;}
.thg .reim{background:#9CC2EA;color:#10325E;}
.thg .alim{background:#F7B26B;color:#5C2E00;}
.thg .disp{background:#7FCB94;color:#0F3D1F;}
/* Programa de Reimplantes */
.thg .r-pry{background:#FFD08F;color:#5C2E00;}
.thg .r-imp{background:#7FCB94;color:#0F3D1F;}
.thg .r-alim{background:#D9B3E6;color:#3F1A52;}
.mn{font-family:var(--mono);font-size:11.5px;}
.pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10.5px;font-weight:600;white-space:nowrap;}
.pg{background:var(--gnd);color:var(--gnt);} .pb{background:var(--bld);color:var(--blt);}
.pa{background:var(--amd);color:var(--amt);} .pr{background:var(--rdd);color:var(--rdt);}
.pp{background:var(--pud);color:var(--put);} .pt{background:var(--tld);color:var(--tlt);}

/* WEEK CHART */
.wc{display:flex;align-items:flex-end;gap:5px;height:86px;padding:0 2px;}
.ww{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;}
.wb{width:100%;border-radius:3px 3px 0 0;cursor:pointer;} .wb:hover{filter:brightness(1.3);}
.wb.cur{outline:2px solid var(--am);outline-offset:1px;}
.wlbl,.wval{font-size:9px;color:var(--txd);font-family:var(--mono);}

/* CORRAL MAP */
.cgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;}
.cc{aspect-ratio:1;border-radius:7px;border:1px solid var(--bdr);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .14s;gap:1px;padding:3px;}
.cc.oc{background:var(--gnd);border-color:var(--gn);} .cc.vp{background:var(--amd);border-color:var(--am);}
.cc.zp{background:var(--pud);border-color:var(--pu);} .cc.li{background:var(--s3);border-color:var(--bdr2);color:var(--txd);}
.cc.oc,.cc.vp,.cc.zp{color:var(--txb);}
.cc:hover{transform:scale(1.05);z-index:2;}
.cc .cn{font-weight:700;font-family:var(--mono);font-size:11px;}
.cc .ci{font-size:8.5px;opacity:.8;text-align:center;}

/* ALERTS */
.ali{display:flex;flex-direction:column;gap:7px;}
.ai{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;font-size:12px;}
.ai.warn{background:var(--amd);border:1px solid var(--am);color:var(--amt);}
.ai.info{background:var(--bld);border:1px solid var(--bl);color:var(--blt);}
.ai.ok{background:var(--gnd);border:1px solid var(--gn);color:var(--gnt);}
.ai.err{background:var(--rdd);border:1px solid var(--rd);color:var(--rdt);}

/* Marca celdas con override manual (e.g. fechas de Alimentación) */
.cell-edited{background:rgba(63,111,77,0.15);color:#3F6F4D;font-weight:600;padding:2px 6px;border-radius:4px;}

/* Celda con fórmula pendiente de aplicar (Spec 9-jun Parte A) — semáforo rojo */
.cell-pendiente{background:rgba(220,38,38,0.12);color:#b91c1c;font-weight:600;padding:2px 6px;border-radius:4px;}

/* FORM */
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fg{display:flex;flex-direction:column;gap:4px;}
.fg.full{grid-column:1/-1;}
label{font-size:10.5px;color:var(--txd);text-transform:uppercase;letter-spacing:.6px;font-weight:600;}
input,select,textarea{background:var(--s3);border:1px solid var(--bdr2);border-radius:6px;color:var(--tx);padding:7px 11px;font-family:var(--font);font-size:12.5px;outline:none;transition:border .15s;width:100%;}
input:focus,select:focus,textarea:focus{border-color:var(--bl);}
select option{background:var(--s2);}

/* CALC BOX */
.cbox{background:var(--s3);border:1px solid var(--gnd);border-radius:8px;padding:12px;}
.crow{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--bdr);font-size:12px;}
.crow:last-child{border-bottom:none;}
.ck{color:var(--txd);} .cv{font-family:var(--mono);font-weight:600;color:var(--txb);}
.cv.g{color:var(--gnt);} .cv.a{color:var(--amt);} .cv.p{color:var(--put);}

/* TIMELINE */
.tl{display:flex;flex-direction:column;}
.tli{display:flex;gap:12px;padding-bottom:13px;}
.tli:last-child{padding-bottom:0;}
.tll{display:flex;flex-direction:column;align-items:center;min-width:26px;}
.tld{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:3px;}
.tlln{width:1px;flex:1;background:var(--bdr);margin-top:3px;}
.tli:last-child .tlln{display:none;}
.tlc{flex:1;}
.tlt{font-size:12px;font-weight:600;color:var(--tx);}
.tls{font-size:11px;color:var(--txd);margin-top:1px;font-family:var(--mono);}
.tli.done .tld{background:var(--gn);} .tli.act .tld{background:var(--am);box-shadow:0 0 5px var(--am);}
.tli.pend .tld{background:var(--bdr2);}

/* CIERRE */
.csum{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:14px;}
.cblk{background:var(--s3);border:1px solid var(--bdr);border-radius:8px;padding:12px;}
.cbt{font-size:10px;color:var(--txd);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;}
.cbr{display:flex;justify-content:space-between;font-size:11.5px;padding:3px 0;}
.cbr .ck{color:var(--txd);} .cbr .cv{font-family:var(--mono);font-size:11.5px;}

/* TABS */
.tabs{display:flex;border-bottom:1px solid var(--bdr);margin-bottom:14px;}
.tab{padding:8px 16px;font-size:12.5px;cursor:pointer;color:var(--txd);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;}
.tab:hover{color:var(--tx);} .tab.active{color:var(--blt);border-bottom-color:var(--bl);font-weight:600;}

/* PROG BAR */
.pb{height:5px;background:var(--bdr);border-radius:3px;overflow:hidden;}
.pf{height:100%;border-radius:3px;transition:width .5s;}

/* LEGEND */
.leg{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
.li{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--txd);}
.ld{width:7px;height:7px;border-radius:2px;}

/* STAT ROW */
.srow{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--bdr);font-size:12px;}
.srow:last-child{border-bottom:none;}
.srow .sk{color:var(--txd);} .srow .sv{font-family:var(--mono);font-weight:600;}

.stitle{font-size:10.5px;font-weight:600;color:var(--txd);text-transform:uppercase;letter-spacing:1px;margin:10px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--bdr);}

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:3px;}

/* AUTH SHELL — login / password reset
   El login mantiene tema oscuro: re-escopo variables a la paleta dark */
.auth-shell{
  --bg:#0D1117;--surface:#161B22;--s2:#1C2430;--s3:#21293A;
  --bdr:#2A3548;--bdr2:#354060;
  --tx:#CDD9F0;--txd:#6E7E99;--txb:#EEF4FF;
  --gnd:#1A3B24;--bld:#1A2D4A;--amd:#3B2A0A;--rdd:#3B1A1A;--pud:#2A1A4A;--tld:#0F2D2B;
  --gnt:#3FB950;--blt:#79BCFF;--amt:#F0A020;--rdt:#FF7070;--put:#BC8CFF;--tlt:#39D5C8;

  flex:1;overflow-y:auto;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:18px;
  padding:48px 20px 32px;color:var(--tx);
  background:
    radial-gradient(circle at 18% 22%,rgba(63,185,80,.20),transparent 55%),
    radial-gradient(circle at 82% 78%,rgba(88,166,255,.18),transparent 55%),
    #0D1117;
}
.auth-shell .ph{margin-bottom:0;}
.auth-shell .card{width:100%;max-width:380px;}

/* AUTH CARD — login con marketing */
.auth-card{
  width:100%;max-width:940px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:0;
  background:linear-gradient(180deg,rgba(28,36,48,.96),rgba(22,27,34,.96));
  border:1px solid var(--bdr);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.65),0 0 0 1px rgba(63,185,80,.06);
}
.auth-logo-row{
  grid-column:1/-1;display:flex;align-items:center;justify-content:center;
  padding:28px 0 0;
  background:linear-gradient(180deg,rgba(15,22,32,.7),transparent);
}
.auth-brand{height:88px;width:auto;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));}
.auth-hero{
  padding:40px 38px;display:flex;flex-direction:column;gap:14px;
  background:
    radial-gradient(circle at 50% -10%,rgba(63,185,80,.22),transparent 60%),
    radial-gradient(circle at 50% 110%,rgba(88,166,255,.18),transparent 65%),
    rgba(15,22,32,.55);
  border-right:1px solid var(--bdr);
}
.auth-title{font-size:17px;font-weight:700;color:var(--txb);text-align:center;line-height:1.3;letter-spacing:.6px;text-transform:uppercase;margin-top:4px;}
.auth-title .accent{background:linear-gradient(90deg,var(--brand-green) 0%,var(--brand-green-soft) 50%,var(--brand-blue) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.auth-tag{font-family:var(--mono);font-size:10.5px;color:var(--txd);text-align:center;letter-spacing:2.2px;text-transform:uppercase;}
.auth-pitch{font-size:13px;color:var(--tx);line-height:1.6;text-align:center;margin-top:4px;}
.auth-bullets{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:7px;}
.auth-bullets li{font-size:12px;color:var(--tx);padding:9px 12px;background:rgba(28,36,48,.55);border:1px solid var(--bdr);border-left:3px solid var(--gn);border-radius:6px;line-height:1.45;}
.auth-bullets li:nth-child(2){border-left-color:var(--brand-green-soft);}
.auth-bullets li:nth-child(3){border-left-color:var(--bl);}
.auth-bullets strong{color:var(--txb);}
.auth-pillars{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:6px;font-family:var(--mono);font-size:10px;color:var(--txd);letter-spacing:1.4px;text-transform:uppercase;}
.auth-pillars span{display:inline-flex;align-items:center;gap:5px;}
.auth-pillars span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gn);}
.auth-pillars span:nth-child(2)::before{background:var(--bl);}
.auth-pillars span:nth-child(3)::before{background:var(--brand-green-soft);}
.auth-pillars span:nth-child(4)::before{background:var(--am);}
.auth-form{padding:40px 38px;display:flex;flex-direction:column;justify-content:center;}
.auth-form .auth-form-title{font-size:14px;font-weight:600;color:var(--txb);text-transform:uppercase;letter-spacing:1.4px;margin-bottom:14px;}
.auth-form .auth-form-title::before{content:"";display:inline-block;width:18px;height:2px;background:linear-gradient(90deg,var(--gn),var(--bl));vertical-align:middle;margin-right:8px;border-radius:2px;}
.auth-form .fg{margin-bottom:11px;}
.auth-form .fg label{margin-bottom:5px;}
.auth-form .btn-submit{width:100%;margin-top:6px;background:linear-gradient(90deg,var(--gn) 0%,var(--brand-green-soft) 50%,var(--bl) 100%);color:#0B1422;font-weight:700;padding:11px 16px;font-size:13px;letter-spacing:.6px;text-transform:uppercase;border:none;border-radius:7px;cursor:pointer;transition:filter .15s,transform .1s;}
.auth-form .btn-submit:hover{filter:brightness(1.08);}
.auth-form .btn-submit:active{transform:translateY(1px);}
.auth-foot{margin-top:18px;font-size:10.5px;color:var(--txd);text-align:center;font-family:var(--mono);letter-spacing:.5px;line-height:1.6;}
.auth-foot strong{color:var(--tx);}
@media (max-width:820px){
  .auth-card{grid-template-columns:1fr;max-width:480px;}
  .auth-logo-row{padding:20px 0 0;}
  .auth-hero{border-right:none;border-bottom:1px solid var(--bdr);padding:30px 24px;}
  .auth-form{padding:26px 24px;}
}

/* Alpine.js: oculta elementos antes de que Alpine inicialice (evita flash) */
[x-cloak]{display:none!important;}