/* ===========================================================================
   Censo Masónico — M∴R∴G∴L∴ de Estado Restauración
   Sistema de diseño institucional.

   Principios:
   · Móvil primero. Todo lo base es para pantalla angosta; los `min-width`
     solo agregan holgura. No hay un solo `max-width`.
   · Escala tipográfica fluida con clamp(): un único valor por nivel sirve
     de 320 px a 1440 px sin saltos ni sobreescrituras.
   · Un acento por vista. El dorado es filete y jerarquía, no relleno.
   · El dorado #C9A227 solo sobre fondo oscuro (6.5:1). Sobre claro se usa
     --dorado-texto #8A6D1F (4.6:1), que sí cumple WCAG AA.
   · Sin sombras difusas ni gradientes: la solemnidad viene de la retícula,
     el aire y el filete fino.
   · Sin estilos en línea: la CSP no los admite.
   ========================================================================= */

:root {
  /* --- Color ------------------------------------------------------------ */
  --azul-institucional: #0A2540;
  --azul-primario: #1B3A6B;
  --azul-claro: #2C5AA0;
  --azul-tenue: #EEF3FA;
  --dorado: #C9A227;
  --dorado-texto: #8A6D1F;
  --dorado-tenue: #F5EDD6;

  --fondo: #F6F8FB;
  --superficie: #FFFFFF;
  --texto: #14203A;
  --texto-medio: #4A5773;
  --texto-tenue: #65718B;   /* 4.90:1 sobre blanco, 4.60:1 sobre el fondo */
  --borde: #E2E8F1;
  --borde-medio: #C6D0E0;
  --borde-fuerte: #94A2BC;

  --exito: #1F6B45;
  --error: #A01B1B;
  --error-tenue: #FDF3F3;

  /* --- Tipografía ------------------------------------------------------- */
  /* Fuentes del sistema: nítidas en cualquier dispositivo, sin descarga ni
     petición a terceros. Google Fonts filtraría la IP de cada visitante. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;

  --t-micro: 0.6875rem;
  --t-menor: 0.8125rem;
  --t-cuerpo: 1rem;
  --t-guia:    clamp(1rem,     0.96rem + 0.20vw, 1.125rem);
  --t-titulo3: clamp(1.0625rem, 1.00rem + 0.30vw, 1.25rem);
  --t-titulo2: clamp(1.1875rem, 1.08rem + 0.52vw, 1.5rem);
  --t-titulo1: clamp(1.5rem,   1.28rem + 1.10vw, 2.25rem);
  --t-portada: clamp(1.75rem,  1.36rem + 1.95vw, 3rem);

  /* --- Espacio ---------------------------------------------------------- */
  --e1: 0.25rem;  --e2: 0.5rem;   --e3: 0.75rem;  --e4: 1rem;
  --e5: 1.5rem;   --e6: 2rem;     --e7: 3rem;     --e8: 4rem;

  --medida: 76rem;
  --margen: clamp(1rem, 0.5rem + 2.2vw, 2.5rem);
  --radio: 3px;
  --toque: 44px;   /* área táctil mínima */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--azul-institucional);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--t-titulo1); line-height: 1.15; }
h2 { font-size: var(--t-titulo2); line-height: 1.25; }
h3 { font-size: var(--t-titulo3); line-height: 1.3; }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

a { color: var(--azul-claro); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--azul-primario); }

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

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

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

.salto-contenido { position: absolute; left: -9999px; }
.salto-contenido:focus {
  position: fixed; top: var(--e2); left: var(--e2); z-index: 100;
  display: inline-block; padding: var(--e3) var(--e4);
  background: var(--azul-institucional); color: #fff; text-decoration: none;
}

/* --- Utilidades de texto ------------------------------------------------- */
.tenue { color: var(--texto-tenue); font-size: var(--t-menor); }
.guia {
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dorado-texto); margin: 0 0 var(--e2);
}
.subtitulo {
  font-size: var(--t-guia); color: var(--texto-medio);
  margin: var(--e2) 0 0; text-wrap: pretty; max-width: 58ch;
}

