/* Dash: panel de control del Mac Studio.
   Idea: un cuadro de mandos de sala de máquinas. Medidores segmentados, lámparas con forma (nunca solo color)
   y un petróleo oscuro con menta, ámbar y rojo señal. Sin estilos en línea: la CSP solo admite 'self'. */

:root {
  color-scheme: dark;
  --fondo: #09171c;
  --fondo-2: #0d1f26;
  --panel: #112730;
  --panel-2: #173039;
  --panel-3: #1e3b46;
  --linea: #26414c;
  --linea-fuerte: #365867;
  --texto: #e8f1f3;
  --suave: #9fb6bf;
  --tenue: #92a9b3;
  --ok: #5ee0a8; --ok-t: #7bf0bc; --ok-f: #0f3b2d;
  --aviso: #ffc247; --aviso-t: #ffd273; --aviso-f: #3b2f0e;
  --malo: #ff6b5f; --malo-t: #ff9188; --malo-f: #43201d;
  --off: #8aa3ad;
  --acento: #7fd1ff; --acento-f: #0e3446; --sobre-acento: #04202e;
  --seg-vacio: #1b3540;
  --sx-com: #92a9b3; --sx-sec: #7fd1ff; --sx-clv: #7bf0bc; --sx-dir: #ffd273; --sx-val: #e8f1f3; --sx-tag: #b8a4ff;
  --mas-f: #0f3b2d; --menos-f: #43201d;
  --sombra-dlg: 0 28px 90px rgba(0, 0, 0, .55);
  --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --num: ui-rounded, "SF Pro Rounded", var(--fuente);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 16px;
  --r-s: 12px;
  --gutter: 20px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-tema]) { color-scheme: light; }
}
:root[data-tema="claro"] { color-scheme: light; }

@media (prefers-color-scheme: light) {
  :root:not([data-tema]) {
    --fondo: #e5edf0; --fondo-2: #f1f6f8; --panel: #ffffff; --panel-2: #f1f6f8; --panel-3: #e4edf0;
    --linea: #cddbe1; --linea-fuerte: #a6bbc4; --texto: #0f2129; --suave: #42606b; --tenue: #4f6b77;
    --ok: #0b8d5e; --ok-t: #066a47; --ok-f: #daf4e8;
    --aviso: #e2a000; --aviso-t: #7f5300; --aviso-f: #fff0c6;
    --malo: #cc3b30; --malo-t: #a52a21; --malo-f: #fde3e0;
    --off: #6b838d; --acento: #0a62c2; --acento-f: #dcebfb; --sobre-acento: #ffffff; --seg-vacio: #dbe6ea;
    --sx-com: #4f6b77; --sx-sec: #0a62c2; --sx-clv: #066a47; --sx-dir: #7f5300; --sx-val: #0f2129; --sx-tag: #5b3fc4;
    --mas-f: #daf4e8; --menos-f: #fde3e0; --sombra-dlg: 0 24px 70px rgba(15, 33, 41, .28);
  }
}
:root[data-tema="claro"] {
  --fondo: #e5edf0; --fondo-2: #f1f6f8; --panel: #ffffff; --panel-2: #f1f6f8; --panel-3: #e4edf0;
  --linea: #cddbe1; --linea-fuerte: #a6bbc4; --texto: #0f2129; --suave: #42606b; --tenue: #4f6b77;
  --ok: #0b8d5e; --ok-t: #066a47; --ok-f: #daf4e8;
  --aviso: #e2a000; --aviso-t: #7f5300; --aviso-f: #fff0c6;
  --malo: #cc3b30; --malo-t: #a52a21; --malo-f: #fde3e0;
  --off: #6b838d; --acento: #0a62c2; --acento-f: #dcebfb; --sobre-acento: #ffffff; --seg-vacio: #dbe6ea;
  --sx-com: #4f6b77; --sx-sec: #0a62c2; --sx-clv: #066a47; --sx-dir: #7f5300; --sx-val: #0f2129; --sx-tag: #5b3fc4;
  --mas-f: #daf4e8; --menos-f: #fde3e0; --sombra-dlg: 0 24px 70px rgba(15, 33, 41, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--fondo); color: var(--texto);
  font: 400 1rem/1.45 var(--fuente); -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--acento); }
code { font-family: var(--mono); font-size: .875em; }
b, strong { font-weight: 650; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.oculto-fuera { position: fixed; left: -9999px; top: 0; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--acento); color: var(--sobre-acento); padding: 10px 14px; border-radius: 10px; font-weight: 650; }
.saltar:focus { top: 12px; }

