: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;}
/* Izquierda angosta y fija: el formulario de carga son 4 campos y 3 botones,
   y el espacio que sobra lo necesita la tabla del resumen (Hugo, 27-ago). */
.g2-13{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:14px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
@media (max-width:900px){.g2-21,.g2-13{grid-template-columns:1fr;}}
/* Centrado para columnas numéricas cortas (p.ej. Días consumo). */
.ctr{text-align:center;}
/* Form fields en dos columnas (campos full-width quedan con .fg2-full) */
.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);}
/* Columna de estatus: se encoge al contenido y nunca recorta la etiqueta.
   Hugo la reportó cortada en Zilpaterol y en Salidas semanales (04-sep). */
.tbl th.st,.tbl td.st{white-space:nowrap;width:1%;overflow:visible;}
/* 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;}
/* Columnas congeladas al scrollear horizontal (Disponibilidad, 39 columnas).
   Hugo, video del 23-oct: al irse a la derecha perdía de vista de qué lote era
   el renglón — "se pierde uno porque pues es el lote CH-526, le tengo que hacer
   así, seleccionar, y si quiero volver atrás tengo que seleccionar otra vez".
   Él mismo propuso las dos salidas: una barra de desplazamiento también arriba,
   o "mantener estas columnas". La segunda es la que ataca la causa: con 39
   columnas el problema no es moverse, es no saber dónde estás.
   Anchos fijos a propósito: con table-layout:auto no hay forma de saber cuánto
   mide la primera columna para calcular el `left` de la segunda.
   Supuesto que esto da por cierto: la clave de corral nunca pasa de 62px. Hoy se
   cumple (en prod son "06", "18", "56", "101"), pero si Chamizal diera de alta
   una clave larga, la segunda columna se encimaría: entonces hay que subir el
   min-width de .sx1 y el left de .sx2 juntos, siempre al mismo número. */
.tbl-xstick th.sx1,.tbl-xstick td.sx1{position:sticky;left:0;z-index:2;min-width:62px;}
.tbl-xstick th.sx2,.tbl-xstick td.sx2{position:sticky;left:62px;z-index:2;min-width:104px;}
.tbl-xstick td.sx1,.tbl-xstick td.sx2{background:var(--surface);}
.tbl-xstick th.sx1,.tbl-xstick th.sx2{background:var(--s3);z-index:4;}
/* El hover de la fila tiene que alcanzar a las celdas congeladas: sin esto se
   quedan del color de fondo y la fila se ve partida justo donde no debe. */
.tbl-xstick tr:hover td.sx1,.tbl-xstick tr:hover td.sx2{background:var(--s3);}
/* Separador que marca dónde termina lo congelado y empieza lo que se desplaza. */
.tbl-xstick th.sx2,.tbl-xstick td.sx2{box-shadow:1px 0 0 var(--bdr2);}

/* 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;}
/* Ajuste 4 (11-sep): parámetro con valor propio del lote (no del programa). */
.cell-override{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 */
.prgb{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;}