/* --- Encabezado ---------------------------------------------------------- */
/* Claro a propósito: el sello tiene aro navy y sobre fondo oscuro perdería
   su contorno. Además aligera la vista en móvil. */
.encabezado {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  box-shadow: inset 0 -3px 0 -2px var(--dorado);
  position: sticky; top: 0; z-index: 20;
}
.encabezado__interior {
  max-width: var(--medida); margin-inline: auto;
  padding: var(--e3) var(--margen);
  display: flex; align-items: center; gap: var(--e4);
  justify-content: space-between;
}
.marca {
  display: flex; align-items: center; gap: var(--e3);
  text-decoration: none; color: inherit; min-width: 0;
}
.marca__sello { width: 40px; height: 40px; flex: none; }
.marca__texto { min-width: 0; }
.marca__linea1 {
  display: block; font-size: var(--t-micro); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--texto-tenue); line-height: 1.3;
}
.marca__linea2 {
  display: block; font-family: var(--serif); font-size: 1.0625rem;
  color: var(--azul-institucional); letter-spacing: 0.02em; line-height: 1.2;
}
.marca__sitio { display: none; }

/* Menú sin JavaScript: <details> nativo. */
.menu { position: relative; }
.menu__boton {
  display: flex; align-items: center; gap: var(--e2);
  min-height: var(--toque); padding: var(--e2) var(--e3);
  border: 1px solid var(--borde-medio); border-radius: var(--radio);
  font-size: var(--t-menor); font-weight: 600; color: var(--azul-primario);
  cursor: pointer; list-style: none; background: var(--superficie);
}
.menu__boton::-webkit-details-marker { display: none; }
.menu__boton::after { content: "▾"; font-size: 0.7em; }
.menu[open] .menu__boton { border-color: var(--azul-primario); }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + var(--e2)); z-index: 30;
  min-width: 15rem; padding: var(--e2);
  background: var(--superficie); border: 1px solid var(--borde-medio);
  border-top: 2px solid var(--dorado); border-radius: var(--radio);
  box-shadow: 0 6px 24px rgb(10 37 64 / 0.10);
}
.menu__cuenta {
  padding: var(--e2) var(--e3) var(--e3);
  border-bottom: 1px solid var(--borde); margin-bottom: var(--e2);
  font-size: var(--t-menor); color: var(--texto-tenue); word-break: break-word;
}
.menu__panel a, .menu__panel button {
  display: block; width: 100%; text-align: left;
  padding: var(--e2) var(--e3); min-height: var(--toque);
  font-size: 0.9375rem; color: var(--texto); text-decoration: none;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  border-radius: var(--radio);
}
.menu__panel a:hover, .menu__panel button:hover { background: var(--azul-tenue); color: var(--azul-primario); }
.menu__panel form { margin: 0; }
/* Envoltorio sin caja: los enlaces se siguen apilando como los demás. */
.menu__navegacion { display: contents; }

.nav-amplia { display: none; }

/* --- Estructura ---------------------------------------------------------- */
.contenido {
  flex: 1;
  width: 100%; max-width: var(--medida); margin-inline: auto;
  padding: var(--e6) var(--margen) var(--e8);
}

.avisos { max-width: var(--medida); margin-inline: auto; padding: var(--e4) var(--margen) 0; }
.aviso {
  display: flex; gap: var(--e3);
  padding: var(--e3) var(--e4); margin-bottom: var(--e2);
  background: var(--superficie); border: 1px solid var(--borde);
  border-left: 3px solid var(--azul-claro); border-radius: var(--radio);
  font-size: 0.9375rem;
}
.aviso--success { border-left-color: var(--exito); }
.aviso--error { border-left-color: var(--error); }

.miga { font-size: var(--t-menor); color: var(--texto-tenue); margin: 0 0 var(--e4); }
.miga a { color: var(--texto-medio); }

/* --- Encabezado de página ------------------------------------------------ */
.cabecera { margin-bottom: var(--e6); }
.cabecera__fila {
  display: flex; flex-direction: column; gap: var(--e4);
}
.cabecera__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }

.seccion {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texto-tenue); font-family: var(--sans);
  margin: var(--e7) 0 var(--e4);
  padding-bottom: var(--e2); border-bottom: 1px solid var(--borde);
}

/* --- Portada / hero ------------------------------------------------------ */
.portada {
  position: relative; overflow: hidden;
  background: var(--azul-institucional); color: #fff;
  padding: var(--e6) var(--e5);
  border-radius: var(--radio); margin-bottom: var(--e5);
  border-top: 3px solid var(--dorado);
}
.portada h1 { color: #fff; font-size: var(--t-portada); }

/* --- Cifras -------------------------------------------------------------- */
.cifras {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--borde); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden; margin-bottom: var(--e6);
}
.cifra { background: var(--superficie); padding: var(--e4) var(--e3); text-align: center; }
.cifra__numero {
  display: block; font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  color: var(--azul-primario); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.cifra__etiqueta {
  display: block; margin-top: var(--e1);
  font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-tenue); line-height: 1.3;
}

/* --- Tarjetas de acceso -------------------------------------------------- */
.tarjetas { display: grid; gap: var(--e4); grid-template-columns: 1fr; }
.acceso-tarjeta {
  display: flex; flex-direction: column; gap: var(--e2);
  padding: var(--e5); text-decoration: none; color: inherit;
  background: var(--superficie); border: 1px solid var(--borde);
  border-top: 3px solid var(--azul-primario); border-radius: var(--radio);
  transition: border-color .18s ease, transform .18s ease;
}
.acceso-tarjeta:hover, .acceso-tarjeta:focus-visible {
  border-top-color: var(--dorado); transform: translateY(-2px);
}
.acceso-tarjeta--sobria { border-top-color: var(--borde-medio); }
.acceso-tarjeta p { color: var(--texto-medio); font-size: 0.9375rem; margin: 0; flex: 1; }
.acceso-tarjeta__accion {
  margin-top: var(--e2); font-size: var(--t-menor); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--azul-claro);
}
.acceso-tarjeta:hover .acceso-tarjeta__accion { color: var(--azul-primario); }

/* --- Bloques ------------------------------------------------------------- */
.bloque {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: var(--e5); margin-bottom: var(--e4);
}
.bloque > h2 {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-tenue);
  padding-bottom: var(--e3); margin-bottom: var(--e4);
  border-bottom: 1px solid var(--borde);
}
.columnas { display: grid; gap: var(--e4); grid-template-columns: 1fr; }

.datos { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.datos dt {
  font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-tenue); margin-top: var(--e3);
}
.datos dt:first-child { margin-top: 0; }
.datos dd { margin: 0; font-size: 0.9375rem; }

.evento { padding: var(--e3) 0; border-bottom: 1px solid var(--borde); }
.evento:first-of-type { padding-top: 0; }
.evento:last-child { border-bottom: 0; padding-bottom: 0; }
.evento strong { display: block; font-weight: 600; font-size: 0.9375rem; }

/* El cargo vigente es de lo primero que se consulta en una ficha. */
.cargo-vigente { font-weight: 600; color: var(--azul-primario); }
.sin-historial { margin-bottom: 0; font-size: var(--t-menor); }

.identidad { display: flex; gap: var(--e4); align-items: center; }
.identidad__retrato {
  width: 72px; height: 72px; flex: none; object-fit: cover;
  border: 1px solid var(--borde-medio); border-radius: var(--radio);
}
.pie-registro { margin-top: var(--e5); }

/* --- Tarjeta angosta (acceso, invitación) -------------------------------- */
.panel {
  max-width: 27rem; margin-inline: auto;
  background: var(--superficie); border: 1px solid var(--borde);
  border-top: 3px solid var(--dorado); border-radius: var(--radio);
  padding: var(--e6) var(--e5);
}
.panel__encabezado { text-align: center; margin-bottom: var(--e5); }
.panel__nota { font-size: var(--t-menor); color: var(--texto-medio); }
.panel__pie {
  margin-top: var(--e5); padding-top: var(--e4);
  border-top: 1px solid var(--borde); text-align: center; font-size: var(--t-menor);
}

