/* ASISBOT — Panel
   ─────────────────────────────────────────────────────────────────
   Pensado para leerse en una pantalla de oficina y en un móvil. Lo
   segundo no es un extra: la decisión del 04/09/2026 fue responsive
   justamente porque el uso real es «el jefe mira desde el móvil».

   Sin librerías de estilos: son cuatrocientas líneas y así no hay nada
   que actualizar en la VM de cada empresa. */

:root {
  color-scheme: light dark;
  --fondo: #f4f6f8;
  --papel: #ffffff;
  --papel-2: #eef1f5;
  --texto: #131820;
  --apagado: #5d6874;
  --borde: #dce1e8;
  --borde-suave: #e8ecf1;
  --acento: #1f6feb;
  --acento-suave: #e7f0fe;
  --bien: #117a45;
  --ojo: #9a5b00;
  --mal: #b5321f;
  --radio: 12px;
  --radio-chico: 8px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1319;
    --papel: #171c24;
    --papel-2: #1f262f;
    --texto: #e9edf2;
    --apagado: #98a4b3;
    --borde: #2a323d;
    --borde-suave: #232a34;
    --acento: #5b9dff;
    --acento-suave: #18263c;
    --bien: #47c485;
    --ojo: #e2a84a;
    --mal: #f0776a;
    --sombra: none;
  }
}

* { box-sizing: border-box; }

/* ⚠️ ESTO NO ES DECORACIÓN, ES LO QUE HACE QUE LA APLICACIÓN FUNCIONE
   (17/09/2026). El navegador oculta un elemento con `hidden` aplicándole
   `display: none`, pero CUALQUIER regla propia que ponga `display` le
   gana. `#pantalla-entrar` lleva `.centrado`, que es `display: flex`, así
   que al entrar el panel se pintaba debajo y la pantalla de login se
   quedaba encima sin ocultarse: sesión iniciada y nada que ver.
   Síntoma engañoso, porque en el servidor todo salía bien. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  -webkit-text-size-adjust: 100%;
}

main { padding: 20px 16px 48px; max-width: 1180px; margin: 0 auto; }

h1 { font-size: 1.45rem; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 1rem; margin: 0 0 14px; letter-spacing: -.005em; }
h3 { font-size: .95rem; margin: 0 0 6px; }

.apagado { color: var(--apagado); }
.crece { flex: 1; }
.chico { font-size: .85rem; }

/* ── Barra superior ───────────────────────────────────────────── */
.barra {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 20;
}
.barra .marca { font-weight: 700; letter-spacing: .02em; }

/* Las pestañas. En móvil se quedan en su fila y se deslizan de lado. */
.pestanas {
  display: flex; gap: 4px;
  padding: 0 16px;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 53px; z-index: 19;
  overflow-x: auto; scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 11px 14px; margin-bottom: -1px;
  color: var(--apagado); font: inherit; font-weight: 600;
  white-space: nowrap; cursor: pointer; border-radius: 0;
}
.pestanas button:hover { color: var(--texto); }
.pestanas button[aria-selected="true"] {
  color: var(--acento); border-bottom-color: var(--acento);
}

/* ── Tarjetas ─────────────────────────────────────────────────── */
.tarjeta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
}
.tarjeta > h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.centrado {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.estrecha { width: 100%; max-width: 380px; margin: 0; }

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.fila { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.fila input { flex: 1; min-width: 180px; }

/* ── Formularios ──────────────────────────────────────────────── */
label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: .9rem; }

input, select {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: var(--fondo); color: var(--texto);
  font: inherit;
}
input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

button {
  padding: 9px 16px; border: 0; border-radius: var(--radio-chico);
  background: var(--acento); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer;
}
button:disabled { opacity: .5; cursor: progress; }
button.secundario {
  background: transparent; color: var(--acento);
  border: 1px solid var(--borde);
}
button.secundario:hover { background: var(--acento-suave); }
button.chico { padding: 5px 11px; font-size: .85rem; }
#boton-entrar { width: 100%; margin-top: 16px; }

.error {
  margin-top: 12px; padding: 10px 12px;
  background: color-mix(in srgb, var(--mal) 13%, transparent);
  border-radius: var(--radio-chico); color: var(--mal);
}
.aviso {
  padding: 10px 12px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--ojo) 14%, transparent);
  border-radius: var(--radio-chico); color: var(--ojo);
  font-size: .88rem;
}

