/*
 * estilo.css — el panel con el sistema Nocturne del rediseño de septiembre de 2026.
 *
 * Los tokens y las clases de componente (.btn, .input, .dialogo) salen del
 * styles.css del sistema; lo demás traduce a clases el canvas de Claude Design,
 * que lo tenía todo en estilos en línea. Aquí no puede ser así: la política de
 * seguridad del panel no admite `style=""`, así que cada color que depende del
 * estado se resuelve con una clase de tono que fija --tono y los componentes lo
 * leen de ahí.
 *
 * Solo tema oscuro, como el diseño. La tipografía la sirve el propio panel: nada
 * se pide a internet.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/publico/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-800: #423a6a;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, 0.65);

  /* Los cuatro tonos del estado, los del diseño. */
  --ok: #5fbf8b;
  --fail: #e0705f;
  --wait: #d9b45f;
  --off: var(--color-neutral-600);

  --raya: color-mix(in srgb, var(--color-text) 7%, transparent);
  --tono: var(--color-neutral-600);
}

.t-ok   { --tono: var(--ok); }
.t-fail { --tono: var(--fail); }
.t-wait { --tono: var(--wait); }
.t-off  { --tono: var(--off); }

/* ── Base ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.sin-js .solo-js { display: none !important; }

html { background: var(--color-bg); }
body {
  margin: 0; min-height: 100vh; padding-bottom: 40px;
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
code { font-family: var(--font-mono); font-size: 0.92em; }
button, input { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

@keyframes nocturnePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.pulso { animation: nocturnePulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }

/* ── Componentes de Nocturne ──────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-block { width: 100%; margin-top: var(--space-2); min-height: 38px; }

.input {
  width: 100%; min-height: 36px; padding: 6px 10px;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input::placeholder { color: var(--color-neutral-600); }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

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

.cab {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
}
.cab-migas { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cab-marca {
  font-family: var(--font-heading); font-weight: 600; font-size: 15px;
  color: var(--color-text); text-decoration: none; white-space: nowrap;
}
.cab-miga { display: flex; align-items: center; gap: var(--space-3); min-width: 0; font-size: 13px; }
.cab-miga i { font-style: normal; color: var(--color-neutral-700); }
.cab-miga a, .cab-miga span {
  color: var(--color-neutral-400); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cab-miga.actual a, .cab-miga.actual span { color: var(--color-text); }
.cab-miga a:hover { color: var(--color-accent-300); }
.cab-datos {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  font-size: 12px; color: var(--color-neutral-500); font-variant-numeric: tabular-nums;
}
.cab-datos a { color: inherit; text-decoration: none; }
.cab-datos a:hover { color: var(--color-accent-300); }
.cab-datos .btn { font-size: 12px; min-height: 32px; }

.alarma-panel {
  max-width: 1600px; margin: var(--space-4) auto 0; padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--fail); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--fail) 14%, var(--color-surface));
  font-size: 13px; line-height: 1.5;
}

/* ── Contenedores ─────────────────────────────────────────────────────────── */

.pagina-ancha { max-width: 1600px; margin: 0 auto; padding: var(--space-6); }
.pagina {
  max-width: 1180px; margin: 0 auto; padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.pie { margin: 0; font-size: 11.5px; color: var(--color-neutral-600); }
.pie-portada { margin-top: var(--space-8); }

/* ── Semáforo ─────────────────────────────────────────────────────────────── */

.kicker-fila { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.kicker { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-neutral-500); }
.seg-pildora {
  display: flex; gap: var(--space-1); margin-left: auto; padding: 3px;
  border: 1px solid var(--color-divider); border-radius: 999px;
}
.seg-pildora button {
  cursor: pointer; border: 0; border-radius: 999px; padding: 5px 12px; min-height: 28px;
  font-family: var(--font-body); font-size: 12px; line-height: 1.2;
  background: transparent; color: var(--color-neutral-400);
}
.seg-pildora button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent-200);
}

.sem-forma { display: none; margin-bottom: var(--space-4); }
[data-forma="anillos"] .sem-anillos,
[data-forma="mosaico"] .sem-mosaico,
[data-forma="tarjetas"] .sem-tarjetas { display: grid; }
[data-forma="barras"] .sem-barras { display: flex; }