.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gira { animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.con-ico { display: inline-flex; align-items: center; gap: .5em; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-s); background: var(--panel-2); color: var(--texto);
  font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, transform .08s;
}
.btn:hover:not(:disabled) { background: var(--panel-3); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--suave { background: transparent; }
.btn--primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.btn--primario:hover:not(:disabled) { background: var(--acento); filter: brightness(1.08); }
.btn--peligro { background: transparent; border-color: color-mix(in oklab, var(--malo) 70%, var(--linea)); color: var(--malo-t); }
.btn--peligro:hover:not(:disabled) { background: var(--malo-f); }
.btn--icono { padding: 0; width: 44px; }
.btn--grande { min-height: 52px; font-size: 1rem; width: 100%; }
.btn--chico { min-height: 40px; padding: 0 12px; font-size: .875rem; }
.btn--ocupado { position: relative; color: transparent !important; pointer-events: none; }
.btn--ocupado::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--texto); border-right-color: transparent; border-radius: 50%; animation: gira .8s linear infinite; }
.btn--primario.btn--ocupado::after { border-color: var(--sobre-acento); border-right-color: transparent; }
@media (pointer: coarse), (max-width: 720px) {
  .btn { min-height: 48px; } .btn--icono { width: 48px; } .btn--chico { min-height: 44px; }
}

/* ---------- Cabecera y navegación ---------- */
.cab {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 20px; padding: 8px var(--gutter);
  min-height: 60px; background: color-mix(in oklab, var(--fondo) 88%, var(--panel)); border-bottom: 1px solid var(--linea);
}
.cab__marca { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; }
.cab__marca img { border-radius: 9px; }
.cab__nombre { font: 800 1.25rem/1 var(--num); letter-spacing: -.01em; }
.cab__nav { display: flex; gap: 4px; margin-right: auto; }
.cab__enlace { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; color: var(--suave); text-decoration: none; font-weight: 600; }
.cab__enlace:hover { background: var(--panel-2); color: var(--texto); }
.cab__enlace[aria-current="page"] { background: var(--panel-3); color: var(--texto); }
.cab__der { display: flex; align-items: center; gap: 8px; }
.cab__salir span { display: inline; }

/* ---------- Píldoras, avisos, mensajes ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .8125rem; font-weight: 650; white-space: nowrap; background: var(--panel-3); color: var(--suave); }
.pill--ok { background: var(--ok-f); color: var(--ok-t); }
.pill--aviso { background: var(--aviso-f); color: var(--aviso-t); }
.pill--malo { background: var(--malo-f); color: var(--malo-t); }
.pill--neutro { background: var(--panel-3); color: var(--suave); }
.avisos { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px var(--gutter) 0; }
.aviso-barra { flex: 1 1 420px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; min-height: 52px; border-radius: 14px; border: 1px solid; font-weight: 600; }
.aviso-barra .ico { width: 1.4em; height: 1.4em; }
.aviso-barra__t { flex: 1; min-width: 0; }
.aviso-barra--malo { background: var(--malo-f); border-color: color-mix(in oklab, var(--malo) 60%, transparent); color: var(--malo-t); }
.aviso-barra--disco { flex-basis: 100%; }
.aviso-barra--disco code { font-size: .92em; white-space: nowrap; }
.aviso-barra--aviso { background: var(--aviso-f); border-color: color-mix(in oklab, var(--aviso) 55%, transparent); color: var(--aviso-t); }
.error { display: flex; gap: 8px; align-items: flex-start; color: var(--malo-t); font-weight: 600; }
.error[hidden] { display: none; }
.ok-texto { display: flex; gap: 8px; align-items: center; color: var(--ok-t); font-weight: 600; }
.ok-texto.grande { font-size: 1.25rem; }
.cargando { display: flex; align-items: center; gap: 10px; color: var(--suave); }
.nota { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-s); background: var(--panel-2); border: 1px solid var(--linea); color: var(--suave); font-size: .9375rem; }
.nota--aviso { background: var(--aviso-f); border-color: color-mix(in oklab, var(--aviso) 50%, transparent); color: var(--aviso-t); display: block; }
.nota--aviso p { margin: 4px 0 8px; }
.codigo-bloque { display: block; padding: 10px 12px; border-radius: 10px; background: var(--fondo); color: var(--texto); font-size: .8125rem; user-select: all; word-break: break-all; }
.vacio { display: grid; justify-items: center; gap: 10px; padding: 48px 16px; color: var(--tenue); text-align: center; }
.vacio .ico { width: 2.4rem; height: 2.4rem; }

.toasts { position: fixed; z-index: 90; right: 16px; bottom: 16px; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--panel-3); border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra-dlg); animation: entra .2s ease-out; pointer-events: auto; }
.toast--ok { border-color: color-mix(in oklab, var(--ok) 60%, var(--linea)); }
.toast--error { border-color: color-mix(in oklab, var(--malo) 70%, var(--linea)); }
.toast--aviso { border-color: color-mix(in oklab, var(--aviso) 60%, var(--linea)); }
.toast--ok .ico { color: var(--ok); } .toast--error .ico { color: var(--malo); } .toast--aviso .ico { color: var(--aviso); }
.toast--sale { opacity: 0; transition: opacity .25s; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Estructura de la pantalla ---------- */
.principal { padding: 14px var(--gutter) 32px; outline: none; }
.tablero { display: grid; gap: 16px; }
.tablero__alto { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) {
  .tablero__alto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: stretch; }
}
.panel { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r); padding: 16px; }
.panel h2 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 8px; }

