/* Sistema de la plataforma. Ejecuta `atom-u/plataforma/docs/SISTEMA-DISENO.md` y
   `AUDITORIA-DISENO.md` con la paleta de Newstern.

   La primera versión era un dashboard OSCURO con seis chips de colores, o sea la lista
   entera de lo que esa auditoría llama "lo que delata a una interfaz hecha por IA": modo
   oscuro por reflejo (su delator número uno), versalitas por todas partes, monoespaciada de
   adorno, chips saturados que convierten la pantalla en un semáforo y bordes de 1 px
   alrededor de todo. Su regla es literal: "la aplicación es clara... el modo oscuro por
   defecto es el delator principal y aquí no hay razón para él".

   Reglas duras que este archivo cumple:
   - CERO hexadecimales fuera de :root. Si un componente necesita un color que no está acá,
     el color no existe.
   - DOS PLANOS Y SOLO DOS: --papel es el área de trabajo, --sup la lámina de contenido.
   - El HUE significa PIEZA y nada más. El ESTADO no usa hue: peso, luminancia y relleno
     contra contorno.
   - Un acento, en la acción que el usuario vino a hacer.
   - Separar por espacio; si no alcanza, cambio de luminancia; al final, un filete. */

:root{
  /* rampa cálida, con el matiz del papel de Newstern y saturación mínima */
  --g0:#ffffff;   --g25:#fcfcfa;  --g50:#f7f8f6;  --g100:#f2f3f1;
  --g150:#ebeeea; --g200:#dfe3de; --g300:#cbd1c9; --g400:#a8b0a6;
  --g500:#828b80; --g600:#626b61; --g700:#454d45; --g800:#2a302b; --g900:#131815;

  /* la marca */
  --pino:#0f3528; --pino-claro:#17673a;

  /* planos y semánticos */
  --papel:var(--g100); --sup:var(--g0); --sup2:var(--g50); --sup3:var(--g150);
  --filete:var(--g200); --borde-fuerte:var(--g300);
  --t1:var(--g900); --t2:var(--g600); --t3:#767e75;   /* 4,1:1 — rótulos, nunca un dato */
  --ico:var(--g500); --ico-tenue:var(--g400);
  --acento:var(--pino); --peligro:#a33328;

  /* Las seis piezas: el hue significa pieza. Calibradas a luminancia pareja para que con
     seis en pantalla ninguna pese más que otra. */
  --p-levantamiento:#3f5c8c; --p-automatizacion:#8a6417; --p-integracion:#1c6b67;
  --p-visibilidad:#2c6e49;   --p-control:#a33328;       --p-operacion:#6b4a86;

  --r-sm:4px; --r-md:6px;
  --mono:"Spline Sans Mono",ui-monospace,Menlo,monospace;
  --sans:"Archivo",system-ui,-apple-system,sans-serif;
  --curva:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--papel); color:var(--t1); font-family:var(--sans);
  font-size:13px; line-height:1.5; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden;
}
.env{display:flex; flex-direction:column; height:100%}

/* ---------------------------------------------------------------- cabecera */
.top{
  display:flex; align-items:center; gap:18px; padding:0 16px; height:52px; flex:none;
  border-bottom:1px solid var(--filete); background:var(--papel);
}
.marca{display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; letter-spacing:.08em}
.marca svg{width:19px; height:19px; display:block}
.top .et{font-size:12.5px; color:var(--t2)}
.top .sep{flex:1}
.reloj{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--t2)}
.reloj b{color:var(--t1); font-weight:500; font-family:var(--mono); font-variant-numeric:tabular-nums}
.pulso{width:6px; height:6px; border-radius:999px; background:var(--pino-claro); flex:none;
  animation:late 2.4s infinite}
@keyframes late{0%,100%{opacity:1}50%{opacity:.3}}
body.apagado .pulso{background:var(--peligro); animation:none}

/* ---------------------------------------------------------------- cuerpo */
.cuerpo{flex:1; display:grid; grid-template-columns:172px 1fr 312px; min-height:0}
.lat{padding:8px 0; overflow:auto; min-height:0; border-right:1px solid var(--filete)}
.lat a{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  margin:0 8px; padding:6px 10px; color:var(--t2); font-size:13px;
  border-radius:var(--r-sm); cursor:pointer; text-decoration:none;
}
.lat a span{font-family:var(--mono); font-size:11.5px; color:var(--t3); font-variant-numeric:tabular-nums}
.lat a.on{background:var(--sup); color:var(--t1); font-weight:500; box-shadow:inset 0 0 0 1px var(--filete)}
.lat a.on span{color:var(--t2)}
@media (hover:hover) and (pointer:fine){ .lat a:hover{background:var(--sup2)} }

