/* ==========================================================================
   luis-ramos.site — hoja de estilos única, compartida por todas las páginas.
   Sin build ni dependencias: se sirve tal cual desde public/.
   Orden: fuentes · tokens · base · tipografía · cabecera · cuenta · pie ·
   bloques · formularios · avisos · insignias · tablas · diálogos ·
   contadores · utilidades.
   ========================================================================== */

/* --- fuentes ------------------------------------------------------------ */
/* IBM Plex (SIL OFL 1.1, @fontsource 5.3.0, subconjunto latin), alojada en
   assets/fuentes/: la CSP sólo permite recursos propios. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("fuentes/plex-sans-400-italica.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fuentes/plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/plex-sans-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/plex-mono-600.woff2") format("woff2"); }

/* --- tokens ------------------------------------------------------------- */

:root {
  --fondo:        #eef1f4;   /* fondo de página */
  --superficie:   #ffffff;   /* tarjetas, cabecera, campos */
  --hundido:      #e6edf4;   /* pestaña activa, chips, iconos */
  --ink:          #0f1d2b;
  --texto:        #2b3947;   /* cuerpo de texto largo */
  --muted:        #52606e;
  --accent:       #1c4e75;   /* mismo azul que el CV en PDF */
  --accent-fuerte:#153b59;
  --sobre-accent: #ffffff;
  --rule:         #d5dce3;
  --rule-suave:   #e3e8ed;
  --borde-campo:  #b3bfca;
  --oscuro:       #0f1d2b;   /* pie y consola */
  --oscuro-texto: #d8e1ea;
  --oscuro-tenue: #93a6b9;
  --peligro:      #a23b2a;
  --aviso:        #8a5d0c;
  --exito:        #1f7a4f;
  --sombra:       0 12px 32px rgb(15 29 43 / 0.12);
  --sobre-peligro:#ffffff;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radio: 12px;
  --radio-sm: 8px;
  --ancho: 76rem;
  --gutter: clamp(1rem, 5vw, 5rem);
  --measure: 40rem;

  /* Claro por defecto, también con el sistema en modo oscuro: es una
     decisión de diseño (2026-09-22). El oscuro sólo entra si el visitante lo
     elige con el botón de la cabecera (tema.js pone data-tema en <html>).
     color-scheme hace que controles y barras de desplazamiento acompañen. */
  color-scheme: light;
}

/* Modo nocturno: mismos roles, otros valores. Sólo en pantalla: al imprimir
   se queda en claro. */
@media screen {
  :root[data-tema="oscuro"] {
    --fondo:        #0c141c;
    --superficie:   #131e29;
    --hundido:      #1b2a39;
    --ink:          #e6edf4;
    --texto:        #c9d4de;
    --muted:        #98a8b8;
    --accent:       #8ec0ea;
    --accent-fuerte:#b3d6f3;
    --sobre-accent: #0c141c;
    --rule:         #253547;
    --rule-suave:   #1d2b3a;
    --borde-campo:  #3a4d61;
    --oscuro:       #080f16;
    --oscuro-texto: #d8e1ea;
    --oscuro-tenue: #8ea1b4;
    --peligro:      #ef9a86;
    --aviso:        #e3bb66;
    --exito:        #7fd0a4;
    --sombra:       0 12px 32px rgb(0 0 0 / 0.45);
    --sobre-peligro:#0c141c;
    color-scheme: dark;
  }
}

/* --- base --------------------------------------------------------------- */

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

/* El atributo hidden tiene que ganar siempre. Sin esto, cualquier componente
   con display propio (grid, flex…) se sigue viendo aunque el JS lo oculte. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* que la cabecera fija no tape el ancla */
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 120ms linear, color 120ms linear, background-color 120ms linear;
}
a:hover { color: var(--accent); text-decoration-color: currentColor; }

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

code { font-family: var(--mono); font-size: 0.9em; }

/* --- tipografía --------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.07; }
h2 { font-size: clamp(1.4rem, 3vw, 1.65rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

/* Antetítulo pequeño. Hoy sólo lo usa la cabecera de la cuenta. */
.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.lead {
  font-size: clamp(1.075rem, 2vw, 1.15rem);
  line-height: 1.6;
  color: var(--texto);
}

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

