/* Texto Vigente — hoja de estilos única.
 *
 * Traduce el prototipo de Claude Diseño («Texto Vigente - Prototipo.dc.html», 7 tableros) a un
 * sitio responsive. Los tableros de 1440 y de 390 no son dos diseños distintos sino el mismo en
 * dos anchos, así que aquí hay una sola cascada con puntos de ruptura, no dos hojas.
 *
 * Reglas del brief que la hoja hace cumplir por construcción:
 *   · un solo acento, el ámbar; el resto neutro;
 *   · sin sombras, sin degradados, sin esquinas redondeadas, sin iconos decorativos;
 *   · serif para el texto de las normas, sans para la interfaz;
 *   · cuerpo de lectura nunca por debajo de 16 px;
 *   · líneas finas y mucho blanco en lugar de cajas y relleno.
 *
 * Orden: tokens · base · cabecera · buscador · portada · resultados · norma · pie · responsive.
 */

/* ───────────────────────── tokens ───────────────────────── */

:root {
  /* Paleta del brief. Son los mismos valores que usan los PDF ya generados. */
  --azul: #14213d;
  --ambar: #fca311;
  --blanco: #ffffff;
  --gris-notas: #f4f5f8;
  --texto: #1a1a1a;

  /* Grises derivados, tomados uno a uno del prototipo. */
  --texto-2: #3d4451;
  --texto-3: #6b7280;
  --texto-4: #8a8f9a;
  --linea: #e3e5ea;
  --linea-2: #d6d9e0;
  --linea-3: #eff0f4;
  --gris-badge: #d6d9e0;

  /* Sobre azul marino. */
  --sobre-azul: #c9ccd6;
  --sobre-azul-apagado: #9aa3b8;
  --sobre-azul-inactivo: #7c86a0;
  --borde-azul: #4a587a;
  --borde-azul-2: #3a4867;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --ancho: 1440px;
  --margen: 40px;
  --alto-cabecera: 78px;
}

/* ───────────────────────── base ───────────────────────── */

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

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

body {
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  /* Source Serif 4 es variable en el eje óptico: dejar que el navegador lo ajuste por tamaño
     es la diferencia entre un titular compuesto y uno estirado. */
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Las cifras que se comparan en vertical —fechas, números de artículo, recuentos— van
   tabulares para que las columnas cuadren. En una web de legislación se leen todo el rato. */
time,
.indice__desde,
.meta-noticia__fecha,
.lista-nuevas__fecha,
.lista-modificadas__meta,
.resultado__mod,
.franja__fecha,
.version__rango,
.codigo__id,
.norma-meta {
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--azul);
  text-decoration: none;
}

a:hover {
  color: var(--ambar);
  text-decoration: underline;
}

/* Nunca el anillo azul del navegador: el foco es ámbar, como el acento. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
}

::selection {
  background: #fca31155;
}

mark {
  background: #fca31159;
  color: var(--texto);
  padding: 0 1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

input,
select {
  font: inherit;
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--linea-2);
  border-radius: 0;
  padding: 9px 11px;
}

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen);
}

/* Visible solo para lectores de pantalla. */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ambar);
  color: var(--azul);
  padding: 10px 16px;
  font-weight: 600;
}

.saltar:focus {
  left: 0;
}

/* ───────────────────────── cabecera ───────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--azul);
  color: var(--blanco);
  /* Una hairline ámbar cierra la cabecera. Es la única licencia decorativa de la hoja y se
     paga sola: da un remate deliberado donde antes había un corte plano, sin añadir ningún
     elemento nuevo ni romper la regla del acento único. */
  border-bottom: 2px solid var(--ambar);
}

.cabecera__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen);
  height: var(--alto-cabecera);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logotipo solo tipográfico, dos palabras. Sin balanzas ni columnas (brief). */
.marca {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
}

.marca__nombre {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  /* En display el serif pide tracking negativo; a 25px, -0.02em cierra los huecos que deja
     la fuente pensada para texto corrido. */
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--blanco);
}