/* la lámina: el único blanco de la pantalla, y por eso se lee "acá está el dato" */
.centro{display:flex; flex-direction:column; min-width:0; min-height:0; padding:10px 10px 10px 0}
.lamina{
  flex:1; display:flex; flex-direction:column; min-height:0;
  background:var(--sup); border:1px solid var(--filete); border-radius:var(--r-md); overflow:hidden;
}
.cifras{display:grid; grid-template-columns:repeat(5,1fr); border-bottom:1px solid var(--filete); flex:none}
.cifra{padding:11px 14px; border-right:1px solid var(--filete)}
.cifra:last-child{border-right:0}
.cifra .k{font-size:11.5px; color:var(--t3)}
.cifra .v{
  font-family:var(--mono); font-size:22px; font-weight:500; color:var(--t1);
  margin-top:2px; line-height:1.15; font-variant-numeric:tabular-nums;
}
.cifra .s{font-size:11.5px; color:var(--t2); margin-top:1px}
/* el acento aparece UNA vez: en el dato que la pantalla existe para mostrar */
.cifra.ahorro .v{color:var(--acento)}

.tt{display:flex; align-items:center; gap:12px; padding:10px 14px; flex:none;
  border-bottom:1px solid var(--filete); position:relative; z-index:3; background:var(--sup)}
.tt h2{margin:0; font-size:13.5px; font-weight:600; color:var(--t1)}
.tt .sep{flex:1}
.fil{display:flex; gap:4px}
.fil button{
  font-size:12px; padding:4px 9px; background:transparent; color:var(--t2);
  border:1px solid transparent; border-radius:var(--r-sm); cursor:pointer;
  font-family:var(--sans); transition:background .15s var(--curva);
}
.fil button.on{background:var(--sup3); color:var(--t1); font-weight:500}
@media (hover:hover) and (pointer:fine){ .fil button:hover{background:var(--sup2)} }
.fil button:focus-visible{outline:2px solid var(--acento); outline-offset:1px}

.tabla{flex:1; overflow:auto; min-height:0}
table{width:100%; border-collapse:collapse; font-size:13px}
thead th{
  font-size:11.5px; color:var(--t3); text-align:left; font-weight:400;
  padding:7px 12px; border-bottom:1px solid var(--filete);
  position:sticky; top:0; background:var(--sup2); z-index:1;
}
tbody td{padding:8px 12px; border-bottom:1px solid var(--filete); color:var(--t1)}
tbody td.m{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12.5px}
tbody td.d{text-align:right}
tbody td.g{color:var(--t2)}
tbody tr{transition:background .4s var(--curva)}
@media (hover:hover) and (pointer:fine){ tbody tr:hover{background:var(--sup2)} }
tbody tr.nueva,tbody tr.toca{background:var(--sup3)}

/* EL ESTADO NO USA HUE: peso, luminancia y contorno. Con seis piezas, nueve estados y un
   acento peleando por el mismo presupuesto cromático no ganaba ninguno. */
.est{font-size:12.5px; white-space:nowrap}
.est.n{color:var(--t1); font-weight:600}   /* recién entrado: pide algo */
.est.p{color:var(--t1); font-weight:500}   /* el sistema trabajando */
.est.e{color:var(--t1); font-weight:400}   /* entregado */
.est.c{color:var(--t2); font-weight:400}   /* cerrado: ya no pide nada */
.est.n::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:999px;
  border:1.25px solid currentColor; margin-right:6px; vertical-align:1px;
}
.barra{display:inline-block; vertical-align:middle; height:4px; width:64px;
  background:var(--g150); border-radius:999px; overflow:hidden}
.barra i{display:block; height:100%; background:var(--g400); transition:width .6s var(--curva)}

/* ---------------------------------------------------------------- derecha */
.der{display:flex; flex-direction:column; min-height:0; padding:10px 10px 10px 0; gap:10px}
.caja{background:var(--sup); border:1px solid var(--filete); border-radius:var(--r-md);
  display:flex; flex-direction:column; min-height:0; overflow:hidden}