/* --- Formularios --------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: var(--e1); margin-bottom: var(--e4); }
label {
  font-size: var(--t-menor); font-weight: 600; color: var(--texto-medio);
}
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="date"], input[type="tel"], input[type="file"], select, textarea {
  width: 100%; min-height: var(--toque);
  padding: var(--e2) var(--e3);
  font-family: inherit; font-size: 1rem;  /* 16 px: evita el zoom de iOS */
  color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde-medio); border-radius: var(--radio);
}
input:hover, select:hover, textarea:hover { border-color: var(--borde-fuerte); }
input:focus, select:focus, textarea:focus { border-color: var(--azul-claro); }
textarea { resize: vertical; min-height: 5rem; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-medio) 50%), linear-gradient(135deg, var(--texto-medio) 50%, transparent 50%); background-position: right 1.1rem center, right 0.8rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--e6); }

.campo__ayuda { font-size: var(--t-menor); color: var(--texto-tenue); }
/* Aviso de que un campo de archivo ya trae algo guardado. */
.archivo-actual { font-size: var(--t-menor); color: var(--texto-medio); }
.campo__error { font-size: var(--t-menor); color: var(--error); font-weight: 500; }
/* La marca de obligatorio no puede ser solo el color: se lee como asterisco
   y el `title` la nombra para quien no distinga el matiz. */
.campo__marca { color: var(--error); font-weight: 700; }
.campo--con-error > input, .campo--con-error > select, .campo--con-error > textarea {
  border-color: var(--error);
}

/* Tramos del formulario largo. El expediente son diecinueve campos: sin
   separarlos hay que leerlos todos para encontrar uno. */
.grupo-campos { border: 0; padding: 0; margin: 0; min-width: 0; }
.grupo-campos + .grupo-campos {
  margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid var(--borde);
}
.grupo-campos > legend {
  padding: 0; margin-bottom: var(--e4);
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--azul-primario);
}

.rejilla-campos { display: grid; gap: var(--e4); grid-template-columns: 1fr; }
.rejilla-campos > .campo { margin-bottom: 0; }
.campo--ancho { grid-column: 1 / -1; }

.errores {
  padding: var(--e3) var(--e4); margin-bottom: var(--e4);
  color: var(--error); background: var(--error-tenue);
  border: 1px solid #F0D0D0; border-left: 3px solid var(--error);
  border-radius: var(--radio); font-size: 0.9375rem;
}
.errores p { margin: 0; }
.errores--resumen ul { margin: var(--e2) 0 0; padding-left: var(--e5); }
.errores--resumen li { margin-top: var(--e1); }
.errores--resumen a { color: var(--error); font-weight: 600; }
.errores__titulo { font-weight: 700; }

/* --- Renglones de eventos ceremoniales ----------------------------------- */
.grupo-eventos > h2 { display: flex; align-items: center; gap: var(--e3); }
.bloque__ayuda {
  margin-top: calc(var(--e4) * -1 + var(--e2)); margin-bottom: var(--e4);
  font-size: var(--t-menor); color: var(--texto-tenue); max-width: 62ch;
}
.conteo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 var(--e2);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0;
  color: var(--azul-primario); background: var(--azul-tenue);
  border-radius: 999px;
}

.renglon {
  border: 0; padding: 0 0 var(--e4); margin: 0 0 var(--e4);
  border-bottom: 1px dashed var(--borde-medio);
}
.renglon[hidden] { display: none; }
.renglon:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.renglon__pie {
  display: flex; flex-wrap: wrap; gap: var(--e4);
  align-items: center; margin-top: var(--e3);
}
.renglon__pie:empty { display: none; }

.casilla {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: var(--t-menor); color: var(--texto-medio); cursor: pointer;
  min-height: var(--toque);
}
.casilla input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; min-height: 0; flex: none;
  accent-color: var(--error); cursor: pointer;
}