.luz {
  --chip-fondo: color-mix(in srgb, var(--color-text) 5%, transparent);
  --chip-borde: var(--color-divider);
  color: var(--color-text); text-decoration: none; min-width: 0; font-family: var(--font-body);
}
.luz.activa {
  --chip-fondo: color-mix(in srgb, var(--color-accent) 16%, transparent);
  --chip-borde: var(--color-accent);
}

.punto {
  width: 10px; height: 10px; flex: none; border-radius: 50%;
  background: var(--tono); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tono) 22%, transparent);
}

/* celdas: una por cosa vigilada */
.barra-celdas i, .tesela-celdas i, .tarjeta-celdas i { display: block; border: 1px solid transparent; }
i.c-ok   { background: color-mix(in srgb, var(--ok) 70%, transparent);   border-color: color-mix(in srgb, var(--ok) 70%, transparent); }
i.c-fail { background: color-mix(in srgb, var(--fail) 70%, transparent); border-color: color-mix(in srgb, var(--fail) 70%, transparent); }
i.c-wait { background: color-mix(in srgb, var(--wait) 70%, transparent); border-color: color-mix(in srgb, var(--wait) 70%, transparent); }
i.c-off  { background: transparent; border-color: var(--color-neutral-700); }

/* anillos */
.sem-anillos { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(180px, 22%)), 1fr)); gap: var(--space-3); }
.anillo-luz {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--chip-borde); background: var(--chip-fondo); box-shadow: var(--shadow-sm);
}
.anillo {
  position: relative; width: 104px; height: 104px; flex: none; border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-text) 8%, transparent),
              0 0 22px color-mix(in srgb, var(--tono) 22%, transparent);
}
.anillo svg { position: absolute; inset: 0; width: 104px; height: 104px; display: block; }
.anillo circle { fill: none; stroke-width: 13; }
.anillo .s-ok   { stroke: color-mix(in srgb, var(--ok) 80%, transparent); }
.anillo .s-fail { stroke: color-mix(in srgb, var(--fail) 80%, transparent); }
.anillo .s-wait { stroke: color-mix(in srgb, var(--wait) 80%, transparent); }
.anillo .s-off  { stroke: var(--color-neutral-800); }
.anillo-centro {
  position: absolute; inset: 13px; border-radius: 50%; background: var(--color-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.anillo-num {
  font-family: var(--font-heading); font-size: 26px; line-height: 1;
  color: var(--tono); font-variant-numeric: tabular-nums;
}
.anillo-rotulo { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-500); }
.luz-textos { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.luz-nombre {
  font-family: var(--font-heading); font-weight: 500; font-size: 14.5px; line-height: 1.25;
  text-align: center; text-wrap: pretty;
}
.luz-estado { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tono); }

/* barras */
.sem-barras {
  flex-direction: column; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-surface); overflow: hidden;
}
.barra-luz {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; text-align: left;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--raya); border-left: 3px solid var(--tono);
  background: var(--chip-fondo);
}
.barra-luz:first-child { border-top: 0; }
.barra-nombre {
  flex: 1 1 190px; min-width: 0;
  font-family: var(--font-heading); font-weight: 500; font-size: 15px; line-height: 1.25; text-wrap: pretty;
}
.barra-celdas { flex: 2 1 220px; min-width: 120px; display: flex; gap: 2px; height: 26px; }
.barra-celdas i { flex: 1 1 0; min-width: 4px; border-radius: 2px; }
.barra-estado {
  flex: none; width: 96px; text-align: right;
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tono);
}
.barra-resumen {
  flex: none; width: 152px; text-align: right;
  font-size: 11.5px; color: var(--color-neutral-500); font-variant-numeric: tabular-nums;
}

