/*
 * DNS Watchtower — hoja de estilos del Web Admin (change 09).
 *
 * Capas, de menor a mayor prioridad:
 *   reset       normalización mínima
 *   tokens      primitivos de marca (--dw-*) y tokens semánticos (--color-*, --espacio-*, ...)
 *   base        elementos HTML sin clase
 *   layout      estructura de página: barra lateral, área principal, base pública
 *   components  componentes (botones, formularios, tablas, insignias, tarjetas, avisos)
 *   utilities   utilidades de una sola responsabilidad
 *
 * Regla: fuera de la capa de tokens solo se usan tokens semánticos, nunca primitivos --dw-*.
 * El loader (static/loader/dw-loader.css) es una hoja aparte, copia de assets/loader.
 */
@layer reset, tokens, base, layout, components, utilities;

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

/* ------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; }
  img, svg { max-width: 100%; }
  img { display: block; height: auto; }
  input, button, select, textarea { font: inherit; color: inherit; }
  table { border-collapse: collapse; }
  fieldset { min-width: 0; }
}

/* ------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Primitivos de marca */
    --dw-navy-950: #010f24;
    --dw-navy-900: #021a3c;
    --dw-navy-800: #0b3058;
    --dw-cyan-400: #00bfe6;
    --dw-cyan-300: #4dd5f2;
    --dw-cyan-600: #0086b3;
    --dw-petrol-600: #00739a;
    --dw-petrol-700: #005b7a;
    --dw-ice-100: #e6eef8;

    /* Neutros fríos */
    --dw-gray-0: #ffffff;
    --dw-gray-50: #f4f7fb;
    --dw-gray-100: #eaeff5;
    --dw-gray-150: #e6ebf2;
    --dw-gray-200: #d6dee9;
    --dw-gray-400: #7d8ba1;
    --dw-gray-600: #4b5b74;
    --dw-gray-700: #3b4a60;
    --dw-gray-900: #0b1f3a;

    /* Neutros del tema oscuro */
    --dw-night-950: #04101f;
    --dw-night-900: #0a1c35;
    --dw-night-850: #102846;
    --dw-night-800: #1c2a40;
    --dw-night-700: #22395c;
    --dw-night-500: #6a83a6;
    --dw-night-300: #9db0c9;
    --dw-night-200: #b9c6d8;

    /* Estados: tema claro */
    --dw-green-100: #dcf5e6;
    --dw-green-800: #0d5c30;
    --dw-red-100: #fde4e1;
    --dw-red-700: #b42318;
    --dw-red-800: #a3200f;
    --dw-amber-100: #fdf0d2;
    --dw-amber-800: #7a4800;
    --dw-blue-100: #dcecf9;
    --dw-blue-800: #0b5583;

    /* Estados: tema oscuro */
    --dw-green-900: #0f3523;
    --dw-green-300: #7fe0a8;
    --dw-red-900: #4a1616;
    --dw-red-600: #c4302b;
    --dw-red-300: #ffb0a6;
    --dw-red-400: #ff8f82;
    --dw-amber-900: #3b2c07;
    --dw-amber-300: #f3c96b;
    --dw-blue-900: #0c2c48;
    --dw-blue-300: #93d3f6;

    /* Tipografía */
    --fuente: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
    --fuente-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --texto-xs: 0.75rem;
    --texto-sm: 0.8125rem;
    --texto-md: 0.9375rem;
    --texto-lg: 1.125rem;
    --texto-xl: 1.5rem;
    --texto-2xl: 2rem;

    /* Espaciado (escala de 4 px) */
    --espacio-1: 0.25rem;
    --espacio-2: 0.5rem;
    --espacio-3: 0.75rem;
    --espacio-4: 1rem;
    --espacio-5: 1.25rem;
    --espacio-6: 1.5rem;
    --espacio-8: 2rem;
    --espacio-10: 2.5rem;

    /* Radios, sombras y medidas */
    --radio-sm: 4px;
    --radio-md: 8px;
    --radio-lg: 12px;
    --radio-pill: 999px;
    --ancho-lateral: 15rem;
    --ancho-lateral-compacto: 4.5rem;
    --ancho-formulario: 72rem;
    --ancho-lectura: 38em;
    --ancho-campo: 28rem;
    --transicion: 150ms ease;

    /* Tokens semánticos: tema claro */
    color-scheme: light;
    --color-bg: var(--dw-gray-50);
    --color-surface: var(--dw-gray-0);
    --color-surface-2: var(--dw-gray-100);
    --color-text: var(--dw-gray-900);
    --color-text-muted: var(--dw-gray-600);
    --color-border: var(--dw-gray-200);
    --color-border-strong: var(--dw-gray-400);
    --color-primary: var(--dw-petrol-600);
    --color-primary-hover: var(--dw-petrol-700);
    --color-primary-contrast: var(--dw-gray-0);
    --color-link: var(--dw-petrol-600);
    --color-focus: var(--dw-cyan-600);
    --color-accent: var(--dw-cyan-400);
    --color-error: var(--dw-red-700);
    --color-ok-bg: var(--dw-green-100);
    --color-ok-fg: var(--dw-green-800);
    --color-danger-bg: var(--dw-red-100);
    --color-danger-fg: var(--dw-red-800);
    --color-danger-solid: var(--dw-red-700);
    --color-danger-solid-fg: var(--dw-gray-0);
    --color-warn-bg: var(--dw-amber-100);
    --color-warn-fg: var(--dw-amber-800);
    --color-info-bg: var(--dw-blue-100);
    --color-info-fg: var(--dw-blue-800);
    --color-neutral-bg: var(--dw-gray-150);
    --color-neutral-fg: var(--dw-gray-700);

    /* Barra lateral y cabeceras de marca: azul marino en ambos temas */
    --color-brand-bg: var(--dw-navy-900);
    --color-brand-bg-hover: var(--dw-navy-800);
    --color-brand-text: #c3d1e4;
    --color-brand-text-muted: #8fa3bf;
    --color-brand-text-strong: var(--dw-gray-0);
    --color-brand-accent: var(--dw-cyan-400);
    --color-brand-border: var(--dw-navy-800);

    --sombra-sm: 0 1px 2px rgb(2 26 60 / 0.06);
    --sombra-md: 0 4px 16px rgb(2 26 60 / 0.10);
    --sombra-lg: 0 12px 32px rgb(2 26 60 / 0.25);
  }

  /* Tema oscuro: por preferencia del sistema salvo elección "Claro"... */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --color-bg: var(--dw-night-950);
      --color-surface: var(--dw-night-900);
      --color-surface-2: var(--dw-night-850);
      --color-text: var(--dw-ice-100);
      --color-text-muted: var(--dw-night-300);
      --color-border: var(--dw-night-700);
      --color-border-strong: var(--dw-night-500);
      --color-primary: var(--dw-cyan-400);
      --color-primary-hover: var(--dw-cyan-300);
      --color-primary-contrast: var(--dw-navy-900);
      --color-link: var(--dw-cyan-400);
      --color-focus: var(--dw-cyan-400);
      --color-error: var(--dw-red-400);
      --color-ok-bg: var(--dw-green-900);
      --color-ok-fg: var(--dw-green-300);
      --color-danger-bg: var(--dw-red-900);
      --color-danger-fg: var(--dw-red-300);
      --color-danger-solid: var(--dw-red-600);
      --color-danger-solid-fg: var(--dw-gray-0);
      --color-warn-bg: var(--dw-amber-900);
      --color-warn-fg: var(--dw-amber-300);
      --color-info-bg: var(--dw-blue-900);
      --color-info-fg: var(--dw-blue-300);
      --color-neutral-bg: var(--dw-night-800);
      --color-neutral-fg: var(--dw-night-200);
      --color-brand-bg: var(--dw-navy-950);
      --color-brand-border: var(--dw-night-700);
      --sombra-sm: 0 1px 2px rgb(0 0 0 / 0.4);
      --sombra-md: 0 4px 16px rgb(0 0 0 / 0.45);
      --sombra-lg: 0 12px 32px rgb(0 0 0 / 0.6);
    }
  }

  /* ...o por elección manual "Oscuro" (mismos valores). */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: var(--dw-night-950);
    --color-surface: var(--dw-night-900);
    --color-surface-2: var(--dw-night-850);
    --color-text: var(--dw-ice-100);
    --color-text-muted: var(--dw-night-300);
    --color-border: var(--dw-night-700);
    --color-border-strong: var(--dw-night-500);
    --color-primary: var(--dw-cyan-400);
    --color-primary-hover: var(--dw-cyan-300);
    --color-primary-contrast: var(--dw-navy-900);
    --color-link: var(--dw-cyan-400);
    --color-focus: var(--dw-cyan-400);
    --color-error: var(--dw-red-400);
    --color-ok-bg: var(--dw-green-900);
    --color-ok-fg: var(--dw-green-300);
    --color-danger-bg: var(--dw-red-900);
    --color-danger-fg: var(--dw-red-300);
    --color-danger-solid: var(--dw-red-600);
    --color-danger-solid-fg: var(--dw-gray-0);
    --color-warn-bg: var(--dw-amber-900);
    --color-warn-fg: var(--dw-amber-300);
    --color-info-bg: var(--dw-blue-900);
    --color-info-fg: var(--dw-blue-300);
    --color-neutral-bg: var(--dw-night-800);
    --color-neutral-fg: var(--dw-night-200);
    --color-brand-bg: var(--dw-navy-950);
    --color-brand-border: var(--dw-night-700);
    --sombra-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --sombra-md: 0 4px 16px rgb(0 0 0 / 0.45);
    --sombra-lg: 0 12px 32px rgb(0 0 0 / 0.6);
  }
}

