/* Mente en Automático · sistema visual para demos de sistemas (modo Operar, estilo Noche)
   Usado por demo-mrp, demo-dashboard y demo-logistica. */
:root{
  --noche:#0B1830; --negro:#05070B; --marca:#1B4A9E; --medio:#2A8FD8; --celeste:#3CCFF2;
  --crema:#FFF8EE; --amarillo:#FFC93C; --coral:#FF6B5B; --suave:#F2F6FA;
  --card:#102244; --card-2:#0E1E3C; --line:rgba(169,187,221,.18); --line-2:rgba(60,207,242,.28);
  --ink:#E6EEFB; --muted:#A9BBDD;
  --ok:#5EE08F; --warn:#FFC93C; --crit:#FF8F82; --info:#3CCFF2; --aut:#9DB8FF;
  --f-titulo:"Anton","Arial Narrow",Impact,sans-serif;
  --f-texto:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --gut:clamp(16px,4vw,32px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--noche);color:var(--ink);font-family:var(--f-texto);font-weight:500;font-size:15px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-bottom:84px}
img,svg,canvas{display:block;max-width:100%}
a{color:var(--celeste);text-underline-offset:.2em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--celeste);color:var(--noche)}
:focus-visible{outline:3px solid var(--celeste);outline-offset:2px;border-radius:6px}
.ico{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* Cabecera compacta de marca */
.bar{position:sticky;top:0;z-index:50;background:rgba(5,7,11,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2)}
.bar-in{max-width:1180px;margin:0 auto;padding:8px var(--gut);display:flex;align-items:center;gap:14px;min-height:60px}
.bar-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;flex:none}
.bar-brand img{width:34px;height:34px;object-fit:contain}
.bar-brand b{font-family:var(--f-titulo);font-weight:400;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.bar-brand b span{color:var(--celeste)}
.bar-sep{width:1px;height:26px;background:var(--line);flex:none}
.bar-demo{font-weight:700;font-size:.88rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bar-cta{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font-weight:800;font-size:.84rem;text-decoration:none;color:var(--celeste);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.bar-cta:hover{background:var(--celeste);color:var(--noche);box-shadow:none}
.bar-cta .corto{display:none}

/* Página */
.page{max-width:1180px;margin:0 auto;padding:clamp(22px,4vw,40px) var(--gut) 0}
.intro{max-width:760px;margin-bottom:22px}
.intro h1{font-family:var(--f-titulo);font-weight:400;text-transform:uppercase;font-size:clamp(2rem,5vw,3.1rem);line-height:1.02;letter-spacing:.005em;text-wrap:balance;color:#fff}
.intro h1 em{font-style:normal;color:var(--celeste)}
.intro p{margin-top:12px;color:var(--muted);font-size:1rem;max-width:62ch;text-wrap:pretty}
.note{display:flex;gap:12px;align-items:flex-start;background:var(--card-2);border:1px solid var(--line);border-left:3px solid var(--celeste);border-radius:12px;padding:14px 16px;margin-bottom:22px;font-size:.92rem;color:var(--muted)}
.note .ico{width:20px;height:20px;color:var(--celeste);margin-top:2px}
.note b{color:#fff}
.t-crit{color:var(--crit);font-weight:800}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 24px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;border-top:3px solid var(--k,var(--celeste))}
.kpi .lbl{display:flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.kpi .lbl .ico{color:var(--k,var(--celeste));width:16px;height:16px}
.kpi .val{font-size:clamp(1.7rem,3vw,2.1rem);font-weight:800;line-height:1.05;color:#fff;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:.8rem;color:var(--muted);margin-top:6px;font-weight:600}
.kpi.crit{--k:var(--coral)}.kpi.warn{--k:var(--amarillo)}.kpi.ok{--k:var(--ok)}.kpi.info{--k:var(--celeste)}.kpi.aut{--k:var(--aut)}
.kpi.crit .val{color:var(--crit)}.kpi.warn .val{color:var(--warn)}.kpi.ok .val{color:var(--ok)}
.up{color:var(--ok)}.dn{color:var(--crit)}

/* Paneles y gráficas */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.panel h2,.panel h3{font-size:.8rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.grid-main{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.chart{position:relative;min-height:220px}

/* Filtros */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin:0 0 18px}
.filters .f{display:flex;flex-direction:column;gap:5px}
.filters label{font-size:.74rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.filters select,.filters input{background:var(--card);border:1px solid var(--line-2);color:var(--ink);border-radius:10px;padding:0 14px;min-height:44px;font-family:inherit;font-size:.9rem;font-weight:600;min-width:0}
.filters input{min-width:240px}
.filters input::placeholder{color:#7F93B8}
.filters select option{background:var(--noche);color:var(--ink)}
.filters .count{margin-left:auto;align-self:center;font-size:.85rem;color:var(--muted);font-weight:600}

/* Tablas */
.tbl-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:16px;margin:0 0 24px}
table.data{width:100%;border-collapse:collapse;font-size:.9rem;min-width:100%}
table.data th{background:var(--card-2);color:var(--muted);padding:12px 14px;text-align:left;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--line-2);white-space:nowrap;position:sticky;top:0}
table.data td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover td{background:rgba(60,207,242,.05)}
table.data .r{text-align:right;font-variant-numeric:tabular-nums}
table.data .muted{color:var(--muted)}
table.data .strong{font-weight:700;color:#fff}
.mono{font-family:var(--f-mono);font-weight:500;font-size:.8rem}
table.data tr.sev-crit td:first-child{box-shadow:inset 3px 0 0 var(--coral)}
table.data tr.sev-warn td:first-child{box-shadow:inset 3px 0 0 var(--amarillo)}

/* Estados: color + ícono + etiqueta */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 9px;border-radius:999px;font-size:.78rem;font-weight:800;white-space:nowrap;border:1px solid currentColor;background:color-mix(in srgb,currentColor 12%,transparent)}
.chip .ico{width:14px;height:14px}
.chip.crit{color:var(--crit)}.chip.warn{color:var(--warn)}.chip.ok{color:var(--ok)}.chip.info{color:var(--info)}.chip.aut{color:var(--aut)}

/* Campos editables */
input.cell{background:var(--noche);color:#fff;border:1.5px solid var(--line-2);border-radius:9px;padding:0 10px;min-height:44px;font-family:inherit;font-size:.92rem;font-weight:700;width:88px;font-variant-numeric:tabular-nums}
input.cell:hover{border-color:var(--celeste)}
input.cell:focus-visible{outline:3px solid var(--celeste);outline-offset:1px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;font-weight:800;font-size:.9rem;text-decoration:none;background:var(--celeste);color:var(--noche);transition:background .2s}
.btn:hover{background:#7be0f7}
.btn.sm{min-height:44px;padding:0 14px;font-size:.82rem;background:transparent;color:var(--celeste);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn.sm:hover{background:var(--celeste);color:var(--noche);box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(230,238,251,.35)}
.btn.ghost:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px var(--celeste)}

/* Alertas */
.alert-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.alert-row:last-child{border:0;padding-bottom:0}
.alert-row:first-child{padding-top:0}
.alert-row p{font-size:.9rem;color:var(--ink);font-weight:600}
.alert-row small{font-size:.78rem;color:var(--muted);font-weight:600}
.alert-row .chip{margin-top:1px}

/* CTA y pie */
.cta{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;background:var(--card-2);border:1px solid var(--line-2);border-radius:18px;padding:22px 26px;margin:8px 0 0}
.cta p{font-weight:700;font-size:1.02rem;max-width:44ch}
.cta .acts{display:flex;gap:10px;flex-wrap:wrap}
.foot{max-width:1180px;margin:0 auto;padding:26px var(--gut) 0;color:var(--muted);font-size:.8rem;font-weight:600}
.foot a{color:var(--muted)}

/* Botón volver (regla 1 del brief) queda sobre el contenido */
@media(max-width:900px){
  .grid-main,.grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .bar-brand b{display:none}
  .bar-sep{display:none}
}
@media(max-width:560px){
  .grid-3{grid-template-columns:1fr}
  .bar-cta .largo{display:none}.bar-cta .corto{display:inline}
  .bar-cta{padding:0 14px}
  .kpis{grid-template-columns:1fr 1fr}
  .filters .f,.filters select,.filters input{width:100%;min-width:0}
  .filters .f{flex:1 1 100%}
}
/* Tablas como tarjetas en móvil */
@media(max-width:720px){
  .tbl-wrap{background:transparent;border:0;overflow:visible}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.stack tr{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;padding:6px 14px}
  table.stack tr.sev-crit td:first-child,table.stack tr.sev-warn td:first-child{box-shadow:none}
  table.stack tr.sev-crit{border-left:4px solid var(--coral)}
  table.stack tr.sev-warn{border-left:4px solid var(--amarillo)}
  table.stack td{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);text-align:right}
  table.stack td:last-child{border-bottom:0}
  table.stack td::before{content:attr(data-label);font-size:.72rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;text-align:left;flex:none}
  table.stack td.hide-m{display:none}
  table.stack tbody tr:hover td{background:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.mea-volver,.bar-cta{display:none}}
.bar-in,.page,.foot{max-width:1320px}
table.data th,table.data td{padding-left:10px;padding-right:10px}
table.data input{max-width:84px}