/* mosaico */
.sem-mosaico, .sem-tarjetas {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(210px, 22%)), 1fr)); gap: var(--space-3);
}
.tesela {
  display: flex; flex-direction: column; gap: var(--space-4); justify-content: space-between;
  text-align: left; min-height: 150px; padding: var(--space-4); border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--tono) 35%, transparent);
  background: color-mix(in srgb, var(--ok) 9%, var(--color-surface));
  box-shadow: var(--shadow-md);
}
.tesela.t-fail { background: color-mix(in srgb, var(--fail) 16%, var(--color-surface)); }
.tesela.t-wait { background: color-mix(in srgb, var(--wait) 12%, var(--color-surface)); }
.tesela.t-off  { background: var(--color-surface); }
.luz.tesela.activa { border-color: var(--color-accent); }
.tesela-cifra { display: flex; align-items: baseline; gap: var(--space-2); }
.tesela-num {
  font-family: var(--font-heading); font-size: 34px; line-height: 1;
  color: var(--tono); font-variant-numeric: tabular-nums;
}
.tesela-rotulo { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tono); }
.tesela-celdas { display: flex; flex-wrap: wrap; gap: 4px; }
.tesela-celdas i { width: 17px; height: 17px; border-radius: 4px; }
.tesela-nombre {
  font-family: var(--font-heading); font-weight: 500; font-size: 15px; line-height: 1.25; text-wrap: pretty;
}

/* tarjetas */
.tarjeta-luz {
  display: flex; flex-direction: column; gap: var(--space-3); text-align: left;
  padding: var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--chip-borde); border-top: 3px solid var(--tono);
  background: var(--chip-fondo); box-shadow: var(--shadow-sm);
}
.tarjeta-cab { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.tarjeta-estado { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tono); }
.tarjeta-nombre {
  font-family: var(--font-heading); font-weight: 500; font-size: 15.5px; line-height: 1.25;
  letter-spacing: -0.01em; text-wrap: pretty;
}
.tarjeta-celdas { display: flex; flex-wrap: wrap; gap: 3px; }
.tarjeta-celdas i { width: 12px; height: 12px; border-radius: 3px; }
.tarjeta-resumen { font-size: 11.5px; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }

.anillo-luz:hover, .tarjeta-luz:hover, .barra-luz:hover {
  --chip-fondo: color-mix(in srgb, var(--color-text) 9%, transparent);
}
.luz.activa:hover { --chip-fondo: color-mix(in srgb, var(--color-accent) 20%, transparent); }

/* ── Titular y filtros ────────────────────────────────────────────────────── */

.titular {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  border-left: 3px solid var(--tono); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--tono) 10%, var(--color-surface));
  padding: var(--space-4) var(--space-6); margin-bottom: var(--space-4);
}
.titular.t-fail { background: color-mix(in srgb, var(--fail) 12%, var(--color-surface)); }
.titular h1 { margin: 0; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; }
.titular-cuentas {
  font-size: 12.5px; color: var(--color-neutral-400);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-left: auto;
}

.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.filtros-botones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filtro {
  background: transparent; border: 1px solid var(--color-divider); color: var(--color-neutral-400);
  border-radius: var(--radius-md); padding: 6px 11px; min-height: 32px;
  font-size: 12.5px; line-height: 1.2; font-family: var(--font-body); cursor: pointer;
}
.filtro:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.filtro[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  border-color: var(--color-accent); color: var(--color-accent-200);
}
.buscador { flex: 1 1 220px; min-width: 0; max-width: 340px; font-size: 13px; }
.mostrados { font-size: 12px; color: var(--color-neutral-500); margin-left: auto; }

/* ── Grupos de la portada ─────────────────────────────────────────────────── */

.grupos-grandes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--space-4); align-items: start; margin-bottom: var(--space-4);
}
.grupos-resto { column-width: 290px; column-gap: var(--space-4); }