.marca__nombre:hover {
  color: var(--blanco);
  text-decoration: none;
}

.marca__nombre em {
  font-style: normal;
  color: var(--ambar);
}

.marca__descriptor {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sobre-azul-apagado);
}

.nav {
  display: flex;
  align-items: center;
  /* Más separación entre elementos: una barra apretada se lee como un formulario, no como
     la cabecera de un periódico. */
  gap: 30px;
}

.nav a {
  color: var(--blanco);
  font-size: 13.5px;
  font-weight: 500;
  /* El interletrado abierto es lo que da respiración a un menú corto sobre fondo oscuro:
     sobre azul marino el texto claro tiende a cerrarse ópticamente. */
  letter-spacing: 0.035em;
}

.nav a:hover {
  color: var(--ambar);
}

.nav__inactivo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sobre-azul-inactivo);
  font-size: 13.5px;
  letter-spacing: 0.035em;
}

.nav__proximamente {
  border: 1px solid var(--borde-azul-2);
  color: var(--sobre-azul-apagado);
  font-size: 10px;
  padding: 1px 5px;
  letter-spacing: 0.04em;
}

.boton-boletin {
  border: 1px solid var(--borde-azul);
  color: var(--blanco);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 8px 16px;
}

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

/* Menú móvil: puro CSS con <details>, para que funcione sin JavaScript. */
.menu-movil {
  display: none;
}

.menu-movil > summary {
  list-style: none;
  border: 1px solid var(--borde-azul);
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--blanco);
}

.menu-movil > summary::-webkit-details-marker {
  display: none;
}

.menu-movil__panel {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--azul);
  border-top: 1px solid var(--borde-azul-2);
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-movil__panel a,
.menu-movil__panel span {
  padding: 10px 0;
  border-bottom: 1px solid var(--borde-azul-2);
  font-size: 15px;
  color: var(--blanco);
}

/* ───────────────────────── buscador ───────────────────────── */

.bloque-buscador {
  border-bottom: 1px solid var(--linea);
  padding: 44px 0 32px;
}

.buscador {
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.buscador__fila {
  display: flex;
}

.buscador__campo {
  flex: 1;
  min-width: 0;
  border: 2px solid var(--azul);
  border-right: none;
  padding: 16px 18px;
  font-size: 17px;
  background: var(--blanco);
}

.buscador__campo::placeholder {
  color: var(--texto-4);
}

.buscador__enviar {
  background: var(--azul);
  color: var(--blanco);
  font-size: 16px;
  font-weight: 600;
  padding: 16px 34px;
  border: 2px solid var(--azul);
  display: flex;
  align-items: center;
}

.buscador__enviar:hover {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--azul);
  text-decoration: none;
}

.chips {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  border: 1px solid var(--linea-2);
  padding: 6px 13px;
  font-size: 13px;
  color: var(--azul);
}

.chip:hover {
  border-color: var(--azul);
  color: var(--azul);
  text-decoration: none;
}

.chips__separador {
  flex: 1;
}

/* `display: contents` deja el resumen al final de la línea de chips y el panel a lo ancho,
 * como en el prototipo. Si el navegador no lo aplicase, el desplegable cae en su propia línea
 * y sigue funcionando: la degradación no rompe nada. */
.enlace-avanzada {
  display: contents;
}

.enlace-avanzada > summary {
  list-style: none;
  font-size: 13px;
  color: var(--azul);
  font-weight: 600;
  border-bottom: 1px solid var(--ambar);
  cursor: pointer;
}

.enlace-avanzada > summary::-webkit-details-marker {
  display: none;
}

.enlace-avanzada > summary:hover {
  color: var(--ambar);
}

.nota-fuente {
  font-size: 12.5px;
  color: var(--texto-3);
}

/* Búsqueda avanzada: rejilla de tres columnas, «más aire» que el original (brief).
 * `flex-basis: 100%` la baja a su propia línea dentro de la fila de chips. */
