/* =====================================================================
   LYK OS — Sistema visual
   Sé Increíble. Marino, símbolo, oro. Poppins.
   ===================================================================== */

:root{
  /* Marca */
  --marino:#001982; --simbolo:#051EA7; --azul:#0B23D3; --nube:#E9EDFB; --oro:#CA9A3C;

  /* Tinta y papel */
  --tinta:#0B0F22; --tinta-2:#4A5170; --tinta-3:#818AA6; --tinta-4:#A8AFC4;
  --papel:#FFFFFF; --papel-2:#F7F8FC; --papel-3:#EEF1F9;
  --linea:#E1E6F3; --linea-2:#CFD6EA;

  /* Semáforo */
  --verde:#0E7C56; --verde-suave:#E4F5EE;
  --ambar:#9A6B10; --ambar-suave:#FDF3DF;
  --rojo:#B3261E;  --rojo-suave:#FCEBE9;
  --gris-suave:#EDEFF6;

  /* Forma */
  --r-xs:5px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-full:999px;
  --sombra-1:0 1px 2px rgba(9,17,54,.05), 0 1px 3px rgba(9,17,54,.04);
  --sombra-2:0 2px 4px rgba(9,17,54,.05), 0 8px 20px -6px rgba(9,17,54,.10);
  --sombra-3:0 12px 40px -12px rgba(9,17,54,.22);
  --rail:250px;

  /* Movimiento */
  --paso:180ms cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --marino:#050A1C; --simbolo:#2A45E8; --azul:#7189FF; --nube:#151D40; --oro:#E0B96A;
  --tinta:#F0F3FC; --tinta-2:#B3BBD6; --tinta-3:#818AA6; --tinta-4:#5E6683;
  --papel:#0C1122; --papel-2:#080C19; --papel-3:#141A30;
  --linea:#212845; --linea-2:#2E3757;
  --verde:#5BE49B; --verde-suave:#0C2B22;
  --ambar:#F5C563; --ambar-suave:#2E2312;
  --rojo:#FF8A80;  --rojo-suave:#33140F;
  --gris-suave:#181E36;
  --sombra-1:0 1px 2px rgba(0,0,0,.30);
  --sombra-2:0 2px 4px rgba(0,0,0,.28), 0 8px 20px -6px rgba(0,0,0,.42);
  --sombra-3:0 12px 40px -12px rgba(0,0,0,.62);
}}
:root[data-theme="dark"]{
  --marino:#050A1C; --simbolo:#2A45E8; --azul:#7189FF; --nube:#151D40; --oro:#E0B96A;
  --tinta:#F0F3FC; --tinta-2:#B3BBD6; --tinta-3:#818AA6; --tinta-4:#5E6683;
  --papel:#0C1122; --papel-2:#080C19; --papel-3:#141A30;
  --linea:#212845; --linea-2:#2E3757;
  --verde:#5BE49B; --verde-suave:#0C2B22;
  --ambar:#F5C563; --ambar-suave:#2E2312;
  --rojo:#FF8A80;  --rojo-suave:#33140F;
  --gris-suave:#181E36;
  --sombra-1:0 1px 2px rgba(0,0,0,.30);
  --sombra-2:0 2px 4px rgba(0,0,0,.28), 0 8px 20px -6px rgba(0,0,0,.42);
  --sombra-3:0 12px 40px -12px rgba(0,0,0,.62);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel-2); color:var(--tinta);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.021em; text-wrap:balance; line-height:1.25}
p{margin:0}
a{color:var(--azul)}
button,input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--oro); outline-offset:2px; border-radius:var(--r-xs)}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* ---------- tipografía de apoyo ---------- */
.eyebrow{font-size:.64rem; letter-spacing:.19em; text-transform:uppercase;
  font-weight:700; color:var(--tinta-3)}
.sub{color:var(--tinta-2); font-size:.9rem}
.mini{font-size:.78rem; color:var(--tinta-3)}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
/* Registro Maestro: se lee en voz alta, asi que se pinta para leerse */
.registro{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.82rem;
  font-weight:600; letter-spacing:.06em; color:var(--azul);
  background:var(--nube); padding:3px 8px; border-radius:var(--r-xs); white-space:nowrap}
.registro.grande{font-size:1.05rem; letter-spacing:.1em; padding:5px 11px;
  display:inline-block; margin:4px 0 8px}

/* =====================================================================
   ACCESO
   ===================================================================== */
