/* Paleta de marca tomada del logo: azul #3B5F8A, verde #5A9E8A, dorado #F2D98A */
:root {
  color-scheme: light;
  --fondo: #f3f5f8;
  --superficie: #ffffff;
  --superficie-2: #eef2f6;
  --borde: #dfe4ea;
  --texto: #14202e;
  --texto-2: #4b5868;
  --texto-3: #7b8696;
  --marca: #3b5f8a;
  --marca-2: #5a9e8a;
  --marca-3: #f2d98a;
  --acento: #3b5f8a;
  --acento-suave: #e6edf5;
  --acento-texto: #ffffff;
  --serie: #3b5f8a;
  --bien: #0ca30c;
  --aviso: #fab219;
  --serio: #ec835a;
  --critico: #d03b3b;
  --bien-texto: #006300;
  --aviso-texto: #8a5a00;
  --critico-texto: #b42323;
  --apagado: #cfd6de;
  --sombra: 0 1px 2px rgb(20 32 46 / .05), 0 1px 8px rgb(20 32 46 / .04);
  --radio: 10px;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #0f141a;
    --superficie: #161d25;
    --superficie-2: #1f2832;
    --borde: #2b3642;
    --texto: #f2f5f8;
    --texto-2: #b9c3ce;
    --texto-3: #8592a0;
    --acento: #8fb3e0;
    --acento-suave: #22324a;
    --serie: #8fb3e0;
    --bien-texto: #4cc94c;
    --aviso-texto: #fab219;
    --critico-texto: #ef7b7b;
    --apagado: #3a4654;
    --sombra: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #0f141a;
  --superficie: #161d25;
  --superficie-2: #1f2832;
  --borde: #2b3642;
  --texto: #f2f5f8;
  --texto-2: #b9c3ce;
  --texto-3: #8592a0;
  --acento: #8fb3e0;
  --acento-suave: #22324a;
  --serie: #8fb3e0;
  --bien-texto: #4cc94c;
  --aviso-texto: #fab219;
  --critico-texto: #ef7b7b;
  --apagado: #3a4654;
  --sombra: none;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[hidden] { display: none !important; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; margin: 0 0 12px; letter-spacing: -.01em; }
h2 { font-size: 15px; margin: 0 0 10px; }
h3 { font-size: 12px; margin: 14px 0 6px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; }
code, pre, .mono { font-family: var(--mono); font-size: 12.5px; }
pre { white-space: pre-wrap; word-break: break-all; margin: 0; }
.muted { color: var(--texto-3); }
.error { color: var(--critico-texto); }
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* ---------- Barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 8px 20px; background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: 8px; color: var(--texto); font-size: 16px; }
.marca:hover { text-decoration: none; }
.marca b { color: var(--acento); font-weight: 800; letter-spacing: -.01em; }
.marca span { color: var(--texto-3); font-weight: 500; }
main { padding: 20px; max-width: 1440px; margin: 0 auto; }

/* ---------- Componentes ---------- */
.panel {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 16px 18px; box-shadow: var(--sombra); min-width: 0;
}
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.espacio { flex: 1; }
.cab-panel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cab-panel h2 { margin: 0; }

.btn {
  font: inherit; cursor: pointer; border: 1px solid var(--borde); background: var(--superficie);
  color: var(--texto); border-radius: 7px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover:not(:disabled) { background: var(--superficie-2); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn.primario:hover:not(:disabled) { background: #314f74; }
.btn.peligro { color: var(--critico-texto); }
.btn.chico { padding: 3px 9px; font-size: 12.5px; }
.btn.icono { padding: 4px 7px; }
.grupo-btn { display: inline-flex; }
.grupo-btn .btn { border-radius: 0; margin-left: -1px; }
.grupo-btn .btn:first-child { border-radius: 7px 0 0 7px; margin-left: 0; }
.grupo-btn .btn:last-child { border-radius: 0 7px 7px 0; }
input, select, textarea {
  font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 7px; padding: 6px 8px; max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento-suave); border-color: var(--acento); }
input[type=checkbox] { accent-color: var(--marca); width: 16px; height: 16px; margin: 0; }
textarea { width: 100%; font-family: var(--mono); font-size: 12.5px; }
label { display: grid; gap: 4px; color: var(--texto-2); font-size: 13px; }

.pildora {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px;
  background: var(--superficie-2); font-size: 12.5px; white-space: nowrap;
}

/* Estado: siempre ícono + texto, nunca solo color */
.est { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 600; font-size: 13px; }
.est::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); flex: none; }
.est.on { color: var(--bien-texto); } .est.on::before { background: var(--bien); box-shadow: 0 0 0 3px rgb(12 163 12 / .15); }
.est.off { color: var(--critico-texto); } .est.off::before { background: var(--critico); border-radius: 2px; transform: rotate(45deg); }
.est.ota { color: var(--acento); } .est.ota::before { background: var(--acento); border-radius: 2px; }
.est.desc { color: var(--texto-3); font-weight: 400; }
.nivel-bien { color: var(--bien-texto); }
.nivel-aviso { color: var(--aviso-texto); }
.nivel-mal { color: var(--critico-texto); font-weight: 600; }