/* ---------- Franja de carga ---------- */
.carga { display: grid; gap: 12px; align-content: space-between; transition: opacity .3s; }
.carga--viejo .carga__medidores { opacity: .45; }
.carga__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.carga__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.carga__titulo h2 { margin: 0; font: 750 1.375rem/1.1 var(--num); letter-spacing: -.01em; }
.carga__modelo { color: var(--suave); font-size: .875rem; }
.fresco { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--panel-3); color: var(--suave); }
.fresco--ok .ico { color: var(--ok); }
.fresco--aviso { background: var(--aviso-f); color: var(--aviso-t); }
.fresco--malo { background: var(--malo-f); color: var(--malo-t); }
.carga__medidores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
.medidor { --c: var(--ok); display: grid; gap: 6px; align-content: start; min-width: 0; }
.medidor--aviso { --c: var(--aviso); } .medidor--critico { --c: var(--malo); } .medidor--sin-dato { --c: var(--off); }
.medidor__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.medidor__nombre { color: var(--suave); font-weight: 650; font-size: .9375rem; }
.medidor__marca { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 700; color: var(--c); }
.medidor--aviso .medidor__marca { color: var(--aviso-t); } .medidor--critico .medidor__marca { color: var(--malo-t); }
.medidor__valor { display: flex; align-items: baseline; gap: 3px; line-height: 1; }
.medidor__num { font: 700 clamp(2.4rem, 3.4vw, 4rem)/1 var(--num); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.medidor__ud { font: 600 1.125rem var(--num); color: var(--suave); font-style: normal; }
.medidor__pie { color: var(--suave); font-size: .8125rem; min-height: 1.2em; font-variant-numeric: tabular-nums; }
.seg {
  position: relative; height: 12px; background: var(--seg-vacio); border-radius: 3px; overflow: hidden;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px); mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px);
}
.seg__relleno { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); background: var(--c, var(--ok)); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.carga__pie { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 12px; border-top: 1px solid var(--linea); }
.dato { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: .875rem; }
.dato__k { color: var(--suave); }
.dato__v { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.dato__v--ok .ico { color: var(--ok); } .dato__v--aviso { color: var(--aviso-t); } .dato__v--critico { color: var(--malo-t); }

/* ---------- Claude ---------- */
.claude__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; height: 100%; }
.cl { --rail: var(--off); display: grid; gap: 12px; align-content: start; min-width: 0; padding: 16px; background: var(--panel); border: 1px solid var(--linea); border-left: 5px solid var(--rail); border-radius: var(--r); }
.cl--ok { --rail: var(--ok); } .cl--aviso { --rail: var(--aviso); }
.cl--malo { --rail: var(--malo); background: color-mix(in oklab, var(--malo) 11%, var(--panel)); border-color: color-mix(in oklab, var(--malo) 55%, var(--linea)); border-left-color: var(--malo); }
.cl__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cl__id { display: flex; align-items: baseline; gap: 10px; }
.cl__nombre { font: 750 1.625rem/1 var(--num); letter-spacing: -.02em; }
.cl__plan { color: var(--suave); font-size: .875rem; text-transform: capitalize; }
.cl__cuenta { color: var(--suave); font-size: .875rem; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cl__modelo { color: var(--tenue); font-family: var(--mono); font-size: .75rem; }
.cl__vent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.vent { --c: var(--ok); display: grid; gap: 6px; align-content: start; min-width: 0; }
.vent--aviso { --c: var(--aviso); } .vent--critico { --c: var(--malo); } .vent--sin-dato { --c: var(--off); }
.vent__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.vent__nombre { color: var(--suave); font-size: .875rem; font-weight: 600; flex: 1 1 auto; }
.vent__pct { order: 2; font: 700 1.5rem/1 var(--num); font-variant-numeric: tabular-nums; }
.vent__etq { order: 3; }
.vent__pct i { font: 500 .875rem var(--fuente); color: var(--suave); font-style: normal; }
.vent__etq { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 700; color: var(--aviso-t); }
.vent--critico .vent__etq { color: var(--malo-t); }
.vent__pie { color: var(--suave); font-size: .8125rem; min-height: 1.2em; }
.vent--sin-dato .seg { background: repeating-linear-gradient(135deg, var(--seg-vacio) 0 6px, transparent 6px 12px); }
.cl__nota { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: .8125rem; }
.cl__nota--error { color: var(--malo-t); }
.cl__alerta { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-s); background: color-mix(in oklab, var(--malo) 16%, transparent); }
.cl__alerta-t { font-weight: 700; font-size: 1.0625rem; color: var(--malo-t); }
.cl__alerta-d { color: var(--texto); font-size: .9375rem; }
.rc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.rc__texto { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; }
.rc__nombre { font-weight: 650; }
.rc__estado { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--suave); }
.rc--ok .rc__estado { color: var(--ok-t); } .rc--aviso .rc__estado { color: var(--aviso-t); } .rc--malo .rc__estado { color: var(--malo-t); }
.rc__aviso { font-size: .8125rem; color: var(--aviso-t); }
.rc__acciones { display: flex; align-items: center; gap: 8px; }
.enlace-ext { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .875rem; }