.acceso{min-height:100vh; display:grid; grid-template-columns:1.15fr minmax(0,480px);
  background:var(--marino); color:#fff}
@media (max-width:900px){ .acceso{grid-template-columns:1fr} }

.acceso-lado{padding:56px 52px; display:flex; flex-direction:column;
  justify-content:space-between; position:relative; overflow:hidden}
.acceso-lado::before{content:""; position:absolute; left:-220px; bottom:-240px;
  width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle,var(--simbolo) 0%,transparent 68%); opacity:.55}
.acceso-lado::after{content:""; position:absolute; right:-140px; top:-160px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,var(--oro) 0%,transparent 70%); opacity:.10}
.acceso-lado>*{position:relative; z-index:1}
@media (max-width:900px){ .acceso-lado{padding:36px 26px 16px} .acceso-pie{display:none} }

.marca{display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit}
.marca img{height:38px; width:auto}
.marca b{display:block; font-weight:700; font-size:1.08rem; letter-spacing:.045em; line-height:1}
.marca i{display:block; font-style:normal; font-size:.57rem; letter-spacing:.24em;
  text-transform:uppercase; opacity:.62; font-weight:600; margin-top:4px}

.acceso-centro h2{font-size:clamp(1.7rem,3.6vw,2.6rem); max-width:15ch; margin-bottom:18px}
.acceso-centro p{opacity:.8; max-width:44ch; font-size:.98rem}
.acceso-pie{display:flex; gap:30px; flex-wrap:wrap; font-size:.79rem; opacity:.58}

.acceso-panel{background:var(--papel); color:var(--tinta); padding:56px 46px;
  display:flex; flex-direction:column; justify-content:center; gap:22px}
@media (max-width:900px){ .acceso-panel{padding:36px 26px 48px} }
.acceso-panel h1{font-size:1.6rem}

/* =====================================================================
   ARMAZÓN — riel lateral + lienzo
   ===================================================================== */
.armazon{display:grid; grid-template-columns:var(--rail) 1fr; min-height:100vh}
@media (max-width:960px){ .armazon{grid-template-columns:1fr} }
/* Sin esto los hijos de un grid valen min-width:auto y crecen con su contenido:
   la tabla ancha empuja el lienzo y la PÁGINA entera se desplaza de lado.
   La tabla debe desplazarse dentro de su caja, nunca el cuerpo. */
.armazon>*{min-width:0}
.lienzo, .tabla-caja, .tabla-desliz{min-width:0; max-width:100%}

.riel{background:var(--marino); color:#fff; padding:22px 16px; display:flex;
  flex-direction:column; gap:26px; position:sticky; top:0; height:100vh; overflow-y:auto}
@media (max-width:960px){
  .riel{position:static; height:auto; flex-direction:row; align-items:center;
    gap:14px; padding:12px 16px; overflow-x:auto}
  .riel .riel-pie{display:none}
}
.riel .marca img{height:30px}
.riel .marca b{font-size:.98rem; white-space:nowrap}
.riel .marca{flex:none}

.nav{display:flex; flex-direction:column; gap:2px}
@media (max-width:960px){ .nav{flex-direction:row; gap:4px; margin-left:auto} }
.nav-t{padding:0 12px 6px; font-size:.6rem; letter-spacing:.19em; text-transform:uppercase;
  font-weight:700; color:rgba(255,255,255,.38)}
@media (max-width:960px){ .nav-t{display:none} }

.nav-b{display:flex; align-items:center; gap:11px; width:100%; padding:9px 12px;
  border:0; background:none; color:rgba(255,255,255,.72); border-radius:var(--r-sm);
  font-size:.875rem; font-weight:500; cursor:pointer; text-align:left;
  transition:background var(--paso), color var(--paso); white-space:nowrap}