.grupo {
  min-width: 0; overflow: hidden;
  border: 1px solid var(--color-divider); border-top: 2px solid var(--tono);
  border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.grupos-resto .grupo { break-inside: avoid; margin: 0 0 var(--space-4); }
.grupo-cab { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-3); }
.grupo-titulo { display: flex; align-items: flex-start; gap: var(--space-3); }
.grupo-punto {
  width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 5px;
  background: var(--tono); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono) 22%, transparent);
}
.grupo-nombre {
  flex: 1 1 auto; min-width: 0; text-decoration: none; text-wrap: pretty;
  font-family: var(--font-heading); font-weight: 500; font-size: 15px; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--color-text);
}
.grupo-nombre:hover { color: var(--color-accent-300); }
.grupo-meta-fila { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.grupo-meta { font-size: 11.5px; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }
.grupo-masivo {
  margin-left: auto; background: transparent; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--color-divider); border-radius: var(--radius-sm);
  color: var(--color-neutral-400); font-size: 11px; line-height: 1.2; font-family: var(--font-body);
  padding: 4px 8px; min-height: 28px;
}
.grupo-masivo:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.grupo-nota {
  margin: 0 var(--space-4) var(--space-3);
  font-size: 11.5px; line-height: 1.45; color: var(--color-neutral-500); font-style: italic;
}
.grupo-items { display: flex; flex-direction: column; }
.grupo-vacio { padding: var(--space-4); font-size: 12px; color: var(--color-neutral-600); border-top: 1px solid var(--raya); }

.item {
  display: grid; grid-template-columns: 4px 1fr auto; gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--raya);
}
.item.t-fail, .fila.t-fail { background: color-mix(in srgb, var(--fail) 9%, transparent); }
.item.t-off, .fila.t-off { opacity: 0.55; }
.item-barra { align-self: stretch; min-height: 26px; border-radius: 2px; background: var(--tono); }
.item-cuerpo { min-width: 0; }
.item-cabeza { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.item-nombre {
  font-size: 13.5px; line-height: 1.4; font-family: var(--font-heading); font-weight: 500;
  color: var(--color-text); text-decoration: none; overflow-wrap: anywhere;
}
a.item-nombre:hover { color: var(--color-accent-300); }
.item-sub { font-size: 11.5px; line-height: 1.45; color: var(--color-neutral-500); margin-top: 2px; overflow-wrap: anywhere; }
.item-detalle {
  font-size: 11.5px; line-height: 1.45; color: var(--color-neutral-600); margin-top: 2px;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.item.t-fail .item-detalle { color: var(--tono); }

.pastilla {
  display: inline-block; font-size: 9.5px; line-height: 1.5; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--tono); border: 1px solid color-mix(in srgb, var(--tono) 45%, transparent);
  border-radius: 999px; padding: 1px 6px; white-space: nowrap;
}
.pastilla.grande { font-size: 10px; letter-spacing: 0.08em; padding: 2px 8px; }

/* botones on/off y campana */
.controles { display: flex; align-items: center; gap: var(--space-2); }
.ctl, .ctl-grande {
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: 1px solid var(--color-neutral-800); color: var(--color-neutral-500);
  font-family: var(--font-body); line-height: 1.2;
}
.ctl {
  gap: 5px; min-width: 46px; min-height: 30px; border-radius: var(--radius-sm);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
}
.ctl-grande { gap: var(--space-2); min-height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-md); font-size: 12.5px; }
.ctl.on, .ctl-grande.on {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border-color: var(--color-accent); color: var(--color-accent-300);
}
.ctl:hover, .ctl-grande:hover { border-color: var(--color-neutral-600); color: var(--color-neutral-300); }
.ctl.on:hover, .ctl-grande.on:hover { background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: var(--color-accent-200); }
.ctl:disabled, .ctl-grande:disabled, .grupo-masivo:disabled { cursor: progress; opacity: 0.5; }
.ctl svg, .ctl-grande svg { display: block; flex: none; }
.ctl-hueco { display: block; min-width: 46px; min-height: 30px; }

/* ── Proyecto, tarea, servicio ────────────────────────────────────────────── */

