/* ==========================================================================
   Atlas AI — hoja de estilo única del sitio legal.

   Reglas que NO se pueden romper:
     * CERO dependencias externas. Ni fuentes remotas, ni CDN, ni imágenes de
       terceros. La cabecera Content-Security-Policy de public/_headers declara
       `default-src 'self'`, así que cualquier recurso remoto sería bloqueado
       por el propio navegador.
     * `style-src 'self'` en esa misma CSP: PROHIBIDO usar bloques <style> o
       atributos style="" en el HTML. Todo el estilo vive en este archivo.
     * `script-src 'none'`: el sitio no lleva JavaScript. Nada de lo que se
       define aquí depende de JS, incluido el cambio de tema.

   Estas páginas son el desbloqueador del modo Live de la app de Meta: tienen
   que cargar rápido, siempre, y sin depender de nadie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reinicio mínimo
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Fichas de diseño (modo claro)

   `color-scheme: light dark` hace que el navegador adapte por su cuenta las
   barras de desplazamiento y los controles nativos, sin JavaScript.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Pilas de fuentes del sistema: se ven nativas en cada plataforma y no
     cuestan ni una petición de red. */
  --font-sans:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --bg: #fbfbfd;
  --bg-elev: #ffffff;
  --bg-sunken: #f1f3f8;
  --text: #16181d;
  --text-muted: #5b616e;
  --border: #dfe2ea;
  --border-strong: #c4cad8;
  --accent: #1c46c8;
  --accent-soft: #ecf0ff;
  --note-bg: #f1f5ff;
  --note-border: #b9c8f5;
  --warn-bg: #fff8e8;
  --warn-border: #e3c163;

  /* Color de la ETIQUETA sobre el fondo de acento (el único botón del sitio).
     Se declara aparte porque en modo claro el acento es oscuro y pide texto
     blanco, y en modo oscuro es claro y pide texto casi negro. Contraste
     comprobado: 7,6:1 en claro y 9,1:1 en oscuro. */
  --on-accent: #ffffff;
  --accent-hover: #163aa6;

  /* Estados de resultado de la conexión (sólo /conectar/*). No se usa el color
     como única señal: cada pantalla lo dice además con palabras en el <h1>. */
  --ok-bg: #e9f7ee;
  --ok-border: #8ec7a4;
  --ok-text: #14532d;
  --err-bg: #fdecec;
  --err-border: #e0a0a0;
  --err-text: #8a1c1c;

  --radius: 10px;
  --radius-sm: 6px;

  /* Ancho de lectura cómodo para texto legal largo: unos 72 caracteres a
     tamaño base. Por encima de unos 75 el ojo pierde el renglón al volver, y
     estos documentos se leen enteros.

     Va en `rem` y NO en `ch` a propósito. La unidad `ch` se resuelve contra el
     tamaño de fuente del elemento que USA la variable, no del que la define:
     con `72ch`, el pie (0,875rem) calculaba una carcasa más estrecha que el
     contenido y su borde izquierdo se desplazaba 38 px. `rem` depende sólo de
     la raíz, así que da el mismo ancho en todos los elementos. */
  --measure: 39rem;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);

  /* ÚNICO ancho de la carcasa: cabecera, contenido y pie comparten este valor.
     Es lo que hace que el borde izquierdo del logotipo, el del título y el del
     pie caigan en la MISMA línea vertical en todas las páginas. Si se separan,
     la página parece desencajada aunque cada pieza esté bien. */
  --shell: calc(var(--measure) + 2 * var(--gutter));
}

/* --------------------------------------------------------------------------
   3. Modo oscuro por preferencia del sistema
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1014;
    --bg-elev: #15181f;
    --bg-sunken: #1a1e27;
    --text: #e6e9ef;
    --text-muted: #9ba3b2;
    --border: #262b36;
    --border-strong: #3a4150;
    --accent: #93b2ff;
    --accent-soft: #182241;
    --note-bg: #141b30;
    --note-border: #2e3d68;
    --warn-bg: #271f10;
    --warn-border: #63511f;

    --on-accent: #0e1014;
    --accent-hover: #b3c8ff;

    --ok-bg: #10241a;
    --ok-border: #2f5d40;
    --ok-text: #9fe0b6;
    --err-bg: #2a1416;
    --err-border: #6a3236;
    --err-text: #f2b5b5;
  }
}

/* --------------------------------------------------------------------------
   4. Base del documento
   -------------------------------------------------------------------------- */

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  /* Mejora el corte de palabras largas (URLs, identificadores) en móvil. */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Enlace de salto: invisible hasta que recibe el foco con el teclado. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.6rem 1rem;
  background-color: var(--accent-soft);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 10;
}