.nav-b:hover{background:rgba(255,255,255,.09); color:#fff}
.nav-b[aria-current="true"]{background:rgba(255,255,255,.14); color:#fff; font-weight:600}
.nav-b svg{width:17px; height:17px; flex:none; opacity:.9}
.nav-b .cuenta{margin-left:auto; background:var(--oro); color:#241a05; font-size:.66rem;
  font-weight:700; padding:1px 7px; border-radius:var(--r-full); min-width:20px; text-align:center}
.nav-b .cuenta.quieto{background:rgba(255,255,255,.18); color:#fff}

.riel-pie{margin-top:auto; border-top:1px solid rgba(255,255,255,.12); padding-top:16px}
.yo{display:flex; align-items:center; gap:11px; margin-bottom:10px}
.avatar{width:34px; height:34px; border-radius:var(--r-full); flex:none;
  background:linear-gradient(140deg,var(--simbolo),var(--azul)); color:#fff;
  display:grid; place-items:center; font-size:.8rem; font-weight:700; letter-spacing:.02em}
.yo b{display:block; font-size:.83rem; font-weight:600; line-height:1.3}
.yo span{display:block; font-size:.7rem; opacity:.6; line-height:1.3}
.salir{width:100%; padding:7px; border:1px solid rgba(255,255,255,.16); background:none;
  color:rgba(255,255,255,.75); border-radius:var(--r-sm); font-size:.78rem; cursor:pointer;
  transition:background var(--paso)}
.salir:hover{background:rgba(255,255,255,.11); color:#fff}
.salir.reportar{margin-bottom:12px; border-color:rgba(202,154,60,.5); color:var(--oro);
  display:flex; align-items:center; justify-content:center; gap:7px; font-weight:600}
.salir.reportar:hover{background:rgba(202,154,60,.16); color:var(--oro)}

.lienzo{padding:34px 38px 90px; max-width:1180px; width:100%; margin:0 auto}
@media (max-width:640px){ .lienzo{padding:24px 18px 70px} }

/* ---------- encabezado de página ---------- */
.encabezado{display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:26px}
.encabezado h1{font-size:1.72rem; margin-bottom:5px}
.encabezado .sub{max-width:68ch}
.encabezado-d{margin-left:auto; display:flex; gap:9px; align-items:center; flex-wrap:wrap}

.saludo{font-size:1.72rem; margin-bottom:5px}
.saludo em{font-style:normal; color:var(--tinta-3)}

/* =====================================================================
   PIEZAS
   ===================================================================== */
.tarjeta{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-md);
  box-shadow:var(--sombra-1)}
.tarjeta-p{padding:20px 22px}

.rejilla{display:grid; gap:14px; margin-bottom:26px}
.rejilla.c4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media (max-width:640px){
  /* Dos columnas en el teléfono: cuatro tarjetas apiladas son media pantalla
     de desplazamiento antes de llegar a lo que de verdad importa. */
  .rejilla.c4{grid-template-columns:1fr 1fr; gap:10px}
  .rejilla.c4>.dato:first-child{grid-column:1 / -1}
  .dato{padding:13px 15px}
  .dato .cifra{font-size:1.5rem}
  .encabezado{margin-bottom:20px}
  .saludo, .encabezado h1{font-size:1.42rem}
}
.rejilla.c3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.rejilla.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.dato{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-md);
  padding:17px 19px; box-shadow:var(--sombra-1);
  transition:box-shadow var(--paso), transform var(--paso)}
/* La cifra se marca por clase, no por estructura: en unas tarjetas el número
   va suelto y en otras va anidado junto al anillo. */
.dato .cifra{display:block; font-size:1.85rem; font-weight:600; letter-spacing:-.03em;
  line-height:1.15}
.dato .cifra .parte{color:var(--tinta-4); font-size:1.05rem; font-weight:500}
.dato .pie{display:block; font-size:.77rem; color:var(--tinta-3); margin-top:3px}
.dato .pie b{font-weight:600}
.dato .ficha{margin-top:11px}
.dato.pulsable{cursor:pointer}
.dato.pulsable:hover{box-shadow:var(--sombra-2); transform:translateY(-2px)}
.dato .flecha{float:right; color:var(--tinta-4)}

/* anillo de progreso */
.anillo{width:56px; height:56px; flex:none}
.anillo circle{fill:none; stroke-width:6; stroke-linecap:round}
.anillo .fondo{stroke:var(--linea)}
.anillo .frente{stroke:var(--azul); transition:stroke-dasharray 600ms cubic-bezier(.22,.61,.36,1)}
.anillo text{font-size:15px; font-weight:600; fill:var(--tinta); text-anchor:middle;
  font-family:inherit; font-variant-numeric:tabular-nums}

/* barra */
.barra{height:6px; background:var(--linea); border-radius:var(--r-full); overflow:hidden; min-width:74px}
.barra i{display:block; height:100%; background:var(--azul); border-radius:var(--r-full);
  transition:width 600ms cubic-bezier(.22,.61,.36,1)}

/* fichas de estado */
.ficha{display:inline-flex; align-items:center; gap:6px; font-size:.735rem; font-weight:600;
  padding:3px 10px; border-radius:var(--r-full); background:var(--gris-suave);
  color:var(--tinta-2); white-space:nowrap; border:1px solid transparent}
.ficha.v{background:var(--verde-suave); color:var(--verde)}
.ficha.a{background:var(--ambar-suave); color:var(--ambar)}
.ficha.r{background:var(--rojo-suave); color:var(--rojo)}
.ficha.n{background:var(--nube); color:var(--azul)}
.ficha::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;
  flex:none; opacity:.85}
.ficha.sin-punto::before{display:none}

.punto{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--linea-2)}
.punto.v{background:var(--verde)} .punto.a{background:var(--ambar)}
.punto.r{background:var(--rojo)}  .punto.n{background:var(--tinta-4)}