/* Interruptor */
.sw { position: relative; flex: none; width: 54px; height: 32px; padding: 0; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: var(--panel-3); transition: background-color .2s, border-color .2s; }
.sw::after { content: ""; position: absolute; inset: -9px -4px; }
.sw__bola { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--suave); transition: transform .2s cubic-bezier(.3, .7, .3, 1), background-color .2s; }
.sw[aria-checked="true"] { background: var(--ok); border-color: var(--ok); }
.sw[aria-checked="true"] .sw__bola { transform: translateX(22px); background: #fff; }
.sw:hover { border-color: var(--suave); }

/* ---------- Servicios ---------- */
.servicios { display: grid; gap: 12px; }
.barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.servicios__titulo { font: 700 1.125rem var(--num); }
.servicios__n { color: var(--tenue); font-weight: 500; }
.barra__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.seg-ctl { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--linea); }
.seg-ctl__op { white-space: nowrap; min-height: 48px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--suave); font-weight: 600; font-size: .875rem; }
.seg-ctl__op[aria-pressed="true"] { background: var(--panel-3); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.chip-sw { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 8px; border: 1px solid var(--linea); border-radius: 12px; background: transparent; color: var(--suave); font-weight: 600; font-size: .875rem; }
.chip-sw__caja { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--linea-fuerte); display: grid; place-items: center; }
.chip-sw[aria-checked="true"] { color: var(--texto); border-color: var(--acento); }
.chip-sw[aria-checked="true"] .chip-sw__caja { background: var(--acento); border-color: var(--acento); }
.chip-sw[aria-checked="true"] .chip-sw__caja::after { content: ""; width: 6px; height: 11px; border: solid var(--sobre-acento); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.solo-movil { display: none; }

/* Columnas de mampostería: cada familia ocupa lo suyo sin huecos debajo, y el orden sigue siendo el del documento. */
.familias { columns: 270px; column-gap: 14px; }
.familias > * { break-inside: avoid; margin-bottom: 14px; }
.fam { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; min-width: 0; }
.fam__cab {
  display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "t n . chev" "r r r chev"; align-items: center; gap: 0 8px; width: 100%; min-height: 60px;
  padding: 10px 14px; border: 0; background: transparent; text-align: left;
}
.fam__titulo { grid-area: t; font: 700 1.0625rem/1.3 var(--num); }
.fam__n { grid-area: n; min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--panel-3); color: var(--suave); font-size: .75rem; font-weight: 700; text-align: center; }
.fam__resumen { grid-area: r; color: var(--suave); font-size: .875rem; }
.fam__malo { color: var(--malo-t); font-weight: 650; }
.fam--procesos .fam__resumen { grid-area: n; }
.fam--procesos .fam__cab { grid-template-areas: "t t . chev" "n n n chev"; }
.fam__chev { grid-area: chev; transition: transform .2s; color: var(--suave); }
.fam--plegada .fam__chev { transform: rotate(-90deg); }
.fam__lista, .proc__lista { display: grid; gap: 8px; padding: 0 10px 10px; }
.fam--plegada .fam__lista, .fam--plegada .proc__lista { display: none; }