.avanzada {
  border: 1px solid var(--linea);
  margin-top: 6px;
  flex-basis: 100%;
}

.avanzada__titulo {
  background: var(--azul);
  color: var(--blanco);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 16px;
}

.avanzada__rejilla {
  padding: 20px 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 20px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.campo > span,
.campo > label {
  font-size: 12px;
  color: var(--texto-3);
}

.avanzada__acciones {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.boton {
  background: var(--azul);
  color: var(--blanco);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border: 1px solid var(--azul);
  display: inline-flex;
  align-items: center;
}

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

.boton--secundario {
  background: transparent;
  border-color: var(--linea-2);
  color: var(--azul);
  font-weight: 400;
  padding: 10px 18px;
}

.boton--secundario:hover {
  background: transparent;
  border-color: var(--azul);
  color: var(--azul);
}

/* ───────────────────────── franja de actualidad ───────────────────────── */

.franja {
  border-bottom: 1px solid var(--linea);
  padding: 24px 0;
}

.franja__pista {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.franja__tarjeta {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--linea);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.franja__cat {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
  border-bottom: 2px solid var(--ambar);
  padding-bottom: 1px;
  align-self: flex-start;
}

.franja__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.franja__fecha {
  font-size: 11.5px;
  color: var(--texto-3);
}

.franja__titular {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--azul);
  text-wrap: pretty;
}

/* Las flechas del brief. Con scroll-snap: sin JavaScript, siguen desplazando en móvil. */
.franja__flechas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  flex: none;
}

.franja__flecha {
  border: 1px solid var(--linea-2);
  width: 32px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--azul);
  font-size: 13px;
}

.franja__flecha:hover {
  border-color: var(--azul);
  text-decoration: none;
}

/* ───────────────────────── bloques con cabecera azul ───────────────────────── */

/* «Bloques con cabecera de color […] más planos y con menos altura» (brief). */
.bloque__titulo {
  background: var(--azul);
  color: var(--blanco);
  font-size: 11px;
  font-weight: 600;
  /* Un rótulo en versalitas necesita mucho más interletrado del que parece: por debajo de
     0.16em se lee como una etiqueta apretada. */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 11px 16px;
}

.bloque__titulo--menor {
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 9px 14px;
}

/* ───────────────────────── portada ───────────────────────── */

.portada__cuerpo {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  padding: 40px 0 8px;
}

.lateral {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.destacada {
  padding: 26px 0 24px;
  border-bottom: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.destacada__titulo {
  font-family: var(--serif);
  font-size: 33px;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--azul);
  text-wrap: balance;
}

.destacada__resumen {
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto-2);
  max-width: 640px;
}

.etiqueta-materia {
  background: var(--gris-notas);
  color: var(--azul);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
}

.etiqueta-materia--menor {
  font-size: 10.5px;
  padding: 2px 7px;
}

.meta-noticia {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.meta-noticia__fecha {
  font-size: 12.5px;
  color: var(--texto-3);
}

.norma-afectada {
  font-size: 13.5px;
  color: var(--texto-3);
}

.norma-afectada a {
  color: var(--azul);
  font-weight: 600;
  border-bottom: 1px solid var(--ambar);
}

.noticia {
  padding: 18px 0;
  border-bottom: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.noticia__titulo {
  font-family: var(--serif);
  font-size: 20.5px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--azul);
  text-wrap: pretty;
}

.noticia__resumen {
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto-2);
  max-width: 640px;
}

