/* ─────────────────────────────────────────────────────────────────────────
   Panel de flota Icrono
   Consola de operaciones: densa pero respirable.

   Tres reglas que gobiernan todo lo de abajo:
   1. El COLOR solo comunica estado. El cromo es neutro. Si algo está en rojo
      es porque hay un problema, no porque sea una cabecera.
   2. LÍNEAS FINAS en vez de cajas. Una rejilla de bordes en cada celda cansa
      la vista y compite con el dato.
   3. Los NÚMEROS en cifras tabulares y alineados: en una tabla de 206 filas,
      poder comparar de un vistazo vale más que cualquier adorno.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Neutros */
  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --surface-2: #fafbfc;
  --line:      #e6e9ee;
  --line-soft: #eef1f5;
  --ink:       #14181f;
  --ink-2:     #3d4551;
  --muted:     #737d8c;

  /* Marca: el mismo azul de los informes que ya se envían a clientes */
  --brand:     #1f5fa8;
  --brand-ink: #17497f;
  --brand-bg:  #eaf1fa;

  /* Estado */
  --good: #157f3d;  --good-bg: #e7f5ec;  --good-line: #b6e0c4;
  --warn: #9a6100;  --warn-bg: #fdf3e2;  --warn-line: #f0d59b;
  --bad:  #b3261e;  --bad-bg:  #fdecea;  --bad-line:  #f3c0bb;

  --radius:    10px;
  --radius-sm: 7px;
  --shadow:    0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg: 0 4px 12px rgba(16,24,40,.08);
  --header-h:  52px;   /* fila superior: marca, menú y usuario */
  --header-b:  36px;   /* fila inferior: enlaces del recolector */
  --header-t:  89px;   /* las dos filas MÁS el borde inferior; lo usan los
                          encabezados de tabla pegajosos */
}

/* Modo oscuro: se trabaja con esto de noche más de lo que parece. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0e1116;
    --surface:   #161a21;
    --surface-2: #1b2028;
    --line:      #262c36;
    --line-soft: #1f242c;
    --ink:       #e8ebf0;
    --ink-2:     #c3cad4;
    --muted:     #8a94a3;

    --brand:     #62a0e8;
    --brand-ink: #8dbcf2;
    --brand-bg:  #16243a;

    --good: #4ade80;  --good-bg: #10241a;  --good-line: #1f5136;
    --warn: #f5b544;  --warn-bg: #251c0c;  --warn-line: #5a4416;
    --bad:  #f4756b;  --bad-bg:  #2a1414;  --bad-line:  #5e2723;

    --shadow:    0 1px 2px rgba(0,0,0,.35);
    --shadow-lg: 0 6px 18px rgba(0,0,0,.45);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 13.5px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

code, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em;
  font-variant-ligatures: none;
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */

header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
header .row {
  width: 100%; max-width: 1560px; margin: 0 auto; padding: 0 22px;
}
/* Tres columnas para que el menú quede CENTRADO de verdad y no simplemente
   empujado: con `margin:auto` se descentra en cuanto la marca y el nombre del
   usuario tienen anchos distintos, que es siempre. */
header .row-principal {
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px;
}
header .row-recolector {
  height: var(--header-b);
  display: flex; align-items: center; gap: 3px;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  font-size: 11.5px; color: var(--muted);
  overflow-x: auto; scrollbar-width: none;
}
header .row-recolector::-webkit-scrollbar { display: none; }
header .row-recolector .lbl { margin-right: 6px; flex: none; }

/* OJO: no llamarla `.marca`. Ese nombre ya lo usa la casilla de pago de
   Contabilidad, que es un cuadradito de 20 px, y el logotipo heredaba su
   tamaño quedándose en un sello ilegible. */
.logotipo {
  font-size: 13.5px; font-weight: 650; letter-spacing: -.01em;
  color: var(--ink); white-space: nowrap; justify-self: start;
}
.logotipo:hover { text-decoration: none; color: var(--brand); }
.logotipo .sep { color: var(--muted); font-weight: 400; margin: 0 5px; }

header nav { display: flex; gap: 2px; justify-self: center; }
header nav a {
  color: var(--muted); font-size: 13px; font-weight: 500;
  padding: 5px 11px; border-radius: var(--radius-sm);
  transition: background .12s, color .12s;
}
header nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
header nav a.on { background: var(--brand-bg); color: var(--brand-ink); }