/* ------------------------------------------------------------------------- */
@layer base {
  body {
    font-family: var(--fuente);
    font-size: var(--texto-md);
    line-height: 1.5;
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--espacio-4); }
  h1 { font-size: var(--texto-xl); font-weight: 700; letter-spacing: -0.01em; }
  h2 { font-size: var(--texto-lg); font-weight: 650; margin-top: var(--espacio-8); }
  h3 { font-size: 1rem; font-weight: 650; }
  p { margin: 0 0 var(--espacio-4); }

  a { color: var(--color-link); text-underline-offset: 0.15em; }
  a:hover { color: var(--color-primary-hover); }

  code, pre { font-family: var(--fuente-mono); font-size: 0.875em; }
  pre { white-space: pre-wrap; }

  details > summary { cursor: pointer; color: var(--color-link); }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  ::selection { background: var(--color-info-bg); color: var(--color-text); }
}

/* ------------------------------------------------------------------------- */
@layer layout {
  .marco {
    display: grid;
    grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
    min-height: 100vh;
  }

  /* Barra lateral */
  .barra-lateral {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-6);
    height: 100vh;
    overflow-y: auto;
    padding: var(--espacio-5) var(--espacio-3);
    background: var(--color-brand-bg);
    color: var(--color-brand-text);
    border-right: 1px solid var(--color-brand-border);
    scrollbar-width: thin;
    scrollbar-color: var(--color-brand-border) transparent;
  }
  .barra-lateral :focus-visible { outline-color: var(--color-brand-accent); }

  .principal {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  /* El contenido usa todo el ancho junto a la barra lateral (change 16); los topes son
     locales: --ancho-formulario en los formularios y --ancho-lectura en el texto corrido. */
  .contenido {
    flex: 1;
    width: 100%;
    padding: var(--espacio-8) var(--espacio-8) var(--espacio-6);
  }
  .contenido:focus { outline: none; }
  .pie {
    width: 100%;
    padding: var(--espacio-4) var(--espacio-8) var(--espacio-6);
    color: var(--color-text-muted);
    font-size: var(--texto-sm);
    border-top: 1px solid var(--color-border);
  }

  /* Cabecera compacta: solo en pantallas estrechas */
  .cabecera-movil { display: none; }

  @media (max-width: 767.98px) {
    .marco { display: block; }

    .cabecera-movil {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--espacio-3);
      padding: var(--espacio-2) var(--espacio-4);
      background: var(--color-brand-bg);
      color: var(--color-brand-text);
      border-bottom: 1px solid var(--color-brand-border);
    }
    .cabecera-movil :focus-visible { outline-color: var(--color-brand-accent); }

    /* Sin JavaScript la navegación se muestra apilada encima del contenido. */
    .barra-lateral {
      position: static;
      height: auto;
      border-right: 0;
    }
    .barra-lateral > .marca { display: none; }

    /* Con JavaScript queda oculta tras el botón de menú. */
    .js .barra-lateral {
      position: fixed;
      z-index: 30;
      top: 0;
      bottom: 0;
      left: 0;
      width: min(18rem, 85vw);
      height: auto;
      box-shadow: var(--sombra-lg);
      transform: translateX(-105%);
      visibility: hidden;
      transition: transform 200ms ease, visibility 0s linear 200ms;
    }
    .js .menu-abierto .barra-lateral {
      transform: none;
      visibility: visible;
      transition: transform 200ms ease;
    }
    .js .menu-abierto .barra-lateral > .marca { display: flex; }
    .js .menu-abierto::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 25;
      background: rgb(1 15 36 / 0.55);
    }

    .contenido { padding: var(--espacio-5) var(--espacio-4); }
    .pie { padding: var(--espacio-4); }
  }

  @media (prefers-reduced-motion: reduce) {
    .js .barra-lateral { transition: none; }
  }

  /* Base pública: tarjeta centrada (bienvenida, sesión cerrada, errores sin sesión) */
  .publica {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-4);
    min-height: 100vh;
    padding: var(--espacio-8) var(--espacio-4);
  }
  .tarjeta-publica {
    width: 100%;
    max-width: 30rem;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-md);
  }
  .tarjeta-publica-marca {
    display: flex;
    justify-content: center;
    padding: var(--espacio-6) var(--espacio-6) var(--espacio-5);
    background: var(--color-brand-bg);
    border-bottom: 3px solid var(--color-brand-accent);
  }
  .tarjeta-publica-cuerpo { padding: var(--espacio-6); }
  .tarjeta-publica-cuerpo > :last-child { margin-bottom: 0; }
  .pie-publico {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2) var(--espacio-4);
    color: var(--color-text-muted);
    font-size: var(--texto-sm);
  }
}