/* Listas del lateral: el corazón del producto según el brief. */
.lista-modificadas li {
  padding: 13px 0;
  border-bottom: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lista-modificadas__norma {
  font-size: 15px;
  font-weight: 600;
  color: var(--azul);
  line-height: 1.35;
}

.lista-modificadas__arts {
  font-size: 13px;
  color: var(--texto-2);
}

.lista-modificadas__meta {
  font-size: 12.5px;
  color: var(--texto-3);
}

.lista-nuevas li {
  padding: 12px 0;
  border-bottom: 1px solid var(--linea);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.lista-nuevas__texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lista-nuevas__titulo {
  font-size: 14px;
  font-weight: 500;
  color: var(--azul);
  line-height: 1.35;
}

.lista-nuevas__fecha {
  font-size: 12.5px;
  color: var(--texto-3);
}

/* Insignia cuadrada V/D/P. Se reutiliza en resultados y cabeceras de norma (brief). */
.insignia {
  width: 20px;
  height: 20px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--gris-badge);
  color: var(--texto-2);
}

.insignia--vigente {
  background: var(--ambar);
  color: var(--azul);
}

.insignia--parcial {
  background: var(--linea);
  color: var(--texto-2);
}

.insignia--derogada {
  background: var(--gris-badge);
  color: var(--texto-2);
}

.insignia--menor {
  width: 18px;
  height: 18px;
  font-size: 10px;
}

/* Sello Vigente (ámbar) frente a Derogada (gris). */
.sello {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  background: var(--linea);
  color: var(--texto-2);
}

.sello--vigente {
  background: var(--ambar);
  color: var(--azul);
}

/* ───────────────────────── códigos ───────────────────────── */

.codigos {
  padding: 40px 0 48px;
}

/* Las líneas se dibujan con el borde de cada tarjeta, no pintando el fondo del contenedor a
 * través de un `gap`: con 11 códigos en 4 columnas sobra una celda, y con el truco del fondo
 * esa celda vacía aparecía como un bloque gris. */
.codigos__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: none;
  border-right: none;
  border-bottom: none;
}

.codigo {
  background: var(--blanco);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 104px;
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

.codigo__nombre {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--azul);
  line-height: 1.25;
}

.codigo__id {
  font-size: 12.5px;
  color: var(--texto-3);
}

.codigo__vigencia {
  font-size: 12px;
  color: var(--azul);
  font-weight: 600;
}

.codigo__acciones {
  display: flex;
  gap: 14px;
  margin-top: auto;
}

.enlace-menor {
  font-size: 13px;
  color: var(--azul);
  border-bottom: 1px solid var(--ambar);
}

/* ───────────────────────── resultados de búsqueda ───────────────────────── */

.filtros {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filtro {
  border: 1px solid var(--linea-2);
  padding: 8px 14px;
  font-size: 13.5px;
  background: var(--blanco);
}

.filtro--activo {
  border-color: var(--azul);
  background: var(--azul);
  color: var(--blanco);
}

.recuento {
  font-size: 14px;
  color: var(--texto-3);
  padding-bottom: 14px;
}

.recuento strong {
  color: var(--texto);
  font-weight: 600;
}

.resultados {
  padding: 22px 0 56px;
  max-width: 1060px;
}

/* Los resultados se agrupan por norma cuando hay varios artículos de la misma (brief). */
.grupo {
  margin-bottom: 26px;
  border: 1px solid var(--linea);
}

.grupo__cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gris-notas);
  padding: 10px 16px;
  border-bottom: 1px solid var(--linea);
  flex-wrap: wrap;
}

.grupo__norma {
  font-size: 15px;
  font-weight: 600;
  color: var(--azul);
}

.grupo__meta {
  font-size: 13px;
  color: var(--texto-3);
}

.resultado {
  padding: 16px;
  border-bottom: 1px solid var(--linea-3);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.resultado:last-child {
  border-bottom: none;
}

.resultado__cabecera {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.resultado__art {
  font-size: 16px;
  font-weight: 600;
  color: var(--azul);
}

.resultado__epigrafe {
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  color: var(--texto-2);
}

.resultado__mod {
  font-size: 12.5px;
  color: var(--texto-3);
}

.resultado__frag {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto);
  max-width: 840px;
}

.resultado__acciones {
  display: flex;
  gap: 16px;
  padding-top: 2px;
}

.vacio {
  padding: 56px 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vacio__titulo {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--azul);
}

.vacio__texto {
  font-size: 16px;
  color: var(--texto-2);
  line-height: 1.6;
}

/* ───────────────────────── página de norma ───────────────────────── */

.norma-cabecera {
  padding: 22px 0 26px;
  border-bottom: 1px solid var(--linea);
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: flex-start;
}

.migas {
  font-size: 13px;
  color: var(--texto-3);
}

.migas a {
  color: var(--texto-3);
}

.norma-cabecera__izq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.norma-titulo {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--azul);
  line-height: 1.02;
}