/* Semáforo del recolector, ahora en su propia fila. Punto + texto: el color
   nunca va solo, para quien no distinga bien el rojo del verde. */
.row-recolector .node {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 20px;
  border: 1px solid transparent; transition: background .12s;
}
.row-recolector .node:hover { background: var(--surface-2); border-color: var(--line); }
.row-recolector .node-edad { color: var(--muted); font-size: 10.5px; }
.row-recolector .node-edad.obsoleto, .row-recolector .node-edad.degradado { color: var(--bad); }
.row-recolector .node-edad.cache { color: var(--warn); }
.dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--muted);
}
.dot.vivo      { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 18%, transparent); }
.dot.cache     { background: var(--warn); }
.dot.obsoleto,
.dot.degradado { background: var(--bad);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); }
.dot.sin-datos { background: var(--muted); }

/* ── Estructura ─────────────────────────────────────────────────────────── */

main { max-width: 1560px; margin: 0 auto; padding: 26px 22px 60px; }

h2 {
  font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 34px 0 12px; padding: 0;
  border: 0; display: flex; align-items: baseline; gap: 10px;
}
h2:first-child { margin-top: 0; }
h2 .count { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); opacity: .8; }

h3 {
  font-size: 13.5px; font-weight: 600; letter-spacing: -.005em;
  color: var(--ink); margin: 22px 0 9px;
}

.page-title {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  margin: 0 0 4px;
}
.page-title h1 {
  margin: 0; font-size: 21px; font-weight: 640; letter-spacing: -.02em; color: var(--ink);
}
.page-sub { color: var(--muted); font-size: 13px; margin: 0 0 20px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1040px) { .grid-2 { grid-template-columns: 1fr; } }

/* ── Tarjetas de cifra ──────────────────────────────────────────────────── */

.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px; margin-bottom: 4px;
}
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
}
.card .n {
  font-size: 26px; font-weight: 620; line-height: 1.1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.card .n.alerta { color: var(--bad); }
.card .k {
  font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-top: 5px;
}

/* ── Tarjeta de servidor ────────────────────────────────────────────────── */

.servers { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.srv {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow);
  color: inherit; transition: border-color .14s, box-shadow .14s, transform .14s;
}
.srv:hover {
  text-decoration: none; border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  box-shadow: var(--shadow-lg); transform: translateY(-1px);
}
.srv-top { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; }
.srv-name { font-size: 14.5px; font-weight: 620; letter-spacing: -.01em; }
.srv-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 13px; }
.srv-meta .ip { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.srv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.srv-stats div { min-width: 0; }
.srv-stats .v {
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; line-height: 1.2;
}
.srv-stats .l {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Barra de uso: comunica de un vistazo sin necesidad de leer el número. */
.meter { height: 4px; border-radius: 3px; background: var(--line-soft); overflow: hidden; margin-top: 6px; }
.meter > i { display: block; height: 100%; border-radius: 3px;
  background: color-mix(in srgb, var(--muted) 55%, transparent); }
.meter.wa > i { background: var(--warn); }
.meter.bad > i { background: var(--bad); }

.srv-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 11px; border-top: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--muted);
}

/* ── Tablas ─────────────────────────────────────────────────────────────── */

.tabla-wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.tabla-wrap > table { border-radius: inherit; }
.tabla-wrap tr:first-child th:first-child,
.tabla-wrap tr:first-child td:first-child { border-top-left-radius: var(--radius); }
.tabla-wrap tr:first-child th:last-child,
.tabla-wrap tr:first-child td:last-child  { border-top-right-radius: var(--radius); }
.tabla-wrap tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.tabla-wrap tr:last-child td:last-child  { border-bottom-right-radius: var(--radius); }
.tabla-wrap + .tabla-wrap { margin-top: 14px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); }