.banner {
  display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: flex-start;
  border-left: 3px solid var(--tono); border-radius: var(--radius-md);
  background: var(--color-surface); padding: var(--space-6);
}
.banner.t-fail { background: color-mix(in srgb, var(--fail) 12%, var(--color-surface)); }
.banner-texto { flex: 1 1 320px; min-width: 0; }
.banner-titulo { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.banner h1 { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.banner h1.menor { font-size: 24px; }
.banner-sub { font-size: 12.5px; color: var(--color-neutral-400); margin-top: var(--space-2); overflow-wrap: anywhere; }
.banner-nota { margin: var(--space-2) 0 0; font-size: 12.5px; font-style: italic; color: var(--color-neutral-400); max-width: 62ch; }
.banner-situacion { font-size: 13px; color: var(--color-neutral-600); margin-top: var(--space-2); max-width: 70ch; }
.banner.t-fail .banner-situacion { color: var(--tono); }
.banner-lateral { display: flex; flex-direction: column; gap: var(--space-2); min-width: 200px; }
.banner-botones { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rotulo-mini { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-500); }

.seccion {
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-surface); padding: var(--space-6); min-width: 0;
}
.seccion.lista { padding: var(--space-6) 0 var(--space-2); }
.seccion.lista.ejecuciones { padding-bottom: var(--space-4); }
.seccion h2 { margin: 0 0 var(--space-4); font-size: 13px; line-height: 1.3; color: var(--color-accent-300); }
.seccion.lista h2 { margin: 0 var(--space-6) var(--space-4); }
.vacio { padding: var(--space-3) var(--space-6) var(--space-4); font-size: 12.5px; color: var(--color-neutral-600); }
.leyenda { margin: var(--space-3) 0 0; font-size: 11.5px; color: var(--color-neutral-500); }
.leyenda.con-margen { margin: var(--space-3) var(--space-6) var(--space-2); }

.fila {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-6); border-top: 1px solid var(--raya);
}
.fila > .pastilla { flex: none; min-width: 88px; text-align: center; padding: 2px 7px; }
.fila-nombre { flex: 1 1 210px; min-width: 0; }
.fila-nombre .item-sub { margin-top: 0; }
.fila-situacion { flex: 1 1 190px; min-width: 0; font-size: 12.5px; color: var(--color-neutral-600); overflow-wrap: anywhere; }
.fila.t-fail .fila-situacion { color: var(--tono); }
.fila-servicio .fila-situacion { color: var(--color-neutral-400); }
.fila-tiempos {
  flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  font-size: 12px; color: var(--color-neutral-400); font-variant-numeric: tabular-nums;
}
.fila-tiempos .tenue { color: var(--color-neutral-600); }
.fila > .controles { flex: none; margin-left: auto; }

.fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-3); }
.fichas.anchas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.ficha { border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); min-width: 0; }
.ficha-k { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-500); }
.ficha-v {
  font-size: 13.5px; line-height: 1.4; margin-top: 3px;
  font-family: var(--font-heading); font-weight: 500; overflow-wrap: anywhere;
}
.ficha-sub { font-size: 11px; color: var(--color-neutral-600); font-family: var(--font-mono); overflow-wrap: anywhere; }
.medidor { display: block; width: 100%; height: 6px; margin: 6px 0 4px; }
.medidor-fondo { fill: var(--color-neutral-800); }
.medidor-valor { fill: var(--tono); }

.comando {
  margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--color-accent-200);
  overflow-x: auto; white-space: nowrap;
}
.pista { margin: var(--space-3) 0 0; font-size: 11.5px; font-style: italic; color: var(--color-neutral-500); }

.comprobaciones { display: flex; flex-direction: column; gap: var(--space-3); }
.comprobacion { display: grid; grid-template-columns: 84px 1fr; gap: var(--space-3); align-items: start; }
.comprobacion > .pastilla { justify-self: start; padding: 2px 7px; }
.comprobacion > div { min-width: 0; }
.comprobacion-titulo { font-size: 13px; line-height: 1.45; }
.comprobacion-detalle {
  font-size: 11.5px; color: var(--color-neutral-500); font-family: var(--font-mono);
  margin-top: 2px; overflow-wrap: anywhere;
}