.caja.alta{flex:none; max-height:44%}
.caja.baja{flex:1}
.caja h3{
  margin:0; padding:9px 14px; font-size:11.5px; color:var(--t3); font-weight:400; flex:none;
  border-bottom:1px solid var(--filete); background:var(--sup2);
}
.lista{overflow:auto; min-height:0}
.al{padding:10px 14px; border-bottom:1px solid var(--filete)}
.al:last-child{border-bottom:0}
.al .t{font-weight:500; color:var(--t1); font-size:13px}
.al .t::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:999px;
  background:var(--peligro); margin-right:7px; vertical-align:1px;
}
.al.b .t::before{background:var(--ico-tenue)}
.al .d{color:var(--t2); font-size:12.5px; margin-top:2px}
.al button{
  margin-top:5px; font-size:12px; font-family:var(--sans); background:none; border:0;
  color:var(--acento); padding:0; cursor:pointer; font-weight:500;
}
.al button:hover{text-decoration:underline}
.al button:focus-visible{outline:2px solid var(--acento); outline-offset:2px}

.tz{display:flex; gap:10px; padding:7px 14px; font-size:12.5px; border-bottom:1px solid var(--filete)}
.tz:last-child{border-bottom:0}
.tz time{font-family:var(--mono); font-size:11.5px; color:var(--t3); flex:none; width:36px;
  font-variant-numeric:tabular-nums; padding-top:1px}
.tz .x{color:var(--t2); min-width:0}
.tz .x b{color:var(--t1); font-weight:500; font-family:var(--mono); font-size:12px}
.tz.fresca{background:var(--sup2)}
/* EL ÚNICO relleno de color de una fila: el punto de pieza. 7 px, y nada más. */
.punto{display:inline-block; width:7px; height:7px; border-radius:999px; flex:none;
  background:var(--pz,var(--ico-tenue)); margin-right:6px; vertical-align:1px}
.tz .pz{color:var(--t3); font-size:11.5px}

/* ---------------------------------------------------------------- pie */
.pie{
  position:relative; z-index:5; flex:none; border-top:1px solid var(--filete);
  padding:10px 16px; display:flex; align-items:center; gap:20px; background:var(--papel);
}
.acciones{display:flex; gap:6px}
.acciones button{
  font-family:var(--sans); font-size:13px; padding:6px 12px; background:var(--sup);
  color:var(--t1); border:1px solid var(--borde-fuerte); border-radius:var(--r-sm);
  cursor:pointer; transition:background .15s var(--curva), transform .08s;
}
@media (hover:hover) and (pointer:fine){ .acciones button:hover{background:var(--sup2)} }
.acciones button:active{transform:translateY(1px)}
.acciones button:focus-visible{outline:2px solid var(--acento); outline-offset:1px}
/* la acción que el usuario vino a hacer: el único sólido de la pantalla */
.acciones button.fuerte{background:var(--acento); color:var(--g0); border-color:var(--acento); font-weight:500}
@media (hover:hover) and (pointer:fine){ .acciones button.fuerte:hover{background:var(--pino-claro)} }
.acciones button.tenue{border-color:transparent; background:transparent; color:var(--t2)}

.piezas{display:flex; gap:14px; flex:1; justify-content:flex-end; flex-wrap:wrap}
.pieza{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--t3); white-space:nowrap}
.pieza i{width:7px; height:7px; border-radius:999px; background:currentColor; opacity:.35;
  transition:opacity .3s var(--curva)}
.pieza.viva{color:var(--t1); font-weight:500}
.pieza.viva i{opacity:1; background:var(--pz)}

.nota{padding:0 16px 8px; font-size:11.5px; color:var(--t3); flex:none; background:var(--papel)}
body.apagado .lamina{background:var(--sup2)}
.aviso{
  pointer-events:none; position:fixed; left:50%; bottom:76px; transform:translateX(-50%); z-index:20;
  background:var(--g900); color:var(--g0); padding:8px 14px; border-radius:var(--r-sm);
  font-size:12.5px; box-shadow:0 6px 22px rgba(19,24,21,.18);
}
@media (max-width:1100px){
  .cuerpo{grid-template-columns:1fr}
  .lat,.der{display:none}
  .centro{padding:10px}
  .cifras{grid-template-columns:repeat(3,1fr)}
  .pie{flex-wrap:wrap; gap:10px}
}