th {
  text-align: left; font-size: 10.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  background: var(--surface-2);
  padding: 9px 14px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

/* ── Cabecera fija, y por qué está montada así ───────────────────────────
   `position: sticky` se rompe en cuanto CUALQUIER antepasado tiene
   `overflow` distinto de `visible`: ese antepasado pasa a ser el contenedor
   de desplazamiento y la cabecera se queda pegada dentro de la tabla, o
   directamente se recorta. Por eso `.tabla-larga` NO lleva overflow y las
   esquinas redondeadas se hacen celda a celda.

   Además la cabecera necesita FONDO OPACO y z-index por encima de las filas:
   sin las dos cosas, las filas se ven a través y parece que se superponen. */
.tabla-larga {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.tabla-larga th {
  position: sticky; top: var(--header-t); z-index: 6;
  background: var(--surface-2);
  /* Sombra en vez de borde: un `border-bottom` sobre un elemento pegajoso
     se pinta de forma inconsistente al desplazar. */
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--line);
}
.tabla-larga tr:first-child th:first-child { border-top-left-radius: var(--radius); }
.tabla-larga tr:first-child th:last-child  { border-top-right-radius: var(--radius); }
.tabla-larga tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.tabla-larga tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--radius); }
td {
  padding: 9px 14px; border-bottom: 1px solid var(--line-soft);
  vertical-align: top; color: var(--ink-2);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .1s; }
tbody tr:hover td { background: var(--surface-2); }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td strong, td b { color: var(--ink); font-weight: 600; }

/* Tabla clave-valor de las fichas */
table.kv th {
  position: static; background: transparent; text-transform: none; letter-spacing: 0;
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  width: 42%; border-bottom: 1px solid var(--line-soft); padding: 8px 14px;
}
table.kv td { color: var(--ink); }

/* ── Estado ─────────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 600; line-height: 1.6;
  border: 1px solid transparent; white-space: nowrap;
}
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.tag.ok    { background: var(--good-bg); color: var(--good); border-color: var(--good-line); }
.tag.warn  { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.tag.bad   { background: var(--bad-bg);  color: var(--bad);  border-color: var(--bad-line); }
.tag.muted { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.tag.plain::before { display: none; }

.glyph { font-family: ui-monospace, monospace; letter-spacing: -1.5px; font-size: 13px; }
.glyph.ok { color: var(--good); } .glyph.warn { color: var(--warn); }
.glyph.bad { color: var(--bad); } .glyph.muted { color: color-mix(in srgb, var(--muted) 45%, transparent); }

/* Antigüedad del dato. Nunca se enseña un número sin esto. */
.age { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.age::before { margin-right: 3px; }
.age.vivo::before      { content: "●"; color: var(--good); }
.age.cache::before     { content: "◐"; color: var(--warn); }
.age.obsoleto::before  { content: "○"; color: var(--bad); }
.age.degradado::before { content: "⊘"; color: var(--bad); }
.age.sin-datos::before { content: "○"; color: var(--muted); }
.stale { opacity: .5; }

/* ── Avisos y hallazgos ─────────────────────────────────────────────────── */

.callout {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); padding: 13px 16px; margin: 10px 0;
  box-shadow: var(--shadow);
}
.callout.bad  { border-left-color: var(--bad);  background: color-mix(in srgb, var(--bad-bg) 55%, var(--surface)); }
.callout.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn-bg) 55%, var(--surface)); }
.callout.good { border-left-color: var(--good); background: color-mix(in srgb, var(--good-bg) 55%, var(--surface)); }
.callout p { margin: .3em 0; }
.callout p:first-child { margin-top: 0; } .callout p:last-child { margin-bottom: 0; }
.callout .t { font-weight: 620; color: var(--ink); font-size: 14px; }

/* Lista de atención de la portada */
.alertas { display: flex; flex-direction: column; gap: 1px; }
.alerta-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; background: var(--surface);
  border: 1px solid var(--line); border-bottom: 0;
  color: inherit; transition: background .1s;
}
.alerta-row:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.alerta-row:last-child  { border-bottom: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
.alerta-row:only-child  { border-radius: var(--radius); }
.alerta-row:hover { background: var(--surface-2); text-decoration: none; }
.alerta-row .n {
  font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums;
  min-width: 46px; text-align: right; letter-spacing: -.02em;
}
.alerta-row.crit .n { color: var(--bad); }
.alerta-row.alta .n { color: var(--warn); }
.alerta-row .txt { flex: 1; color: var(--ink-2); }
.alerta-row .ir { color: var(--muted); font-size: 15px; }

/* Bloque de una regla en la bandeja */
.hallazgo {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.hallazgo > header:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.hallazgo tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.hallazgo tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--radius); }
.hallazgo > header {
  position: static; height: auto; display: block; backdrop-filter: none;
  padding: 14px 17px 12px; background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.hallazgo h3 { margin: 0 0 3px; font-size: 14.5px; font-weight: 630; }
.hallazgo .rule { font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); }
.hallazgo .cuerpo { padding: 13px 17px; }
.hallazgo .cuerpo p { margin: 0 0 8px; color: var(--ink-2); max-width: 78ch; }
.hallazgo .cuerpo p:last-child { margin-bottom: 0; }
.hallazgo .cuerpo b { color: var(--ink); }
.hallazgo table { border-top: 1px solid var(--line); }
.hallazgo.crit { border-left: 3px solid var(--bad); }
.hallazgo.alta { border-left: 3px solid var(--warn); }
.hallazgo.media { border-left: 3px solid color-mix(in srgb, var(--muted) 50%, transparent); }