.franja { display: flex; flex-wrap: wrap; gap: 3px; }
.franja i { display: block; width: 11px; height: 15px; border-radius: 2px; border: 1px solid transparent; }
.franja i.bien   { background: color-mix(in srgb, var(--ok) 65%, transparent); }
.franja i.corrio { background: color-mix(in srgb, var(--ok) 32%, transparent); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.franja i.mal    { background: color-mix(in srgb, var(--fail) 70%, transparent); }
.franja i.hueco  { background: transparent; border: 1px dashed color-mix(in srgb, var(--fail) 70%, transparent); }

.dos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-4); align-items: start;
}
.ej-fila {
  display: grid; grid-template-columns: 1fr 70px 70px 90px; gap: var(--space-3);
  padding: var(--space-2) var(--space-6); border-top: 1px solid var(--raya);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.ej-fila > span:nth-child(2) { color: var(--color-neutral-400); }
.ej-fila > span:nth-child(3) { color: var(--color-neutral-500); }
.ej-fila > span:nth-child(4) { color: var(--color-neutral-600); }
.ej-fila > span.codigo-mal { color: var(--fail); }
.ej-cab {
  border-top: 0; padding-top: 0; padding-bottom: var(--space-2);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
}
.ej-cab > span, .ej-cab > span:nth-child(n) { color: var(--color-neutral-500); }

.cronologia { display: flex; flex-direction: column; gap: var(--space-4); }
.hito { border-left: 2px solid var(--tono); padding-left: var(--space-4); }
.hito-cuando { font-size: 11.5px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.hito-titulo { font-size: 13px; font-family: var(--font-heading); font-weight: 500; margin-top: 2px; }
.hito-detalle { font-size: 11.5px; color: var(--color-neutral-500); margin-top: 2px; overflow-wrap: anywhere; }

.salida {
  margin: 0; padding: var(--space-3) var(--space-4); max-height: 420px; overflow: auto;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--color-neutral-300);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ── Diálogo y aviso flotante ─────────────────────────────────────────────── */

.dialogo-fondo {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 70%, transparent);
}
.dialogo {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialogo-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; line-height: 1.25; }
.dialogo-body { font-size: 14px; line-height: 1.55; opacity: 0.85; }
.dialogo-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }

.aviso-flotante {
  position: fixed; left: 50%; bottom: var(--space-8); z-index: 60; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-accent); box-shadow: var(--shadow-lg);
  font-size: 13px;
}
.aviso-flotante.error { border-color: var(--fail); }

/* ── Entrada ──────────────────────────────────────────────────────────────── */

body.entrada { display: grid; place-items: center; padding: var(--space-6); }
.entrada form {
  width: min(360px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-8); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-md);
}
.entrada h1 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.entrada-sub { margin: 0 0 var(--space-2); font-size: 13px; color: var(--color-neutral-500); }
.entrada .error { margin: 0; font-size: 13px; color: var(--fail); }

/* ── Agenda y calendario ──────────────────────────────────────────────────── */
/*
 * El calendario no guarda nada: cada visita lo recalcula. Aquí solo se decide
 * cómo se lee. Un suceso es siempre la misma pieza —marca, hora, nombre,
 * proyecto y detalle— y cada sitio esconde lo que allí sobra: en la franja de
 * la portada no cabe el proyecto, y en la columna de la semana tampoco el
 * detalle.
 */