.tile {
  --est: var(--off); position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "ico nom mem" "ico est cpu" "bar bar bar";
  align-items: center; gap: 1px 10px; width: 100%; min-height: 58px; padding: 9px 12px 9px 14px; border: 1px solid var(--linea); border-radius: var(--r-s);
  background: var(--panel-2); text-align: left; transition: background-color .15s, border-color .15s;
}
.tile::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--est); }
.tile:hover { background: var(--panel-3); border-color: var(--linea-fuerte); }
.tile--activo { --est: var(--ok); } .tile--fallo { --est: var(--malo); } .tile--programado { --est: var(--acento); } .tile--trabajo { --est: var(--aviso); }
.tile--parado { --est: var(--off); }
.tile--fallo { background: color-mix(in oklab, var(--malo) 12%, var(--panel-2)); border-color: color-mix(in oklab, var(--malo) 50%, var(--linea)); }
.tile--parado .tile__nombre { color: var(--suave); }
.tile--oculto { opacity: .6; border-style: dashed; }
.tile__lampara { grid-area: ico; color: var(--est); width: 22px; height: 22px; }
.tile__nombre { grid-area: nom; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tile__etq { margin-left: 8px; font-style: normal; font-size: .6875rem; font-weight: 600; color: var(--suave); padding: 1px 6px; border-radius: 6px; background: var(--panel-3); }
.tile__estado { grid-area: est; color: var(--suave); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile--fallo .tile__estado { color: var(--malo-t); font-weight: 600; }
.tile--trabajo .tile__estado { color: var(--aviso-t); font-weight: 600; white-space: normal; overflow: visible; }
.tile__mem { grid-area: mem; justify-self: end; font: 650 .9375rem var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile__cpu { grid-area: cpu; justify-self: end; color: var(--suave); font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile__barra { grid-area: bar; display: block; height: 4px; margin-top: 7px; border-radius: 2px; background: var(--seg-vacio); overflow: hidden; }
.tile__barra i { display: block; height: 100%; width: var(--v, 0%); background: var(--est); border-radius: 2px; transition: width .6s; }
.tile--parado .tile__barra i { background: transparent; }
.fam--compacta .fam__lista { gap: 4px; padding-bottom: 8px; }
.fam--compacta .fam__cab { min-height: 54px; padding-block: 6px; }
.fam--compacta .tile:not(.tile--fallo):not(.tile--trabajo) { grid-template-areas: "ico nom mem"; min-height: 40px; padding-block: 3px; }
.fam--compacta .tile:not(.tile--fallo):not(.tile--trabajo) .tile__estado,
.fam--compacta .tile:not(.tile--fallo):not(.tile--trabajo) .tile__cpu,
.fam--compacta .tile:not(.tile--fallo):not(.tile--trabajo) .tile__barra { display: none; }

.proc { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 12px; padding: 8px 12px; border-radius: var(--r-s); background: var(--panel-2); font-size: .875rem; }
.proc__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.proc__mem { font: 650 .875rem var(--num); font-variant-numeric: tabular-nums; }
.proc__cpu { color: var(--suave); font-size: .75rem; align-self: center; font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.proc__barra { grid-column: 1 / -1; display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--seg-vacio); overflow: hidden; }
.proc__barra i { display: block; height: 100%; width: var(--v, 0%); background: var(--tenue); }

/* ---------- Diálogos ---------- */
dialog.dlg {
  padding: 0; border: 1px solid var(--linea-fuerte); border-radius: 20px; background: var(--panel); color: var(--texto);
  width: min(520px, calc(100vw - 24px)); max-width: none; height: fit-content; max-height: calc(100dvh - 32px); box-shadow: var(--sombra-dlg); overflow: hidden;
}
dialog.dlg[open] { display: flex; flex-direction: column; animation: dlg-entra .2s ease-out; }
dialog.dlg::backdrop { background: rgba(2, 9, 12, .66); }
dialog.dlg.dlg--ancho { width: min(760px, calc(100vw - 24px)); }
dialog.dlg.dlg--lado { margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(500px, 100vw); border-radius: 20px 0 0 20px; border-right: 0; animation-name: dlg-lado; }
@keyframes dlg-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes dlg-lado { from { transform: translateX(40px); opacity: 0; } }
.dlg__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 8px 20px; }
.dlg__titulo { font: 750 1.25rem/1.25 var(--num); letter-spacing: -.01em; }
.dlg__sub { color: var(--suave); font-size: .9375rem; margin-top: 2px; }
.dlg__cuerpo { display: grid; gap: 14px; align-content: start; padding: 8px 20px 18px; overflow-y: auto; flex: 1 1 auto; overscroll-behavior: contain; }
.dlg__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: var(--panel); }
.dlg__pie:empty { display: none; }
.dlg__form { display: grid; gap: 14px; }
.dlg__texto { color: var(--texto); }
body:has(dialog[open]) { overflow: hidden; }
@media (max-width: 720px) {
  dialog.dlg, dialog.dlg.dlg--ancho, dialog.dlg.dlg--lado { margin: auto 0 0 0; width: 100%; max-width: 100%; height: fit-content; max-height: 92dvh; border-radius: 22px 22px 0 0; border-inline: 0; border-bottom: 0; animation-name: dlg-hoja; }
  dialog.dlg.dlg--lado { height: 92dvh; }
  .dlg__pie > .btn { flex: 1 1 140px; }
}
@keyframes dlg-hoja { from { transform: translateY(40px); opacity: 0; } }

/* Campos */
.campo { display: grid; gap: 6px; }
.campo__etiqueta { font-weight: 650; font-size: .9375rem; }
.campo__input { width: 100%; min-height: 48px; padding: 0 14px; font-size: 1rem; border: 1px solid var(--linea-fuerte); border-radius: var(--r-s); background: var(--fondo-2); color: var(--texto); }
.campo__input:focus-visible { outline-offset: 0; border-color: var(--acento); }
select.campo__input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.campo__ayuda { color: var(--suave); font-size: .8125rem; display: flex; gap: 6px; align-items: flex-start; }
.caja { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--r-s); cursor: pointer; }
.caja__input { width: 22px; height: 22px; margin: 0; accent-color: var(--acento); flex: none; }

/* Pasos del inicio de sesión */
.pasos { display: flex; gap: 6px; margin: 0 0 4px; }
.paso { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); color: var(--tenue); font-size: .8125rem; font-weight: 600; min-width: 0; }
.paso__n { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--panel-3); font-weight: 700; }
.paso__n .ico { width: 14px; height: 14px; }
.paso--actual { background: var(--acento-f); color: var(--acento); }
.paso--actual .paso__n { background: var(--acento); color: var(--sobre-acento); }
.paso--hecho { color: var(--ok-t); } .paso--hecho .paso__n { background: var(--ok-f); color: var(--ok-t); }
.paso__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enlace-caja { display: grid; gap: 10px; }
.sh { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: var(--r-s); background: var(--fondo); border: 1px solid var(--linea); }
.sh code { flex: 1; min-width: 0; word-break: break-all; user-select: all; }
.sh__k { color: var(--suave); font-size: .8125rem; flex: none; }
.resultado { display: grid; gap: 10px; }

