/* Torre de Control. Paleta basada en el azul del ERP (#1570a6). Tema claro u oscuro: automático o
   elegido con el botón de la barra. El modo pantalla siempre es oscuro. */

:root {
    color-scheme: light;
    --fondo: #F5F7F9;
    --superficie: #FFFFFF;
    --pantalla: #EEF2F5;
    --texto: #15212C;
    --texto-2: #4A5A68;
    --linea: #D8E0E7;
    --pista: #E6ECF1;
    --acento: #1570A6;
    --acento-suave: #E3EFF7;
    --ok: #2F8A57;
    --aviso: #B7800A;
    --critico: #B83A2E;
    --apagado: #8B98A5;
    --titulo: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
    --cuerpo: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

/* Tema: automático según el sistema, o el que se eligió con el botón de la barra (data-theme en <html>). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --fondo: #0F161D;
        --superficie: #16202A;
        --pantalla: #121B24;
        --texto: #E4EBF1;
        --texto-2: #9DB0C0;
        --linea: #2A3947;
        --pista: #223040;
        --acento: #5AAEE0;
        --acento-suave: #18344A;
        --ok: #5CC08A;
        --aviso: #E0B048;
        --critico: #EE7B6E;
        --apagado: #6E7F8F;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --fondo: #0F161D;
    --superficie: #16202A;
    --pantalla: #121B24;
    --texto: #E4EBF1;
    --texto-2: #9DB0C0;
    --linea: #2A3947;
    --pista: #223040;
    --acento: #5AAEE0;
    --acento-suave: #18344A;
    --ok: #5CC08A;
    --aviso: #E0B048;
    --critico: #EE7B6E;
    --apagado: #6E7F8F;
}

/* Modo pantalla: siempre oscuro, se ve mejor de lejos y en una oficina con luz. */
body.modo-pantalla {
    color-scheme: dark;
    --fondo: #0B1117;
    --superficie: #131C25;
    --pantalla: #0E151C;
    --texto: #EAF0F5;
    --texto-2: #A7B8C7;
    --linea: #263545;
    --pista: #223040;
    --acento: #5AAEE0;
    --acento-suave: #18344A;
    --ok: #5CC08A;
    --aviso: #E8B84F;
    --critico: #F27F72;
    --apagado: #6E7F8F;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fondo); color: var(--texto); font: 15px/1.55 var(--cuerpo); }
h1, h2, h3 { font-family: var(--titulo); line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: 30px; font-weight: 700; }
h2 { font-size: 22px; font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; }
p { margin: 0 0 10px; max-width: 75ch; }
a { color: var(--acento); }
code, pre, .mono { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- barra superior ---------- */
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 10px 20px; background: var(--superficie); border-bottom: 1px solid var(--linea); }
.marca { font: 700 20px var(--titulo); letter-spacing: .02em; color: var(--texto); text-decoration: none; }
.menu { display: flex; flex-wrap: wrap; gap: 4px; }
.menu a { padding: 5px 12px; border-radius: 4px; color: var(--texto-2); text-decoration: none; font-size: 14px; }
.menu a:hover { color: var(--acento); }
.menu a.activa { background: var(--acento); color: #fff; }
.sesion { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--texto-2); }
.sesion form { margin: 0; }
.contenido { padding: 16px 20px 48px; max-width: 1500px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

.barra-pantalla { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 8px 20px; background: var(--superficie); border-bottom: 1px solid var(--linea); }
.barra-pantalla .reloj { font: 500 20px var(--mono); font-variant-numeric: tabular-nums; color: var(--texto); }
.controles-pantalla { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.controles-pantalla .boton { padding: 5px 10px; font-size: 13px; text-decoration: none; }
.modo-pantalla .contenido { max-width: none; }
body.sin-cursor, body.sin-cursor * { cursor: none !important; }

.pie { padding: 0 20px 20px; text-align: center; font-size: 12px; }
.pie a { color: var(--texto-2); }

/* ---------- controles ---------- */
input, select, button, textarea { font: 14px var(--cuerpo); color: var(--texto); }
input[type=text], input[type=email], input[type=url], input[type=datetime-local], select {
    background: var(--superficie); border: 1px solid var(--linea); border-radius: 4px; padding: 6px 9px;
}
.boton { background: var(--acento); color: #fff; border: 0; border-radius: 4px; padding: 7px 14px; cursor: pointer; font-weight: 500; }
.boton:hover { filter: brightness(1.08); }
.boton.secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--linea); }
.boton.secundario:hover { border-color: var(--acento); color: var(--acento); }
.boton.peligro { background: var(--critico); }
.boton[disabled] { opacity: .5; cursor: not-allowed; }
.boton-texto { background: none; border: 0; color: var(--acento); cursor: pointer; padding: 0; }
.boton-tema { background: none; border: 1px solid var(--linea); border-radius: 99px; color: var(--texto-2); cursor: pointer; font: 500 12px var(--cuerpo); padding: 4px 10px; white-space: nowrap; }
.boton-tema:hover { color: var(--texto); border-color: var(--texto-2); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label, .etiqueta { font-size: 12px; color: var(--texto-2); }
.nota { font-size: 13px; color: var(--texto-2); }
.error { color: var(--critico); font-size: 14px; }
.exito { color: var(--ok); font-size: 14px; }

.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.tarjeta > h2 { margin-bottom: 2px; }
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }

.tabla-contenedor { overflow-x: auto; border: 1px solid var(--linea); border-radius: 6px; background: var(--superficie); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
th { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); background: var(--fondo); }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.sin-corte { white-space: nowrap; }
.texto-critico { color: var(--critico); font-weight: 600; }
.texto-aviso { color: var(--aviso); font-weight: 600; }

.salida { background: var(--pantalla); border: 1px solid var(--linea); border-radius: 6px; padding: 12px; min-height: 180px; max-height: 60vh; overflow: auto; white-space: pre; margin: 0; font-size: 13px; }

/* ---------- estados ---------- */
.estado { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
.estado::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.estado.ok { color: var(--ok); } .estado.aviso { color: var(--aviso); } .estado.critico { color: var(--critico); } .estado.apagado { color: var(--apagado); }
.pastilla { display: inline-block; font: 600 11px/1 var(--mono); letter-spacing: .05em; padding: 4px 7px; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap; }
.pastilla.ok { color: var(--ok); } .pastilla.aviso { color: var(--aviso); } .pastilla.critico { color: var(--critico); } .pastilla.apagado { color: var(--apagado); } .pastilla.acento { color: var(--acento); }

.medidor { display: flex; align-items: center; gap: 6px; font: 12px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.medidor span { display: block; width: 60px; height: 7px; border-radius: 2px; background: var(--pista); overflow: hidden; }
.medidor i { display: block; height: 100%; }
.medidor i.ok { background: var(--ok); } .medidor i.aviso { background: var(--aviso); } .medidor i.critico { background: var(--critico); }

/* ---------- tablero ---------- */
.panel { background: var(--pantalla); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.panel-estado { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 9px 16px; background: var(--superficie); border-bottom: 1px solid var(--linea); font: 12px var(--mono); color: var(--texto-2); }
.panel-estado .latido { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; margin-right: 6px; }
.panel-estado.viejo .latido { background: var(--critico); }
@media (prefers-reduced-motion: no-preference) { .latido { animation: latido 2s infinite; } }
@keyframes latido { 50% { opacity: .35; } }
.aviso-panel { margin: 12px 12px 0; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--critico); color: var(--critico); background: var(--superficie); font-size: 14px; }
.rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; padding: 12px; }
.widget { background: var(--superficie); border: 1px solid var(--linea); border-radius: 6px; display: flex; flex-direction: column; min-width: 0; }
.widget > h3 { padding: 9px 14px; font: 600 14px var(--cuerpo); border-bottom: 1px solid var(--linea); display: flex; justify-content: space-between; gap: 8px; }
.widget > h3 small { font: 12px var(--mono); color: var(--texto-2); font-weight: 400; }
.widget-cuerpo { padding: 12px 14px; flex: 1; min-width: 0; }
.widget-cuerpo.sin-margen { padding: 0; overflow-x: auto; }
.widget table { font-size: 13px; }
.widget th { background: none; padding: 6px 10px; white-space: nowrap; }
.widget td { padding: 6px 10px; }
.widget td strong { white-space: nowrap; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c6 { grid-column: span 6; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
@media (max-width: 1100px) { .c3 { grid-column: span 6; } .c4, .c6, .c8 { grid-column: span 12; } }
@media (max-width: 640px) { .rejilla > .widget { grid-column: span 12; } }

.anillo-bloque { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.anillo-centro { font: 600 26px var(--titulo); fill: var(--texto); }
.anillo-sub { font: 10px var(--mono); fill: var(--texto-2); }
.leyenda { display: flex; flex-direction: column; gap: 4px; font-size: 13px; flex: 1; min-width: 150px; }
.leyenda span { display: flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.leyenda b { font: 500 13px var(--mono); font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 10px; }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; text-align: center; }
.cifras b { display: block; font: 600 30px/1.1 var(--titulo); font-variant-numeric: tabular-nums; }
.cifras small { font: 11px var(--mono); color: var(--texto-2); text-transform: uppercase; letter-spacing: .05em; }

.linea { width: 100%; height: 70px; display: block; }
.mini-linea { width: 140px; height: 26px; display: block; }
.eje { display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--texto-2); margin-top: 4px; }

.problemas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.problemas li { display: grid; grid-template-columns: 4px 1fr; gap: 10px; }
.problemas li::before { content: ""; border-radius: 2px; background: var(--aviso); }
.problemas li.critico::before { background: var(--critico); }
.problemas .detalle { font: 12px var(--mono); color: var(--texto-2); overflow-wrap: anywhere; }
.vacio { color: var(--texto-2); font-size: 14px; padding: 6px 0; }

details summary { cursor: pointer; font-size: 13px; color: var(--texto-2); }
details ul { margin: 6px 0 0; padding-left: 18px; font: 12px var(--mono); }

.discos { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 6px; }
.discos .medidor b { font-weight: 600; }
.aviso-linea { margin: 4px 0; font-size: 13px; color: var(--aviso); }
.aviso-linea::before { content: "▲ "; font-size: 10px; }

.eventos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.eventos li { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline; }
.eventos .hora { font: 12px var(--mono); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.eventos .detalle { display: block; font: 12px var(--mono); color: var(--texto-2); overflow-wrap: anywhere; }

/* ---------- crear base ---------- */
.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pasos li { border-left: 4px solid var(--apagado); padding: 6px 10px; background: var(--pantalla); border-radius: 4px; }
.pasos li.ok { border-left-color: var(--ok); }
.pasos li.aviso { border-left-color: var(--aviso); }
.pasos li.critico { border-left-color: var(--critico); }

/* ---------- sitios ---------- */
.filtros-estado { display: flex; flex-wrap: wrap; gap: 6px; }
.filtros-estado a { padding: 5px 12px; border: 1px solid var(--linea); border-radius: 99px; background: var(--superficie); color: var(--texto-2); text-decoration: none; font-size: 13px; }
.filtros-estado a b { font: 500 12px var(--mono); margin-left: 4px; color: var(--texto); }
.filtros-estado a:hover { border-color: var(--acento); color: var(--acento); }
.filtros-estado a.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.filtros-estado a.activo b { color: #fff; }

/* ---------- refresco ---------- */
.franjas-barra { display: flex; height: 34px; border-radius: 4px; overflow: hidden; border: 1px solid var(--linea); }
.franjas-barra div { display: flex; align-items: center; justify-content: center; font: 500 12px var(--mono); color: #fff; min-width: 0; overflow: hidden; white-space: nowrap; background: var(--acento); }
.franjas-barra div.lento { background: var(--apagado); }
.franjas-ejes { display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--texto-2); margin-top: 4px; }

/* ---------- login ---------- */
.acceso { max-width: 420px; margin: 8vh auto 0; }
.boton-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }

.cargando { display: none; font-size: 13px; color: var(--texto-2); }
.htmx-request .cargando, .htmx-request.cargando { display: inline; }

/* ---------- estructuras ---------- */
.lista-estructuras { border-top: 1px solid var(--linea); }
.grupo-estructura { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.grupo-estructura > input { margin-top: 3px; }
.grupo-estructura > details { flex: 1; min-width: 0; }
.grupo-estructura > details > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--texto); font-size: 14px; }
.diferencias-estructura { list-style: none; margin: 8px 0 4px; padding: 0; font: inherit; }
.diferencias-estructura li { padding: 4px 0; font-size: 13px; }
.diferencias-estructura li label { align-items: baseline; flex-wrap: wrap; gap: 6px; }
.diferencias-estructura li.no-aplicable > label { color: var(--texto-2); }
.diferencias-estructura li > .nota { margin-left: 24px; }
.grupo-estructura details.propias { margin: 4px 0; }
.aviso-estructura { padding: 10px 14px; border-radius: 6px; border: 1px solid var(--aviso); font-size: 14px; }
.aviso-estructura ul { margin: 6px 0 0; padding-left: 18px; }
.grupo-estructura[hidden] { display: none; }
.filtros-estructuras { border: 1px solid var(--linea); border-radius: 6px; padding: 8px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.filtros-estructuras .fila { gap: 6px 14px; }
.diferencias-estructura li[hidden] { display: none; }
.sitio-del-pool { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 2px 0; font-size: 13px; }

/* ---------- grillas ordenables ---------- */
th.ordenable { cursor: pointer; user-select: none; white-space: nowrap; }
th.ordenable:hover { color: var(--texto); }
th.orden-asc::after { content: " ▲"; }
th.orden-desc::after { content: " ▼"; }
.configuracion-sitio { margin: 4px 0 8px 12px; padding: 6px 10px; border-left: 2px solid var(--linea); font-size: 13px; }
.configuracion-sitio table { font-size: 12px; }