.prio{width:3px; height:20px; border-radius:var(--r-full); background:var(--linea-2); display:inline-block}
.prio.alta{background:var(--ambar)} .prio.urgente{background:var(--rojo)}

/* =====================================================================
   BOTONES Y CAMPOS
   ===================================================================== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border:0; border-radius:var(--r-sm); background:var(--azul); color:#fff;
  font-weight:600; font-size:.875rem; cursor:pointer; transition:filter var(--paso),
  transform var(--paso), box-shadow var(--paso); box-shadow:var(--sombra-1)}
.btn:hover{filter:brightness(1.09); box-shadow:var(--sombra-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:var(--tinta-4); cursor:not-allowed; filter:none; box-shadow:none}
.btn.ancho{width:100%}
.btn.fantasma{background:var(--papel); color:var(--tinta-2); border:1px solid var(--linea-2);
  box-shadow:none}
.btn.fantasma:hover{background:var(--papel-3); color:var(--tinta); filter:none}
.btn.oro{background:var(--oro); color:#241a05}
.btn.chico{padding:6px 13px; font-size:.79rem}
.btn svg{width:16px; height:16px}

label{display:block}
.campo{margin-bottom:15px}
.campo>span{display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; color:var(--tinta-3); margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],
select,textarea{
  width:100%; padding:9px 12px; border:1px solid var(--linea-2); border-radius:var(--r-xs);
  background:var(--papel); color:var(--tinta); font-size:.875rem;
  transition:border-color var(--paso), box-shadow var(--paso)}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){
  border-color:var(--tinta-4)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--azul);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--azul) 16%,transparent)}
input:disabled,select:disabled,textarea:disabled{background:var(--papel-3); opacity:.62;
  cursor:not-allowed}
textarea{resize:vertical; min-height:74px; line-height:1.6}
select{appearance:none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23818AA6' d='M6 8.4 1.8 4.2l.9-.9L6 6.6l3.3-3.3.9.9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:12px;
  padding-right:32px}

.buscador{position:relative; min-width:230px; flex:1; max-width:340px}
.buscador input{padding-left:34px}
.buscador svg{position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--tinta-3); pointer-events:none}

/* =====================================================================
   TABLAS
   ===================================================================== */
.tabla-caja{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-md);
  box-shadow:var(--sombra-1); overflow:hidden}
.tabla-desliz{overflow-x:auto}
table.t{width:100%; border-collapse:collapse; font-size:.87rem; min-width:620px}
table.t th{text-align:left; font-size:.655rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-3); font-weight:700; padding:12px 18px; white-space:nowrap;
  background:var(--papel-3); border-bottom:1px solid var(--linea)}
table.t td{padding:13px 18px; border-bottom:1px solid var(--linea); vertical-align:middle}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr{transition:background var(--paso)}
table.t tr.pulsable{cursor:pointer}
table.t tr.pulsable:hover{background:var(--papel-3)}
table.t td .sub2{display:block; font-size:.75rem; color:var(--tinta-3); margin-top:2px;
  font-weight:400; max-width:52ch}
table.t td.num{text-align:right; font-variant-numeric:tabular-nums}
table.t td.angosto{width:1%; white-space:nowrap}
.t-titulo{display:flex; align-items:center; gap:12px; padding:15px 18px;
  border-bottom:1px solid var(--linea)}
.t-titulo h3{font-size:.98rem}
.t-titulo .der{margin-left:auto}

.in-tabla{max-width:104px; text-align:right; font-variant-numeric:tabular-nums}
td.cap{min-width:130px}

/* guardado: destello discreto */
@keyframes destello{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--verde) 55%,transparent)}
  100%{box-shadow:0 0 0 7px transparent}
}
.guardado{animation:destello 850ms ease-out}

/* =====================================================================
   AVISOS, VACÍOS, PANEL LATERAL
   ===================================================================== */
.aviso{background:var(--nube); border-left:3px solid var(--azul); padding:13px 16px;
  border-radius:var(--r-xs); font-size:.855rem; color:var(--tinta-2)}
.aviso b{color:var(--tinta); font-weight:600}
.aviso.oro{background:var(--ambar-suave); border-left-color:var(--oro); color:var(--tinta-2)}
.aviso.mal{background:var(--rojo-suave); border-left-color:var(--rojo)}