.meta {
  font-size: 0.875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.mono { font-family: var(--mono); }

/* --- estructura --------------------------------------------------------- */

.wrap {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.prose { max-width: var(--measure); }

/* --- cabecera y menú ---------------------------------------------------- */
/* La cabecera es un solo archivo, public/_partes/cabecera.html, que nginx
   incrusta en cada página (SSI). Para añadir una entrada al menú se toca ahí
   y nada más. Ver docs/paginas.md.                                          */

.masthead {
  background: var(--superficie);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 10;
}

.masthead__inner {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

/* Marca: cuadro con las iniciales + el dominio en monoespaciada. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  margin-right: auto;
}
.wordmark:hover { color: inherit; }
.wordmark__marca {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 6px;
  background: var(--accent);
  color: var(--sobre-accent);
  font-size: 0.8rem;
  transition: background-color 120ms linear;
}
.wordmark:hover .wordmark__marca { background: var(--accent-fuerte); }
.wordmark__dominio { color: var(--muted); }

.nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}

.nav__list a {
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--texto);
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  white-space: nowrap;
}
.nav__list a:hover { color: var(--ink); background: var(--fondo); }

.nav__list a[aria-current="page"] {
  color: var(--accent);
  background: var(--hundido);
}

/* Candado de la zona privada: cerrado sin sesión, abierto con ella.
   cuenta.js pone data-sesion en <html>; hasta entonces, cerrado. */
.nav__privada { gap: 0.4rem; }
.candado {
  width: 0.9em;
  height: 0.9em;
  flex: none;
}
.candado--abierto { display: none; }
[data-sesion="si"] .candado--cerrado { display: none; }
[data-sesion="si"] .candado--abierto { display: inline; color: var(--accent); }

.masthead__acciones {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--rule);
}

.nav__toggle {
  display: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--superficie);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-sm);
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}
.nav__toggle:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 48rem) {
  .nav__toggle { display: block; }
  .masthead__acciones { border-left: 0; padding-left: 0; }

  .nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    background: var(--superficie);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--sombra);
    padding: 0.5rem var(--gutter) 0.75rem;
  }
  .nav[hidden] { display: none; }

  .nav__list { display: grid; gap: 0.15rem; }
  .nav__list a { display: flex; padding: 0.75rem 0.9rem; }
}

@media (max-width: 26rem) {
  .wordmark__dominio { display: none; }
}

/* Sin JS el menú queda siempre desplegado en móvil: peor, pero nunca inaccesible. */
.no-js .nav[hidden] { display: block !important; }
.no-js .nav__toggle { display: none; }

/* --- botón de modo nocturno (cabecera) ----------------------------------- */
/* Lo maneja assets/tema.js. Luna en claro y sol en oscuro: el icono dice a
   qué modo se pasa al pulsar. */

.tema {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--ink);
  background: var(--superficie);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-sm);
  cursor: pointer;
}
.tema:hover { border-color: var(--accent); color: var(--accent); }
.tema svg { width: 1.15rem; height: 1.15rem; }
.tema__sol { display: none; }
[data-tema="oscuro"] .tema__luna { display: none; }
[data-tema="oscuro"] .tema__sol { display: block; }
.no-js .tema { display: none; }

/* --- recuadro de cuenta (esquina superior) -------------------------------- */

.cuenta { position: relative; }

.cuenta__entrar {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-sm);
  padding: 0.55rem 1rem;
  white-space: nowrap;
}
.cuenta__entrar:hover { border-color: var(--accent); color: var(--accent); }

.cuenta__boton {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.6rem 0.25rem 0.25rem;
  font: inherit;
  color: var(--ink);
  background: var(--superficie);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-sm);
  cursor: pointer;
}
.cuenta__boton:hover,
.cuenta__boton[aria-expanded="true"] { border-color: var(--accent); }

.cuenta__inicial {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  background: var(--accent);
  color: var(--sobre-accent);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
}
.cuenta__flecha {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--muted);
  transition: transform 150ms ease;
}
.cuenta__boton[aria-expanded="true"] .cuenta__flecha { transform: rotate(180deg); }

.cuenta__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 16rem;
  padding: 0.5rem;
  background: var(--superficie);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--sombra);
  z-index: 20;
}
.cuenta__menu[hidden] { display: none; }