/* ---------- Tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.tile { position: relative; overflow: hidden; }
.tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--marca-2); }
.tile.t-mal::before { background: var(--critico); }
.tile.t-aviso::before { background: var(--aviso); }
.tile.t-ota::before { background: var(--marca); }
.tile .num { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.tile .lbl { color: var(--texto-2); font-size: 13px; }

/* ---------- Tablas ---------- */
.tabla-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
th { font-size: 11.5px; color: var(--texto-3); font-weight: 600; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--superficie-2); }
tr.off td { background: color-mix(in srgb, var(--critico) 4%, transparent); }
tr.off td .modnom b { color: var(--texto-2); }
.sub { display: block; font-size: 12px; color: var(--texto-3); }

/* Encabezado de condominio */
tr.grupo td { background: transparent; border-bottom: 1px solid var(--borde); padding-top: 18px; }
tr.grupo:first-child td { padding-top: 6px; }
.cond { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cond b { font-size: 14.5px; }
.cond .resumen { font-size: 12.5px; color: var(--texto-3); }

/* Tarjetas de condominio en la flota */
.cab-flota { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 4px 2px 12px; }
.cab-flota h1 { margin: 0; font-size: 18px; }
.condos { display: grid; gap: 16px; }
.condo { padding: 0; overflow: hidden; border-top: 4px solid var(--marca-2); }
.condo.con-falla { border-top-color: var(--critico); }
.condo-cab { display: flex; align-items: center; gap: 12px; padding: 14px 18px 10px;
  background: linear-gradient(to bottom, var(--acento-suave), transparent); }
.condo-cab > div { flex: 1; min-width: 0; }
.condo-cab h2 { font-size: 19px; margin: 0 0 2px; letter-spacing: -.01em; }
.condo-cab .resumen { font-size: 13px; color: var(--texto-2); }
.condo-num { font-family: var(--mono); font-size: 11.5px; font-weight: 400; color: var(--texto-3); border: 1px solid var(--borde);
  border-radius: 6px; padding: 1px 7px; background: var(--superficie); vertical-align: middle; margin-left: 6px; }

/* Indicadores de luz y agua en el encabezado del condominio */
.indicadores { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.indicador { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 10px;
  background: var(--superficie); border: 1px solid var(--borde); color: var(--texto); width: 180px; min-height: 52px; }
a.indicador:hover { text-decoration: none; border-color: var(--acento); }
.indicador b { display: block; font-size: 15px; line-height: 1.15; }
.indicador small { display: block; font-size: 11.5px; color: var(--texto-3); line-height: 1.3; }
.ico-grande { flex: none; }
.ico-grande .base, .ico-grande .tachado, .ico-grande .tanque-borde { fill: none; stroke-width: 2; stroke-linecap: round; }
/* Luz: bombillo dorado (color del logo) con halo */
.luz-si .halo { fill: var(--marca-3); opacity: .35; }
.luz-si .bombillo { fill: var(--marca-3); stroke: #c9a227; stroke-width: 1.5; }
.luz-si .base { stroke: var(--texto-2); }
.luz-no { border-color: color-mix(in srgb, var(--critico) 50%, var(--borde));
  background: color-mix(in srgb, var(--critico) 8%, var(--superficie)); }
.luz-no b { color: var(--critico-texto); }
.luz-no .bombillo { fill: none; stroke: var(--texto-3); stroke-width: 1.6; }
.luz-no .base { stroke: var(--texto-3); }
.luz-no .tachado { stroke: var(--critico); stroke-width: 2.4; }
/* Agua: tanque con el nivel real */
.agua .agua-cuerpo { fill: #4a90d9; }
.agua .agua-ola { fill: #7db4ea; }
.agua .tanque-borde { stroke: var(--texto-2); }
.agua-sin b { color: var(--texto-2); font-weight: 600; }
.agua-sin .tanque-borde { stroke: var(--texto-3); stroke-dasharray: 3 2.5; }
.agua-baja b { color: var(--critico-texto); }
.agua-baja .agua-cuerpo { fill: var(--critico); }
.agua-baja .agua-ola { fill: #e57373; }
@media (max-width: 700px) {
  .condo-cab { flex-wrap: wrap; }
  .indicadores { justify-content: flex-start; width: 100%; }
}
.condo .tabla-wrap { padding: 0 8px 6px; }
.tabla-flota { table-layout: fixed; min-width: 900px; }
.tabla-flota tbody tr:last-child td { border-bottom: none; }
.tabla-flota .c-mod { width: 25%; } .tabla-flota .c-est { width: 11%; } .tabla-flota .c-sen { width: 11%; }
.tabla-flota .c-bat { width: 12%; } .tabla-flota .c-ver { width: 10%; } .tabla-flota .c-act { width: 9%; }
.tabla-flota .c-rei { width: 12%; } .tabla-flota .c-vis { width: 10%; }
.tabla-flota td { overflow: hidden; text-overflow: ellipsis; }

/* Teléfono de la SIM */
.tel { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.tel svg { color: var(--marca-2); }
.tel-sub { margin: 2px 0 0 24px; }
.aviso-panel { border-left: 4px solid var(--aviso); }
.tabla-sims input, .tabla-sims select { min-width: 120px; }

/* Nombre del módulo + número a la derecha */
.modnom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.modnom .ico { color: var(--marca); flex: none; display: inline-flex; }
.modnom b { font-weight: 600; white-space: nowrap; }
.id { font-family: var(--mono); font-size: 11.5px; color: var(--texto-2); background: var(--superficie-2);
  border: 1px solid var(--borde); padding: 0 6px; border-radius: 5px; white-space: nowrap; }

/* Barras de señal y batería */
.senal, .bat { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.senal svg rect { fill: var(--apagado); }
.senal.s-bien svg rect.on { fill: var(--bien); }
.senal.s-aviso svg rect.on { fill: var(--aviso); }
.senal.s-mal svg rect.on { fill: var(--critico); }
.senal small, .bat small { font-size: 12px; color: var(--texto-3); }
.bat svg .caja { fill: none; stroke: var(--texto-3); stroke-width: 1.4; }
.bat svg .nub { fill: var(--texto-3); }
.bat.b-bien svg .carga { fill: var(--bien); }
.bat.b-aviso svg .carga { fill: var(--aviso); }
.bat.b-mal svg .carga { fill: var(--critico); }
.bat .rayo { color: var(--aviso-texto); font-size: 12px; }

/* ---------- Ficha ---------- */
.cabecera { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.cabecera h1 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--texto-2); }
.texto-largo { white-space: pre-wrap; display: block; line-height: 1.45; }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.lista-eventos { list-style: none; padding: 0; margin: 0; max-height: 420px; overflow: auto; }
.lista-eventos li { display: grid; grid-template-columns: 120px 90px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.lista-eventos .tipo { font-size: 12px; color: var(--texto-3); }
@media (max-width: 640px) {
  .lista-eventos li { grid-template-columns: 1fr; gap: 0; }
}
/* Eventos: línea de tiempo por día */
.eventos { list-style: none; padding: 0; margin: 0; max-height: 460px; overflow-y: auto; }
.ev-dia { position: sticky; top: 0; z-index: 1; background: var(--superficie); padding: 10px 0 6px;
  font-size: 11.5px; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; }
.ev-dia::first-letter { text-transform: uppercase; }
.ev { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 8px 4px 10px; position: relative; }
.ev + .ev { border-top: 1px solid var(--borde); }
.ev-punto { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--texto-3); }
.ev-cuerpo { min-width: 0; }
.ev-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.ev-cab time { margin-left: auto; font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.ev-tipo { font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 1px 7px; border-radius: 5px;
  background: var(--superficie-2); color: var(--texto-2); }
.ev-rep { font-size: 11px; color: var(--texto-3); border: 1px solid var(--borde); border-radius: 99px; padding: 0 6px; }
.ev-texto { color: var(--texto); line-height: 1.45; overflow-wrap: anywhere; font-size: 13.5px; }
.ev-bien .ev-punto { background: var(--bien); }
.ev-bien .ev-tipo { color: var(--bien-texto); background: color-mix(in srgb, var(--bien) 12%, transparent); }
.ev-mal .ev-punto { background: var(--critico); }
.ev-mal .ev-tipo { color: var(--critico-texto); background: color-mix(in srgb, var(--critico) 12%, transparent); }
.ev-aviso .ev-punto { background: var(--aviso); }
.ev-aviso .ev-tipo { color: var(--aviso-texto); background: color-mix(in srgb, var(--aviso) 15%, transparent); }
.ev-marca .ev-punto, .ev-info .ev-punto { background: var(--acento); }
.ev-marca .ev-tipo, .ev-info .ev-tipo { color: var(--acento); background: var(--acento-suave); }
.ev-gris .ev-texto { color: var(--texto-2); }

.etq { display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: 5px; background: var(--superficie-2); color: var(--texto-2); font-weight: 600; }
.etq.mal { color: var(--critico-texto); background: color-mix(in srgb, var(--critico) 10%, transparent); }
.etq.aviso { color: var(--aviso-texto); background: color-mix(in srgb, var(--aviso) 14%, transparent); }
.etq.info { color: var(--acento); background: var(--acento-suave); }



/* ---------- Ficha: config y comunicación ---------- */
.rapido { display: grid; }
.rapido .campo { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(120px, 170px); gap: 12px; align-items: center;
  padding: 8px 4px; border-bottom: 1px solid var(--borde); border-left: 3px solid transparent; }
.rapido .campo .nombre { color: var(--texto); }
.rapido .campo .nombre small { display: block; color: var(--texto-3); font-size: 12px; }
.rapido .campo input, .rapido .campo select { width: 100%; }
.rapido .campo.desact { opacity: .55; }
.rapido .campo.cambiado { border-left-color: var(--marca-3); background: color-mix(in srgb, var(--marca-3) 10%, transparent); }

.chk { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; }
.com { display: flex; flex-direction: column; }
.log { height: 380px; overflow-y: auto; padding: 6px 0; margin: 0 -18px -16px; border-top: 1px solid var(--borde);
  font-family: var(--mono); font-size: 12.5px; }
.log .l { display: grid; grid-template-columns: 64px 18px 1fr; gap: 6px; padding: 3px 18px; align-items: baseline; }
.log .l:hover { background: var(--superficie-2); }
.log .t { color: var(--texto-3); }
.log .f { text-align: center; color: var(--texto-3); }
.log .x { overflow-wrap: anywhere; min-width: 0; }
.log .tx .f, .log .tx .x { color: var(--acento); }
.log .rx .f { color: var(--marca-2); }
.log .timeout .x, .log .error .x, .log .rx.err .x { color: var(--critico-texto); }
.log .lwt .x, .log .acceso .x, .log .evt .x { color: var(--texto-2); }
.log .ext .x { color: var(--aviso-texto); }
.log .reinicio .f { color: var(--aviso-texto); }
.log .reinicio.err .x, .log .panic .x, .log .panic .f { color: var(--critico-texto); }
.log .reinicio, .log .panic { background: color-mix(in srgb, var(--aviso) 6%, transparent); }
.log .auto { opacity: .6; }
.log details summary { cursor: pointer; }
.log details pre { margin: 4px 0; padding: 8px; background: var(--superficie-2); border-radius: 6px; max-height: 260px; overflow: auto; }
.log .vacio { padding: 20px 18px; color: var(--texto-3); font-family: system-ui, sans-serif; }

/* ---------- Progreso ---------- */
.barra-prog { height: 8px; background: var(--superficie-2); border-radius: 99px; overflow: hidden; min-width: 80px; }
.barra-prog > i { display: block; height: 100%; background: var(--marca-2); border-radius: 99px; }

/* ---------- Diálogo / toast ---------- */
dialog {
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto);
  padding: 20px; width: min(560px, calc(100vw - 32px));
}
dialog::backdrop { background: rgb(10 18 28 / .5); }
dialog h2 { margin: 0; }
.confirmar-texto { white-space: pre-wrap; color: var(--texto-2); line-height: 1.5; }
.btn.peligro-lleno { background: var(--critico); border-color: var(--critico); color: #fff; }
.btn.peligro-lleno:hover:not(:disabled) { background: #b42f2f; }
.toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px);
  background: var(--texto); color: var(--fondo); padding: 9px 16px; border-radius: 8px; opacity: 0;
  transition: opacity .2s; pointer-events: none; z-index: 20;
}
.toast.ver { opacity: 1; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--marca-3) 25%, transparent), transparent 45%), var(--fondo); }
.login-box { display: grid; gap: 14px; width: min(340px, 100%); padding: 26px; }
.login-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-marca div { display: grid; line-height: 1.1; }
.login-marca b { font-size: 24px; color: var(--acento); font-weight: 800; }
.login-marca span { color: var(--texto-3); }

@media (max-width: 640px) {
  main { padding: 14px 16px; }
  .barra { padding: 8px 16px; gap: 10px; }
}

/* ---------- Comunicación y Eventos: sin barras de desplazamiento ---------- */
/* Tarjeta: muestra lo último (abajo); lo anterior se corta arriba con un
   desvanecido y se ve con "Ver todo". No se puede deslizar dentro. */
.recorte { overflow: hidden !important; display: flex; flex-direction: column; justify-content: flex-end;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 48px); }
.eventos.recorte { height: 380px; max-height: none; }
.recorte > * { flex: none; }
.recorte .ev-dia { position: static; }
/* Vista en grande: se desliza con rueda/dedo, sin barra visible */
.desliza { overflow-y: auto !important; scrollbar-width: none; }
.desliza::-webkit-scrollbar, .log::-webkit-scrollbar, .eventos::-webkit-scrollbar,
.lista-eventos::-webkit-scrollbar { display: none; }
.log, .eventos, .lista-eventos { scrollbar-width: none; }
dialog.expandido { width: min(1100px, calc(100vw - 32px)); height: calc(100vh - 48px); max-height: none;
  display: flex; flex-direction: column; padding: 16px 20px; }
dialog.expandido:not([open]) { display: none; }
dialog.expandido .log { flex: 1; height: auto; margin: 0 -20px -16px; }
dialog.expandido .eventos { flex: 1; max-height: none; }

/* Etiqueta de red (LTE / WiFi) junto a la señal */
.red-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--texto-3);
  border: 1px solid var(--borde); border-radius: 4px; padding: 0 4px; line-height: 15px; }
.senal.wifi svg circle { fill: var(--apagado); }
.senal.wifi svg .arco { fill: none; stroke: var(--apagado); stroke-width: 1.8; stroke-linecap: round; }
.senal.wifi.s-bien svg circle.on { fill: var(--bien); }
.senal.wifi.s-bien svg .arco.on { stroke: var(--bien); }
.senal.wifi.s-aviso svg circle.on { fill: var(--aviso); }
.senal.wifi.s-aviso svg .arco.on { stroke: var(--aviso); }
.senal.wifi.s-mal svg circle.on { fill: var(--critico); }
.senal.wifi.s-mal svg .arco.on { stroke: var(--critico); }
.senal.wifi.s-nd svg circle { fill: var(--texto-3); }
.senal.wifi.s-nd svg .arco { stroke: var(--texto-3); opacity: .55; }

/* Motivo de reinicio clicable y su explicación */
button.razon { border: none; font: inherit; font-size: 11.5px; font-weight: 600; cursor: help;
  text-decoration: underline dotted; text-underline-offset: 3px; }
button.razon:hover { filter: brightness(1.15); }
dialog.explica { width: min(480px, calc(100vw - 32px)); }
dialog.explica h2 { margin: 0; }
dialog.explica p { margin: 0; color: var(--texto-2); line-height: 1.5; }
dialog.explica .consejo { border-left: 3px solid var(--marca-2); padding: 6px 10px; background: var(--superficie-2); border-radius: 4px; color: var(--texto); }

/* Provisionador */
.prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
.prov-grid input, .prov-grid select { width: 100%; }
.prov-mod { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; margin-top: 12px;
  border-left: 4px solid var(--marca-2); background: var(--superficie); }
.prov-mod .cab-panel { margin-bottom: 10px; }
.prov-mod .ico { color: var(--marca); display: inline-flex; }
.prov-nombre { font-weight: 600; font-size: 15px; border-color: transparent; background: transparent; padding: 4px 6px; min-width: 220px; }
.prov-nombre:hover, .prov-nombre:focus { border-color: var(--borde); background: var(--superficie); }
.prov-linea { margin: 12px 0 8px; padding: 10px 12px; background: var(--superficie-2); border-radius: 8px;
  font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-all; user-select: all; }

/* ---------- Barra: reloj, ajustes y áreas seguras del iPhone ---------- */
.reloj { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; color: var(--texto-2); white-space: nowrap; }
.reloj b { color: var(--texto); font-size: 15px; }
.r-fecha { font-size: 12.5px; display: inline-block; }
.r-fecha::first-letter { text-transform: uppercase; }
#btn-ajustes { color: var(--texto-2); }
#btn-ajustes:hover { color: var(--texto); }
.barra { padding-top: max(8px, env(safe-area-inset-top)); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
main { padding-bottom: max(20px, env(safe-area-inset-bottom)); }

/* ---------- Ajustes ---------- */
.ajustes { display: grid; gap: 2px; }
.ajuste { display: grid; grid-template-columns: 1fr minmax(120px, 220px); gap: 14px; align-items: center; padding: 10px 2px;
  border-bottom: 1px solid var(--borde); color: var(--texto); }
.ajuste:last-child { border-bottom: none; }
.ajuste b { display: block; font-weight: 600; font-size: 14px; }
.ajuste small { display: block; color: var(--texto-3); font-size: 12px; margin-top: 2px; }
.ajuste input { width: 100%; }
.chk-grande { grid-template-columns: 22px 1fr; }
.chk-grande input { width: 20px; height: 20px; }
.barra-guardar { position: sticky; bottom: 0; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--fondo) 70%, transparent); }