.sev-head {
  display: flex; align-items: center; gap: 9px;
  margin: 30px 0 12px; font-size: 12px; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.sev-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── Filtros ────────────────────────────────────────────────────────────── */

.filters {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.filters input[type=search] {
  /* Crece con el hueco disponible: con ancho fijo el texto de ayuda se corta a
     media palabra y no se ve qué se puede buscar. */
  font: inherit; font-size: 13px; padding: 7px 11px;
  flex: 1 1 340px; min-width: 240px; max-width: 560px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink);
  transition: border-color .12s, background .12s;
}
.filters input[type=search]:focus {
  outline: none; background: var(--surface);
  border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
.filters input::placeholder { color: var(--muted); }

.chip {
  display: inline-block; padding: 5px 11px; border-radius: 20px;
  font-size: 12px; font-weight: 500; cursor: pointer; user-select: none;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  transition: background .12s, color .12s, border-color .12s;
}
.chip:hover { background: var(--brand-bg); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (prefers-color-scheme: dark) { .chip.on { color: #0e1116; } }

/* ── Comprobaciones de la ficha ─────────────────────────────────────────── */

details.checks-wrap { margin-top: 12px; }
details.checks-wrap > summary {
  cursor: pointer; font-size: 12.5px; color: var(--muted);
  padding: 7px 0; list-style: none; user-select: none;
}
details.checks-wrap > summary::-webkit-details-marker { display: none; }
details.checks-wrap > summary::before {
  content: "▸"; display: inline-block; width: 14px; color: var(--muted);
}
details.checks-wrap[open] > summary::before { content: "▾"; }
details.checks-wrap > summary:hover { color: var(--ink); }

.checks td { font-size: 12.5px; padding: 7px 12px; }
.checks .q { width: 42%; color: var(--muted); }
.checks .m { width: 30px; text-align: center; font-weight: 700; }
.checks .m.si { color: var(--good); } .checks .m.no { color: var(--bad); } .checks .m.na { color: var(--muted); }

/* ── Veredicto de la ficha de sitio ─────────────────────────────────────── */

.veredicto {
  border-radius: var(--radius); padding: 18px 20px; margin: 4px 0 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--muted);
  background: var(--surface); box-shadow: var(--shadow);
}
.veredicto.ok   { border-left-color: var(--good); background: color-mix(in srgb, var(--good-bg) 45%, var(--surface)); }
.veredicto.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn-bg) 45%, var(--surface)); }
.veredicto.bad  { border-left-color: var(--bad);  background: color-mix(in srgb, var(--bad-bg) 45%, var(--surface)); }
.veredicto .titulo {
  font-size: 17px; font-weight: 640; letter-spacing: -.015em; color: var(--ink);
  display: flex; align-items: center; gap: 10px; margin-bottom: 7px;
}
.veredicto .detalle { color: var(--ink-2); margin: 0 0 6px; }
.veredicto .detalle b { color: var(--ink); }

/* ── Gráficas ───────────────────────────────────────────────────────────── */

/* Nada de alto fijo aquí. uPlot mide `height` como el LIENZO; el título y la
   leyenda son hermanos suyos y suman ~46 px más. Con un alto cerrado esos 46 px
   se salían de la caja y caían sobre la gráfica de abajo. */
#graficas > div {
  margin-bottom: 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px 10px; box-shadow: var(--shadow);
  min-width: 0;   /* el lienzo no puede ensanchar la caja */
}
/* La leyenda de uPlot es una <table>: si se le deja el ancho natural se sale.
   Se centra y se deja envolver dentro de su propia caja. */
#graficas .u-legend { max-width: 100%; }
#graficas .uplot { width: 100% !important; }
#graficas .u-title { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
#graficas .u-legend { font-size: 11px; color: var(--muted); margin-top: 4px; }
#graficas .u-legend .u-marker { border-radius: 2px; }
.u-select { background: color-mix(in srgb, var(--brand) 12%, transparent); }