.cuenta__cabecera {
  padding: 0.6rem 0.75rem 0.8rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule-suave);
}
.cuenta__nombre {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.cuenta__cabecera .insignia { margin-top: 0.4rem; }

.cuenta__menu ul { list-style: none; margin: 0; padding: 0; }
.cuenta__menu li.cuenta__separador { border-top: 1px solid var(--rule-suave); margin-top: 0.35rem; padding-top: 0.35rem; }

.cuenta__menu a,
.cuenta__menu button {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.cuenta__menu a:hover,
.cuenta__menu button:hover,
.cuenta__menu a:focus-visible,
.cuenta__menu button:focus-visible {
  background: var(--fondo);
  color: var(--accent);
  outline-offset: -2px;
}
.cuenta__menu #cuenta-salir { color: var(--peligro); }

/* --- pie ---------------------------------------------------------------- */

.footer {
  margin-top: clamp(3.5rem, 8vw, 5.5rem);
  padding-block: 3rem;
  background: var(--oscuro);
  color: var(--oscuro-texto);
  font-size: 0.95rem;
}

.footer a { color: #ffffff; text-decoration-color: rgb(255 255 255 / 0.3); }
.footer a:hover { color: #ffffff; text-decoration-color: #ffffff; }

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem;
  align-items: start;
}

.footer__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--oscuro-tenue);
  margin: 0 0 0.6rem;
}

.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.35rem; }

/* Nota pequeña al pie de un bloque (p. ej. bajo un formulario). */
.footer__note {
  margin-top: 2rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* --- secciones ---------------------------------------------------------- */
/* Título con una línea fina que llega al borde, y el contenido debajo. */

.section {
  display: grid;
  /* minmax(0, …) y no auto: si no, una tabla ancha estira la columna y la
     página entera se desborda en móvil en vez de desplazarse la tabla. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
}

.section__label {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.65rem);
}
.section__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* --- tarjetas y rejillas ------------------------------------------------ */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--rule);
  border-radius: var(--radio);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.tarjeta > h3 + * { margin-top: 0.75rem; }
.tarjeta p { color: var(--texto); }

.tarjeta__rotulo {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.enlace-flecha {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
}

/* Rejilla de tarjetas que se reparte sola según el ancho. */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
}
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* Bloque oscuro en monoespaciada del generador de excusas de /pruebas/. */
.consola {
  background: var(--oscuro);
  color: var(--oscuro-texto);
  border-radius: var(--radio);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.85;
  overflow: hidden;
}
.consola__barra {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.15rem;
  border-bottom: 1px solid #22344a;
  font-size: 0.75rem;
  color: var(--oscuro-tenue);
}
.consola__ok { color: #6fd3a0; }
.consola__cuerpo { padding: 1.25rem 1.4rem; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.consola .clave { color: #8ec5ff; }
.consola .valor { color: #f2c38b; }

/* --- listas de entradas (trabajos, proyectos, notas) -------------------- */

.entries { list-style: none; margin: 0; padding: 0; }

.entry + .entry {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-suave);
}

.entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.25rem;
  margin-bottom: 0.5rem;
}

.entry__title { font-size: 1.2rem; }

.entry__body { max-width: var(--measure); color: var(--texto); }

/* Viñetas con raya en el color de acento. */
.dashed { list-style: none; margin: 0.75rem 0 0; padding: 0; color: var(--texto); }
.dashed li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.6rem;
}
.dashed li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.55rem;
  height: 2px;
  background: var(--accent);
}
.dashed li:last-child { margin-bottom: 0; }

/* --- etiquetas de tecnología ------------------------------------------- */

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0 0;
  padding: 0;
}

.tags li {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink);
  background: var(--fondo);
  border-radius: 6px;
  padding: 0.25rem 0.65rem;
}
.tarjeta .tags li { background: var(--fondo); }

/* --- pares clave/valor (datos) ------------------------------------------ */

.pairs { margin: 0; }