.norma-subtitulo {
  font-size: 15px;
  color: var(--texto-2);
}

/* La fecha de versión es la promesa del producto: siempre visible. */
.sello-consolidado {
  background: var(--ambar);
  color: var(--azul);
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 11px;
  letter-spacing: 0.02em;
  align-self: flex-start;
}

.norma-meta {
  font-size: 13.5px;
  color: var(--texto-3);
}

.norma-meta a {
  color: var(--azul);
  font-weight: 600;
}

.descargas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  flex: none;
}

.descargas__titulo {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.descargas__fila {
  display: flex;
  gap: 8px;
}

.descarga {
  border: 1px solid var(--azul);
  color: var(--azul);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
}

.descarga:hover {
  background: var(--azul);
  color: var(--blanco);
  text-decoration: none;
}

.descarga[aria-disabled="true"] {
  border-color: var(--linea-2);
  color: var(--texto-4);
  cursor: not-allowed;
}

.descarga[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--texto-4);
}

/* Aviso de datos incompletos. Solo aparece si el JSON lleva "fixture": true. */
.aviso-fixture {
  border: 2px solid var(--ambar);
  background: #fca3110f;
  padding: 14px 16px;
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto-2);
}

.aviso-fixture strong {
  color: var(--azul);
}

/* Aviso de artículo derogado en su propia URL. Sobrio, no alarmista: el artículo sigue
 * siendo consultable, lo que no está es vigente. */
.aviso-derogado {
  border-left: 3px solid var(--linea);
  background: var(--gris-notas);
  padding: 12px 14px;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto-2);
}

.aviso-derogado strong {
  color: var(--azul);
}

/* Sello «Derogado» junto al título del artículo dentro de la norma completa. */
.articulo__sello {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  background: var(--linea);
  color: var(--texto-2);
  vertical-align: middle;
  margin-left: 8px;
  font-family: var(--sans);
}

.norma-cuerpo {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 300px;
  gap: 40px;
  padding: 32px 0 56px;
  align-items: start;
}

/* Columna izquierda: índice fijo al hacer scroll. */
.indice {
  position: sticky;
  top: calc(var(--alto-cabecera) + 20px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - var(--alto-cabecera) - 40px);
  overflow-y: auto;
}

.indice__titulo {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 600;
}

.indice__entrada {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linea-3);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--texto-2);
}

.indice__entrada:hover {
  color: var(--azul);
  text-decoration: none;
  background: var(--gris-notas);
}

.indice__entrada--n1,
.indice__entrada--n2 {
  color: var(--azul);
  font-weight: 600;
}

.indice__entrada--p1 {
  padding-left: 12px;
}

.indice__entrada--p2 {
  padding-left: 24px;
}

.indice__entrada--p3 {
  padding-left: 36px;
}

.indice__desde {
  color: var(--texto-4);
  font-size: 12px;
  flex: none;
}

/* Columna central: el texto. */
.articulado {
  display: flex;
  flex-direction: column;
  max-width: 720px;
}

.encabezado-estructura {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 600;
  padding: 26px 0 14px;
  border-bottom: 2px solid var(--azul);
}

.articulado > .encabezado-estructura:first-child {
  padding-top: 0;
}

.articulo {
  padding: 26px 0;
  border-bottom: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Ancla desplazada para que la cabecera fija no tape el título al saltar a #art-38. */
  scroll-margin-top: calc(var(--alto-cabecera) + 16px);
}