.enlace-boton {
  min-height: var(--toque); padding: 0;
  font-family: inherit; font-size: var(--t-menor); color: var(--error);
  background: none; border: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 0.2em;
}
.boton--menor {
  min-height: 2.5rem; padding: var(--e2) var(--e4);
  font-size: var(--t-menor); width: 100%;
}

.acciones-formulario {
  display: flex; flex-wrap: wrap; gap: var(--e4); align-items: center;
  margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid var(--borde);
}

.filtros {
  display: grid; gap: var(--e3); grid-template-columns: 1fr;
  padding: var(--e4); margin-bottom: var(--e5);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
}
.filtros__campo { display: flex; flex-direction: column; gap: var(--e1); }
.filtros__acciones { display: flex; gap: var(--e4); align-items: center; }

/* --- Botones ------------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--toque); padding: var(--e2) var(--e5);
  font-family: inherit; font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  color: #fff; background: var(--azul-primario);
  border: 1px solid var(--azul-primario); border-radius: var(--radio);
  transition: background-color .15s ease, border-color .15s ease;
}
.boton:hover { background: var(--azul-institucional); border-color: var(--azul-institucional); color: #fff; }
.boton--bloque { width: 100%; }
.boton--secundario { color: var(--azul-primario); background: transparent; }
.boton--secundario:hover { background: var(--azul-tenue); color: var(--azul-institucional); }
.enlace-sobrio { color: var(--texto-tenue); font-size: 0.9375rem; }

/* --- Listado: tarjetas en móvil, tabla en escritorio --------------------- */
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla thead { display: none; }
.tabla tbody { display: grid; gap: var(--e3); }
.tabla tr {
  display: grid; gap: var(--e1);
  padding: var(--e4); background: var(--superficie);
  border: 1px solid var(--borde); border-left: 3px solid var(--azul-primario);
  border-radius: var(--radio);
}
.tabla td { display: flex; gap: var(--e3); justify-content: space-between; align-items: baseline; padding: 0; border: 0; font-size: 0.9375rem; }
.tabla td::before {
  content: attr(data-etiqueta); flex: none;
  font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-tenue);
}
.tabla td[data-principal] { order: -1; margin-bottom: var(--e1); }
.tabla td[data-principal]::before { display: none; }
.tabla td[data-principal] a { font-weight: 600; font-size: var(--t-titulo3); font-family: var(--serif); text-decoration: none; }
.tabla__num { font-variant-numeric: tabular-nums; color: var(--texto-tenue); }
.tabla__inactiva { border-left-color: var(--borde-medio); opacity: .75; }