.pairs > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem 2rem;
  padding-block: 1rem;
  border-top: 1px solid var(--rule-suave);
}
.pairs > div:first-child { border-top: 0; padding-top: 0; }
.pairs > div:last-child { padding-bottom: 0; }
.pairs dt { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.pairs dd { margin: 0; }

@media (min-width: 40rem) {
  .pairs > div { grid-template-columns: 11rem minmax(0, 1fr); }
}

/* --- botones y acciones ------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: var(--sobre-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radio-sm);
  padding: 0.85rem 1.35rem;
  cursor: pointer;
}
.button:hover { color: var(--sobre-accent); background: var(--accent-fuerte); border-color: var(--accent-fuerte); }
.button svg { width: 1rem; height: 1rem; flex: none; }

.button--quiet {
  color: var(--ink);
  background: var(--superficie);
  border-color: var(--borde-campo);
}
.button--quiet:hover { color: var(--accent); background: var(--superficie); border-color: var(--accent); }

.button[disabled] { opacity: 0.55; cursor: progress; }

.button--peligro { color: var(--sobre-peligro); background: var(--peligro); border-color: var(--peligro); }
.button--peligro:hover { color: var(--sobre-peligro); background: color-mix(in srgb, var(--peligro) 85%, #000); border-color: transparent; }

/* Acción secundaria con aspecto de enlace. */
.boton-texto {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  cursor: pointer;
}
.boton-texto:hover { color: var(--ink); }
.boton-texto--peligro { color: var(--peligro); }
.boton-texto[disabled] { opacity: 0.5; cursor: progress; }

/* --- cabecera de página (hero) ----------------------------------------- */

.hero { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2rem, 5vw, 3.5rem); }

.hero h1 { max-width: 22ch; }
.hero__grid h1 { max-width: none; }

.hero__lead {
  max-width: var(--measure);
  margin-top: 1.5rem;
}

.hero__grid { display: grid; gap: 2.5rem; }

@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    gap: 4rem;
    align-items: center;
  }
}

/* Ficha breve en tarjeta: pocos datos secos. */
.factsheet {
  margin: 0;
  background: var(--superficie);
  border: 1px solid var(--rule);
  border-radius: var(--radio);
  padding: 0.5rem 1.4rem;
  font-size: 0.95rem;
}
.factsheet div { padding-block: 0.85rem; border-top: 1px solid var(--rule-suave); }
.factsheet div:first-child { border-top: 0; }
.factsheet dt { font-size: 0.8125rem; color: var(--muted); }
.factsheet dd { margin: 0.15rem 0 0; font-weight: 500; }

/* --- formularios --------------------------------------------------------- */
/* Los usan /entrar/, /registro/, /recuperar/, /restablecer/, /cuenta/ y
   /admin/: por eso son globales (regla de CLAUDE.md).                      */

/* Páginas de acceso (entrar, registro, recuperar, restablecer, confirmar):
   una tarjeta estrecha centrada. */
.pagina-formulario {
  max-width: 29rem;
  margin: clamp(2rem, 7vw, 5rem) auto 0;
  background: var(--superficie);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: clamp(1.5rem, 5vw, 2.5rem);
}
.pagina-formulario h1 { font-size: clamp(1.75rem, 5vw, 2.1rem); margin-bottom: 0.5rem; }
.pagina-formulario form { margin-top: 1.75rem; }
.pagina-formulario form .button[type="submit"] { width: 100%; }
.pagina-formulario .hecho { margin-top: 1.5rem; }
.pagina-formulario .footer__note { margin-top: 1.25rem; text-align: center; }

.formulario { max-width: 28rem; }
.formulario--ancho { max-width: var(--measure); }

.campo { margin-bottom: 1.2rem; }

.campo label,
.campo__etiqueta {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

/* Etiqueta con un enlace alineado a la derecha («¿La olvidaste?»). */
.campo__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.campo__fila label { margin-bottom: 0.4rem; }
.campo__fila a { font-size: 0.8125rem; color: var(--accent); }

.campo input,
.campo select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--superficie);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-sm);
  padding: 0.7rem 0.85rem;
}
.campo input:focus,
.campo select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.campo input[aria-invalid="true"] { border-color: var(--peligro); }

.campo__ayuda {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.campo__ayuda--error { color: var(--peligro); }

/* Contraseña con botón «Mostrar» pegado a la derecha (contrasena.js). */
.campo__contrasena { position: relative; }
.campo__contrasena input { padding-right: 6rem; }
.campo__mostrar {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--texto);
  background: var(--fondo);
  border: 0;
  border-left: 1px solid var(--rule);
  border-radius: 0 7px 7px 0;
  padding: 0 0.9rem;
  cursor: pointer;
}
.campo__mostrar:hover { color: var(--accent); }