/* ---------- Detalle de un servicio ---------- */
.det__zona { display: grid; gap: 16px; }
.det__estado { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--r-s); font-weight: 700; font-size: 1.125rem; background: var(--panel-2); }
.det__estado .ico { width: 1.6em; height: 1.6em; }
.det__estado--ok { background: var(--ok-f); color: var(--ok-t); } .det__estado--malo { background: var(--malo-f); color: var(--malo-t); }
.det__estado--aviso { background: var(--aviso-f); color: var(--aviso-t); }
.det__datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dato-f { padding: 10px 12px; border-radius: var(--r-s); background: var(--panel-2); min-width: 0; }
.dato-f dt { color: var(--suave); font-size: .8125rem; }
.dato-f dd { font: 650 1.0625rem var(--num); font-variant-numeric: tabular-nums; margin-top: 2px; overflow-wrap: anywhere; }
.det__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.det__acciones .btn { flex: 1 1 150px; }
.det__fila { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }
.det__bd { display: grid; gap: 6px; }
.det__bd .btn { justify-content: flex-start; }
.det__bd .ico--fin { margin-left: auto; }
.det__bd-motivo { color: var(--suave); font-size: .875rem; }
.det__lectura { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: .875rem; }
.plega { border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--panel-2); }
.plega > summary { min-height: 48px; padding: 0 14px; display: flex; align-items: center; cursor: pointer; font-weight: 650; list-style: none; }
.plega > summary::-webkit-details-marker { display: none; }
.plega > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border: solid var(--suave); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.plega[open] > summary::after { transform: rotate(-135deg); }
.plega__cuerpo { display: grid; gap: 10px; padding: 4px 14px 14px; }