.articulo__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.articulo__titulo {
  font-size: 19px;
  font-weight: 600;
  color: var(--azul);
}

.articulo__separador {
  color: #c0c4ce;
}

.articulo__epigrafe {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--texto);
}

/* Tres acciones pequeñas al pasar el ratón por el artículo (brief). */
.articulo__acciones {
  display: flex;
  gap: 12px;
  flex: none;
  opacity: 0;
  transition: opacity 0.12s;
}

.articulo:hover .articulo__acciones,
.articulo:focus-within .articulo__acciones {
  opacity: 1;
}

.articulo__accion {
  font-size: 12px;
  color: var(--azul);
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}

.articulo__accion--destacada {
  font-weight: 600;
  border-bottom-color: var(--ambar);
}

.articulo__url {
  font-size: 11.5px;
  color: var(--texto-4);
}

/* El texto legal, en serif y a 17 px: por encima del mínimo de 16 del brief. */
.articulo__texto {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texto);
}

.articulo__texto + .articulo__texto {
  margin-top: 0.65em;
}

.articulo__texto--literal {
  padding-left: 32px;
}

.articulo--derogado .articulo__texto {
  font-style: italic;
  color: var(--texto-2);
}

/* Cuadros del articulado.

   IMPO publica algunos como HTML dentro del texto del artículo (los límites de inversión del
   123 BIS de la Ley 16.713, los de la Ley 20.446). El marco con `overflow-x` es lo que permite
   que una tabla ancha no rompa el ancho de la página en móvil, que es donde se lee. */