/* Medidor de fortaleza: cuatro tramos. */
.medidor {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
  margin-top: 0.55rem;
}
.medidor span {
  height: 4px;
  border-radius: 2px;
  background: var(--rule);
  transition: background 150ms linear;
}
.medidor[data-nivel="1"] span:nth-child(-n+1) { background: var(--peligro); }
.medidor[data-nivel="2"] span:nth-child(-n+2) { background: var(--aviso); }
.medidor[data-nivel="3"] span:nth-child(-n+3) { background: var(--accent); }
.medidor[data-nivel="4"] span { background: var(--exito); }

.enlaces-formulario {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-suave);
  font-size: 0.9rem;
}
.enlaces-formulario a { color: var(--accent); font-weight: 600; }

/* --- avisos ---------------------------------------------------------------- */

.aviso {
  margin: 1.1rem 0 0;
  font-size: 0.925rem;
  color: var(--ink);
  background: var(--fondo);
  border: 1px solid var(--rule);
  border-radius: var(--radio-sm);
  padding: 0.7rem 0.9rem;
}
.aviso[hidden] { display: none; }
.aviso--error { color: var(--peligro); background: color-mix(in srgb, var(--peligro) 8%, var(--superficie)); border-color: color-mix(in srgb, var(--peligro) 35%, transparent); }
.aviso--ok { color: var(--exito); background: color-mix(in srgb, var(--exito) 8%, var(--superficie)); border-color: color-mix(in srgb, var(--exito) 35%, transparent); }
.aviso--info { color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--superficie)); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* Panel que sustituye al formulario cuando ya está hecho («revisa tu correo»). */
.hecho {
  max-width: 32rem;
  background: var(--fondo);
  border: 1px solid var(--rule);
  border-radius: var(--radio);
  padding: 1.5rem;
}
.hecho[hidden] { display: none; }
.hecho h2 { font-size: 1.3rem; margin-bottom: 0.6rem; }

/* --- insignias ------------------------------------------------------------- */

.insignia {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 4px;
  color: var(--muted);
  background: var(--fondo);
  white-space: nowrap;
}
.insignia--admin { color: var(--accent); background: var(--hundido); }
.insignia--ok { color: var(--exito); background: color-mix(in srgb, var(--exito) 12%, var(--superficie)); }
.insignia--pendiente { color: var(--aviso); background: color-mix(in srgb, var(--aviso) 12%, var(--superficie)); }
.insignia--baja { color: var(--peligro); background: color-mix(in srgb, var(--peligro) 10%, var(--superficie)); }

/* --- tablas ---------------------------------------------------------------- */

/* La tabla se desplaza dentro de su marco en móvil; la página no. */
.tabla-marco {
  overflow-x: auto;
  margin-top: 1rem;
  background: var(--superficie);
  border: 1px solid var(--rule);
  border-radius: var(--radio);
  /* Contenedor de los .visualmente-oculto de la tabla: sin esto, al ser
     absolute, escapan del recorte y ensanchan la página entera en móvil. */
  position: relative;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.925rem;
}
.tabla th,
.tabla td {
  text-align: left;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--rule-suave);
  vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  background: color-mix(in srgb, var(--fondo) 55%, var(--superficie));
  white-space: nowrap;
}
.tabla .tenue { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla .mono { font-family: var(--mono); font-size: 0.8125rem; }

/* --- diálogos de confirmación ---------------------------------------------- */

.dialogo {
  width: min(28rem, calc(100vw - 2rem));
  padding: 1.75rem;
  color: var(--ink);
  background: var(--superficie);
  border: 1px solid var(--rule);
  border-radius: var(--radio);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.45);
}
.dialogo::backdrop { background: rgb(15 29 43 / 0.5); }
.dialogo h2 { font-size: 1.3rem; margin-bottom: 0.75rem; }
.dialogo .actions { margin-top: 1.25rem; }

/* --- contadores ------------------------------------------------------------ */

.contadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 0;
}
.contadores div {
  background: var(--superficie);
  border: 1px solid var(--rule);
  border-radius: var(--radio);
  padding: 1rem 1.2rem;
}
.contadores dt { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.contadores dd {
  margin: 0.25rem 0 0;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* --- utilidades -------------------------------------------------------- */

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--gutter);
  top: 0.75rem;
  z-index: 30;
  background: var(--superficie);
  border: 2px solid var(--accent);
  border-radius: var(--radio-sm);
  padding: 0.5rem 0.9rem;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .masthead, .actions, .footer { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .tarjeta, .tabla-marco, .factsheet { border-color: #ccc; }
  .section { break-inside: avoid; }
  a { text-decoration: none; }
}