.ag-suceso {
  display: grid; grid-template-columns: 14px 44px minmax(0, 1fr) minmax(0, auto) auto;
  align-items: baseline; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  border-left: 3px solid var(--tono);
  background: color-mix(in srgb, var(--tono) 8%, var(--color-surface));
  font-size: 12.5px;
}
.ag-marca { color: var(--tono); font-weight: 700; text-align: center; }
.ag-reloj { color: var(--color-neutral-300); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-nombre { color: var(--color-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-nombre:hover { text-decoration: underline; }
.ag-proyecto {
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-neutral-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ag-detalle { font-size: 11.5px; color: var(--color-neutral-500); white-space: nowrap; }
.nada { margin: 0; font-size: 11.5px; color: var(--color-neutral-600); }

.ag-franja {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.ag-ahora {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-neutral-500);
}
.ag-ahora b {
  font-size: 18px; font-variant-numeric: tabular-nums;
  color: var(--color-accent-300); letter-spacing: -0.01em;
}
.ag-proximas { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1 1 320px; }
.ag-proximas .ag-suceso { flex: 1 1 auto; grid-template-columns: 14px auto minmax(0, 1fr) auto; }
.ag-proximas .ag-proyecto { display: none; }
.ag-mas { margin-left: auto; font-size: 12px; color: var(--color-accent-300); text-decoration: none; white-space: nowrap; }
.ag-mas:hover { text-decoration: underline; }

.ag-bandas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-2); }
.ag-banda {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  border-left: 3px solid var(--tono);
  background: color-mix(in srgb, var(--tono) 8%, var(--color-surface)); font-size: 12.5px;
}
.ag-banda .ag-nombre { white-space: normal; }
.ag-cada {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tono); white-space: nowrap;
}
.ag-banda .ag-proyecto { white-space: normal; }

.cal { display: flex; flex-direction: column; gap: var(--space-4); }
.cal-pestanas { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cal-pestana {
  padding: var(--space-2) var(--space-4); border-radius: 999px; font-size: 12.5px;
  text-decoration: none; color: var(--color-neutral-400); border: 1px solid var(--color-divider);
}
.cal-pestana:hover { color: var(--color-text); }
.cal-pestana.activa { color: var(--color-bg); background: var(--color-accent-300); border-color: transparent; font-weight: 600; }

.cal-dia { display: flex; flex-direction: column; }
.cal-hora {
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-2) var(--space-3); border-top: 1px solid var(--raya); min-height: 26px;
}
.cal-hora-num { font-size: 11.5px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
.cal-hora-num i { display: block; font-style: normal; font-size: 10px; color: var(--color-accent-300); }
.cal-hora.viva .cal-hora-num { color: var(--color-neutral-300); }
.cal-hora.es-ahora {
  border-top-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.cal-sucesos { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.cal-columna {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
  padding: var(--space-3); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
}
.cal-columna.hoy { box-shadow: 0 0 0 1px var(--color-accent); }
.cal-dia-nombre {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-500);
}
.cal-columna.hoy .cal-dia-nombre { color: var(--color-accent-300); }
.cal-columna .ag-suceso { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); font-size: 11.5px; }
.cal-columna .ag-nombre { flex: 1 1 100%; white-space: normal; }
.cal-columna .ag-proyecto, .cal-columna .ag-detalle { display: none; }

.cal-scroll { overflow-x: auto; }
.cal-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.cal-mes-cab {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-neutral-600); padding: 0 var(--space-2) var(--space-1);
}
.cal-celda {
  min-height: 76px; padding: var(--space-2); border-radius: var(--radius-sm);
  border: 1px solid var(--raya); display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.cal-celda.vacia { border: 0; }
.cal-celda.hoy { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.cal-num { font-size: 11px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.cal-celda.hoy .cal-num { color: var(--color-accent-300); }
.cal-cita {
  font-size: 10.5px; text-decoration: none; color: var(--color-text);
  padding: 1px var(--space-2); border-radius: 3px; border-left: 2px solid var(--tono);
  background: color-mix(in srgb, var(--tono) 14%, var(--color-surface));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-cita:hover { text-decoration: underline; }

/* ── Pantallas estrechas ──────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .cal-semana { grid-template-columns: 1fr; }
  .cal-mes { min-width: 620px; }
}

@media (max-width: 640px) {
  .ag-suceso { grid-template-columns: 14px 44px minmax(0, 1fr) auto; gap: var(--space-2); }
  .cal-dia .ag-proyecto, .ag-franja .ag-proyecto { display: none; }
  .cal-hora { grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-2); padding-left: 0; padding-right: 0; }
  .ag-ahora { width: 100%; }
  .ag-mas { margin-left: 0; }
  .cab, .pagina, .pagina-ancha { padding-left: var(--space-4); padding-right: var(--space-4); }
  .cab-datos { gap: var(--space-3); }
  .seg-pildora { margin-left: 0; }
  .barra-estado, .barra-resumen { width: auto; text-align: left; }
  .fila, .ej-fila, .seccion.lista h2 { padding-left: var(--space-4); padding-right: var(--space-4); }
  .seccion.lista h2 { margin-left: var(--space-4); margin-right: var(--space-4); padding: 0; }
  .ej-fila { grid-template-columns: 1fr 56px 44px 70px; gap: var(--space-2); }
  .buscador { max-width: none; }
  .mostrados { margin-left: 0; }
}