/* ------------------------------------------------------------------------- */
@layer components {
  /* --- Marca ------------------------------------------------------------- */
  .marca {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-1) var(--espacio-2);
    border-radius: var(--radio-md);
    color: var(--color-brand-text-strong);
    text-decoration: none;
  }
  .marca:hover { color: var(--color-brand-text-strong); }
  .marca img { width: 2.25rem; height: 2.25rem; flex: none; }
  .marca-texto { font-size: var(--texto-lg); line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap; }
  .marca-dns { font-weight: 300; }
  .marca-watchtower { font-weight: 800; }
  .marca-grande img { width: 3.5rem; height: 3.5rem; }
  .marca-grande .marca-texto { font-size: var(--texto-xl); }
  .cabecera-movil .marca img { width: 1.75rem; height: 1.75rem; }
  .cabecera-movil .marca-texto { font-size: 1rem; }

  /* --- Iconos ------------------------------------------------------------ */
  .icono {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* --- Menú lateral ------------------------------------------------------ */
  .menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .menu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-md);
    color: var(--color-brand-text);
    text-decoration: none;
    font-weight: 500;
    transition: background-color var(--transicion), color var(--transicion);
  }
  .menu a:hover { background: var(--color-brand-bg-hover); color: var(--color-brand-text-strong); }
  .menu a[aria-current="page"] {
    background: var(--color-brand-bg-hover);
    color: var(--color-brand-text-strong);
    font-weight: 650;
  }
  .menu a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--espacio-3));
    top: var(--espacio-2);
    bottom: var(--espacio-2);
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-brand-accent);
  }
  .menu a[aria-current="page"] .icono { color: var(--color-brand-accent); }
  .menu-titulo {
    margin: var(--espacio-4) var(--espacio-3) var(--espacio-1);
    color: var(--color-brand-text-muted);
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* --- Cuenta (pie de la barra lateral) ---------------------------------- */
  .cuenta {
    display: grid;
    gap: var(--espacio-3);
    margin-top: auto;
    padding: var(--espacio-4) var(--espacio-2) 0;
    border-top: 1px solid var(--color-brand-border);
  }
  .cuenta-nombre {
    display: block;
    color: var(--color-brand-text-strong);
    font-weight: 600;
    overflow-wrap: anywhere;
  }
  .cuenta-rol { display: block; color: var(--color-brand-text-muted); font-size: var(--texto-sm); }
  .cuenta form { margin: 0; }
  .boton-salir, .boton-barra {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    width: 100%;
    padding: var(--espacio-2) var(--espacio-3);
    border: 0;
    border-radius: var(--radio-md);
    background: none;
    color: var(--color-brand-text);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
  }
  .boton-salir:hover, .boton-barra:hover { background: var(--color-brand-bg-hover); color: var(--color-brand-text-strong); }
  /* Contraer la barra (change 16): solo con JavaScript y desde 768 px. Lleva los dos iconos;
     se ve el que corresponde al estado. */
  .boton-barra { display: none; }
  .boton-barra .icono + .icono { display: none; }
  @media (min-width: 768px) {
    .js .boton-barra { display: flex; }
  }

  /* --- Botón de menú (móvil) --------------------------------------------- */
  .boton-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--color-brand-border);
    border-radius: var(--radio-md);
    background: none;
    color: var(--color-brand-text-strong);
    cursor: pointer;
  }
  .boton-menu .icono { width: 1.375rem; height: 1.375rem; }
  .js .boton-menu { display: inline-flex; }

  /* --- Selector de tema -------------------------------------------------- */
  .selector-tema { display: none; margin: 0; padding: 0; border: 0; }
  .js .selector-tema { display: block; }
  .selector-tema legend {
    margin-bottom: var(--espacio-1);
    padding: 0;
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .selector-tema-opciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--tema-borde, var(--color-border-strong));
    border-radius: var(--radio-md);
  }
  .selector-tema label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-1);
    padding: var(--espacio-1) var(--espacio-1);
    border-radius: calc(var(--radio-md) - 2px);
    font-size: var(--texto-xs);
    cursor: pointer;
  }
  .selector-tema input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .selector-tema label:has(input:checked) {
    background: var(--tema-activo-bg, var(--color-surface-2));
    color: var(--tema-activo-fg, var(--color-text));
    font-weight: 650;
  }
  .selector-tema label:has(input:focus-visible) {
    outline: 2px solid var(--tema-foco, var(--color-focus));
    outline-offset: 1px;
  }
  .selector-tema .icono { width: 0.875rem; height: 0.875rem; }
  .barra-lateral .selector-tema {
    --tema-borde: var(--color-brand-border);
    --tema-activo-bg: var(--color-brand-bg-hover);
    --tema-activo-fg: var(--color-brand-text-strong);
    --tema-foco: var(--color-brand-accent);
    color: var(--color-brand-text);
  }
  .barra-lateral .selector-tema legend { color: var(--color-brand-text-muted); }
  .pie-publico .selector-tema legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pie-publico .selector-tema-opciones { min-width: 15rem; }

  /* --- Barra lateral compacta (change 16) -------------------------------- */
  /* Solo desde 768 px: por debajo sigue el menú móvil, que abre la barra expandida.
     data-barra="compacta" lo fija barra.js en <html> antes de pintar. Los textos quedan
     ocultos a la vista pero no a los lectores de pantalla, y los de enlaces y botones se
     muestran como etiqueta flotante con el puntero o el foco; por eso la barra no recorta
     su contenido (overflow visible). */
  .marco { transition: grid-template-columns 150ms ease; }
  @media (prefers-reduced-motion: reduce) {
    .marco { transition: none; }
  }
  @media (min-width: 768px) {
    [data-barra="compacta"] .marco { grid-template-columns: var(--ancho-lateral-compacto) minmax(0, 1fr); }
    [data-barra="compacta"] .barra-lateral { overflow: visible; padding-inline: var(--espacio-2); }
    [data-barra="compacta"] .barra-lateral .marca { justify-content: center; }
    [data-barra="compacta"] .barra-lateral .marca-texto { display: none; }
    [data-barra="compacta"] .boton-barra .icono { display: none; }
    [data-barra="compacta"] .boton-barra .icono + .icono { display: block; }

    /* "Administración": separador visible; el texto sigue nombrando la lista. */
    [data-barra="compacta"] .menu-titulo {
      height: 1px;
      margin: var(--espacio-3) var(--espacio-2);
      overflow: hidden;
      background: var(--color-brand-border);
      color: transparent;
      font-size: 0;
    }
    [data-barra="compacta"] .menu a[aria-current="page"]::before { left: calc(-1 * var(--espacio-2)); }

    /* Enlaces y botones: solo el icono; el nombre, como etiqueta flotante. */
    [data-barra="compacta"] :is(.menu a, .boton-salir, .boton-barra) { justify-content: center; padding-inline: 0; }
    [data-barra="compacta"] :is(.menu a, .boton-salir, .boton-barra) > span,
    [data-barra="compacta"] .cuenta > div:first-child,
    [data-barra="compacta"] .barra-lateral .selector-tema :is(legend, label > span) {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }
    [data-barra="compacta"] :is(.menu a, .boton-salir, .boton-barra):is(:hover, :focus-visible) > span {
      z-index: 40;
      top: 50%;
      left: calc(100% + var(--espacio-3));
      width: auto;
      height: auto;
      margin: 0;
      padding: var(--espacio-1) var(--espacio-3);
      overflow: visible;
      clip-path: none;
      transform: translateY(-50%);
      background: var(--color-brand-bg);
      color: var(--color-brand-text-strong);
      border: 1px solid var(--color-brand-border);
      border-radius: var(--radio-md);
      box-shadow: var(--sombra-md);
      font-size: var(--texto-sm);
      font-weight: 600;
    }

    /* Cuenta: nombre y rol solo para lectores; tema en vertical, solo iconos. */
    [data-barra="compacta"] .cuenta { padding-inline: 0; }
    [data-barra="compacta"] .barra-lateral .selector-tema-opciones { grid-template-columns: minmax(0, 1fr); }
    [data-barra="compacta"] .barra-lateral .selector-tema label { padding: var(--espacio-2) 0; }
  }

  /* Ventanas bajas (la barra compacta del Administrador mide unos 614 px): la barra vuelve a
     desplazarse y no hay etiqueta flotante, que se recortaría; el nombre sigue siendo el
     nombre accesible de cada enlace y botón. */
  @media (min-width: 768px) and (max-height: 40rem) {
    [data-barra="compacta"] .barra-lateral { overflow-y: auto; }
    [data-barra="compacta"] :is(.menu a, .boton-salir, .boton-barra):is(:hover, :focus-visible) > span {
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      border: 0;
      box-shadow: none;
    }
  }

  /* --- Enlace para saltar al contenido ----------------------------------- */
  .saltar {
    position: absolute;
    z-index: 50;
    top: var(--espacio-2);
    left: var(--espacio-2);
    padding: var(--espacio-2) var(--espacio-4);
    border-radius: var(--radio-md);
    background: var(--color-surface);
    color: var(--color-link);
    box-shadow: var(--sombra-md);
    transform: translateY(-200%);
  }
  .saltar:focus { transform: none; }

  /* --- Encabezado de página ---------------------------------------------- */
  .encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3) var(--espacio-4);
    margin-bottom: var(--espacio-5);
  }
  .encabezado h1, .encabezado h2 { margin: 0; }
  .encabezado + .encabezado, h2 + .encabezado { margin-top: var(--espacio-8); }
  .titulo-con-estado { display: flex; align-items: center; gap: var(--espacio-3); }

  /* --- Botones ----------------------------------------------------------- */
  .boton, .boton-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    min-height: 2.375rem;
    padding: var(--espacio-2) var(--espacio-4);
    border: 1px solid transparent;
    border-radius: var(--radio-md);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
  }
  .boton {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
  }
  .boton:hover { background: var(--color-primary-hover); color: var(--color-primary-contrast); }
  .boton:active { transform: translateY(1px); }
  .boton-secundario {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text);
  }
  .boton-secundario:hover { background: var(--color-surface-2); color: var(--color-text); }
  .boton-secundario:active { transform: translateY(1px); }
  .boton.boton-peligro { background: var(--color-danger-solid); color: var(--color-danger-solid-fg); }
  .boton.boton-peligro:hover { background: var(--color-danger-solid); filter: brightness(0.9); }
  .boton:disabled, .boton-secundario:disabled, .boton-enlace:disabled,
  .boton[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    filter: none;
  }
  .boton-enlace {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
  }
  .boton-enlace:hover { color: var(--color-primary-hover); }
  .botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-3) var(--espacio-4); }
  form > .botones { margin-top: var(--espacio-5); }

  /* --- Formularios ------------------------------------------------------- */
  .campo { margin-bottom: var(--espacio-4); }
  .campo label, .etiqueta {
    display: block;
    margin-bottom: var(--espacio-1);
    font-weight: 600;
    font-size: var(--texto-sm);
  }
  .campo input:not([type="checkbox"], [type="radio"], [type="file"]),
  .campo select,
  .campo textarea,
  .fila-valor input,
  .duracion input {
    width: 100%;
    max-width: var(--ancho-campo);
    min-height: 2.375rem;
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radio-md);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transicion), box-shadow var(--transicion);
  }
  .campo textarea { min-height: 5rem; resize: vertical; }
  .campo input[type="file"] { max-width: 100%; }
  .campo input:hover, .campo select:hover, .campo textarea:hover,
  .fila-valor input:hover, .duracion input:hover { border-color: var(--color-text-muted); }
  .campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible,
  .fila-valor input:focus-visible, .duracion input:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 0;
    border-color: var(--color-focus);
  }
  .campo-invalido :is(input, select, textarea):not([type="checkbox"], [type="radio"]),
  .campo-invalido.fila-valor input:not([type="checkbox"]),
  .campo :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--color-error);
    border-width: 2px;
  }
  .error-campo, .errores { color: var(--color-error); }
  .error-campo { margin: var(--espacio-1) 0 0; font-size: var(--texto-sm); font-weight: 500; }
  .errores { padding-left: var(--espacio-5); }
  fieldset.campo { border: 0; padding: 0; margin: 0 0 var(--espacio-4); }
  fieldset.campo legend { padding: 0; }
  fieldset.campo .nota { margin: 0 0 var(--espacio-2); font-size: var(--texto-sm); }
  .fila-valor { display: flex; gap: var(--espacio-2); align-items: center; max-width: 40rem; margin-bottom: var(--espacio-2); }
  .fila-valor input { flex: 1; max-width: none; font-family: var(--fuente-mono); font-size: var(--texto-sm); }
  .duracion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2); }
  .duracion label { margin: 0; font-weight: 400; }
  .duracion input { width: 6rem; }
  /* Casilla en línea con otros controles (vigilancia TLS, change 18). */
  .duracion .casilla { margin: 0; }
  .opcion { display: flex; gap: var(--espacio-2); align-items: baseline; margin: var(--espacio-1) 0; }
  .opcion .nota { flex: 1; }
  .opcion .valores code { word-break: normal; }
  .casilla { display: flex; gap: var(--espacio-2); align-items: center; font-weight: 600; margin: var(--espacio-4) 0 var(--espacio-1); }
  .casilla input, .tabla input[type="checkbox"], .opcion input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--color-primary); }
  .en-linea { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espacio-2) var(--espacio-3); }
  .en-linea .campo { flex: 1 1 16rem; max-width: var(--ancho-campo); margin-bottom: 0; }
  .en-linea > :not(.campo) { flex: none; }
  /* En pantallas muy estrechas, formularios en línea y botones se apilan al ancho completo. */
  @media (max-width: 479.98px) {
    .en-linea > :not(.campo), .en-linea .campo { flex: 1 1 100%; max-width: none; }
    .en-linea > :is(.boton, .boton-secundario), .acciones-alerta form > :is(.boton, .boton-secundario) { width: 100%; }
    .botones { flex-direction: column; align-items: stretch; }
    .botones > :is(form, a, button), .botones > form > button { width: 100%; }
  }

  /* Rejilla de los formularios de edición: tantas columnas como quepan, en el orden del
     HTML. Cada .campo ocupa cuatro filas de un subgrid (etiqueta, control, ayuda y error)
     para que los controles de una fila queden alineados; la separación vertical la da el
     margen del campo, no row-gap, para que las filas vacías no añadan hueco. */
  .rejilla-campos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
    column-gap: var(--espacio-5);
  }
  /* El .campo de un .envoltorio (fragmento HTMX con display: contents) también es elemento
     de la rejilla. */
  :is(.rejilla-campos, .rejilla-campos > .envoltorio) > .campo {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    align-items: start;
    min-width: 0;
  }
  :is(.rejilla-campos, .rejilla-campos > .envoltorio) > .campo > :is(label, .etiqueta) { align-self: end; }
  :is(.rejilla-campos, .rejilla-campos > .envoltorio) > .campo > p { margin-bottom: 0; }
  /* Valor de solo lectura (etiqueta + valor): centrado con el texto de los controles */
  .rejilla-campos > .campo > .etiqueta + p { align-self: center; }
  :is(.rejilla-campos, .rejilla-campos > .envoltorio) > .campo > .ayuda { grid-row: 3; }
  :is(.rejilla-campos, .rejilla-campos > .envoltorio) > .campo > .error-campo { grid-row: 4; }
  :is(.rejilla-campos, .rejilla-campos > .envoltorio) > .campo
    > :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea),
  .rejilla-campos .fila-valor { max-width: none; }
  /* Ocupan la fila completa: fieldsets, áreas de texto y notas largas */
  .rejilla-campos > .campo-ancho { grid-column: 1 / -1; }
  .rejilla-campos > .campo.campo-ancho { display: block; grid-row: auto; }
  /* Envoltorio de un fragmento HTMX: su .campo es el elemento de la rejilla */
  .envoltorio { display: contents; }
  /* Formularios de alta y edición: ancho máximo propio con el contenido a todo el ancho
     (tres columnas de rejilla); alineados a la izquierda, bajo el título. */
  .formulario { max-width: var(--ancho-formulario); }
  .ayuda { margin: var(--espacio-1) 0 0; color: var(--color-text-muted); font-size: var(--texto-sm); }

  /* Sugerencia de valores desde el DNS (formulario de registro) */
  .consulta-dns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2) var(--espacio-3); margin-bottom: var(--espacio-4); }
  .sugerencia {
    max-width: 40rem;
    margin-bottom: var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-4);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radio-lg);
  }
  .sugerencia > :last-child { margin-bottom: 0; }
  .sugerencia-titulo { margin: 0 0 var(--espacio-3); }
  .sugerencia-opciones { display: grid; gap: var(--espacio-3); }
  .sugerencia-opcion {
    min-width: 0;
    padding: var(--espacio-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radio-md);
  }
  .sugerencia-opcion .valores { font-size: var(--texto-sm); }
  .sugerencia-opcion p { margin: var(--espacio-2) 0; }
  .sugerencia-cname { font-family: var(--fuente-mono); font-size: var(--texto-sm); overflow-wrap: anywhere; }

  /* Formulario de registro con panel de consulta DNS. Apilado por defecto (el panel queda tras
     Nombre y Tipo); con sitio, el panel pasa a una columna fija a la derecha, reservada aunque
     no se haya consultado para que la sugerencia no mueva los campos. La query se resuelve
     contra el formulario: igual con la barra lateral visible u oculta. */
  .formulario-con-panel { container-type: inline-size; }
  .disposicion > .botones { margin-top: var(--espacio-5); }
  .panel-formulario {
    margin-bottom: var(--espacio-4);
    padding: var(--espacio-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radio-lg);
  }
  .panel-titulo { margin: 0 0 var(--espacio-2); font-size: 1rem; }
  .panel-formulario > .nota { margin-bottom: var(--espacio-3); font-size: var(--texto-sm); }
  .panel-formulario .consulta-dns { margin-bottom: 0; }
  .panel-formulario .sugerencia { max-width: none; margin: var(--espacio-3) 0 0; }
  @container (min-width: 60rem) {
    /* La tercera fila es flexible: un panel más alto que el formulario no separa las rejillas
       de la izquierda; la altura sobrante queda en la fila de los botones. */
    .disposicion {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 22rem;
      grid-template-rows: auto auto 1fr;
      column-gap: var(--espacio-6);
      align-items: start;
    }
    .disposicion > :not(.panel-formulario) { grid-column: 1; }
    .panel-formulario {
      grid-column: 2;
      grid-row: 1 / 4;
      position: sticky;
      top: var(--espacio-5);
      max-height: calc(100vh - 2 * var(--espacio-5));
      overflow-y: auto;
      margin-bottom: 0;
    }
  }

  .filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espacio-3) var(--espacio-4);
    margin-bottom: var(--espacio-5);
    padding: var(--espacio-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radio-lg);
  }
  /* Los filtros llenan la fila con anchos iguales mientras caben; en estrecho, cada uno
     crece al ancho de su línea. Los botones no crecen. */
  .filtros .campo { flex: 1 1 12rem; min-width: 0; margin: 0; }
  .filtros .campo :is(input:not([type="checkbox"], [type="radio"]), select) { width: 100%; max-width: none; }
  .filtros .botones { flex: 0 0 auto; min-height: 2.375rem; }
  @media (max-width: 479.98px) {
    .filtros .botones { flex: 1 1 100%; }
  }

  /* --- Tablas ------------------------------------------------------------ */
  .tabla {
    width: 100%;
    margin-bottom: var(--espacio-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radio-lg);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
  }
  .tabla th, .tabla td {
    text-align: left;
    vertical-align: top;
    padding: var(--espacio-2) var(--espacio-3);
    border-bottom: 1px solid var(--color-border);
  }
  .tabla thead th {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: var(--texto-xs);
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .tabla > tbody:last-child > tr:last-child > td { border-bottom: 0; }
  .tabla > tbody > tr:hover > td { background: color-mix(in srgb, var(--color-surface-2) 55%, transparent); }
  .tabla tr.inactivo td { color: var(--color-text-muted); }
  .tabla tr.inactivo td a { color: var(--color-text-muted); }
  .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2) var(--espacio-3); }
  .acciones form { margin: 0; }
  td.acciones { display: table-cell; white-space: nowrap; }
  td.acciones > * { display: inline-block; margin-right: var(--espacio-3); }
  td.acciones > *:last-child { margin-right: 0; }

  .historial tbody.entrada + tbody.entrada tr:first-child td { border-top: 2px solid var(--color-border); }
  .historial .detalle-servidores td { padding-top: 0; }
  .historial details summary { font-size: var(--texto-sm); }
  .tabla.servidores {
    margin: var(--espacio-2) 0 0;
    font-size: var(--texto-sm);
    background: var(--color-surface-2);
    border-radius: var(--radio-md);
  }
  .tabla.servidores > tbody > tr:hover > td { background: none; }
  .diferencias tr.faltante td, .diferencias tr.sobrante td { background: var(--color-danger-bg); }
  /* Las tablas se desplazan dentro de su contenedor, nunca la página. */
  .desplazable { max-width: 100%; overflow-x: auto; margin-bottom: var(--espacio-4); }
  .desplazable > .tabla { margin-bottom: 0; }
  .desplazable .desplazable { margin-bottom: 0; }

  .cambios { display: flex; flex-wrap: wrap; gap: var(--espacio-4); }
  .cambios pre { margin: var(--espacio-1) 0 0; font-size: var(--texto-xs); }
  .valores { list-style: none; margin: 0; padding: 0; }
  .valores code, .ficha code { word-break: break-all; }
  /* En tablas (que se desplazan) los valores no se parten letra a letra. */
  .tabla .valores { min-width: 12rem; }
  .tabla .valores code { word-break: normal; overflow-wrap: anywhere; }
  .destinos { list-style: none; margin: 0; padding: 0; }


  /* --- Ficha (lista de definiciones) -------------------------------------- */
  .ficha {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--espacio-2) var(--espacio-6);
    margin: 0 0 var(--espacio-6);
    padding: var(--espacio-4) var(--espacio-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radio-lg);
  }
  .ficha dt { color: var(--color-text-muted); font-weight: 600; font-size: var(--texto-sm); }
  .ficha dd { margin: 0; }
  .advertencia .ficha, .error-formulario .ficha { background: transparent; border: 0; padding: 0; }
  @media (max-width: 479.98px) {
    .ficha { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ficha dd { margin-bottom: var(--espacio-2); }
  }

  /* --- Paginación -------------------------------------------------------- */
  .paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
    margin-top: var(--espacio-4);
  }
  .paginacion a {
    padding: var(--espacio-1) var(--espacio-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radio-md);
    background: var(--color-surface);
    text-decoration: none;
  }
  .paginacion a:hover { background: var(--color-surface-2); }
  .paginacion span { color: var(--color-text-muted); }

  /* --- Insignias de estado ----------------------------------------------- */
  /* Un único componente para resultado, severidad, estado de alerta y envío. Cada valor
     elige su par de tokens y conserva siempre su texto visible. */
  .insignia, .resultado, .severidad, .estado-alerta, .envio, .en-cola {
    --insignia-bg: var(--color-neutral-bg);
    --insignia-fg: var(--color-neutral-fg);
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    padding: 0.0625rem var(--espacio-2);
    border-radius: var(--radio-pill);
    background: var(--insignia-bg);
    color: var(--insignia-fg);
    font-size: var(--texto-sm);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: baseline;
  }
  .insignia-ok, .resultado-ok, .estado-normalizada, .envio-sent {
    --insignia-bg: var(--color-ok-bg);
    --insignia-fg: var(--color-ok-fg);
  }
  .insignia-peligro, .resultado-diferente, .resultado-ausente, .resultado-inconsistente,
  .severidad-alta, .estado-abierta, .envio-failed {
    --insignia-bg: var(--color-danger-bg);
    --insignia-fg: var(--color-danger-fg);
  }
  .severidad-critica {
    --insignia-bg: var(--color-danger-solid);
    --insignia-fg: var(--color-danger-solid-fg);
  }
  .insignia-advertencia, .resultado-ttl, .severidad-media {
    --insignia-bg: var(--color-warn-bg);
    --insignia-fg: var(--color-warn-fg);
  }
  .insignia-info, .estado-asignada, .envio-pending, .en-cola {
    --insignia-bg: var(--color-info-bg);
    --insignia-fg: var(--color-info-fg);
  }
  .insignia-neutra, .resultado-error_consulta, .severidad-baja, .estado-resuelta {
    --insignia-bg: var(--color-neutral-bg);
    --insignia-fg: var(--color-neutral-fg);
  }
  .estado-verificacion form { display: inline; margin-left: var(--espacio-2); }
  .verificacion { margin-bottom: var(--espacio-6); }

  /* --- Avisos ------------------------------------------------------------ */
  .advertencia, .aviso-ok, .error-formulario {
    --aviso-bg: var(--color-warn-bg);
    --aviso-fg: var(--color-warn-fg);
    margin: 0 0 var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid color-mix(in srgb, var(--aviso-fg) 35%, transparent);
    border-left: 4px solid var(--aviso-fg);
    border-radius: var(--radio-md);
    background: var(--aviso-bg);
    color: var(--color-text);
  }
  .advertencia > :last-child, .aviso-ok > :last-child, .error-formulario > :last-child { margin-bottom: 0; }
  .advertencia strong { color: var(--aviso-fg); }
  .aviso-ok { --aviso-bg: var(--color-ok-bg); --aviso-fg: var(--color-ok-fg); color: var(--aviso-fg); font-weight: 500; }
  .error-formulario { --aviso-bg: var(--color-danger-bg); --aviso-fg: var(--color-danger-fg); }
  p.error-formulario { color: var(--aviso-fg); font-weight: 500; }
  .nota { color: var(--color-text-muted); }
  /* Medida de lectura del texto corrido con el contenido a todo el ancho; no en tablas. */
  .contenido p { max-width: var(--ancho-lectura); }
  .contenido .tabla p { max-width: none; }
  /* Código sin espacios (cabecera del CSV, nombres largos) se parte antes que desbordar. */
  .contenido p code { overflow-wrap: anywhere; }
  .filtro-lista { margin: 0 0 var(--espacio-3); }
  .fecha-manual { margin: 0 0 var(--espacio-6); }
  .resultado-prueba { margin: var(--espacio-4) 0; }

  /* --- Tablero ----------------------------------------------------------- */
  .salud {
    --salud-bg: var(--color-ok-bg);
    --salud-fg: var(--color-ok-fg);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin: 0 0 var(--espacio-6);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid color-mix(in srgb, var(--salud-fg) 35%, transparent);
    border-radius: var(--radio-lg);
    background: var(--salud-bg);
    color: var(--salud-fg);
    font-weight: 600;
  }
  .salud::before {
    content: "";
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--salud-fg);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--salud-fg) 25%, transparent);
  }
  .salud-verde { --salud-bg: var(--color-ok-bg); --salud-fg: var(--color-ok-fg); }
  .salud-roja { --salud-bg: var(--color-danger-bg); --salud-fg: var(--color-danger-fg); }

  .indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--espacio-4);
  }
  .indicador {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    padding: var(--espacio-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-sm);
  }
  .indicador h2 {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--texto-xs);
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .indicador .nota { margin: 0; font-size: var(--texto-sm); }
  /* Dominios sin datos de registro (change 12): destacado si hay alguno. */
  .indicador-advertencia { border-top-color: var(--color-warn-fg); }
  .cifra {
    margin: 0;
    font-size: var(--texto-2xl);
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .cifra a { color: inherit; text-decoration: none; }
  .cifra a:hover { color: var(--color-link); text-decoration: underline; }
  .cifra-texto { margin: 0; font-size: var(--texto-lg); font-weight: 600; }
  .por-severidad { list-style: none; margin: var(--espacio-1) 0 0; padding: 0; display: grid; gap: var(--espacio-1); }
  .por-severidad a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
    padding: 0.125rem var(--espacio-1);
    border-radius: var(--radio-sm);
    color: var(--color-text);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  .por-severidad a:hover { background: var(--color-surface-2); }

  /* --- Bloques varios ---------------------------------------------------- */
  .resumen { display: flex; flex-wrap: wrap; gap: var(--espacio-3); margin-bottom: var(--espacio-4); }
  .resumen p {
    margin: 0;
    padding: var(--espacio-2) var(--espacio-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radio-md);
  }
  .resumen strong { font-size: var(--texto-lg); font-variant-numeric: tabular-nums; }
  .bloque { margin-bottom: var(--espacio-8); }
  .acciones-alerta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--espacio-4);
  }
  .acciones-alerta > section {
    padding: var(--espacio-4) var(--espacio-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radio-lg);
  }
  .acciones-alerta h3 { margin-top: 0; }
  .acciones-alerta form { margin-bottom: var(--espacio-3); }
  .acciones-alerta form:last-child { margin-bottom: 0; }
  .acciones-alerta .campo input:not([type="checkbox"], [type="radio"]),
  .acciones-alerta .campo select,
  .acciones-alerta .campo textarea { max-width: none; }
  .texto-nota { white-space: pre-wrap; }

  /* --- Indicador de carga (HTMX + loader de marca) ------------------------ */
  /* El loader es el de assets/loader tal cual: aquí solo se maqueta su contenedor; nunca se
     tocan animaciones ni transformaciones de .dw-* (lo vigila una prueba). .dw-cerrando
     mantiene visible el indicador mientras el loader hace su cierre (interfaz.js). */
  .htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
  .htmx-request .htmx-indicator, .htmx-request.htmx-indicator,
  .htmx-indicator.dw-cerrando { opacity: 1; }
  .cargando {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--color-text-muted);
    font-size: var(--texto-sm);
    font-weight: 600;
  }
  .cargando .dw-loader { flex: none; }

  /* Indicador de las navegaciones con boost (patrón "En línea" de assets/loader):
     pastilla fija, oculta salvo mientras dura la navegación o su cierre (interfaz.js
     añade dw-navegando/dw-cerrando a <html>; nunca a este contenedor). */
  .indicador-navegacion {
    position: fixed;
    z-index: 40;
    right: var(--espacio-4);
    bottom: var(--espacio-4);
    padding: var(--espacio-2) var(--espacio-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radio-pill);
    box-shadow: var(--sombra-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease-in;
  }
  html.dw-navegando .indicador-navegacion,
  html.dw-cerrando .indicador-navegacion {
    opacity: 1;
    visibility: visible;
  }

  /* Bienvenida */
  .bienvenida h1 { font-size: var(--texto-lg); }
  .bienvenida .boton { width: 100%; margin-top: var(--espacio-2); }
}

/* ------------------------------------------------------------------------- */
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .sin-margen { margin: 0; }
}