.skip-link:focus {
  left: 0;
}

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

/* --------------------------------------------------------------------------
   5. Tipografía
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  letter-spacing: -0.011em;
  text-wrap: balance;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  letter-spacing: -0.021em;
}

h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.9vw, 1.5rem);
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

h3 {
  font-size: 1.075rem;
  margin-top: 2rem;
}

/* Los títulos son destino de los enlaces del índice: hay que dejar aire
   por encima para que no queden pegados al borde superior al saltar. */
h2[id],
h3[id] {
  scroll-margin-top: 1.5rem;
}

p,
ul,
ol,
dl,
figure {
  margin: 0 0 1.15rem;
}

ul,
ol {
  padding-left: 1.35rem;
}

li {
  margin-bottom: 0.45rem;
}

li > ul,
li > ol {
  margin-top: 0.45rem;
  margin-bottom: 0.5rem;
}

strong {
  font-weight: 650;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  text-decoration-thickness: 2px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* La entradilla NO lleva ancho propio: con la columna ya estrecha, limitarla
   más produciría un borde derecho irregular respecto al resto del texto. */
.lede {
  font-size: 1.075rem;
  color: var(--text-muted);
}

.muted {
  color: var(--text-muted);
}

.small {
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   6. Cabecera del sitio
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background-color: var(--bg-elev);
}

.site-header__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0.9rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.014em;
  color: var(--text);
  text-decoration: none;
}

.wordmark img {
  width: 24px;
  height: 24px;
  display: block;
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.15rem;
  font-size: 0.9375rem;
}

.site-nav li {
  margin: 0;
}

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Página actual: marcada con aria-current="page" en el HTML. */
.site-nav a[aria-current='page'] {
  color: var(--text);
  font-weight: 600;
}

.lang-switch {
  font-size: 0.8125rem;
  font-variant: all-small-caps;
  letter-spacing: 0.06em;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.lang-switch:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   7. Contenedores principales
   -------------------------------------------------------------------------- */

.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) 4rem;
}

.doc-header {
  margin-bottom: 2rem;
}

/* Metadatos de vigencia del documento. */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  margin: 0;
  padding: 0.85rem 1.1rem;
  list-style: none;
  background-color: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.doc-meta li {
  margin: 0;
}