/* ── Varios ─────────────────────────────────────────────────────────────── */

.empty { color: var(--muted); font-style: italic; padding: 16px; text-align: center; }

.foot {
  color: var(--muted); font-size: 11.5px; line-height: 1.6;
  margin-top: 42px; padding-top: 16px; border-top: 1px solid var(--line);
  max-width: 82ch;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .srv:hover { transform: none; }
}

/* ── Formularios ────────────────────────────────────────────────────────── */

.campo { margin-bottom: 16px; }
.campo:last-child { margin-bottom: 0; }
.campo > label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--ink);
  margin-bottom: 5px;
}
.campo input[type=text],
.campo textarea {
  font: inherit; font-size: 13.5px; width: 100%; max-width: 460px;
  padding: 8px 11px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); transition: border-color .12s, background .12s, box-shadow .12s;
}
.campo textarea { resize: vertical; line-height: 1.5; max-width: 620px; }
.campo input[type=text]:focus,
.campo textarea:focus {
  outline: none; background: var(--surface); border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--muted); }

/* La ayuda explica la consecuencia, no repite la etiqueta. */
.ayuda {
  display: block; font-size: 11.5px; color: var(--muted);
  margin-top: 5px; max-width: 620px; line-height: 1.5;
}

.campo label.check + label.check { margin-left: 24px; }
.campo label.check {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; cursor: pointer; margin-bottom: 0;
}
.campo label.check input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }

.acciones {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
}
.acciones .ayuda { margin-top: 0; }

