:root{
  --bg:#f6f7f9; --card:#fff; --ink:#101828; --muted:#667085; --line:#e7e8ec;
  --brand:#6d3fa8; --brand-soft:#f4effa;
  --ok:#067647; --ok-bg:#ecfdf3;
  --warn:#b54708; --warn-bg:#fffaeb;
  --bad:#b42318; --bad-bg:#fef3f2;
  --over:#175cd3; --over-bg:#eff8ff;
  --exp:#5925dc; --exp-bg:#f4f3ff;
  --gray:#475467; --gray-bg:#f2f4f7;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 6px 16px rgba(16,24,40,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}
.right{text-align:right}

/* topbar */
.top{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 20px;height:62px}
.brand{display:flex;align-items:center;gap:10px;min-width:230px;color:var(--ink)}
.logo{width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:700}
.logo.big{width:46px;height:46px;border-radius:14px;font-size:22px;margin:0 auto 14px}
.brand strong{display:block;font-size:14.5px;line-height:1.1}
.brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.search{flex:1;max-width:520px;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:0 12px;height:38px}
.search span{color:var(--muted);font-size:15px}
.search input{border:0;background:transparent;outline:0;width:100%;font-size:13.5px;color:var(--ink)}
.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:12px;margin-left:6px}

.btn{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:550;padding:8px 13px;border-radius:9px;cursor:pointer;transition:.15s;display:inline-block}
.btn:hover{border-color:#cfd2d9;background:#fbfbfc}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:#5d348f;border-color:#5d348f}
.btn.tiny{padding:5px 10px;font-size:12px;border-radius:7px}
.btn.full{width:100%;margin-top:6px}

/* tabs */
.tabs{position:sticky;top:62px;z-index:39;background:#fff;border-bottom:1px solid var(--line);display:flex;gap:2px;padding:0 20px;overflow-x:auto}
.tab{font-size:13.5px;font-weight:550;color:var(--muted);padding:12px 14px 11px;border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}

main{max-width:1280px;margin:0 auto;padding:22px 20px 70px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.head h1{font-size:22px}
.head .sub{color:var(--muted);font-size:13px;margin:3px 0 0}
.head-actions{display:flex;gap:8px}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px 18px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-h.padded{padding:14px 16px 0;margin-bottom:4px}
.card-h h2{font-size:14.5px}
.card-h .hint,.card-h a{font-size:12.5px;color:var(--muted);font-weight:500}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 15px;box-shadow:var(--shadow)}
.kpi .l{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:650}
.kpi .v{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:5px}
.kpi .s{font-size:11.5px;color:var(--muted);margin-top:2px}
.kpi.warn .v{color:var(--warn)} .kpi.bad .v{color:var(--bad)} .kpi.exp .v{color:var(--exp)}
.cols{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-bottom:16px}
.row-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow)}
.stat .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:650}
.stat .v{font-size:16px;font-weight:700;margin-top:3px}
.stat .s{font-size:11px;color:var(--muted);margin-top:1px}

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;padding:3px 9px;border-radius:99px;white-space:nowrap}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-warn{background:var(--warn-bg);color:var(--warn)}
.b-bad{background:var(--bad-bg);color:var(--bad)}
.b-over{background:var(--over-bg);color:var(--over)}
.b-exp{background:var(--exp-bg);color:var(--exp)}
.b-gray{background:var(--gray-bg);color:var(--gray)}
.tag{display:inline-block;font-size:11px;font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:2px 7px;white-space:nowrap}

