/* ============================================================================
   Pizarra JackBeds — panel de operaciones del VPS de la empresa.

   Registro: oscuro cálido, cristal y bento asimétrico. El negro es CÁLIDO
   (#0a0908, no un azulado) por una razón concreta: el portafolio de Maax ya usa
   el registro frío, y estos dos paneles se abren en pestañas contiguas — la
   temperatura del fondo es lo que dice en cuál estás antes de leer nada.

   Lo que NO se ha tocado del panel anterior, y no se toca:
   · Los tres colores de estado y sus glifos (● ▲ ■ ○). Están medidos para
     deuteranopia y protanopia, donde verde y ámbar caen a ΔE 3.5 si se eligen
     a ojo. Aquí el color es dato, no decoración.
   · Que la página funcione entera sin estado.json.
   ========================================================================== */

@font-face{
  font-family:'Geist'; src:url('fuentes/Geist-Variable.woff2') format('woff2-variations');
  font-weight:100 900; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'Geist Mono'; src:url('fuentes/GeistMono-Variable.woff2') format('woff2-variations');
  font-weight:100 900; font-display:swap; font-style:normal;
}

:root{
  color-scheme: dark;

  /* --- Planos y cristal ------------------------------------------------- */
  --plane:#0a0908;              /* casi negro, cálido */
  --veil:rgba(255,251,244,.045);   /* cristal de tarjeta */
  --veil-2:rgba(255,251,244,.028); /* cristal del núcleo, más hondo */
  --shell:rgba(255,251,244,.022);  /* bandeja exterior del doble bezel */
  --hair:rgba(255,246,232,.09);    /* filo exterior */
  --hair-2:rgba(255,246,232,.055); /* filo interior */
  --lift:inset 0 1px 0 rgba(255,247,236,.07);   /* luz de canto superior */

  --ink:#f6f2ec;  --ink-2:#a8a29a;  --ink-3:#7c766e;

  /* --- Estado: heredado y sin retocar ----------------------------------- */
  --ok:#0ca30c; --warn:#f2b23c; --crit:#f26a62; --idle:#6f7876;

  /* Lila. Es el azul cielo anterior girado en OKLCH —misma claridad, un punto
     menos de croma, solo cambia el tono: 233° -> 300°—, que es la regla de la
     familia de color de la casa: el tono se gira, no se elige a ojo. Contraste
     9,3:1 sobre la superficie de tarjeta. Vale para lo interactivo Y para las
     series en estado normal, porque NO es un color de estado y por tanto no
     compite con el verde, el ámbar ni el rojo. */
  --acc:#c3afea;

  /* --- Tipografía -------------------------------------------------------- */
  --ui:'Geist',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',monospace;

  --t-micro:10px; --t-xs:11.5px; --t-sm:13px; --t-md:14px; --t-lg:16px;

  /* --- Geometría: radios concéntricos ------------------------------------ */
  --r-shell:24px; --r-core:18px; --r-sm:12px; --r-pill:999px;

  /* --- Movimiento: masa, no interpolación lineal ------------------------- */
  --swift:cubic-bezier(.32,.72,0,1);
  --settle:cubic-bezier(.16,1,.3,1);

  --z-nav:20; --z-grain:60;

  /* --- Lo que lee la cáscara común (el rail de Accesos, cascara.js) --------
     Sus nombres, con los colores de aquí: el mismo negro cálido, un punto más
     claro en el panel que en el plano para que la carcasa se despegue del fondo.
     No son tokens nuevos de la Pizarra: son los de arriba con el nombre que ella
     espera. Desde el 2026-10-28. */
  --panel:#12100e; --rail:#0f0d0c; --card:#1a1815; --card-2:#161412;
  --line:var(--hair); --line-soft:var(--hair-2); --muted:var(--ink-3);
  --pos:var(--ok); --neg:var(--crit); --info:var(--acc);
  --warn-bg:rgba(242,178,60,.12); --warn-fg:var(--warn);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; padding:16px; min-height:100dvh; background:var(--plane); color:var(--ink);
  font-family:var(--ui); font-size:var(--t-md); line-height:1.55;
  font-feature-settings:'ss01' 1,'cv01' 1;
  -webkit-font-smoothing:antialiased;
}