.franja{position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--tinta); color:var(--papel); padding:11px 20px; border-radius:var(--r-full);
  font-size:.85rem; font-weight:500; box-shadow:var(--sombra-3); z-index:60;
  display:flex; align-items:center; gap:9px; animation:sube 260ms cubic-bezier(.22,.61,.36,1)}
.franja.mal{background:var(--rojo); color:#fff}
@keyframes sube{from{opacity:0; transform:translate(-50%,14px)} to{opacity:1; transform:translate(-50%,0)}}

.vacio{text-align:center; padding:56px 26px; color:var(--tinta-3)}
.vacio .icono{width:52px; height:52px; margin:0 auto 16px; border-radius:var(--r-full);
  background:var(--nube); color:var(--azul); display:grid; place-items:center}
.vacio .icono svg{width:24px; height:24px}
.vacio h3{font-size:1.02rem; color:var(--tinta); margin-bottom:6px}
.vacio p{max-width:44ch; margin:0 auto 18px; font-size:.875rem}

/* panel lateral deslizante */
.telon{position:fixed; inset:0; background:rgba(6,11,31,.5); z-index:70;
  animation:aparece 180ms ease-out; backdrop-filter:blur(2px)}
@keyframes aparece{from{opacity:0} to{opacity:1}}
.panel{position:fixed; top:0; right:0; bottom:0; width:min(560px,100%); background:var(--papel);
  z-index:71; box-shadow:var(--sombra-3); display:flex; flex-direction:column;
  animation:entra 260ms cubic-bezier(.22,.61,.36,1)}
@keyframes entra{from{transform:translateX(26px); opacity:.4} to{transform:none; opacity:1}}
.panel-cab{display:flex; align-items:flex-start; gap:14px; padding:22px 26px;
  border-bottom:1px solid var(--linea)}
.panel-cab h2{font-size:1.2rem}
.panel-x{margin-left:auto; background:none; border:0; color:var(--tinta-3); cursor:pointer;
  padding:5px; border-radius:var(--r-xs); line-height:0}
.panel-x:hover{background:var(--papel-3); color:var(--tinta)}
.panel-cuerpo{padding:24px 26px; overflow-y:auto; flex:1}
.panel-pie{padding:16px 26px; border-top:1px solid var(--linea); display:flex; gap:10px;
  justify-content:flex-end; background:var(--papel-2)}

/* pestañas */
.pestanas{display:flex; gap:2px; border-bottom:1px solid var(--linea); margin-bottom:22px;
  overflow-x:auto}
.pestana{background:none; border:0; border-bottom:2px solid transparent; padding:10px 15px;
  font-size:.87rem; font-weight:600; color:var(--tinta-3); cursor:pointer; margin-bottom:-1px;
  white-space:nowrap; transition:color var(--paso), border-color var(--paso)}
.pestana:hover{color:var(--tinta)}
.pestana[aria-selected="true"]{color:var(--azul); border-bottom-color:var(--azul)}
.pestana .cuenta{margin-left:6px; font-size:.72rem; color:var(--tinta-4)}

/* línea de tiempo de estados */
.ruta{display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 4px}
.ruta-p{font-size:.72rem; padding:4px 10px; border-radius:var(--r-full);
  border:1px solid var(--linea-2); color:var(--tinta-3); background:var(--papel);
  cursor:pointer; transition:all var(--paso)}
.ruta-p:hover:not(:disabled){border-color:var(--azul); color:var(--azul)}
.ruta-p[aria-current="true"]{background:var(--azul); border-color:var(--azul); color:#fff;
  font-weight:600}
.ruta-p:disabled{opacity:.45; cursor:not-allowed}

/* Matriz de riesgos: impacto contra probabilidad */
table.matriz{border-collapse:separate; border-spacing:3px}
table.matriz .eje{font-size:.7rem; color:var(--tinta-3); font-weight:700; width:22px;
  text-align:center; padding:0}
table.matriz td.mz{width:38px; height:34px; text-align:center; border-radius:var(--r-xs);
  font-size:.9rem; color:var(--tinta)}
td.mz-bajo{background:var(--gris-suave)}
td.mz-medio{background:var(--ambar-suave)}
td.mz-alto{background:color-mix(in srgb,var(--rojo) 22%,transparent)}
td.mz-critico{background:color-mix(in srgb,var(--rojo) 40%,transparent)}
td.mz b{color:var(--tinta); font-weight:700}

.lista-nada{padding:34px; text-align:center; color:var(--tinta-3); font-size:.875rem}