/* ---------- Páginas (configuración, usuarios, cuenta) ---------- */
.pagina { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1400px; margin-inline: auto; }
.pagina__titulo { font: 750 1.75rem/1.15 var(--num); letter-spacing: -.02em; }
.pagina__sub { color: var(--suave); margin-top: 4px; max-width: 70ch; }
.cuenta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.cuenta .panel { display: grid; gap: 12px; }
.form-alta__campos { align-items: start; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 10px 0; }
.usuario { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--linea); }
.usuario__id { display: grid; flex: 1 1 220px; min-width: 0; }
.usuario__id small { color: var(--suave); }
.usuario__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.usuario__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.bitacora__marco { display: grid; gap: 12px; }
.bitacora { display: grid; list-style: none; margin: 0; padding: 0; }
.bitacora__fila { display: grid; grid-template-columns: 11.5em minmax(0, 14em) minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linea); font-size: .875rem; }
.bitacora__cuando { color: var(--suave); font-variant-numeric: tabular-nums; }
.bitacora__quien { overflow-wrap: anywhere; }
.bitacora__que { display: grid; min-width: 0; }
.bitacora__que small { color: var(--suave); overflow-wrap: anywhere; }
.btn[aria-pressed="true"] { background: var(--panel-3); border-color: var(--suave); }
@media (max-width: 720px) {
  .bitacora__fila { grid-template-columns: minmax(0, 1fr) auto; }
  .bitacora__cuando { grid-column: 1; grid-row: 1; }
  .bitacora__res { grid-column: 2; grid-row: 1; }
  .bitacora__quien, .bitacora__que { grid-column: 1 / -1; }
}
.totp { display: grid; justify-items: center; gap: 12px; }
.qr { width: min(240px, 100%); height: auto; border-radius: 10px; }
.qr__fondo { fill: #fff; } .qr__modulos { fill: #000; }
.totp__clave { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }

.cfg { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cfg__lista { display: grid; gap: 8px; position: sticky; top: 76px; }
.cfg__item { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--panel); color: var(--texto); text-decoration: none; }
.cfg__item:hover { background: var(--panel-2); }
.cfg__item[aria-current="page"] { border-color: var(--acento); background: var(--acento-f); }
.cfg__item-t { display: grid; min-width: 0; flex: 1; }
.cfg__item-t small { color: var(--suave); }
.cfg__edit { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; color: var(--aviso-t); font-weight: 650; }
.cfg__editor { grid-template-columns: minmax(0, 1fr); min-width: 0; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r); padding: 14px; display: grid; gap: 12px; }
.cfg__panel { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.cfg__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cfg__cab .volver { display: none; }
.cfg__nombre { flex: 1 1 220px; min-width: 0; }
.cfg__nombre h2 { font-size: 1.125rem; margin: 0; }
.cfg__nombre p { color: var(--suave); font-size: .8125rem; }
.cfg__botones { display: flex; gap: 8px; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel-2); width: fit-content; max-width: 100%; overflow-x: auto; }
.tab { white-space: nowrap; justify-content: center; min-height: 42px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--suave); font-weight: 650; display: inline-flex; align-items: center; gap: 8px; }
.tab[aria-selected="true"] { background: var(--panel-3); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.tab__n { padding: 0 7px; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font-size: .75rem; }
.val { padding: 12px 14px; border-radius: var(--r-s); display: grid; gap: 6px; }
.val b { display: inline-flex; align-items: center; gap: 8px; }
.val pre { margin: 0; white-space: pre-wrap; font: .8125rem/1.5 var(--mono); }
.val--ok { background: var(--ok-f); color: var(--ok-t); } .val--aviso { background: var(--aviso-f); color: var(--aviso-t); } .val--malo { background: var(--malo-f); color: var(--malo-t); }
.busca-fila { display: flex; gap: 8px; align-items: center; }
.busca { flex: 1; }
.busca__n { color: var(--suave); font-size: .875rem; white-space: nowrap; min-width: 6.5em; }
.visor, .dif { max-height: 68dvh; min-height: 120px; overflow: auto; margin-top: 8px; border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--fondo-2); font: 13px/20px var(--mono); padding: 8px 0; }
.fila { display: flex; min-width: max-content; }
.num { flex: none; width: 52px; padding-right: 12px; text-align: right; color: var(--tenue); user-select: none; }
.lin { white-space: pre; padding-right: 16px; }
.t-com { color: var(--sx-com); font-style: italic; } .t-sec { color: var(--sx-sec); font-weight: 700; } .t-tag { color: var(--sx-tag); }
.t-clv { color: var(--sx-clv); } .t-sep { color: var(--tenue); } .t-val { color: var(--sx-val); } .t-dir { color: var(--sx-dir); font-weight: 600; }
mark { background: color-mix(in oklab, var(--aviso) 55%, transparent); color: inherit; border-radius: 3px; }
mark.actual { background: var(--aviso); color: #1b1300; outline: 2px solid var(--aviso); }
.ed { --lh: 20px; display: grid; grid-template-columns: 56px minmax(0, 1fr); height: min(66dvh, 640px); margin-top: 8px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-s); background: var(--fondo-2); overflow: hidden; }
.ed:focus-within { border-color: var(--acento); }
.ed__nums, .ed__area { margin: 0; padding: 10px 0; font: 13px/var(--lh) var(--mono); }
.ed__nums { padding-right: 10px; text-align: right; color: var(--tenue); overflow: hidden; user-select: none; border-right: 1px solid var(--linea); }
.ed__area { padding-inline: 12px; border: 0; background: transparent; color: var(--texto); resize: none; white-space: pre; overflow: auto; outline: none; tab-size: 4; }
.ed__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.dif__resumen { margin-top: 4px; }
.mas { color: var(--ok-t); } .menos { color: var(--malo-t); }
.dif__f { display: flex; min-width: max-content; }
.dif__f .num { width: 44px; padding-right: 8px; }
.dif__f--mas { background: var(--mas-f); } .dif__f--menos { background: var(--menos-f); }
.dif__s { flex: none; width: 22px; text-align: center; font-weight: 700; }
.dif__f--mas .dif__s { color: var(--ok-t); } .dif__f--menos .dif__s { color: var(--malo-t); }
.dif__t { white-space: pre; padding-right: 16px; }
.dif__hueco { color: var(--tenue); text-align: center; padding: 2px 0; }
.copias { display: grid; gap: 8px; margin-top: 8px; }
.copia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--panel-2); }
.copia__t { display: grid; } .copia__t small { color: var(--suave); }
.avisos-cfg { display: grid; gap: 8px; }

/* ---------- Acceso ---------- */
body.acceso { display: grid; place-items: center; padding: 20px; }
.acceso__centro { width: 100%; display: grid; place-items: center; }
.pase { position: relative; width: min(100%, 430px); padding: 34px 28px 28px; background: var(--panel); border: 1px solid var(--linea); border-radius: 24px; display: grid; gap: 14px; box-shadow: var(--sombra-dlg); }
.pase::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 8px; border-radius: 0 0 6px 6px; background: var(--acento); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px); mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px); }
.pase__marca { display: flex; align-items: center; gap: 12px; }
.pase__marca img { border-radius: 12px; }
.pase__nombre { font: 800 1.5rem var(--num); letter-spacing: -.02em; }
.pase__titulo { font: 750 1.625rem/1.2 var(--num); letter-spacing: -.02em; }
.pase__sub { color: var(--suave); }
.pase__nota { color: var(--suave); font-size: .875rem; margin-top: 2px; }
.pase__form { display: grid; gap: 14px; margin-top: 6px; }