.etiqueta {
  display: inline-block; padding: 0.05rem 0.5rem;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em;
  border: 1px solid var(--borde-medio); border-radius: 999px;
  color: var(--texto-tenue); white-space: nowrap;
}
.etiqueta--activo { border-color: #A8D0BC; color: var(--exito); background: #F0F8F4; }
.etiqueta--libre { border-color: #B7CBE8; color: var(--azul-claro); background: var(--azul-tenue); }
.etiqueta--suenos { border-color: var(--borde-medio); color: var(--texto-tenue); background: var(--fondo); }

.paginacion {
  display: flex; gap: var(--e4); align-items: center; justify-content: center;
  margin-top: var(--e5); font-size: 0.9375rem; color: var(--texto-tenue);
}
.paginacion a { min-height: var(--toque); display: inline-flex; align-items: center; }

.vacio {
  padding: var(--e7) var(--e4); text-align: center; color: var(--texto-tenue);
  background: var(--superficie); border: 1px dashed var(--borde-medio); border-radius: var(--radio);
}

/* --- Pie ----------------------------------------------------------------- */
.pie {
  background: var(--azul-institucional); color: #A9BAD2;
  border-top: 3px solid var(--dorado);
  padding: var(--e7) var(--margen); margin-top: auto;
  font-size: var(--t-menor); text-align: center;
}
.pie__interior { max-width: var(--medida); margin-inline: auto; }
.pie__sello { width: 56px; height: 56px; margin-bottom: var(--e4); background: #fff; border-radius: 50%; padding: 2px; }
.pie__nombre { color: #fff; font-family: var(--serif); font-size: var(--t-guia); margin-bottom: var(--e1); }
.pie__legal { max-width: 46ch; margin-inline: auto; color: #8195B4; font-size: var(--t-micro); line-height: 1.6; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: var(--e4); justify-content: center; margin: var(--e4) 0 0; }
.pie__enlaces a { color: #C9D6E8; }

/* ===========================================================================
   Ampliaciones para pantallas mayores. Solo min-width.
   ========================================================================= */

@media (min-width: 30em) {          /* 480 px */
  .cifras { grid-template-columns: repeat(3, 1fr); }
  .rejilla-campos { grid-template-columns: repeat(2, 1fr); }
  .boton--menor { width: auto; }
  .cabecera__fila { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .filtros { grid-template-columns: repeat(2, 1fr); }
  .filtros__acciones { grid-column: 1 / -1; }
}

@media (min-width: 48em) {          /* 768 px */
  .marca__sello { width: 52px; height: 52px; }
  .marca__linea2 { font-size: 1.25rem; }
  .marca__sitio { display: block; font-size: var(--t-micro); color: var(--texto-tenue); letter-spacing: 0.08em; }

  .nav-amplia { display: flex; align-items: center; gap: var(--e2); }
  /* Los enlaces de sección viven en la barra; el menú deja de repetirlos. */
  .menu__navegacion { display: none; }
  .nav-amplia a {
    padding: var(--e2) var(--e3); min-height: var(--toque);
    display: inline-flex; align-items: center;
    font-size: 0.9375rem; font-weight: 600; color: var(--texto-medio);
    text-decoration: none; border-bottom: 2px solid transparent;
  }
  .nav-amplia a:hover { color: var(--azul-primario); border-bottom-color: var(--dorado); }

  .portada { padding: var(--e7) var(--e6); }
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
  .columnas { grid-template-columns: repeat(2, 1fr); }
  .cifras { grid-template-columns: repeat(5, 1fr); }
  .datos { grid-template-columns: 11rem 1fr; gap: var(--e2) var(--e4); align-items: baseline; }
  .datos dt { margin-top: 0; }
  .filtros { grid-template-columns: 2fr 1fr 1fr 1fr; align-items: end; }
  .filtros__acciones { grid-column: auto; }
  .rejilla-campos--3 { grid-template-columns: repeat(3, 1fr); }
  .bloque { padding: var(--e6); }

  /* La tabla vuelve a ser tabla. */
  .tabla { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
  .tabla thead { display: table-header-group; }
  .tabla tbody { display: table-row-group; }
  .tabla tr { display: table-row; padding: 0; border: 0; border-radius: 0; background: none; }
  .tabla th {
    text-align: left; padding: var(--e3) var(--e4);
    background: var(--azul-institucional); color: #fff; white-space: nowrap;
    font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .tabla th:first-child { border-top-left-radius: var(--radio); }
  .tabla th:last-child { border-top-right-radius: var(--radio); }
  .tabla td {
    display: table-cell; padding: var(--e3) var(--e4);
    border-bottom: 1px solid var(--borde); vertical-align: middle;
  }
  .tabla td::before { display: none; }
  .tabla td[data-principal] { margin: 0; }
  .tabla td[data-principal] a { font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; text-decoration: underline; }
  .tabla tbody tr:last-child td { border-bottom: 0; }
  .tabla tbody tr:hover { background: var(--azul-tenue); }
  .tabla__inactiva { opacity: 1; color: var(--texto-tenue); }
}

@media (min-width: 64em) {          /* 1024 px */
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
  .identidad__retrato { width: 88px; height: 88px; }
}

@media print {
  .encabezado, .pie, .cabecera__acciones, .filtros, .paginacion { display: none; }
  body { background: #fff; }
  .bloque, .tabla { border-color: #999; }
}