/* ---------- Teléfono ---------- */
@media (max-width: 760px) {
  .barra { gap: 8px; }
  .marca span, .marca b, #broker .muted { display: none; }
  .reloj { flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.1; }
  .r-fecha { font-size: 11px; }
  #broker { padding: 3px 8px; }
  #broker .est { font-size: 0; gap: 0; }            /* solo el punto de estado */
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile .num { font-size: 24px; }
  .cab-flota { margin: 4px 0 10px; }
  .cab-flota > .muted { display: none; }
  .condo-cab { padding: 12px 12px 8px; flex-wrap: wrap; }
  .condo-cab > div { flex-basis: 100%; }
  .indicadores { width: 100%; justify-content: flex-start; }
  .tabla-flota tr.off { background: color-mix(in srgb, var(--critico) 5%, transparent); }
  .condo-cab h2 { font-size: 17px; }
  .indicador { width: auto; flex: 1; min-width: 140px; }
  .condo .tabla-wrap { padding: 0 6px 6px; overflow: visible; }
  /* La tabla de módulos pasa a fichas: nombre y estado arriba, el resto en dos columnas con su etiqueta. */
  .tabla-flota { min-width: 0; table-layout: auto; }
  .tabla-flota colgroup, .tabla-flota thead { display: none; }
  .tabla-flota, .tabla-flota tbody { display: block; }
  .tabla-flota tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 8px;
    border-bottom: 1px solid var(--borde); }
  .tabla-flota tr:last-child { border-bottom: none; }
  .tabla-flota td { width: auto !important; background: none !important;
    display: flex; flex-direction: column; gap: 2px; padding: 0; border: none; overflow: visible; min-width: 0; }
  .tabla-flota td > * { align-self: flex-start; }
  .tabla-flota td.c-mod { grid-column: 1 / -1; }
  .tabla-flota td.c-est { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; }
  .tabla-flota td[data-l]::before { content: attr(data-l); font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--texto-3); }
  .tabla-flota td .sub { display: inline; }
  .modnom b { white-space: normal; }
  .ajuste { grid-template-columns: 1fr; gap: 6px; }
  .chk-grande { grid-template-columns: 22px 1fr; }
}

/* Firmware alojado en el monitor */
.fw-acciones { gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); }
.fw-acciones input[type=file] { padding: 5px; }