/* ── Estado de los robots ─────────────────────────────────────── */
.robot { display: flex; align-items: flex-start; gap: 11px; padding: 16px; }
.robot .nombre { font-weight: 700; text-transform: capitalize; }
.punto { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 7px; }
.punto.bien { background: var(--bien); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bien) 22%, transparent); }
.punto.ojo  { background: var(--ojo);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ojo) 22%, transparent); }
.punto.mal  { background: var(--mal);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mal) 22%, transparent); }

/* ⚠️ EL ÚLTIMO ERROR DE UN ROBOT SE VE. Se estaba guardando en la base sin
   que la pantalla lo enseñara, y así los tres robots pasaron una noche
   entera con un 404 de INVESTEL sin que nadie se enterara (17/09/2026). */
.robot-error {
  margin-top: 8px; padding: 7px 9px;
  background: color-mix(in srgb, var(--mal) 12%, transparent);
  border-radius: 6px; color: var(--mal);
  font-size: .82rem; line-height: 1.4;
}
.robot-error .cuando { font-size: .78rem; opacity: .85; }

/* Un error de hace días no es una alarma: es historia. Se sigue viendo
   —perderlo de vista fue el fallo anterior— pero en gris, porque si la
   pantalla está roja todas las mañanas se deja de mirar el rojo. */
.robot-error.pasado {
  background: var(--papel-2);
  color: var(--apagado);
}

/* ── Etiquetas ────────────────────────────────────────────────── */
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
.etiqueta {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--papel-2); border: 1px solid var(--borde-suave);
  font-size: .85rem;
}
.etiqueta b { font-variant-numeric: tabular-nums; font-size: .95rem; }

/* Estados de un servicio, con color. El color va por lo que significa, no
   por bonito: verde acabado, azul en marcha, ámbar esperando algo, rojo lo
   que hay que mirar. */
.estado {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
  background: var(--papel-2); color: var(--apagado);
}
.estado.e-finalizado { background: color-mix(in srgb, var(--bien) 16%, transparent); color: var(--bien); }
.estado.e-asignado,
.estado.e-en_camino,
.estado.e-localizado { background: var(--acento-suave); color: var(--acento); }
.estado.e-aceptado,
.estado.e-detectado { background: color-mix(in srgb, var(--ojo) 16%, transparent); color: var(--ojo); }
.estado.e-error,
.estado.e-rechazado,
.estado.e-derivado_encargado { background: color-mix(in srgb, var(--mal) 15%, transparent); color: var(--mal); }