.btn {
  font: inherit; font-size: 13.5px; font-weight: 550;
  padding: 9px 18px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--surface-2); border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn.primario {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.btn.primario:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
@media (prefers-color-scheme: dark) { .btn.primario { color: #0e1116; } }

/* ── Informes ───────────────────────────────────────────────────────────── */

.informes-gen { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.gen-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 17px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px;
}
.gen-t { font-size: 14px; font-weight: 620; color: var(--ink); }
.gen-d { font-size: 12.5px; color: var(--muted); line-height: 1.5; flex: 1; }
.gen-card .btn { align-self: flex-start; }
.btn-mini { padding: 5px 11px; font-size: 12px; }

/* Borrar. Discreto en la tabla, porque no es la acción que se busca al entrar;
   rotundo en la confirmación, donde ya se sabe lo que se está haciendo. */
.btn.enlace-peligro {
  border-color: transparent; background: none; color: var(--muted);
  padding-left: 4px; padding-right: 4px;
}
.btn.enlace-peligro:hover {
  color: var(--bad); background: var(--bad-bg);
  border-color: color-mix(in srgb, var(--bad) 30%, transparent);
}
.btn.peligro {
  background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 560;
}
.btn.peligro:hover { background: color-mix(in srgb, var(--bad) 85%, #000); border-color: var(--bad); }
.sel {
  font: inherit; font-size: 13px; padding: 7px 10px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink);
}
.sel:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }

/* ── Etiquetas de sitio ─────────────────────────────────────────────────── */

.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 500;
  background: var(--brand-bg); color: var(--brand-ink);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
}
.etiqueta button {
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  color: inherit; opacity: .5; font-size: 13px; line-height: 1;
}
.etiqueta button:hover { opacity: 1; color: var(--bad); }
.etiqueta-mini {
  display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 10.5px;
  background: var(--brand-bg); color: var(--brand-ink); margin-right: 3px;
}
.form-etiqueta { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.form-etiqueta input { max-width: 260px; }

/* ── Grupos de filtro ───────────────────────────────────────────────────── */

.filtros-grupo {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 8px; padding-left: 2px;
}
.fg-lbl {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); min-width: 74px;
}
.fg-ip {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; opacity: .6; margin-left: 5px;
}
.chip.on .fg-ip { opacity: .8; }
.filtros-grupo + .tabla-larga { margin-top: 14px; }

/* Botonera de acciones dentro de una fila de tabla. */
.acciones-fila { display: flex; gap: 5px; flex-wrap: wrap; }
.acciones-fila form { display: inline; }

/* ── Contabilidad ───────────────────────────────────────────────────────── */

.marca {
  width: 20px; height: 20px; padding: 0; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 5px; background: var(--surface);
  color: transparent; font-size: 13px; font-weight: 700; line-height: 1;
  transition: border-color .12s, background .12s;
}
.marca:hover { border-color: var(--good); background: var(--good-bg); }
.marca.si { background: var(--good); border-color: var(--good); color: #fff; }
@media (prefers-color-scheme: dark) { .marca.si { color: #0e1116; } }
tr.pagada td { opacity: .62; }
tr.pagada td:first-child, tr.pagada td:nth-child(2) { opacity: 1; }

.comercial { padding: 15px 17px; }
.comercial-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px;
}
.comercial-grid .campo { margin-bottom: 0; }
.comercial input[type=date],
.comercial input[type=text] {
  font: inherit; font-size: 13.5px; width: 100%; padding: 8px 11px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); transition: border-color .12s, background .12s;
}
.comercial input:focus {
  outline: none; background: var(--surface); border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}

/* El nombre personalizado del servidor puede ser largo; se recorta y el
   completo queda en el título emergente. En su propia fila cabe más. */
.row-recolector .node-txt {
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* La renovación que toca este mes destaca sobre el resto del año. */
tr.este-mes td:nth-child(2), tr.este-mes td:nth-child(4) { font-weight: 600; color: var(--ink); }
tr.este-mes td { background: color-mix(in srgb, var(--brand-bg) 45%, transparent); }


/* ── Acceso ─────────────────────────────────────────────────────────────────
   Pantallas sin navegación: quien no ha entrado no tiene a dónde ir. */
.pagina-acceso {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px;
}
.caja-acceso {
  width: 100%; max-width: 430px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 32px 26px; box-shadow: var(--shadow);
}
.marca-acceso {
  font-weight: 700; letter-spacing: -.02em; font-size: 15px; color: var(--brand);
  margin-bottom: 20px;
}
.marca-acceso span { color: var(--muted); font-weight: 500; }
.caja-acceso h1 { font-size: 20px; margin: 0 0 14px; letter-spacing: -.02em; }
.caja-acceso .page-sub { margin-bottom: 16px; }
.form-acceso .campo { margin-bottom: 14px; }
.form-acceso .campo input { width: 100%; box-sizing: border-box; }
/* Un input sin ancho explícito usa el tamaño por defecto del navegador y se
   queda corto dentro de la rejilla. */
.comercial-grid .campo input { width: 100%; box-sizing: border-box; }
.form-acceso.estrecho { margin-top: 10px; }
.btn.ancho { width: 100%; justify-content: center; text-align: center; margin-top: 4px; }
.codigo-grande {
  font-family: ui-monospace, monospace; font-size: 22px; letter-spacing: .22em;
  text-align: center;
}
.ayuda-acceso {
  color: var(--muted); font-size: 12px; line-height: 1.6; margin: 16px 0 0;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.pasos { margin: 0; padding-left: 20px; }
.pasos li { margin-bottom: 18px; }
/* El secreto se enseña en monoespaciada y con holgura: se copia a mano. */
.secreto {
  font-family: ui-monospace, monospace; font-size: 14px; word-break: break-all;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; margin: 8px 0; user-select: all; line-height: 1.5;
}
.secreto.pequeno { font-size: 11px; }
.codigos-rec {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0;
}
.codigos-rec span {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; text-align: center; font-size: 14px; letter-spacing: .06em; user-select: all;
}
/* Quién ha entrado, en la cabecera */
.quien {
  display: flex; align-items: center; gap: 12px;
  justify-self: end; min-width: 0;
}
.quien a { text-decoration: none; }
.quien .usuario {
  color: var(--ink-2); font-size: 12.5px; font-weight: 500;
  padding: 5px 11px; border-radius: var(--radius-sm);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .12s, color .12s;
}
.quien .usuario:hover { background: var(--surface-2); color: var(--ink); }
.quien .usuario.on { background: var(--brand-bg); color: var(--brand-ink); }
.quien .salir { color: var(--muted); font-size: 11.5px; flex: none; }
.quien .salir:hover { color: var(--bad); }


/* El QR del alta del segundo factor. Fondo blanco SIEMPRE, también en modo
   oscuro: un código invertido no lo lee ningún escáner. En bloque y con su
   propio hueco, o el texto se le enrosca alrededor y queda ilegible. */
.qr {
  display: block; width: max-content; background: #fff; padding: 10px;
  margin: 12px 0 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); line-height: 0;
}
.qr svg { display: block; }
.pasos details { margin-top: 10px; }
.pasos details summary { cursor: pointer; color: var(--brand); font-size: 12.5px; }
.pasos details .ayuda { margin: 8px 0 4px; }