/* tables */
.tablecard{padding:4px 0 0;overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:650;text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);background:#fcfcfd;white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13px}
tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer;transition:background .12s}
tbody tr:hover{background:#fafafb}
.num{text-align:right;font-variant-numeric:tabular-nums}
.sku{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--muted);white-space:nowrap}
.pname{font-weight:600;font-size:13px;line-height:1.25}
.pvari{color:var(--muted);font-size:11.5px;margin-top:2px}
.loc strong{display:block;font-size:12.5px;font-weight:600}
.loc span{font-size:11.5px;color:var(--muted)}
.ex{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.ex b{font-size:14px}
.bar{width:64px;height:5px;border-radius:99px;background:#edeef2;overflow:hidden;display:block}
.bar i{display:block;height:100%;border-radius:99px;background:var(--ok)}
.bar i.warn{background:var(--warn)} .bar i.bad{background:var(--bad)}
.bar i.over{background:var(--over)} .bar i.exp{background:var(--exp)}
.chev{color:#c3c6cf;font-size:17px;text-align:right;width:26px}
.footnote{color:var(--muted);font-size:12px;margin:10px 2px 0}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:12px;align-items:center}
.in{color:var(--ok)} .out{color:var(--bad)} .neu{color:var(--over)}
.empty{color:var(--muted);font-size:12.5px;background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:16px;text-align:center}

/* filtros */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filters input,.filters select{font:inherit;font-size:13px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 11px;outline:0;min-width:150px}
.filters input{min-width:280px}
.filters input:focus,.filters select:focus{border-color:#b9a3d6;box-shadow:0 0 0 3px var(--brand-soft)}

/* panel */
.accion-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.accion-item:last-child{border-bottom:0}
.ai-main{min-width:0}
.ai-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-name a{color:var(--ink)}
.ai-var{font-weight:400;color:var(--muted);font-size:11.5px}
.ai-meta{color:var(--muted);font-size:11.5px;margin-top:2px}
.ai-qty{display:flex;align-items:center;gap:8px;flex-shrink:0}
.mv{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.mv:last-child{border-bottom:0}
.mv-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:12px;flex-shrink:0}
.mv-ico.in{background:var(--ok-bg);color:var(--ok)}
.mv-ico.out{background:var(--bad-bg);color:var(--bad)}
.mv-ico.neu{background:var(--over-bg);color:var(--over)}
.mv-main{min-width:0;flex:1}
.mv-t{font-size:12.8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-s{color:var(--muted);font-size:11.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-d{text-align:right;flex-shrink:0}
.mv-q{font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.mv-f{color:var(--muted);font-size:11px}
.bars{display:flex;flex-direction:column;gap:11px}
.brow{display:grid;grid-template-columns:110px 1fr 80px;gap:10px;align-items:center;font-size:12.5px}
.brow .t{color:var(--muted);font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .track{height:9px;background:#eef0f3;border-radius:99px;overflow:hidden}
.brow .track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8a63c4,#6d3fa8)}
.brow .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.kv{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;color:var(--muted)}
.kv b{color:var(--ink);font-weight:600}

/* reposición */
.strip{display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);border:1px solid #f5e0b8;color:#7a3d06;border-radius:12px;padding:12px 14px;font-size:12.8px;margin-bottom:14px}
.strip strong{font-weight:700}

/* ficha */
.loc-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px}
.loc-row:last-child{border-bottom:0}
.loc-row .q{font-variant-numeric:tabular-nums;font-weight:650}

/* formularios */
.form.narrow{max-width:520px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
label{display:block;font-size:12px;font-weight:600;color:var(--muted)}
label input,label select,label textarea{display:block;width:100%;margin-top:5px;font:inherit;font-size:13.5px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 11px;outline:0}
label input:focus,label select:focus,label textarea:focus{border-color:#b9a3d6;box-shadow:0 0 0 3px var(--brand-soft)}
.form h2{font-size:15px;margin-bottom:12px}
.form > label{margin-top:12px}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

/* avisos */
.flash{border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:14px;border:1px solid}
.flash.ok{background:var(--ok-bg);border-color:#bbf7d0;color:var(--ok)}
.flash.error{background:var(--bad-bg);border-color:#fecdca;color:var(--bad)}

/* login */
.login-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,#f6f7f9,#efe9f7)}
.login-card{width:100%;max-width:380px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(16,24,40,.10);padding:30px 28px;text-align:center}
.login-card h1{font-size:20px}
.login-sub{color:var(--muted);font-size:12.5px;margin:5px 0 18px}
.login-card label{text-align:left;margin-top:12px}
.login-card .mini{color:var(--muted);font-size:11px;margin-top:16px}

.pie{max-width:1280px;margin:0 auto;padding:0 20px 28px;color:var(--muted);font-size:12px}
.pie a{color:var(--muted);text-decoration:underline}

/* tarjetas de administración */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
a.card.rep{display:flex;flex-direction:column;gap:6px;color:var(--ink);text-decoration:none;transition:.15s}
a.card.rep:hover{border-color:#cbb8e6;box-shadow:0 6px 22px rgba(109,63,168,.10);transform:translateY(-1px)}
a.card.rep h3{font-size:14.5px;color:var(--ink)}
a.card.rep p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.45}
a.card.rep .link-flecha{margin-top:auto;padding-top:6px;font-size:12.5px;font-weight:650;color:var(--brand)}

/* conteos */
.conteo-lista{display:flex;flex-direction:column}
.conteo-fila{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line)}
.conteo-fila:last-child{border-bottom:0}
.cf-main{min-width:0}
.cf-input{width:96px;font:inherit;font-size:16px;text-align:center;padding:9px 8px;border:1px solid var(--line);border-radius:9px;background:#fff;outline:0;flex-shrink:0}
.cf-input:focus{border-color:#b9a3d6;box-shadow:0 0 0 3px var(--brand-soft)}

/* etiquetas QR */
.qr{display:inline-block;line-height:0}
.qr svg{width:112px;height:112px;display:block}
.etiquetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:8px}
.etiqueta{border:1px dashed #c9ccd4;border-radius:10px;padding:12px 10px 10px;text-align:center;background:#fff;break-inside:avoid}
.etiqueta .qr svg{width:104px;height:104px;margin:0 auto}
.et-titulo{font-weight:650;font-size:12.5px;margin-top:8px;line-height:1.25}
.et-sub{color:var(--muted);font-size:11px;margin-top:2px}

@media print{
  .etiquetas{grid-template-columns:repeat(3,1fr);gap:6mm}
  .etiqueta{border:1px solid #000;border-radius:4px;padding:4mm}
  .etiqueta .qr svg{width:30mm;height:30mm}
}

@media (max-width:1080px){
  .row-cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .cols{grid-template-columns:1fr}
}
@media (max-width:680px){
  main{padding:16px 14px 60px}
  .head{flex-direction:column;align-items:stretch;gap:10px}
  .head-actions{display:flex;gap:8px}
  .head-actions .btn{flex:1;text-align:center}
  .brand{min-width:0}
  .brand small{display:none}
  .top-actions .btn{display:none}
  .search{max-width:none}
  .filters input{min-width:0;width:100%}
  .filters select{flex:1;min-width:120px}
  .row-cards{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  table{min-width:620px}
  .tablecard{overflow-x:auto}
  .tabs{padding:0 8px}
}
@media print{
  .top,.tabs,.head-actions,.filters,.chev,.pie,.btn{display:none!important}
  body{background:#fff}
  .card,.kpi{box-shadow:none}
  main{padding:0}
}
/* ============================================================================
   CAPA DE COLOR Y ACABADO — añadida por Hermes el 2026-10-19
   Es aditiva: no borra ni reescribe reglas anteriores, solo las refina.
   Paleta tomada de las marcas reales del grupo (medidas en sus sitios):
     Vela Producciones  #6254E7 morado · #FF7426 naranja
     Aletse's Market    #E91E63 rosa
   ========================================================================== */

:root {
  /* marca del grupo */
  --vela: #6254E7;
  --vela-oscuro: #4B3FC4;
  --vela-suave: #EFEDFD;
  --aletses: #E91E63;
  --aletses-suave: #FDEBF2;
  --naranja: #FF7426;
  --naranja-suave: #FFF1E8;
  --fragrance: #0E9384;
  --fragrance-suave: #E6F6F4;

  /* acento principal: el morado pasa a ser el de Vela, más vivo que #6d3fa8 */
  --brand: #6254E7;
  --brand-soft: #EFEDFD;
  --brand-hover: #4B3FC4;

  /* estados, saturados para que se lean de un vistazo */
  --ok: #067647;    --ok-bg: #ECFDF3;    --ok-line: #A6F4C5;
  --warn: #B54708;  --warn-bg: #FFFAEB;  --warn-line: #FEDF89;
  --bad: #B42318;   --bad-bg: #FEF3F2;   --bad-line: #FECDCA;
  --over: #175CD3;  --over-bg: #EFF8FF;  --over-line: #B2DDFF;
  --exp: #5925DC;   --exp-bg: #F4F3FF;   --exp-line: #D9D6FE;
  --gray: #475467;  --gray-bg: #F2F4F7;  --gray-line: #E4E7EC;

  /* bordes y foco más visibles que #e7e8ec (no llegaba a 3:1) */
  --line: #DDE0E6;
  --line-fuerte: #C9CDD6;

  /* escala tipográfica: 6 pasos en vez de 13 */
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 16px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

  /* degradado de marca para momentos señalados */
  --grad-grupo: linear-gradient(96deg, #6254E7 0%, #8B5CF6 42%, #E91E63 100%);
  --grad-calido: linear-gradient(96deg, #FF7426 0%, #E91E63 100%);
  --sombra-suave: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(98,84,231,.08);
}

/* ---------- barra superior con un filo de color ---------- */
.top { border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 0 rgba(98,84,231,.08); }
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--grad-grupo); opacity: .85;
}
.top { position: sticky; }              /* asegura el contexto para el filo */
.logo {
  background: var(--grad-grupo);
  box-shadow: 0 4px 12px rgba(98,84,231,.28);
}
.logo.big { box-shadow: 0 10px 26px rgba(98,84,231,.32); }
.avatar { background: var(--vela-suave); color: var(--vela); }

/* ---------- pestañas con subrayado de color ---------- */
.tab.active { color: var(--vela); border-bottom-color: var(--vela); }
.tab:hover { color: var(--vela-oscuro); }

/* ---------- botones ---------- */
.btn { border-radius: 10px; min-height: 36px; }
.btn.primary {
  background: var(--grad-grupo);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(98,84,231,.22);
}
.btn.primary:hover { background: var(--grad-grupo); filter: brightness(.94); border-color: transparent; }
.btn.accent { background: var(--naranja); border-color: var(--naranja); color: #2A2550; font-weight: 700; }
.btn.accent:hover { background: #F0661A; border-color: #F0661A; }

/* ---------- tarjetas y KPIs con color ---------- */
.card { border-radius: 16px; border-color: var(--line); }
.kpi {
  border-radius: 16px; border-color: var(--line);
  position: relative; overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--vela); opacity: .9;
}
.kpi.ok::before    { background: var(--ok); }
.kpi.warn::before  { background: var(--warn); }
.kpi.bad::before   { background: var(--bad); }
.kpi.over::before  { background: var(--over); }
.kpi.exp::before   { background: var(--exp); }
.kpi .l { font-size: var(--fs-xs); }
.kpi .v { font-size: var(--fs-xl); }
.kpi .s { font-size: var(--fs-xs); }
.kpi.ok    { background: var(--ok-bg);    border-color: var(--ok-line); }
.kpi.warn  { background: var(--warn-bg);  border-color: var(--warn-line); }
.kpi.bad   { background: var(--bad-bg);   border-color: var(--bad-line); }
.kpi.over  { background: var(--over-bg);  border-color: var(--over-line); }
.kpi.exp   { background: var(--exp-bg);   border-color: var(--exp-line); }

.stat { border-radius: 14px; border-color: var(--line); }
.stat .l { font-size: var(--fs-xs); }
.stat .v { font-size: var(--fs-lg); }

/* ---------- insignias más legibles ---------- */
.badge { font-size: var(--fs-xs); padding: 4px 10px; }
.b-ok    { border: 1px solid var(--ok-line); }
.b-warn  { border: 1px solid var(--warn-line); }
.b-bad   { border: 1px solid var(--bad-line); }
.b-over  { border: 1px solid var(--over-line); }
.b-exp   { border: 1px solid var(--exp-line); }
.b-gray  { border: 1px solid var(--gray-line); }
.tag { border-color: var(--line); }

/* ---------- tablas: encabezado con tinte de marca ---------- */
th {
  font-size: var(--fs-xs);
  background: linear-gradient(180deg, #FBFAFF 0%, #F6F4FE 100%);
  color: #4A4568;
  border-bottom: 1px solid var(--line);
}
td { font-size: var(--fs-md); }
tbody tr:hover { background: #FAFAFE; }
.sku { font-size: var(--fs-xs); }
.pvari, .loc span { font-size: var(--fs-xs); }

/* la barrita de existencias, más viva */
.bar { height: 6px; background: #EDEEF2; }
.bar i { background: linear-gradient(90deg, #34C759 0%, var(--ok) 100%); }
.bar i.warn { background: linear-gradient(90deg, #FDB022 0%, var(--warn) 100%); }
.bar i.bad  { background: linear-gradient(90deg, #F97066 0%, var(--bad) 100%); }
.bar i.over { background: linear-gradient(90deg, #53B1FD 0%, var(--over) 100%); }
.bar i.exp  { background: linear-gradient(90deg, #A48AFB 0%, var(--exp) 100%); }

/* ---------- formularios: bordes visibles y foco claro ---------- */
.filters input, .filters select, input, select, textarea {
  border-color: var(--line-fuerte);
  border-radius: 10px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--vela);
  box-shadow: 0 0 0 3px rgba(98,84,231,.16);
  outline: 0;
}
label { color: #344054; }

/* ---------- pantalla de entrada: con vida y con marca ---------- */
.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(233,30,99,.32), transparent 60%),
    radial-gradient(760px 520px at 92% 8%, rgba(255,116,38,.28), transparent 62%),
    radial-gradient(820px 620px at 50% 118%, rgba(98,84,231,.42), transparent 62%),
    linear-gradient(160deg, #F7F5FF 0%, #FDF3F8 55%, #FFF7F2 100%);
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 36px 34px 30px;
  box-shadow: 0 24px 60px rgba(70, 55, 145, .16), 0 2px 6px rgba(16,24,40,.05);
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--grad-grupo);
}
.login-card .logo.big {
  width: 52px; height: 52px; border-radius: 16px; font-size: 24px;
  background: var(--grad-grupo);
}
.login-card h1 { font-size: var(--fs-2xl); letter-spacing: -.02em; }
.login-sub {
  color: #6B6787; font-size: var(--fs-sm); margin: 6px 0 22px;
  letter-spacing: .01em;
}
.login-card label { font-size: var(--fs-sm); font-weight: 600; color: #344054; }
.login-card input {
  margin-top: 6px;
  height: 44px;
  font-size: var(--fs-md);
  border: 1px solid var(--line-fuerte);
  border-radius: 11px;
  background: #FCFCFD;
}
.login-card input:focus { background: #fff; }
.login-card .btn.primary {
  height: 46px;
  font-size: var(--fs-lg);
  font-weight: 700;
  border-radius: 12px;
  margin-top: 10px;
}
.login-card .mini { color: #7A7790; font-size: var(--fs-xs); margin-top: 18px; }
.flash.error {
  background: var(--bad-bg); border: 1px solid var(--bad-line);
  color: var(--bad); border-radius: 10px; font-size: var(--fs-sm);
}

/* ---------- en móvil, lo táctil manda ---------- */
@media (max-width: 640px) {
  .btn { min-height: 44px; }
  .tab { padding: 14px 12px; font-size: var(--fs-sm); }
  .login-card { padding: 28px 22px 24px; border-radius: 18px; }
  .kpi .v { font-size: var(--fs-lg); }
}

/* ---------- quien pidió menos movimiento, no lo recibe ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- ajuste de contraste medido (2026-10-19) ---------- */
:root { --line-fuerte: #8E94A3; }
.login-card .mini, .footnote { color: #6B6787; }