/* ── Tablas ───────────────────────────────────────────────────── */
.desplazable { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--borde-suave); }
thead th {
  color: var(--apagado); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; border-bottom-color: var(--borde);
}
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--papel-2); }
tbody tr:last-child td { border-bottom: 0; }
td.expediente {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .85rem; white-space: nowrap;
}
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.recorta { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuantos { color: var(--apagado); font-weight: 400; font-size: .85rem; }

/* ── Conmutadores ─────────────────────────────────────────────── */
/* Un filtro encendido tiene que verse encendido de lejos. Una casilla
   marcada son cuatro píxeles; esto es el botón entero. */
.conmutadores { align-items: center; }

button.conmutador {
  background: transparent; color: var(--apagado);
  border: 1px solid var(--borde);
  border-radius: 999px; padding: 7px 14px;
  font-weight: 600; font-size: .87rem;
}
button.conmutador:hover { color: var(--texto); border-color: var(--apagado); }
button.conmutador[aria-pressed="true"] {
  background: var(--acento); color: #fff; border-color: var(--acento);
}
/* El directo encendido parpadea despacio: dice «esto se está moviendo»
   sin robar atención. Quien haya pedido menos animación, no la ve. */
#log-directo[aria-pressed="true"] { animation: latir 2s ease-in-out infinite; }
@keyframes latir { 50% { opacity: .72; } }
@media (prefers-reduced-motion: reduce) {
  #log-directo[aria-pressed="true"] { animation: none; }
}

/* ── Cabeceras ordenables ─────────────────────────────────────────── */
th.ordenable { cursor: pointer; user-select: none; white-space: nowrap; }
th.ordenable:hover { color: var(--texto); }
th .flecha { color: var(--acento); font-weight: 700; }
th[aria-sort] { color: var(--acento); }

/* ── Log ──────────────────────────────────────────────────────── */
.linea {
  display: flex; align-items: center; gap: 7px;
  margin: 0; font-weight: 400; font-size: .9rem; white-space: nowrap;
}
.linea input { width: auto; }

td.mensaje {
  white-space: normal; min-width: 340px;
  font-size: .87rem; line-height: 1.45;
}

/* El nivel se ve de un vistazo con una barra a la izquierda, no tiñendo la
   fila entera: con cientos de líneas, el fondo de color cansa y se deja de
   leer. Lo normal no lleva marca ninguna. */
tr.log-warn  td:first-child { box-shadow: inset 3px 0 0 var(--ojo); }
tr.log-error td:first-child,
tr.log-fatal td:first-child { box-shadow: inset 3px 0 0 var(--mal); }
tr.log-error td.mensaje,
tr.log-fatal td.mensaje { color: var(--mal); }
tr.log-debug td { opacity: .65; }

#tabla-log tbody tr { cursor: default; }
#tabla-log a { color: var(--acento); text-decoration: none; }
#tabla-log a:hover { text-decoration: underline; }

/* ── Línea de tiempo de la ficha ──────────────────────────────── */
.hito {
  border-left: 3px solid var(--borde);
  padding: 0 0 16px 14px; margin-left: 6px;
}
.hito:last-child { padding-bottom: 0; }
.hito.aplicada { border-left-color: var(--bien); }
.hito.fallida  { border-left-color: var(--mal); }
.cuando { font-variant-numeric: tabular-nums; color: var(--apagado); font-size: .82rem; }

.descartados { margin: 8px 0 0; padding: 0; list-style: none; }
.descartados li {
  display: flex; gap: 10px; padding: 5px 0;
  border-bottom: 1px dashed var(--borde-suave); font-size: .88rem;
}
.descartados li:last-child { border-bottom: 0; }
.descartados .quien { font-weight: 600; min-width: 4.5em; }

pre {
  background: var(--papel-2); border: 1px solid var(--borde-suave);
  border-radius: var(--radio-chico); padding: 12px; overflow-x: auto;
  font-size: .82rem; margin: 8px 0 0;
}
details summary { cursor: pointer; color: var(--acento); font-size: .9rem; padding: 4px 0; }

.vacio { color: var(--apagado); padding: 18px 0; }

/* ── Configuración ────────────────────────────────────────────── */
.regla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 10px 20px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--borde-suave);
}
.regla:last-child { border-bottom: 0; padding-bottom: 0; }
.regla:first-of-type { padding-top: 0; }

.regla .clave {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .88rem; font-weight: 600; word-break: break-word;
}
.regla .que-hace { color: var(--apagado); font-size: .87rem; margin-top: 3px; }
.regla .cuidado { margin-top: 7px; font-size: .84rem; color: var(--ojo); }

.valores { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.valor {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--papel-2); border: 1px solid var(--borde-suave);
  border-radius: var(--radio-chico); padding: 8px 10px;
}
.valor .dato {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600; word-break: break-word; min-width: 0;
}
.valor .unidad { color: var(--apagado); font-size: .85rem; }
.valor form { display: flex; gap: 6px; width: 100%; flex-wrap: wrap; }
.valor form input, .valor form select { flex: 1; min-width: 130px; }
.valor .fallo { color: var(--mal); font-size: .84rem; width: 100%; }
.valor .hecho { color: var(--bien); font-size: .84rem; }

/* De dónde sale el valor. ⚠️ SE ENSEÑA SIEMPRE, incluso cuando es «todos»:
   una regla cargada con el ámbito equivocado no la lee nadie y no da
   ningún error, y esconder el ámbito es esconder justo eso. */
.ambito {
  font-size: .76rem; padding: 2px 8px; border-radius: 999px;
  background: var(--fondo); border: 1px solid var(--borde);
  color: var(--apagado); white-space: nowrap;
}
.ambito.acotado { color: var(--ojo); border-color: color-mix(in srgb, var(--ojo) 45%, transparent); }
.ambito.defecto { font-style: italic; }

.solo-sql { font-size: .78rem; color: var(--apagado); white-space: nowrap; }

.nav-secciones { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.nav-secciones a {
  font-size: .84rem; text-decoration: none; color: var(--acento);
  padding: 4px 10px; border-radius: 999px; background: var(--acento-suave);
}

@media (max-width: 720px) {
  .regla { grid-template-columns: 1fr; gap: 8px; }
  main { padding: 16px 12px 40px; }
  .tarjeta { padding: 15px; }
  .desplazable { margin: 0 -15px; padding: 0 15px; }
  .pestanas { top: 53px; }
}