/* Halo de fondo: dos focos cálidos muy tenues, fijos. No es un degradado de
   marca — es lo que impide que un plano negro liso se vea como un folio apagado. */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70rem 40rem at 12% -8%, rgba(242,178,60,.055), transparent 62%),
    radial-gradient(56rem 34rem at 92% 4%, rgba(195,175,234,.04), transparent 60%);
}
/* Grano: fijo y sin eventos, nunca dentro de algo que haga scroll. */
body::after{
  content:''; position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none;
  opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.pz-host{position:relative; z-index:1}
/* Sin la cáscara (CSP o red) la página se lee igual, a una columna: el host solo es la
   rejilla del rail cuando la cáscara le pone la suya (.cas-app, que pesa más que esto). */
.pz-host{display:grid; grid-template-columns:minmax(0,1fr); height:calc(100dvh - 32px);
  background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden}
/* El contenido es lo que hace scroll (el host tiene alto fijo, como en Logística). Su propio
   contexto de apilado deja la barra pegajosa por debajo del cajón móvil del rail. El halo
   cálido va aquí, quieto mientras el contenido corre por encima. */
.wrap{
  position:relative; z-index:0; min-width:0; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:0 28px 56px;
  background:
    radial-gradient(60rem 34rem at 12% -8%, rgba(242,178,60,.05), transparent 62%),
    radial-gradient(48rem 30rem at 92% 4%, rgba(195,175,234,.035), transparent 60%);
}
.wrap [id]{scroll-margin-top:84px}
/* La hamburguesa abre el cajón del rail en móvil (botonCajon). En escritorio no se ve. */
.nav-in .burger{
  display:none; place-items:center; flex:none; width:36px; height:36px; padding:0;
  border:1px solid var(--hair); border-radius:10px; background:var(--veil-2); color:var(--ink);
  cursor:pointer; filter:none; transform:none;
}
.sin-rail .nav-in .burger{display:none}
.mono{font-family:var(--mono)}
a{color:var(--acc); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:6px}

/* --- Isla de navegación: flotante, despegada del borde -------------------- */
.nav{position:sticky; top:0; z-index:var(--z-nav); margin:0 -28px 0; padding:0}
.nav-in{
  display:flex; align-items:center; gap:14px; padding:14px 28px;
  background:color-mix(in srgb, var(--panel) 84%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair-2);
}
.nav-in h1{margin:0; font-size:1.06rem; font-weight:560; letter-spacing:-.02em}
.brand{display:flex; align-items:center; gap:10px; font-weight:560; letter-spacing:-.012em; white-space:nowrap}
.brand i{
  width:17px; height:17px; border-radius:50%; flex:none;
  border:4px solid var(--ink); background:transparent;
}
.brand em{font-style:normal; color:var(--ink-3); font-weight:400}
.nav-meta{
  margin-left:auto; display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:var(--t-xs); color:var(--ink-3); white-space:nowrap;
}
.nav-meta b{color:var(--ink-2); font-weight:500}

/* Píldora del veredicto, dentro de la isla. */
.pill{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  padding:6px 15px 6px 12px; border-radius:var(--r-pill);
  background:var(--veil); border:1px solid var(--hair-2);
  font-size:var(--t-sm); font-weight:540; letter-spacing:-.008em;
  transition:background .2s var(--swift);
}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--idle); flex:none}
.pill.is-ok .dot{background:var(--ok)} .pill.is-ok{color:#7ee07e}
.pill.is-warn .dot{background:var(--warn)} .pill.is-warn{color:var(--warn)}
.pill.is-crit .dot{background:var(--crit)} .pill.is-crit{color:var(--crit)}
/* Late solo mientras el dato es fresco: si el cron para, la quietud es el aviso. */
.pill.fresh .dot{animation:latido 2.6s var(--settle) infinite}
@keyframes latido{0%,72%,100%{opacity:1; transform:scale(1)} 36%{opacity:.3; transform:scale(.7)}}

/* --- Doble bezel: bandeja exterior + núcleo, con radios concéntricos ------ */
.shell{
  background:var(--shell); border:1px solid var(--hair);
  border-radius:var(--r-shell); padding:6px;
  box-shadow:0 26px 60px -40px rgba(0,0,0,.95);
}
.core{
  background:var(--veil); border:1px solid var(--hair-2);
  border-radius:var(--r-core); box-shadow:var(--lift);
  overflow:hidden;
}

/* --- Bento de medidores --------------------------------------------------- */
/* Una tira: siete lecturas que se leen de una pasada, no siete tarjetas que
   hay que recorrer. Cabían en el alto de un titular que ya no está. */
.bento{display:grid; grid-template-columns:repeat(auto-fit,minmax(138px,1fr)); gap:7px; margin-top:22px}
.cell{
  position:relative; display:flex; flex-direction:column; min-height:104px;
  padding:13px 15px 12px;
  background:var(--veil); border:1px solid var(--hair-2);
  border-radius:var(--r-core); box-shadow:var(--lift);
  transition:border-color .13s var(--swift), background .13s var(--swift);
}
.cell:hover{border-color:var(--hair); background:rgba(255,251,244,.058)}
/* Las dos que dicen si algo está roto pesan el doble. Las tres constantes del
   sistema —carga, memoria, disco— son contexto y ocupan lo que les toca. */

.c-l{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.c-l .g{margin-left:auto; font-size:8px; line-height:1}

/* Delta contra hace 24 h. Sale del historial, así que hasta que haya un día de
   datos no aparece: mejor sin insignia que con una que compare contra nada. */
.delta{
  display:inline-flex; align-items:center; gap:4px; margin-left:8px;
  padding:2px 7px; border-radius:var(--r-pill);
  font-family:var(--mono); font-size:var(--t-micro); font-weight:500;
  background:var(--veil-2); border:1px solid var(--hair-2); color:var(--ink-2);
  letter-spacing:0; text-transform:none;
}
.delta.up{color:var(--warn); border-color:rgba(242,178,60,.28)}
.delta.down{color:#7ee07e; border-color:rgba(12,163,12,.3)}
.delta.flat{color:var(--ink-3)}

/* --- Chispa: la serie de esa métrica, dentro de su propia tarjeta ---------- */
.spark{margin-top:auto; height:34px; width:100%; display:block; overflow:visible}
.spark .ln{fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.spark .ar{fill:currentColor; opacity:.11}
.spark .pt{fill:currentColor}
.spark-vacio{
  margin-top:auto; height:34px; display:flex; align-items:flex-end;
  font-family:var(--mono); font-size:var(--t-micro); color:var(--ink-3);
}
.c-v{
  margin-top:8px; font-size:1.7rem; font-weight:500;
  letter-spacing:-.04em; line-height:1; display:flex; align-items:baseline; gap:5px;
  font-variant-numeric:lining-nums;
}
.c-v u{font-size:.78rem; font-weight:450; color:var(--ink-3); text-decoration:none; letter-spacing:-.01em}
.c-n{margin-top:5px; margin-bottom:11px; font-size:var(--t-xs); color:var(--ink-2); line-height:1.4; text-wrap:pretty}
.is-ok{color:var(--ok)} .is-warn{color:var(--warn)} .is-crit{color:var(--crit)} .is-idle{color:var(--idle)}
.cell.is-warn .c-v,.cell.is-crit .c-v{color:inherit}
.cell.is-ok .c-v,.cell.is-idle .c-v{color:var(--ink)}

/* Riel: se llena una vez al llegar la lectura. Acuse de recibo, no adorno. */
.rail{
  margin-top:auto; height:3px; border-radius:4px; overflow:hidden;
  background:rgba(255,246,232,.06);
}
.rail i{
  display:block; height:100%; width:0; border-radius:4px; background:currentColor;
  box-shadow:0 0 16px 0 currentColor, inset 0 1px 0 rgba(255,255,255,.28);
  transition:width 1.1s var(--settle);
}
.rail.empty{background:transparent}

/* Esqueleto: la forma final sin cifras inventadas. */
.skel .c-l,.skel .c-v,.skel .c-n{
  background:rgba(255,246,232,.055); color:transparent; border-radius:5px;
  animation:respira 1.7s var(--settle) infinite;
}
.skel .c-l{width:52%; height:8px} .skel .c-v{width:44%; height:20px; margin-top:10px}
.skel .c-n{width:76%; height:8px; margin-top:7px}
@keyframes respira{0%,100%{opacity:1} 50%{opacity:.42}}

/* --- Tendencia: una gráfica por métrica, nunca tres series juntas ---------
   Con tres líneas en un mismo eje hacía falta una paleta categórica, y la
   validada falla: los únicos tonos libres —una vez reservados el verde, el
   ámbar y el rojo de estado— caen todos en la misma mitad del círculo y quedan
   a ΔE 4,3 en deuteranopia. Separadas, cada gráfica tiene UNA serie, su título
   la nombra y el color puede seguir significando severidad, como en el resto
   del panel. */
.trend{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:7px}
.tcard{
  padding:15px 17px 10px; background:var(--veil);
  border:1px solid var(--hair-2); border-radius:var(--r-core); box-shadow:var(--lift);
}
.tcard header{display:flex; align-items:baseline; gap:9px; margin-bottom:12px}
.tcard header .t{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.tcard header .v{margin-left:auto; font-family:var(--mono); font-size:var(--t-xs); color:var(--ink-2); font-variant-numeric:tabular-nums}
.plot{position:relative; width:100%; height:102px; display:block; touch-action:pan-y}
.plot .grid{stroke:rgba(255,246,232,.07); stroke-width:1}
.plot .zona{fill:currentColor; opacity:.1}
/* En estado normal la serie va en el azul de dato, no en el verde de estado.
   El verde funciona como semáforo en un punto de 8 px, pero un relleno bajo una
   curva ocupa media tarjeta y grita; y si todo grita, un ámbar real no destaca.
   Cuando la métrica pasa a aviso o avería, la línea SÍ se tiñe — que es justo
   cuando el color tiene algo que decir. */
.tcard.is-ok,.tcard.is-idle{color:var(--acc)}
/* Vale para los dos remates de una tarjeta: la chispa cuando hay serie y el
   riel cuando no la hay (última copia y certificados no tienen pasado que
   dibujar). Ocupan el mismo sitio y dicen lo mismo, así que no pueden ir de
   colores distintos: en reposo, lila; en aviso o avería, el color de estado. */
.cell.is-ok .spark,.cell.is-idle .spark,
.cell.is-ok .rail,.cell.is-idle .rail{color:var(--acc)}
.plot .linea{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.plot .cruz{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3}
.plot .foco{fill:currentColor; stroke:var(--plane); stroke-width:2}
.tcard .eje{
  display:flex; justify-content:space-between; margin-top:7px;
  font-family:var(--mono); font-size:var(--t-micro); color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.tip{
  position:absolute; z-index:var(--z-nav); pointer-events:none; opacity:0;
  padding:7px 10px; border-radius:9px; white-space:nowrap;
  background:rgba(20,18,16,.96); border:1px solid var(--hair);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.95);
  font-family:var(--mono); font-size:var(--t-xs); color:var(--ink);
  transform:translate(-50%,-124%); transition:opacity .1s var(--swift);
}
.tip b{color:var(--ink); font-weight:600}
.tip span{color:var(--ink-3); display:block; font-size:var(--t-micro); margin-top:2px}
.tcard.on .tip{opacity:1}

/* --- Secciones y cabeceras de panel --------------------------------------- */
section{margin-top:34px; scroll-margin-top:88px}
.sec-h{display:flex; align-items:baseline; gap:11px; margin:0 4px 10px; flex-wrap:wrap}
.sec-h h2{margin:0; font-size:1.02rem; font-weight:540; letter-spacing:-.02em}
.sec-h .n{
  font-family:var(--mono); font-size:var(--t-xs); color:var(--ink-3);
  padding:3px 10px; border-radius:var(--r-pill);
  background:var(--veil); border:1px solid var(--hair-2);
}
.sec-h .r{margin-left:auto; font-family:var(--mono); font-size:var(--t-xs); color:var(--ink-3)}

/* --- Estado: color + forma + palabra, siempre los tres -------------------- */
.s{display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-size:var(--t-sm)}
.s::before{font-size:8px; line-height:1}
.s-ok::before{content:"\25CF"; color:var(--ok)}
.s-warn::before{content:"\25B2"; color:var(--warn)}
.s-crit::before{content:"\25A0"; color:var(--crit)}
.s-idle::before{content:"\25CB"; color:var(--idle)}
.s-ok{color:var(--ink-2)} .s-warn{color:var(--warn)} .s-crit{color:var(--crit)} .s-idle{color:var(--ink-3)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* --- Rack de servicios ---------------------------------------------------- */
.rack{display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:5px; padding:6px}
.rg{
  padding:10px 12px 11px; border-radius:var(--r-sm);
  background:var(--veil-2); border:1px solid transparent;
  transition:border-color .13s var(--swift), background .13s var(--swift);
}
.rg:hover{border-color:var(--hair-2); background:var(--veil)}
.rg-t{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:7px;
}
.rg ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px}
.rg li{display:flex; align-items:baseline; gap:8px; font-size:var(--t-sm); min-width:0}
.rg li .n{
  font-family:var(--mono); font-size:var(--t-xs); color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.rg li .u{
  margin-left:auto; padding-left:4px; font-family:var(--mono); font-size:var(--t-xs);
  color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; flex:none;
}

/* --- Tablas --------------------------------------------------------------- */
.tw{overflow-x:auto; overscroll-behavior-x:contain}
table{width:100%; min-width:540px; border-collapse:collapse; font-size:var(--t-sm)}
thead th{
  text-align:left; font-weight:450; font-family:var(--mono);
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  padding:10px 16px; border-bottom:1px solid var(--hair-2); white-space:nowrap;
}
tbody td{padding:8px 16px; border-bottom:1px solid rgba(255,246,232,.035); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .1s var(--swift)}
tbody tr:hover{background:var(--veil-2)}
td.num{font-variant-numeric:tabular-nums; text-align:right; font-family:var(--mono); font-size:var(--t-xs); color:var(--ink-2)}
td.num.is-ok{color:var(--ink-2)}
td b{font-weight:540}

/* --- Inventario: fichas plegables ----------------------------------------- */
.inv > details{border-bottom:1px solid rgba(255,246,232,.035)}
.inv > details:last-child{border-bottom:0}
.inv summary{
  display:grid; grid-template-columns:minmax(150px,1.3fr) minmax(110px,1fr) 66px 112px 30px;
  gap:14px; align-items:center; padding:9px 16px; cursor:pointer; list-style:none;
  transition:background .12s var(--swift);
}
.inv summary::-webkit-details-marker{display:none}
.inv summary:hover{background:var(--veil-2)}
.i-n{font-weight:540; font-size:var(--t-sm); letter-spacing:-.012em}
.i-w{font-family:var(--mono); font-size:var(--t-xs); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.i-p{font-family:var(--mono); font-size:var(--t-xs); color:var(--ink-3)}
.i-c{
  justify-self:end; font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  padding:4px 11px; border-radius:var(--r-pill);
  background:var(--veil); border:1px solid var(--hair-2); white-space:nowrap;
}
/* Botón-dentro-de-botón: el chevron vive en su propio disco, nunca desnudo. */
.i-x{
  justify-self:center; width:24px; height:24px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:15px; line-height:1; color:var(--ink-2);
  background:var(--veil); border:1px solid var(--hair-2);
  transition:transform .22s var(--swift), color .12s var(--swift), background .12s var(--swift);
}
.inv summary:hover .i-x{color:var(--ink); background:rgba(255,251,244,.09); transform:translateX(2px)}
.inv details[open] summary{background:var(--veil-2)}
.inv details[open] .i-x{transform:rotate(90deg)}
.inv .body{padding:2px 16px 16px; background:var(--veil-2)}
.inv .body p{margin:0 0 12px; font-size:var(--t-sm); color:var(--ink-2); max-width:74ch; text-wrap:pretty}
.inv .body p b{color:var(--ink); font-weight:540}

.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.chip{
  font-family:var(--mono); font-size:var(--t-xs); padding:4px 11px;
  border-radius:var(--r-pill); background:var(--veil-2);
  border:1px solid var(--hair-2); color:var(--ink-2);
  transition:border-color .13s var(--swift), color .13s var(--swift), background .13s var(--swift);
}
a.chip{color:var(--acc); border-color:rgba(195,175,234,.22)}
a.chip:hover{background:rgba(195,175,234,.09); border-color:rgba(195,175,234,.4); text-decoration:none}

.note{
  margin:10px 0 0; padding:11px 14px; font-size:var(--t-sm); color:var(--ink-2);
  background:var(--veil-2); border:1px solid var(--hair-2);
  border-radius:var(--r-sm); max-width:82ch; text-wrap:pretty;
}
.note b{color:var(--ink); font-weight:540}
.note::before{font-size:8px; margin-right:9px}
.note.w{border-color:rgba(242,178,60,.26); background:rgba(242,178,60,.045)}
.note.w::before{content:"\25B2"; color:var(--warn)}
.note.d::before{content:"\2713"; color:var(--ok); font-size:11px}
/* Corregir un dato que la pizarra daba por cierto pesa más que un pendiente:
   lo anterior no estaba por hacer, estaba mal. */
.note.c{border-color:rgba(242,106,98,.3); background:rgba(242,106,98,.05)}
.note.c::before{content:"\25A0"; color:var(--crit)}

/* Nota que explica el panel de encima: vive DENTRO de su bandeja, separada por
   un filo. Suelta debajo se leía como otro bloque distinto. */
.shell > .note{
  margin:7px 0 0; background:transparent; border:0; border-top:1px solid var(--hair-2);
  border-radius:0; padding:13px 17px 5px; max-width:none;
}
.shell > .note .lim{display:block; max-width:88ch}

/* --- Vacíos y avisos ------------------------------------------------------ */
.empty{padding:18px 16px; font-size:var(--t-sm); color:var(--ink-2); max-width:78ch}
.empty b{color:var(--ink); font-weight:540}
.banner{
  display:flex; gap:13px; align-items:flex-start; margin-top:26px; padding:17px 20px;
  border:1px solid rgba(242,178,60,.28); background:rgba(242,178,60,.05);
  border-radius:var(--r-core); font-size:var(--t-sm); color:var(--ink-2);
}
.banner::before{content:"\25B2"; color:var(--warn); font-size:9px; padding-top:5px}
.banner b{color:var(--ink)}

footer{
  margin-top:48px; padding-top:20px; border-top:1px solid var(--hair-2);
  font-family:var(--mono); font-size:var(--t-xs); color:var(--ink-3); line-height:1.9;
}

/* --- Sin animación de entrada --------------------------------------------
   La había: cada sección entraba con 900 ms de fundido, desplazamiento y
   desenfoque. Medido, el scroll iba a 60 fps limpios incluso con la CPU frenada
   seis veces — no era lento, era latencia puesta a mano. En una portada eso se
   lee como oficio; en un panel que se abre diez veces al día se lee como que la
   página va pillada, porque entre mirar y poder leer pasaba casi un segundo.
   El contenido de un panel está cuando llegas. */

/* --- Móvil: el bento se deshace, nada se queda a medias ------------------- */
/* Por debajo de 901 px el rail es un cajón (lo hace la cáscara): la página va a pantalla
   completa y la hamburguesa lo abre. */
@media (max-width:900px){
  body{padding:0}
  .pz-host{height:100dvh; border:0; border-radius:0}
  .nav-in .burger{display:grid}
}
@media (max-width:920px){
  .bento{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .wrap{padding:0 16px 56px}
  .nav{margin:0 -16px}
  .nav-in{padding:11px 16px; gap:10px}
  .nav-meta{display:none}          /* el host y el uptime no caben ni hacen falta */
  .bento{grid-template-columns:repeat(2,1fr); gap:6px; margin-top:14px}
  .cell{min-height:92px; padding:11px 12px 10px}
  .c-v{font-size:1.5rem}
  .inv summary{grid-template-columns:1fr 96px 26px; gap:10px; min-height:48px}
  .i-w,.i-p{display:none}
  section{margin-top:26px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}