.doc-meta strong {
  color: var(--text);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Índice de contenidos
   -------------------------------------------------------------------------- */

.toc {
  margin: 2rem 0 1rem;
  padding: 1.1rem 1.25rem 1.25rem;
  background-color: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.toc h2 {
  font-size: 0.8125rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
  padding-top: 0;
  border-top: 0;
}

.toc ol {
  margin: 0;
  padding-left: 1.3rem;
  font-size: 0.9375rem;
  columns: 2;
  column-gap: 2rem;
}

.toc li {
  margin-bottom: 0.3rem;
  break-inside: avoid;
}

@media (max-width: 42rem) {
  .toc ol {
    columns: 1;
  }
}

/* --------------------------------------------------------------------------
   9. Avisos destacados
   -------------------------------------------------------------------------- */

.callout {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--note-border);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background-color: var(--note-bg);
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout__title {
  display: block;
  font-weight: 650;
  font-size: 0.9375rem;
  margin-bottom: 0.35rem;
}

.callout--warn {
  border-color: var(--warn-border);
  background-color: var(--warn-bg);
}

/* --------------------------------------------------------------------------
   10. Tablas

   Toda tabla va envuelta en <div class="table-wrap"> para que en móvil se
   desplace ella sola en horizontal y el cuerpo de la página nunca lo haga.
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-elev);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.9375rem;
}

caption {
  caption-side: top;
  text-align: left;
  padding: 0.85rem 1rem 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
}

thead th {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background-color: var(--bg-sunken);
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   11. Rejilla de tarjetas (portada)
   -------------------------------------------------------------------------- */

.card-grid {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  /* 11rem permite que las tres tarjetas quepan en una fila dentro de la
     columna de lectura, y que se apilen solas en móvil sin media query. */
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.card-grid li {
  margin: 0;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.15rem 1.25rem;
  background-color: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}

.card:hover {
  border-color: var(--accent);
  background-color: var(--accent-soft);
}

.card__title {
  font-weight: 650;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.card__desc {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin: 0;
}

/* Lista de hechos de la portada: qué hace y qué no hace el sistema. */
.facts {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: grid;
  gap: 0.75rem;
}

.facts li {
  margin: 0;
  padding-left: 1.6rem;
  position: relative;
}

.facts li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   12. Pie
   -------------------------------------------------------------------------- */

.site-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  background-color: var(--bg-elev);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.site-footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.75rem var(--gutter) 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.15rem;
}

.site-footer li {
  margin: 0;
}

.site-footer a {
  color: var(--text-muted);
}

.site-footer a:hover {
  color: var(--accent);
}

.site-footer p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   13. Página 404
   -------------------------------------------------------------------------- */

.page--center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   14. Onboarding — pantallas de /conectar/

   Son las únicas páginas del sitio con una ACCIÓN principal, así que aquí vive
   el único «botón». Es un enlace <a>, no un <button> ni un <form>: la CSP
   declara `form-action 'none'` y `script-src 'none'`, de modo que un botón de
   verdad no tendría forma de hacer nada. Un enlace que navega es la única
   mecánica disponible, y además es la correcta: el destino es otra URL.
   -------------------------------------------------------------------------- */

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.15rem;
  margin: 1.75rem 0;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 2,75rem ≈ 44 px: el objetivo táctil mínimo cómodo en móvil. */
  min-height: 2.75rem;
  padding: 0.65rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.boton--principal {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.boton--principal:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  text-decoration: none;
}

.boton--secundario {
  background-color: var(--bg-elev);
  border-color: var(--border-strong);
  color: var(--text);
}

.boton--secundario:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* El foco del botón NO puede heredar el contorno de acento global: sobre el
   botón principal, que ya es de color de acento, se vería casi igual. Se usa el
   color del texto, que contrasta al máximo en los dos modos. */
.boton:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}

/* Etiqueta de resultado de las pantallas de vuelta. Redundante a propósito:
   repite en una palabra lo que el <h1> ya dice con una frase. */
.estado {
  display: inline-block;
  margin: 0 0 0.9rem;
  padding: 0.2rem 0.75rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.estado--ok {
  background-color: var(--ok-bg);
  border-color: var(--ok-border);
  color: var(--ok-text);
}

.estado--error {
  background-color: var(--err-bg);
  border-color: var(--err-border);
  color: var(--err-text);
}

/* Lista de permisos: <dl> con el permiso en lenguaje llano y, debajo, para qué
   se usa. La pareja término/definición es exactamente lo que hay aquí, y un
   lector de pantalla la anuncia como tal. */
.permisos {
  margin: 1.25rem 0;
}

.permisos dt {
  font-weight: 650;
  margin-top: 1.1rem;
}

.permisos dt:first-of-type {
  margin-top: 0;
}

.permisos dd {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
}

/* Cada causa de fallo de la pantalla de error: título, explicación y solución
   agrupados en un bloque con su propio borde, para poder recorrerlos de un
   vistazo sin leerlos todos. */
.causa {
  margin: 1.25rem 0;
  padding: 1.1rem 1.25rem;
  background-color: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.causa > :last-child {
  margin-bottom: 0;
}

.causa h3 {
  margin-top: 0;
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   15. Puerta privada — /entrar/ y /panel/

   Son las DOS ÚNICAS pantallas del sitio con JavaScript y con un formulario de
   verdad. No contradicen la regla de arriba: la CSP global de public/_headers
   se DESACTIVA para estas dos rutas (`! Content-Security-Policy`) y cada una
   declara la suya propia, más permisiva pero acotada, en su <head>. El resto
   del sitio —las páginas legales, que son las que Meta verifica— sigue con
   `script-src 'none'` intacto.

   Aquí no hay ningún componente nuevo que no exista ya: la tarjeta de acceso
   reutiliza el mismo borde, radio y elevación que `.causa` y `.toc`, y los
   botones son los de `.boton`. Lo único realmente nuevo son los controles de
   formulario, que hasta ahora no existían en el sitio.
   -------------------------------------------------------------------------- */

/* `hidden` tiene que ganar a cualquier `display` declarado por una clase.
   Varias piezas de estas pantallas son flex o grid, y `display: flex` en una
   regla de clase pisa el `display: none` que el atributo `hidden` trae de la
   hoja del navegador (misma especificidad, pero la clase gana por origen). Sin
   esto, un bloque marcado como oculto se vería igual. */
[hidden] {
  display: none !important;
}

/* Centrado vertical y horizontal de la tarjeta de acceso. `justify-content`
   sólo centra si hay altura sobrante: en móvil, con el teclado abierto, la
   tarjeta simplemente se apoya arriba y la página se desplaza. */
.page--acceso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.acceso {
  width: 100%;
  /* 24rem ≈ 384 px. Más ancho que esto y los campos parecen un formulario de
     alta; menos, y la etiqueta de «Correo electrónico» empieza a partirse. */
  max-width: 24rem;
}

.acceso h1 {
  margin-bottom: 0.35rem;
}

.acceso__caja {
  margin: 1.5rem 0 1.25rem;
  padding: 1.35rem 1.4rem;
  background-color: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* --- Controles de formulario ---------------------------------------------- */

.campo {
  margin-bottom: 1.1rem;
}

.campo__etiqueta {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.9375rem;
  font-weight: 650;
}

/* `font-size: 1rem` NO es negociable: por debajo de 16 px, Safari en iOS hace
   zoom al enfocar el campo y descoloca la pantalla entera. */
.campo__control {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.8rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  background-color: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.campo__control:hover {
  border-color: var(--accent);
}

/* El contorno global de `:focus-visible` es suficiente, pero un campo de texto
   recibe el foco también al hacer clic, y ahí `:focus-visible` no se activa en
   todos los navegadores. Se marca el foco a secas para que nunca haya un campo
   activo sin señal visible. */
.campo__control:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.campo__ayuda {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* --- Botones que son <button> y no <a> ------------------------------------ */

/* Sin `width` aquí a propósito: `button.boton` tiene más especificidad que
   `.boton--bloque` (elemento + clase contra clase), así que declarar un ancho
   en esta regla ganaría y dejaría el botón de bloque encogido. Se aprendió
   viéndolo: el botón «Entrar» salía a la mitad de la tarjeta. */
button.boton {
  cursor: pointer;
  /* Safari no hereda el color de fondo en <button> sin esto. */
  -webkit-appearance: none;
  appearance: none;
}

.boton--bloque {
  display: flex;
  width: 100%;
}

/* Mientras la petición está en vuelo el botón queda inerte. Se baja la opacidad
   y NO se cambia el color: un botón gris se confunde con «no disponible», y
   esto es «espera un momento». */
.boton[disabled],
.boton[aria-disabled='true'] {
  opacity: 0.6;
  cursor: progress;
}

.boton[disabled]:hover {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* --- Avisos de resultado --------------------------------------------------- */

/* Hermano de `.callout`, pero para mensajes que APARECEN Y DESAPARECEN según lo
   que conteste el servidor. Van dentro de un contenedor con role="alert" para
   que un lector de pantalla los anuncie en cuanto se pintan. */
.aviso {
  margin: 1.25rem 0;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-sunken);
  font-size: 0.9375rem;
}

.aviso > :last-child {
  margin-bottom: 0;
}

.aviso > :first-child {
  margin-top: 0;
}

/* El color NO es la única señal: el texto del mensaje dice siempre qué pasa. */
.aviso--error {
  background-color: var(--err-bg);
  border-color: var(--err-border);
  color: var(--err-text);
}

.aviso--error a {
  color: inherit;
}

.aviso--ok {
  background-color: var(--ok-bg);
  border-color: var(--ok-border);
  color: var(--ok-text);
}

.aviso--ok a {
  color: inherit;
}

/* --- Estado de carga del panel --------------------------------------------- */

.cargando {
  margin: 2.5rem 0;
  color: var(--text-muted);
}

.cargando::after {
  content: '';
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.5em;
  border-radius: 50%;
  background-color: var(--accent);
  animation: latido 1.1s ease-in-out infinite;
}

@keyframes latido {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cargando::after {
    animation: none;
    opacity: 0.6;
  }
}

/* --------------------------------------------------------------------------
   16. Impresión

   Un revisor o un asesor puede querer el documento en papel o en PDF.
   -------------------------------------------------------------------------- */

@media print {
  :root {
    --bg: #ffffff;
    --bg-elev: #ffffff;
    --bg-sunken: #ffffff;
    --text: #000000;
    --text-muted: #333333;
    --border: #999999;
  }

  .site-header,
  .site-footer,
  .toc,
  .skip-link {
    display: none;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  .page {
    max-width: none;
    padding: 0;
  }

  h2 {
    break-after: avoid;
  }

  .table-wrap,
  tr {
    break-inside: avoid;
  }

  a {
    color: #000000;
    text-decoration: underline;
  }

  .boton {
    border-color: #000000;
    background-color: #ffffff;
    color: #000000;
  }

  .estado,
  .causa,
  .aviso,
  .acceso__caja {
    border-color: #999999;
    background-color: #ffffff;
    color: #000000;
  }

  /* Un formulario de acceso impreso no sirve para nada, y el panel en papel
     sería una foto de un estado que ya cambió. */
  .cargando,
  .formulario {
    display: none;
  }
}