/* ---------- Pantallas anchas y estrechas ---------- */
@media (min-width: 2200px) { :root { --gutter: 32px; } .familias { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
@media (max-width: 1100px) {
  .cfg { grid-template-columns: minmax(0, 1fr); }
  .cfg__lista { position: static; }
  .cfg--abierto .cfg__lista { display: none; }
  .cfg:not(.cfg--abierto) .cfg__editor { display: none; }
  .cfg__cab .volver { display: inline-flex; }
}
@media (max-width: 900px) {
  .cab__nav {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; margin: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 4px;
    background: color-mix(in oklab, var(--fondo) 90%, var(--panel)); border-top: 1px solid var(--linea); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .cab__enlace { flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-height: 54px; padding: 4px 2px; font-size: .75rem; }
  .cab__enlace .ico { width: 1.5em; height: 1.5em; }
  .cab__salir span { display: none; }
  .cab__der { margin-left: auto; }
  .principal { padding-bottom: 96px; }
  .toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 720px) {
  :root { --gutter: 12px; }
  .cab { padding-block: 6px; min-height: 56px; gap: 10px; }
  .principal { padding: 12px var(--gutter) 96px; }
  .toasts { bottom: calc(80px + env(safe-area-inset-bottom)); right: 12px; left: 12px; width: auto; }
  .panel, .cl { padding: 12px; }
  .carga__medidores { gap: 8px 12px; }
  .carga__cab { gap: 4px 10px; }
  .carga__modelo { display: none; }
  .carga__cab { flex-wrap: nowrap; justify-content: space-between; }
  .carga__pie { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .carga__pie .dato { display: grid; gap: 0; }
  .carga__pie .dato:nth-child(2) { display: none; }
  .carga { gap: 10px; }
  .aviso-barra { flex-basis: 100%; font-size: .9375rem; flex-wrap: wrap; }
  .aviso-barra .btn { flex: 1 1 100%; }
  .aviso-barra--malo .btn--primario { display: none; }
  .avisos { padding-top: 10px; }
  .medidor__num { font-size: 2.1rem; }
  .medidor__ud { font-size: .875rem; }
  .medidor__pie { font-size: .75rem; }
  .medidor__marca { font-size: .6875rem; }
  .carga__titulo h2 { font-size: 1.25rem; }
  .claude__lista { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cl__nombre { font-size: 1.5rem; }
  .familias { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .solo-movil { display: inline-flex; }
  .barra__ctl { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .seg-ctl { grid-column: 1 / -1; } .seg-ctl__op { flex: 1; min-height: 42px; }
  .fam__lista, .proc__lista { padding: 0 8px 8px; }
  .pagina__titulo { font-size: 1.5rem; }
  .tabs { width: 100%; } .tab { flex: 1; padding: 0 8px; }
  .cfg__botones { width: 100%; } .cfg__botones .btn { flex: 1; }
  .cfg__editor { padding: 10px; }
  .visor, .dif { max-height: 62dvh; }
  .ed { height: 60dvh; --lh: 22px; }
  .ed__nums, .ed__area { font-size: 16px; }
  .visor, .dif { font-size: 13px; }
  .busca-fila { flex-wrap: wrap; } .busca { flex: 1 1 100%; }
  .pase { padding: 30px 20px 22px; }
  .paso__t { display: none; } .paso--actual .paso__t { display: inline; }
}
@media (max-width: 440px) { .medidor__marca-t { display: none; } }
@media (max-width: 380px) {
  .cl__vent { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .gira { animation: none; }
  .btn--ocupado::after { animation: none; border-right-color: currentColor; }
}

/* Zonas táctiles de 48 px en pantallas táctiles y estrechas. */
@media (pointer: coarse), (max-width: 900px) {
  .cab__marca { min-height: 48px; padding-right: 6px; }
  .enlace-ext { min-height: 48px; }
  .chip-sw { min-height: 48px; }
  .tab { min-height: 48px; }
  .fam--compacta .tile:not(.tile--fallo):not(.tile--trabajo) { min-height: 48px; }
  .caja { min-height: 48px; }
}

.reg { margin: 0; max-height: 240px; overflow: auto; padding: 10px 12px; border-radius: 10px; background: var(--fondo); font: .75rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.reg-t { font-weight: 650; font-size: .875rem; margin-top: 4px; }
.reg-vacio { color: var(--suave); font-size: .875rem; }
.aviso-barra--aviso a { color: inherit; font-weight: 700; }
.aviso-barra--ts { flex-wrap: wrap; }
.aviso-barra--ts code { font-size: .8125rem; word-break: break-all; }
.sh--ts { margin-top: 6px; }
.pasos__txt { color: var(--suave); font-size: .875rem; font-weight: 650; margin-top: 6px; }

/* Página de herramienta de base de datos no disponible (la sirve el proxy de /bd/). */
.caido { display: grid; place-items: center; min-height: 100vh; padding: 16px; background: var(--fondo); color: var(--texto); }
.caido__marco { display: grid; gap: 14px; max-width: 46ch; padding: 24px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r); }
.caido__marco h1 { font: 750 1.5rem/1.2 var(--num); }