.articulo__tabla-marco {
  margin: 1em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.articulo__tabla {
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
  min-width: 100%;
}

.articulo__tabla th,
.articulo__tabla td {
  border: 1px solid var(--borde, #d8dbe3);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}

.articulo__tabla thead th {
  background: var(--gris-notas);
  font-weight: 600;
}

/* Caja gris de notas al pie del artículo. */
.notas {
  background: var(--gris-notas);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}

.notas__titulo {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 600;
}

.notas li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--texto-2);
}

.notas a {
  border-bottom: 1px solid var(--ambar);
}

.notas__acciones {
  display: flex;
  gap: 14px;
  padding-top: 3px;
  flex-wrap: wrap;
}

.notas__accion {
  font-size: 12.5px;
  color: var(--azul);
  border-bottom: 1px solid var(--ambar);
}

/* Columna derecha. */
.norma-lateral {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.lista-modificantes li,
.lista-relacionadas li {
  padding: 11px 0;
  border-bottom: 1px solid var(--linea-3);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lista-modificantes__ley {
  font-size: 14px;
  font-weight: 500;
  color: var(--azul);
}

.lista-modificantes__meta,
.lista-relacionadas__meta {
  font-size: 12.5px;
  color: var(--texto-3);
}

.lista-relacionadas__titulo {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--azul);
}

/* ── versiones del artículo ──
 * Viven en la página del artículo (`/norma/articulo-N/`), no en la norma completa: incrustarlas
 * allí duplicaba el texto de cada artículo modificado y hacía una página de 7 MB.
 * Las reglas del panel modal que se abría con `:target` se retiraron con él. */
.version {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.version__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.version__rango {
  font-size: 13.5px;
  color: var(--texto);
  font-weight: 600;
}

.version__fuente {
  font-size: 12.5px;
  color: var(--texto-3);
}

.version__texto {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.65;
  background: var(--gris-notas);
  padding: 16px;
}

.version--anterior .version__texto {
  color: var(--texto-2);
}

.panel-versiones__pie {
  font-size: 12.5px;
  color: var(--texto-3);
  border-top: 1px solid var(--linea);
  padding-top: 14px;
}

/* Índice plegable de móvil y barra inferior de descargas. */
.indice-movil {
  display: none;
}

.barra-descargas {
  display: none;
}

/* ───────────────────────── actualidad y cambios ───────────────────────── */

.articulo-noticia {
  max-width: 720px;
  padding: 32px 0 56px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.articulo-noticia__titulo {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--azul);
  text-wrap: balance;
}

.articulo-noticia__cuerpo {
  font-size: 17px;
  line-height: 1.7;
  color: var(--texto);
}

.articulo-noticia__cuerpo p + p {
  margin-top: 1em;
}

.articulo-noticia__cuerpo ul {
  list-style: disc;
  padding-left: 22px;
  margin-top: 1em;
}

.articulo-noticia__cuerpo li {
  margin-bottom: 0.4em;
}

.dia-cambios {
  padding: 22px 0;
  border-bottom: 1px solid var(--linea);
}

.dia-cambios__fecha {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 600;
  margin-bottom: 12px;
}

.cambio {
  padding: 10px 0;
  border-bottom: 1px solid var(--linea-3);
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}

.cambio__tipo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  background: var(--linea);
  color: var(--texto-2);
  flex: none;
}

.cambio__tipo--nuevo {
  background: var(--ambar);
  color: var(--azul);
}

/* ───────────────────────── boletín ───────────────────────── */

.boletin {
  border: 1px solid var(--linea);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 620px;
}

.boletin__fila {
  display: flex;
  gap: 0;
}

.boletin__fila input {
  flex: 1;
  min-width: 0;
  border: 2px solid var(--azul);
  border-right: none;
  padding: 12px 14px;
  font-size: 15px;
}

.boletin__estado {
  font-size: 13.5px;
  color: var(--texto-2);
}

/* ───────────────────────── pie ───────────────────────── */

.pie {
  background: var(--azul);
  color: var(--sobre-azul);
  font-size: 13px;
  line-height: 1.6;
}

.pie__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 32px var(--margen);
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.pie__marca {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--blanco);
}

.pie__marca em {
  font-style: normal;
  color: var(--ambar);
}

.pie__izq {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pie__aviso {
  color: var(--sobre-azul-apagado);
}

.pie__enlaces {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Todo enlace del pie va sobre azul marino: sin esto heredaría el azul del texto de enlace
 * y quedaría invisible sobre su propio fondo. */
.pie a {
  color: var(--blanco);
  border-bottom: 1px solid var(--borde-azul);
}

.pie a:hover {
  color: var(--ambar);
  border-bottom-color: var(--ambar);
  text-decoration: none;
}

.pie__enlaces a {
  border-bottom: none;
}

.pie__inactivo {
  color: var(--sobre-azul-inactivo);
}

/* ───────────────────────── responsive ───────────────────────── */

/* Tres columnas → dos: la columna derecha es «opcional en escritorio» (brief). */
@media (max-width: 1180px) {
  .norma-cuerpo {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
  }

  .norma-lateral {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .codigos__rejilla {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1000px) {
  :root {
    --margen: 24px;
  }

  .portada__cuerpo {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .lateral {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
  }

  .nav {
    gap: 18px;
  }

  .nav a,
  .nav__inactivo {
    font-size: 13px;
  }
}

@media (max-width: 860px) {
  .avanzada__rejilla {
    grid-template-columns: repeat(2, 1fr);
  }

  .codigos__rejilla {
    grid-template-columns: repeat(2, 1fr);
  }

  .norma-cabecera {
    flex-direction: column;
    gap: 20px;
  }

  .descargas {
    align-items: flex-start;
  }
}

/* Móvil: 390 px de los tableros 1e, 1f y 1g. */
@media (max-width: 760px) {
  :root {
    --margen: 16px;
    --alto-cabecera: auto;
  }

  .cabecera__interior {
    height: auto;
    padding: 12px var(--margen);
    position: relative;
  }

  .marca__nombre {
    font-size: 19px;
  }

  .marca__descriptor {
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .nav {
    display: none;
  }

  .menu-movil {
    display: block;
  }

  .bloque-buscador {
    padding: 18px 0;
  }

  .buscador__fila {
    flex-direction: column;
    gap: 12px;
  }

  .buscador__campo {
    border-right: 2px solid var(--azul);
    padding: 12px;
    font-size: 15px;
  }

  .buscador__enviar {
    justify-content: center;
    padding: 13px;
  }

  .chips__separador {
    display: none;
  }

  /* La franja se desliza en horizontal con el dedo, que es el equivalente táctil
     de las flechas del escritorio. */
  .franja__pista {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .franja__tarjeta {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  .franja__flechas {
    display: none;
  }

  .avanzada__rejilla {
    grid-template-columns: 1fr;
  }

  .lateral {
    grid-template-columns: 1fr;
  }

  .destacada__titulo {
    font-size: 23px;
  }

  .destacada__resumen {
    font-size: 15px;
  }

  .noticia__titulo {
    font-size: 17px;
  }

  .codigos__rejilla {
    grid-template-columns: 1fr;
  }

  .filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .filtro {
    flex: none;
    padding: 7px 12px;
    font-size: 12.5px;
  }

  .norma-titulo {
    font-size: 30px;
  }

  .norma-subtitulo {
    font-size: 13.5px;
  }

  .sello-consolidado {
    font-size: 12px;
    line-height: 1.4;
    padding: 5px 10px;
  }

  .norma-cuerpo {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px 0 24px;
  }

  /* El índice se pliega en un botón «Índice»; la columna fija desaparece. */
  .indice {
    display: none;
  }

  .indice-movil {
    display: block;
    margin: 12px 0 4px;
  }

  .indice-movil > summary {
    list-style: none;
    border: 1px solid var(--azul);
    color: var(--azul);
    font-size: 14px;
    font-weight: 600;
    padding: 11px;
    text-align: center;
    cursor: pointer;
  }

  .indice-movil > summary::-webkit-details-marker {
    display: none;
  }

  .indice-movil__panel {
    border: 1px solid var(--linea);
    border-top: none;
    padding: 8px 12px 12px;
    max-height: 60vh;
    overflow-y: auto;
  }

  .norma-lateral {
    grid-template-columns: 1fr;
    padding-top: 24px;
  }

  .articulo {
    padding: 20px 0;
  }

  .articulo__cabecera {
    flex-direction: column;
    gap: 6px;
  }

  .articulo__titulo {
    font-size: 17px;
  }

  /* En táctil no hay hover: las acciones están siempre visibles. */
  .articulo__acciones {
    opacity: 1;
  }

  .articulo__url {
    display: none;
  }

  .articulo__texto--literal {
    padding-left: 18px;
  }

  /* Descargas en una barra inferior fija (tablero 1g). */
  .barra-descargas {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--azul);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
  }

  .barra-descargas__titulo {
    color: var(--sobre-azul-apagado);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .barra-descargas__fila {
    display: flex;
    gap: 8px;
  }

  .barra-descargas .descarga {
    border-color: var(--borde-azul);
    color: var(--blanco);
    font-size: 12.5px;
    padding: 7px 11px;
    font-weight: 400;
  }

  .con-barra-descargas .pie {
    padding-bottom: 64px;
  }

  .descargas {
    display: none;
  }

  .articulo-noticia__titulo {
    font-size: 27px;
  }

  .pie__interior {
    flex-direction: column;
    gap: 22px;
    padding: 22px var(--margen);
  }

  .resultados {
    padding: 14px 0 24px;
  }

  .resultado {
    padding: 13px 12px;
  }

  .grupo__cabecera {
    padding: 9px 12px;
  }
}

/* ───────────────────────── impresión ───────────────────────── */

@media print {
  .cabecera,
  .bloque-buscador,
  .franja,
  .descargas,
  .barra-descargas,
  .indice,
  .indice-movil,
  .norma-lateral,
  .articulo__acciones {
    display: none !important;
  }

  .norma-cuerpo {
    display: block;
    padding: 0;
  }

  .articulado {
    max-width: none;
  }

  body {
    font-size: 11pt;
  }

  /* Sin partición silábica, igual que en el PDF generado. */
  .articulo__texto {
    hyphens: none;
  }
}