/* ===========================================================================
   VATcodex, editorial / legal design system.
   Palette echoes the Madrid VAT Forum house style: deep burgundy, logo red,
   warm ivory, refined serif typography.
   =========================================================================== */

:root {
  /* Brand palette */
  --burgundy:       #6e1423;
  --burgundy-deep:  #4a0e18;
  --burgundy-soft:  #8a2433;
  --accent:         #b81d2c;   /* logo red */
  --accent-hover:   #9a1624;

  /* Surfaces & ink */
  /* (24-09-2026) Menos crema y tinta mas oscura: Daniel leia mal el marfil
     #faf6ef con el texto gris-granate. Fondo neutro calido y claro, y lo que se
     lee va en hojas blancas encima (--bg-raised). */
  --bg:             #ffffff;
  --bg-raised:      #ffffff;
  --bg-sunken:      #f4f3f1;
  --ink:            #1a1617;
  --ink-soft:       #3d3537;
  /* Era #8a7d7f: 3,66:1 sobre el marfil, por debajo del 4,5:1 que pide el texto
     pequeño, y es el color de las etiquetas, los contadores y los marcadores de
     posición. #75686a da 4,9:1 sin perder el tono cálido. */
  --ink-faint:      #5f5557;
  --line:           #e7e5e1;
  --line-strong:    #cfcbc4;

  /* ⚠️ Alias, y estaban FALTANDO. 21 reglas usan --muted, --fg-soft y --bg-soft,
     que no se definian en ninguna parte: la tarjeta de las Explanatory Notes
     salia SIN FONDO y toda la pagina de discusion pintaba el gris de metadatos
     con el color heredado. Un var() sin definir no da error, se ignora la
     declaracion entera, asi que no se ve hasta que se compara con el diseño.
     Se definen como alias de los tokens reales en vez de reescribir 21 reglas. */
  --muted:          var(--ink-faint);
  --fg-soft:        var(--ink-soft);
  --bg-soft:        var(--bg-sunken);


  /* Chips / accents on tinted backgrounds */
  --chip-bg:        #f5f2ee;
  --chip-ink:       #6e1423;
  --gold:           #b08948;
  /* El oro de marca, oscurecido para poder ser TEXTO: #b08948 sobre marfil da
     2,9:1 y blanco sobre él 3,2:1, así que la etiqueta «Opinion» no se leía. */
  --tone-opinion:   #7d5f2c;
  /* Flecha de los desplegables, dibujada: el aspecto nativo de <select> era lo
     que hacía de la barra de filtros una columna de cajas blancas. */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%235f5557' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Type */
  --font-display: "Playfair Display", "Source Serif 4", Georgia, serif;
  --font-serif:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --measure: 46rem;            /* reading column for headnotes */
  --radius: 10px;
  /* Neutras (30-09-2026): teñidas de granate eran un halo de color en oscuro. */
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-bar: 0 4px 12px -8px rgba(16,24,40,.35);
}

html[data-theme="dark"] {
  --burgundy:       #c8506a;
  --burgundy-deep:  #1c1416;
  --burgundy-soft:  #d06a82;
  --accent:         #e0697a;
  --accent-hover:   #ec8093;
  --bg:             #17110f;
  --bg-raised:      #231b19;
  --bg-sunken:      #120d0c;
  --ink:            #f1e7e2;
  --ink-soft:       #d3c7c2;
  --ink-faint:      #a79a95;
  --line:           #3d302c;
  --line-strong:    #54423c;
  --muted:          var(--ink-faint);
  --fg-soft:        var(--ink-soft);
  --bg-soft:        var(--bg-sunken);
  --chip-bg:        #2a1f1c;
  --chip-ink:       #e8b9b0;
  --tone-opinion:   #d9b87e;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23a89893' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  /* Faltaba: en oscuro se heredaba la sombra teñida de granate del modo claro. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-bar: 0 4px 12px -8px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; text-underline-offset: .2em; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* Lo que no se dibuja también se ve: la selección, el foco, el cursor. Iban con
   el azul del navegador en una página granate. */
::selection { background: color-mix(in srgb, var(--burgundy) 20%, transparent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; border-radius: 4px; }
input, textarea { caret-color: var(--burgundy); }
.num, .cnt, .count, .meta { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ header */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.wordmark { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); }
.wordmark a { color: var(--ink); text-decoration: none; }
.wordmark .badge {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 7px;
  background: linear-gradient(150deg, var(--burgundy), var(--accent));
  color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .02em;
  font-family: var(--font-sans);
  box-shadow: var(--shadow-sm);
}
.wordmark .name { font-size: 1.35rem; font-weight: 700; letter-spacing: .01em; }
.wordmark .name b { color: var(--accent); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.nav a {
  color: var(--ink-soft); font-family: var(--font-sans);
  font-size: .92rem; letter-spacing: .01em;
}
.nav a:hover, .nav a.active { color: var(--burgundy); text-decoration: none; }
html[data-theme="dark"] .nav a:hover, html[data-theme="dark"] .nav a.active { color: var(--burgundy); }
.icon-btn {
  border: 1px solid var(--line-strong); background: var(--bg-raised);
  color: var(--ink-soft); width: 2.1rem; height: 2.1rem; border-radius: 50%;
  cursor: pointer; font-size: 1rem; display: grid; place-items: center;
}
.icon-btn:hover { color: var(--burgundy); border-color: var(--burgundy); }

/* FRANJAS LATERALES (23-09-2026): los avisos y notas llevaban una franja de
   color de 3-4 px a la izquierda, el adorno mas reconocible de las interfaces
   hechas en serie. Ahora un contorno fino teñido del mismo tono: la señal de
   color sigue, sin la franja. Las sangrias NEUTRAS de 2 px (hilos de
   respuestas, citas) se quedan: son tipografia, no adorno. */

/* -------------------------------------------------------------------- hero */
/* Sin antetítulo: «Court of Justice · General Court · VAT» repetía lo que dice
   el subtítulo dos líneas más abajo. Y menos altura: la portada entera cabía
   en la primera pantalla sin dejar ver ni un resultado. */
.hero {
  max-width: 60rem; margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem) 1rem;
  text-align: center;
}
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 5.5vw, 3.5rem); line-height: 1.08;
  margin: 0 auto .9rem; max-width: 22ch; color: var(--ink);
  text-wrap: balance;   /* en el móvil dejaba «law,» sola en una línea */
}
.hero h1 .em { color: var(--burgundy); font-style: italic; }
.hero .sub {
  color: var(--ink-soft); font-size: 1.08rem; max-width: 40rem;
  margin: 0 auto 1.75rem; text-wrap: balance;
}

/* ------------------------------------------------------------------ search */
.searchwrap { max-width: 44rem; margin: 0 auto; }
.searchbox {
  display: flex; align-items: center; gap: .6rem;
  background: var(--bg-raised); border: 1.5px solid var(--line-strong);
  border-radius: 999px; padding: .55rem .9rem .55rem 1.2rem;
  box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s;
}
.searchbox:focus-within { border-color: var(--burgundy); box-shadow: 0 0 0 4px rgba(110,20,35,.08), var(--shadow); }
.searchbox .mag { color: var(--burgundy); display: grid; place-items: center; flex: none; }
.searchbox .mag svg, .searchbox .clearx svg { display: block; }
.searchbox input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--font-serif); font-size: 1.08rem; color: var(--ink);
}
.searchbox input::placeholder { color: var(--ink-faint); }
.searchbox .clearx {
  border: 0; background: transparent; color: var(--ink-faint);
  cursor: pointer; padding: .2rem; border-radius: 50%; display: none;
}
.searchbox .clearx:hover { color: var(--burgundy); }
.searchbox .clearx.show { display: grid; place-items: center; }

/* Los controles del buscador eran tres píldoras del mismo peso, y una de ellas
   («Semantic ranking on») ni siquiera es un control: es un estado. Ahora los
   dos desplegables se leen como texto con su flecha, y el estado como una nota. */
.search-controls { display: flex; align-items: center; justify-content: center; gap: .4rem 1.4rem; margin-top: .9rem; flex-wrap: wrap; }
.scope-control { font-family: var(--font-sans); font-size: .82rem; color: var(--ink-faint); display: inline-flex; align-items: center; gap: .35rem; }
.scope-control select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-sans); font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  background: var(--chevron) no-repeat right .1rem center; border: 0;
  border-bottom: 1px solid transparent; border-radius: 0;
  padding: .15rem 1.1rem .15rem 0; cursor: pointer;
  /* Que mida lo que dice la opción elegida y no la más larga de la lista:
     «Best match» dejaba un hueco del ancho de «Most mentions» antes de la
     flecha. Donde no se soporta, se queda como estaba. */
  field-sizing: content;
}
.scope-control select:hover { color: var(--burgundy); border-bottom-color: var(--line-strong); }

/* Sugerencias como enlaces de texto, no como botones: cinco cápsulas con borde
   ocupaban dos filas en escritorio y cinco en el móvil, más que el buscador. */
.examples {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: .35rem 1.1rem; margin: 1.2rem auto 0; max-width: 44rem;
  font-family: var(--font-sans); font-size: .85rem;
}
.examples::before { content: "Try"; color: var(--ink-faint); }
.example {
  font: inherit; cursor: pointer; background: none; border: 0; padding: 0;
  color: var(--ink-soft);
  text-decoration: underline; text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px; text-underline-offset: .25em;
}
.example:hover { color: var(--burgundy); text-decoration-color: currentColor; }

.corpusline {
  text-align: center; font-family: var(--font-sans); font-size: .85rem;
  color: var(--ink-faint); margin-top: 1.6rem;
}

/* semantic status pill */
.semstatus {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-sans); font-size: .78rem; color: var(--ink-faint);
}
.semstatus .dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--ink-faint); }
.semstatus.loading .dot { background: var(--gold); animation: pulse 1.1s infinite; }
.semstatus.ready .dot { background: #3f8f5b; }
@keyframes pulse { 0%,100%{opacity:.35} 50%{opacity:1} }

/* ------------------------------------------------------------------- layout */
/* Una sola columna y más ancha (23-09-2026). Con 74rem y la barra lateral de
   17rem, en una pantalla de 1.900 px quedaban 350 px de margen a cada lado y
   los resultados en una franja de 900: Daniel lo veía poco aprovechado. Los
   filtros pasan a una barra encima y los resultados usan todo el ancho, con
   su tipo, fecha y documentos en una columna a la derecha (ver .card). */
.layout {
  max-width: 84rem; margin: 0 auto;
  padding: .75rem clamp(1rem, 3vw, 2.5rem) 4rem;
}
.layout.hidden { display: none; }
.hero.searching { padding-top: 1.4rem; padding-bottom: .4rem; }
.hero.searching .searchwrap { margin-bottom: 0; }

/* LA BARRA DE FILTROS. Los cuatro que se usan de verdad a la vista (Topic,
   artículo, tribunal, periodo), el resto tras «More filters». Cada control es
   un campo hundido del color del papel, sin borde, con su flecha dibujada; el
   borde sólo aparece al pasar por encima y el anillo de foco al tabular. */
.filterbar {
  font-family: var(--font-sans);
  padding: .25rem 0 1.1rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.fb-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .85rem 1rem; }
.fb-field { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 12rem; min-width: 0; max-width: 17rem; }
.fb-field.fb-wide { flex: 2 1 18rem; max-width: 28rem; }
.fb-field:has(.year-presets) { flex: 0 0 auto; }
.fb-field > label, .fb-label { font-size: .74rem; font-weight: 600; color: var(--ink-soft); }
.filterbar select, .filterbar input[type="number"] {
  width: 100%; font-family: var(--font-sans); font-size: .88rem; color: var(--ink);
  padding: .5rem .65rem; border: 1px solid transparent; border-radius: 8px;
  background-color: var(--bg-sunken);
  transition: border-color .15s ease-out;
}
.filterbar select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: var(--chevron); background-repeat: no-repeat;
  background-position: right .65rem center; padding-right: 1.9rem;
  text-overflow: ellipsis;
}
.filterbar select:hover, .filterbar input[type="number"]:hover { border-color: var(--line-strong); }
/* Un filtro puesto se nota sin tener que leerlo. */
.filterbar select.is-set { border-color: color-mix(in srgb, var(--burgundy) 40%, var(--line)); color: var(--burgundy); font-weight: 600; }
.fb-actions { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; padding-bottom: .5rem; }
.fb-more {
  font-family: var(--font-sans); font-size: .82rem; font-weight: 600; cursor: pointer;
  background: var(--chevron) no-repeat right 0 center; border: 0; padding: 0 1.1rem 0 0;
  color: var(--ink-soft);
}
.fb-more:hover { color: var(--burgundy); }
.fb-more[aria-expanded="true"] { color: var(--ink); }
.fb-extra { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); align-items: center; }
.fb-extra[hidden] { display: none; }
.fb-field.fb-check { flex: 0 1 auto; max-width: none; justify-content: flex-end; }
.year-row { display: flex; align-items: center; gap: .5rem; }
.year-row input { width: 5.2rem; text-align: center; -moz-appearance: textfield; }
.year-row input::-webkit-outer-spin-button,
.year-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.year-row .dash { color: var(--ink-faint); }
.chk { display: flex; align-items: center; gap: .55rem; margin: .1rem 0; padding: .2rem 0; font-size: .86rem; color: var(--ink-soft); cursor: pointer; }
.chk input { accent-color: var(--burgundy); width: .95rem; height: .95rem; margin: 0; flex: none; }
.chk-inline { flex-direction: row; flex-wrap: wrap; gap: 0 1.1rem; }
.chk-inline .chk .cnt { margin-left: .25rem; }

/* ------------------------------------------------------------------ results */
.results-head {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.results-head .count { font-family: var(--font-sans); font-weight: 600; color: var(--ink); }
.results-head .scope { font-family: var(--font-sans); font-size: .85rem; color: var(--ink-faint); }

.concept-banner {
  font-family: var(--font-sans); font-size: .88rem;
  background: var(--chip-bg); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: .6rem .9rem; margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.concept-banner b { color: var(--burgundy); }
.concept-banner a { font-weight: 600; }

/* UN ASUNTO = UNA ENTRADA DE LISTA, no una tarjeta. Cada resultado llevaba
   fondo blanco, borde, esquinas, sombra y una franja granate de 3 px a la
   izquierda: cuatro adornos repetidos 1.174 veces, que es lo que hacía pesada
   la columna. Como el índice de una revista jurídica: una línea fina entre
   asuntos y el aire hace el resto. Lo usan el buscador y el compendio. */
.card {
  position: relative; padding: 1.35rem 0 1.4rem;
  border-bottom: 1px solid var(--line);
  /* Dos columnas (23-09-2026): a la izquierda lo que se lee, a la derecha lo
     que se consulta de un vistazo. Las fechas quedan alineadas en columna y la
     fila usa el ancho sin alargar las líneas de texto más allá de lo legible. */
  display: grid; grid-template-columns: minmax(0, 1fr) 12.5rem;
  column-gap: clamp(1.5rem, 3vw, 3rem); align-items: start;
}
.card-main { min-width: 0; }
.card-side {
  font-family: var(--font-sans); font-size: .8rem; color: var(--ink-faint);
  padding-top: .3rem; min-width: 0;
}
.side-meta { display: flex; flex-direction: column; align-items: flex-start; gap: .22rem; }
.card-side .docs-line {
  flex-direction: column; gap: .22rem; margin-top: .7rem; padding-top: .65rem;
  border-top: 1px solid var(--line);
}
.card:first-child { padding-top: .2rem; }
.card .ttl {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.18rem;
  margin: 0 0 .3rem; color: var(--ink); line-height: 1.3; text-wrap: pretty;
}
/* El título ES el enlace al asunto. Antes no lo era: para abrir un asunto había
   que bajar hasta «Open case & discussion →» al pie de cada tarjeta. */
.card .ttl a { color: inherit; }
.card .ttl a:hover { color: var(--burgundy); text-decoration: underline; text-decoration-thickness: 1px; }
.card .ttl .num { color: var(--burgundy); }
/* El tipo de documento como rótulo de color, sin bloque relleno: el blanco
   sobre oro de «Opinion» daba 3,2:1. */
.card .badge-type {
  font-weight: 700; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--burgundy);
}
.card .badge-type.opinion { color: var(--tone-opinion); }
.card .badge-type.order { color: var(--burgundy-soft); }
.card .headnote {
  font-family: var(--font-serif); color: var(--ink-soft); font-size: .96rem;
  max-width: 62rem; margin: .35rem 0 0; line-height: 1.55;
}
/* En el móvil, una sola columna y en el orden de siempre: título, datos,
   artículos y temas, materia, documentos. */
@media (max-width: 760px) {
  .card { display: flex; flex-direction: column; }
  .card-main, .card-side { display: contents; }
  .card .ttl { order: 0; }
  .card .side-meta {
    order: 1; flex-direction: row; flex-wrap: wrap; align-items: baseline;
    gap: .25rem .8rem; margin-bottom: .35rem;
  }
  .card .chips { order: 2; }
  .card .headnote { order: 3; }
  .card .sixth-note { order: 4; }
  .card-side .docs-line {
    order: 5; flex-direction: row; flex-wrap: wrap; gap: .25rem 1rem;
    border-top: 0; padding-top: 0; margin-top: .55rem;
  }
}
/* En el buscador el headnote es la cadena de materias entera, a veces diez
   líneas en cursiva: tres en redonda bastan para decidir si abrir el asunto,
   que es para lo que está la lista. Entero, en la ficha. */
#results .card .headnote {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Sin acotar a .card: en la ficha del asunto el headnote es un <p> de primer
   nivel, no va dentro de una tarjeta, y el rotulo de idioma se quedaba sin
   estilo justo donde mas falta hace, que es al abrir el asunto. */
.headnote .lang-note { font-style: normal; font-size: .78rem; color: var(--ink-faint); }

/* Artículos y temas en UNA fila. Eran dos, cada una con su rótulo en
   versalitas («TOPICS», «INTERPRETS»), y el rótulo sobra: «art. 168 Dir» se
   explica solo, y los temas se distinguen por ir rellenos. Los rótulos siguen
   ahí para los lectores de pantalla. */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .45rem 0; }
.chip {
  font-family: var(--font-sans); font-size: .75rem; line-height: 1.4; cursor: pointer;
  background: var(--chip-bg); color: var(--chip-ink);
  border: 1px solid transparent; border-radius: 999px; padding: .12rem .55rem;
  transition: border-color .15s ease-out, color .15s ease-out;
}
.chip:hover { border-color: currentColor; text-decoration: none; }
.chip.art { background: transparent; border-color: var(--line-strong); color: var(--ink-soft); }
.chip.art:hover { border-color: var(--burgundy); color: var(--burgundy); }
.chips-label { font-family: var(--font-sans); font-size: .74rem; color: var(--ink-faint); margin-right: .2rem; align-self: center; text-transform: uppercase; letter-spacing: .08em; }

.docs-line { margin-top: .55rem; font-family: var(--font-sans); font-size: .8rem; color: var(--ink-faint); display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.docs-line a { color: var(--ink-soft); }
.docs-line a b { font-weight: 600; }
.docs-line a:hover { color: var(--burgundy); }
.docs-line .lbl { color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; align-self: center; }
/* El documento que representa al asunto, marcado con un punto dibujado. */
.docs-line .pin {
  display: inline-block; width: .38rem; height: .38rem; border-radius: 50%;
  background: var(--accent); vertical-align: .12em; margin-right: .3rem;
}

.empty {
  text-align: center; color: var(--ink-faint); font-family: var(--font-sans);
  padding: 3rem 1rem;
}

/* Summary hover card */
/* «Summary» como botón de texto con su icono, no como cápsula dorada: oro
   sobre marfil daba 2,9:1, y el «◆» era un glifo haciendo de icono. */
.sum-badge {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600; white-space: nowrap;
  color: var(--tone-opinion);
}
.sum-badge svg { flex: none; }
.sum-badge:hover { color: var(--burgundy); text-decoration: underline; text-decoration-thickness: 1px; }
.summary-pop {
  position: absolute; z-index: 60; max-height: 78vh; overflow-y: auto;
  background: var(--bg-raised); color: var(--ink);
  border: 1px solid var(--line-strong); border-color: color-mix(in srgb, var(--burgundy) 45%, var(--line));
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem 1.15rem; font-family: var(--font-serif); line-height: 1.5;
}
.summary-pop[hidden] { display: none; }
.summary-pop .sum-head {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.02rem;
  color: var(--burgundy); margin: 0 0 .6rem; padding-right: 1.2rem;
}
.summary-pop .sum-sec { margin-bottom: .7rem; }
.summary-pop .sum-sec b {
  display: block; font-family: var(--font-sans); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--gold);
  margin-bottom: .15rem;
}
.summary-pop .sum-sec p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.summary-pop .sum-foot {
  font-family: var(--font-sans); font-size: .72rem; color: var(--ink-faint);
  border-top: 1px solid var(--line); padding-top: .5rem; margin-top: .3rem;
}
.summary-pop .sum-close {
  position: absolute; top: .5rem; right: .6rem; border: 0; background: transparent;
  font-size: 1.2rem; line-height: 1; color: var(--ink-faint); cursor: pointer;
}
.summary-pop .sum-close:hover { color: var(--burgundy); }

/* ------------------------------------------------------------------- footer */
footer.site {
  background: var(--burgundy-deep); color: #e9d9d0;
  font-family: var(--font-sans); font-size: .85rem;
  padding: 2.5rem clamp(1rem,4vw,3rem); margin-top: 2rem;
}
footer.site .cols { max-width: 70rem; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
/* h2 y no h4 (30-09-2026): detrás del h1 o del último h2 de la página, un h4
   saltaba niveles de encabezado. Mismo aspecto. */
footer.site h4, footer.site h2 { font-family: var(--font-display); color: #fff; margin: 0 0 .6rem; font-size: 1rem; }
footer.site a { color: #f0c9bf; }
footer.site a:hover { color: #fff; }
footer.site .disclaimer { color: #c9a89f; line-height: 1.5; max-width: 34rem; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin: .3rem 0; }
footer.site .legal { max-width: 70rem; margin: 1.8rem auto 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); color: #b9968d; font-size: .78rem; }

/* ---------------------------------------------------------------- compendium */
.comp-layout { max-width: var(--measure); margin: 0 auto; padding: 2rem clamp(1rem,4vw,2rem) 4rem; }
.comp-selectors { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; font-family: var(--font-sans); }
.comp-selectors > div { flex: 1; min-width: 12rem; }
.comp-selectors label { display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); margin-bottom:.3rem; }
.comp-selectors select,
.comp-selectors input { width:100%; padding:.5rem; border:1px solid var(--line-strong); border-radius:8px; background:var(--bg-raised); color:var(--ink); font-family:var(--font-sans); font-size:.92rem; }
.comp-selectors input:focus, .comp-selectors select:focus { outline:none; border-color:var(--burgundy-soft); }
.comp-selectors input::placeholder { color:var(--ink-faint); }
/* Cuántos artículos quedan tras filtrar. Solo aparece si hay filtro puesto:
   decir "449 of 449" no informa de nada. */
.comp-matches { font-family:var(--font-sans); font-size:.8rem; color:var(--ink-faint); margin:-1rem 0 1.4rem; }
.crumb { font-family: var(--font-sans); font-size: .8rem; color: var(--ink-faint); margin-bottom: .4rem; }
.art-head { font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); margin: 0 0 .8rem; }
/* --- Articulado, con la forma que tiene en el Diario Oficial ---------------
   Cada apartado o letra en su línea, la marca en su propia columna y el texto
   a plomo debajo de sí mismo. Es lo que permite ver de un vistazo qué letras
   cuelgan de qué encabezado. */
.art-body {
  font-size: 1.04rem; line-height: 1.72;
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem 1.6rem 1.2rem;
  box-shadow: var(--shadow-sm);
}
.art-body p { margin: 0 0 .7rem; }
.art-b { display: grid; grid-template-columns: minmax(2.6rem, auto) 1fr; gap: .5rem; }
.art-b:not(.marked) { grid-template-columns: 1fr; }
.art-b .art-m {
  font-family: var(--font-sans); font-size: .84rem; font-weight: 700;
  color: var(--burgundy); padding-top: .16rem; white-space: nowrap;
}
.art-b .art-x { display: block; }
/* Sangrado por nivel. Las letras de una lista van dentro del encabezado que
   las introduce; los sub-puntos (i), (ii), otro escalón más. */
.art-b.d1 { margin-left: 1.5rem; }
.art-b.d2 { margin-left: 3rem; }
.art-b.d3 { margin-left: 4.5rem; }
/* El apartado numerado (1., 2.) abre bloque: respira por arriba. */
.art-b.d0.marked { margin-top: 1.1rem; }
.art-b.d0.marked:first-child { margin-top: 0; }
.art-b.d1 + .art-b.d0:not(.marked) { margin-top: 1rem; }

@media (max-width: 640px) {
  .art-body { padding: 1.1rem 1rem .9rem; font-size: 1rem; }
  .art-b { grid-template-columns: minmax(2.1rem, auto) 1fr; gap: .4rem; }
  .art-b.d1 { margin-left: .9rem; }
  .art-b.d2 { margin-left: 1.8rem; }
  .art-b.d3 { margin-left: 2.7rem; }
}
.art-source { font-family: var(--font-sans); font-size: .8rem; color: var(--ink-faint); margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.cases-head { font-family: var(--font-display); font-size: 1.3rem; margin: 2rem 0 .3rem; color: var(--burgundy); }
.cases-sub { font-family: var(--font-sans); font-size: .84rem; color: var(--ink-faint); margin-bottom: 1rem; }
.suppressed { background: var(--chip-bg); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); padding: .5rem .8rem; border-radius: 6px; font-family: var(--font-sans); font-size: .85rem; margin-bottom: 1rem; }
.sixth-disclaimer { background: var(--chip-bg); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); padding: .6rem .9rem; border-radius: 6px; font-family: var(--font-sans); font-size: .82rem; color: var(--ink-soft); margin: 0 0 1.1rem; line-height: 1.45; }
.sixth-note { font-family: var(--font-sans); font-size: .8rem; color: var(--tone-opinion); margin: .2rem 0 0; }

/* ------------------------------------------------------------------- generic */
.page-narrow { max-width: var(--measure); margin: 0 auto; padding: 2.5rem clamp(1rem,4vw,2rem) 4rem; }
.page-narrow h1 { font-family: var(--font-display); font-size: 2.2rem; color: var(--ink); }
.page-narrow h2 { font-family: var(--font-display); font-size: 1.3rem; color: var(--burgundy); margin-top: 2rem; }
.page-narrow p, .page-narrow li { color: var(--ink-soft); }
mark { background: rgba(176,137,72,.28); color: inherit; padding: 0 .05em; border-radius: 2px; }

/* ------------------------------------------------------------------ mobile */
.filter-toggle { display: none; }
@media (max-width: 860px) {
  /* En el móvil la barra se pliega tras «Filters», y cada campo ocupa la fila. */
  .filterbar { display: none; }
  .filterbar.open { display: block; }
  .fb-field, .fb-field.fb-wide { flex: 1 1 100%; max-width: none; }
  .fb-actions { margin-left: 0; width: 100%; justify-content: space-between; }
  .filter-toggle {
    display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: .85rem; font-weight: 600;
    background: var(--bg-sunken) var(--chevron) no-repeat right .7rem center; border: 1px solid transparent;
    border-radius: 8px; padding: .5rem 2rem .5rem .85rem; cursor: pointer; color: var(--ink-soft); margin-bottom: 1rem;
  }
  .filter-toggle[aria-expanded="true"] { border-color: var(--line-strong); }
  footer.site .cols { grid-template-columns: 1fr; gap: 1.3rem; }
}

/* Legal footer bar (injected by common.js) */
footer.site .legal-links {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline;
  margin-bottom: .9rem; font-size: .82rem;
}
footer.site .legal-links a { color: #f0c9bf; text-decoration: none; }
footer.site .legal-links a:hover { color: #fff; text-decoration: underline; }
footer.site .legal-links .copyline { margin-left: auto; color: #c9a89f; }
@media (max-width: 640px) { footer.site .legal-links .copyline { margin-left: 0; width: 100%; } }

/* Legal pages */
.legal-meta { font-family: var(--font-sans); font-size: .82rem; color: var(--ink-faint); margin-top: -.4rem; }
.page-narrow h2 { font-size: 1.15rem; margin-top: 2.1rem; }
.page-narrow code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--chip-bg); padding: .05em .35em; border-radius: 4px; }
.legal-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font-family: var(--font-sans); font-size: .85rem; display: block; overflow-x: auto; }
.legal-table th, .legal-table td { border: 1px solid var(--line-strong); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.legal-table th { background: var(--chip-bg); color: var(--burgundy); font-weight: 600; }
.legal-table td { color: var(--ink-soft); }

/* Support page, deliberately understated */
.donate-btn {
  display: inline-block; font-family: var(--font-sans); font-size: .9rem;
  color: var(--burgundy); background: transparent;
  border: 1px solid var(--burgundy); border-radius: 999px;
  padding: .5rem 1.1rem; text-decoration: none;
}
.donate-btn:hover { background: var(--burgundy); color: #fff; text-decoration: none; }

/* ---------------------------------------------- search UI (redesign v2) */
.btn-reset-inline {
  font-family: var(--font-sans); font-size: .74rem; cursor: pointer;
  background: none; border: 0; color: var(--accent); padding: 0;
}
.btn-reset-inline:hover { text-decoration: underline; }
.chk-group { display: flex; flex-direction: column; }
.chk .cnt { color: var(--ink-faint); font-size: .76rem; margin-left: auto; }

/* El periodo, como un único control segmentado: cuatro cápsulas sueltas más
   dos campos de número con sus flechas nativas eran dos controles para lo
   mismo compitiendo por la vista. */
.year-presets {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  padding: 3px; margin-bottom: .45rem; border-radius: 8px; background: var(--bg-sunken);
}
.year-presets button {
  font-family: var(--font-sans); font-size: .76rem; cursor: pointer; white-space: nowrap;
  background: transparent; border: 0; color: var(--ink-soft);
  border-radius: 6px; padding: .32rem .2rem;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.year-presets button:hover { color: var(--burgundy); }
.year-presets button.on { background: var(--bg-raised); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }

.syntax-help { margin-top: .8rem; font-family: var(--font-sans); font-size: .8rem; text-align: left; max-width: 34rem; margin-left: auto; margin-right: auto; }
.syntax-help summary { cursor: pointer; color: var(--ink-faint); text-align: center; }
.syntax-help summary:hover { color: var(--burgundy); }
.syntax-help ul { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); }
.syntax-help li { margin: .25rem 0; }
.syntax-help code { background: var(--chip-bg); padding: .05em .35em; border-radius: 4px; font-size: .92em; }

.active-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.active-chip {
  font-family: var(--font-sans); font-size: .76rem; cursor: pointer;
  background: var(--burgundy); color: #fff; border: 0;
  border-radius: 999px; padding: .22rem .6rem;
}
.active-chip:hover { background: var(--accent); }

.more-wrap { text-align: center; margin: 1.5rem 0 1rem; }
.btn-more {
  font-family: var(--font-sans); font-size: .88rem; cursor: pointer;
  background: var(--bg-raised); border: 1px solid var(--line-strong);
  color: var(--ink-soft); border-radius: 999px; padding: .55rem 1.4rem;
}
.btn-more:hover { border-color: var(--burgundy); color: var(--burgundy); }

/* ================================================== community / discussion */

.case-title { font-family: var(--font-display); font-size: 1.9rem; margin: 0 0 .4rem; line-height: 1.2; }
.case-title .num { color: var(--burgundy); }
.case-summary { background: var(--bg-raised); border: 1px solid var(--line); border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
  border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.4rem 0; }
.case-summary h2 { margin: 0 0 .2rem; font-size: 1.05rem; color: var(--burgundy); }

.discussion { margin-top: 3rem; border-top: 2px solid var(--line-strong); padding-top: 1.4rem; }
.disc-head h2 { font-family: var(--font-display); font-size: 1.4rem; margin: 0; color: var(--ink); }
.disc-count { color: var(--ink-faint); font-size: 1rem; font-family: var(--font-sans); }
.forum-warning { font-family: var(--font-sans); font-size: .82rem; color: var(--ink-soft);
  background: var(--chip-bg); border: 1px solid color-mix(in srgb, var(--burgundy) 45%, var(--line));
  padding: .7rem .9rem; border-radius: 6px; margin: .8rem 0 1.4rem; }

.comment { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.comment .c-head { font-family: var(--font-sans); font-size: .86rem; color: var(--ink); display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline; }
.comment .c-role { color: var(--ink-faint); font-size: .8rem; }
.comment .c-date { color: var(--ink-faint); font-size: .76rem; margin-left: auto; }
.comment .li-link { font-family: var(--font-sans); font-size: .72rem; font-weight: 700;
  border: 1px solid var(--line-strong); border-radius: 3px; padding: 0 .25rem; text-decoration: none; }
.comment .c-body { margin: .45rem 0 .5rem; line-height: 1.55; }
.comment .c-actions { display: flex; gap: .8rem; font-family: var(--font-sans); font-size: .78rem; }
.c-like, .c-reply, .c-report { background: none; border: 0; cursor: pointer; color: var(--ink-faint); padding: 0; font-size: .78rem; font-family: var(--font-sans); }
.c-like:hover, .c-reply:hover, .c-report:hover { color: var(--burgundy); }
.c-like.on { color: var(--accent); font-weight: 600; }
.replies { margin-left: 1.6rem; border-left: 2px solid var(--line); padding-left: 1rem; }

.c-input { width: 100%; font-family: var(--font-serif); font-size: 1rem; padding: .6rem .7rem;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-raised); color: var(--ink); }
.c-input:focus { outline: none; border-color: var(--burgundy); }
.compose, .compose-cta { background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-top: 1.4rem; }
.compose-cta p { font-size: .9rem; color: var(--ink-soft); }
.compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .6rem; flex-wrap: wrap; }
.btn-post { display: inline-block; font-family: var(--font-sans); font-size: .88rem; cursor: pointer;
  background: var(--burgundy); color: #fff; border: 0; border-radius: 999px; padding: .5rem 1.2rem; text-decoration: none; }
.btn-post:hover { background: var(--accent); color: #fff; text-decoration: none; }
.btn-plain { font-family: var(--font-sans); font-size: .88rem; cursor: pointer; background: none;
  border: 1px solid var(--line-strong); color: var(--ink-soft); border-radius: 999px; padding: .5rem 1.2rem; }
.btn-danger { font-family: var(--font-sans); font-size: .86rem; cursor: pointer; background: none;
  border: 1px solid #b3261e; color: #b3261e; border-radius: 999px; padding: .45rem 1.1rem; margin-top: .5rem; }
.btn-danger:hover { background: #b3261e; color: #fff; }
.empty-soft { color: var(--ink-faint); font-size: .92rem; }
.pending-note { background: var(--chip-bg); border-radius: 6px; padding: .6rem .8rem;
  font-family: var(--font-sans); font-size: .84rem; color: var(--burgundy); }

.privacy-box { background: var(--chip-bg); border: 1px solid color-mix(in srgb, var(--burgundy) 45%, var(--line)); border-radius: 6px;
  padding: .8rem 1rem; margin: 1rem 0; font-family: var(--font-sans); font-size: .85rem; color: var(--ink-soft); }
.privacy-box ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.privacy-box li { margin: .25rem 0; }
.form-row { margin: .9rem 0; }
.form-row label { display: block; font-family: var(--font-sans); font-size: .82rem; color: var(--ink-soft); margin-bottom: .25rem; }
.req { color: var(--accent); font-size: .72rem; }
.opt { color: var(--ink-faint); font-size: .72rem; }
.status-ok { color: #2e7d4f; font-weight: 600; }
.status-wait { color: var(--gold); font-weight: 600; }
.status-bad { color: #b3261e; font-weight: 600; }
.msg-ok { color: #2e7d4f; font-family: var(--font-sans); font-size: .86rem; }
.msg-bad { color: #b3261e; font-family: var(--font-sans); font-size: .86rem; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0 1.5rem; }
.sep-thin { border: 0; border-top: 1px solid var(--line); margin: 1.6rem 0 1rem; }
.sub-h2 { font-family: var(--font-display); font-size: 1.1rem; color: var(--burgundy); margin: 0 0 .5rem; }

/* ============================================ scrolling long result lists */
/* Once you are searching, the search bar stays put under the header, so you
   never have to scroll back up through the results to change the query. */
.hero.searching {
  position: sticky; top: 3.35rem; z-index: 25;
  background: var(--bg);
  padding-top: .7rem; padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-bar);
  /* De lado a lado: con los 60rem centrados de la portada, la barra tapaba la
     columna de filtros sólo en parte y cortaba el desplegable «Court» por la
     mitad. El contenido sigue centrado dentro (.searchwrap). */
  max-width: none;
}
.hero.searching .syntax-help { display: none; }

/* Back to top, appears once you are deep in the list. */
.to-top {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 40;
  width: 2.7rem; height: 2.7rem; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--bg-raised);
  color: var(--burgundy); font-size: 1.1rem; cursor: pointer;
  box-shadow: var(--shadow); display: none; place-items: center;
}
.to-top.show { display: grid; }
.to-top:hover { background: var(--burgundy); color: #fff; border-color: var(--burgundy); }

@media (max-width: 860px) {
  .hero.searching { position: static; }
}

/* ------------------------------------------------------ moderation panel */
.page-wide { max-width: 62rem; margin: 0 auto; padding: 2rem clamp(1rem,4vw,2rem) 4rem; }
.page-wide h1 { font-family: var(--font-display); font-size: 2rem; color: var(--ink); }
.mod-tabs { display: flex; gap: .4rem; margin: 1.2rem 0 1.4rem; border-bottom: 1px solid var(--line); }
.mod-tab { font-family: var(--font-sans); font-size: .9rem; cursor: pointer; background: none;
  border: 0; border-bottom: 2px solid transparent; color: var(--ink-soft); padding: .5rem .9rem; }
.mod-tab:hover { color: var(--burgundy); }
.mod-tab.on { color: var(--burgundy); border-bottom-color: var(--burgundy); font-weight: 600; }
.mod-card { background: var(--bg-raised); border: 1px solid var(--line); border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
  border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: .9rem; }
.mod-line { font-family: var(--font-sans); font-size: .84rem; color: var(--ink-soft); margin-top: .2rem; }
.mod-body-text { margin: .6rem 0; line-height: 1.5; }
.mod-actions { margin-top: .7rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.ai-flag { font-family: var(--font-sans); font-size: .74rem; border-radius: 999px; padding: .1rem .55rem; display: inline-block; margin-top: .3rem; }
.ai-allow  { background: #e6f4ea; color: #1e6b3a; }
.ai-review { background: #fdf3e0; color: #8a5b00; }
.ai-block  { background: #fdeaea; color: #b3261e; }
.ai-none   { background: var(--chip-bg); color: var(--ink-faint); }
html[data-theme="dark"] .ai-allow  { background: #1d3326; color: #8fd6a8; }
html[data-theme="dark"] .ai-review { background: #3a2e18; color: #e6c37a; }
html[data-theme="dark"] .ai-block  { background: #3a1d1d; color: #f0a7a1; }

/* ------------------------------------------------------- mobile navigation */
.nav-panel { display: flex; align-items: center; gap: 1.4rem; }
.nav-burger { display: none; }

@media (max-width: 860px) {
  .nav-burger { display: grid; }
  .nav-panel {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--line-strong);
    box-shadow: var(--shadow);
    padding: .2rem clamp(1rem, 4vw, 3rem);
  }
  .nav-panel.open { display: flex; }
  .nav-panel a {
    padding: .85rem .2rem; font-size: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-panel a:last-child { border-bottom: 0; }
  .topbar { position: sticky; }
}

/* ------------------------------------------------- password authentication */
.auth-tabs { display: flex; gap: .4rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.auth-tab { font-family: var(--font-sans); font-size: .92rem; cursor: pointer; background: none;
  border: 0; border-bottom: 2px solid transparent; color: var(--ink-soft); padding: .5rem .9rem; }
.auth-tab:hover { color: var(--burgundy); }
.auth-tab.on { color: var(--burgundy); border-bottom-color: var(--burgundy); font-weight: 600; }

.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap .c-input { padding-right: 3.6rem; }
.pw-eye { position: absolute; right: .5rem; background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: .76rem; color: var(--ink-faint); padding: .2rem .35rem; }
.pw-eye:hover { color: var(--burgundy); }

.pw-meter { height: 4px; background: var(--line); border-radius: 2px; margin-top: .45rem; overflow: hidden; }
.pw-meter > div { height: 100%; width: 0; border-radius: 2px; transition: width .18s ease, background .18s ease; }
.pw-meter > div.weak   { background: #b3261e; }
.pw-meter > div.fair   { background: var(--gold); }
.pw-meter > div.good   { background: #6a9b46; }
.pw-meter > div.strong { background: #2e7d4f; }
.pw-hint { font-family: var(--font-sans); font-size: .78rem; color: var(--ink-faint); margin: .3rem 0 0; }

/* Estado de un comentario marcado en la cola de moderacion. Ya no hay "pendiente":
   o esta publicado o se ha retirado. */
.mod-state { font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.mod-state.live { color: #2f6f4f; }
.mod-state.down { color: var(--accent, #7b1e2b); }
[data-theme="dark"] .mod-state.live { color: #7fc4a0; }

/* ===========================================================================
   LECTOR DE TEXTO ÍNTEGRO (case.html)
   Maquetado como un repertorio de jurisprudencia: numeración de párrafo en el
   margen, columna de lectura estrecha y serif. El número es un ancla, para
   poder enlazar "…, apartado 45" y que caiga en el sitio.
   =========================================================================== */
.fulltext { margin: 2.6rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.ft-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ft-head h2 { font-family: var(--font-display); font-size: 1.45rem; margin: 0; color: var(--ink); }

.ft-find { display: flex; align-items: center; gap: .55rem; }
.ft-find input {
  font-family: var(--font-sans); font-size: .86rem; padding: .4rem .7rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--bg-raised); color: var(--ink); min-width: 12rem;
}
.ft-find input:focus { outline: none; border-color: var(--burgundy-soft); }
.ft-count {
  font-family: var(--font-sans); font-size: .78rem; color: var(--ink-faint);
  min-width: 5.2rem; text-align: right; font-variant-numeric: tabular-nums;
}
.ft-nav {
  border: 1px solid var(--line-strong); background: var(--bg-raised);
  color: var(--ink-soft); width: 1.75rem; height: 1.75rem; border-radius: 50%;
  font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0;
}
.ft-nav:hover:not(:disabled) { border-color: var(--burgundy); color: var(--accent); }
.ft-nav:disabled { opacity: .35; cursor: default; }

/* La coincidencia en la que estás, distinta de las demás: si todas se ven
   igual, saltar de una a otra no dice nada. */
.ft-t mark.cur { background: var(--burgundy); color: #fff; }
html[data-theme="dark"] .ft-t mark.cur { background: var(--accent); color: #1a1112; }

.ft-tabs { display: flex; gap: .3rem; margin: 1rem 0 .2rem; flex-wrap: wrap; }
.ft-tab {
  font-family: var(--font-sans); font-size: .84rem; font-weight: 600;
  padding: .42rem .85rem; border: 1px solid var(--line-strong);
  border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer;
}
.ft-tab:hover { border-color: var(--burgundy-soft); color: var(--ink); }
.ft-tab.on { background: var(--burgundy); border-color: var(--burgundy); color: #fff; }
.ft-tab .ft-date { font-weight: 400; opacity: .8; margin-left: .35rem; }

.ft-lang {
  font-family: var(--font-sans); font-size: .86rem; color: var(--ink-soft);
  background: var(--chip-bg); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  padding: .7rem .9rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1rem 0 0;
}

.ft-body {
  margin-top: 1.2rem; max-height: 42rem; overflow-y: auto;
  padding: 1.4rem 1.5rem 1.4rem .6rem;
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.ft-p {
  display: grid; grid-template-columns: 2.9rem 1fr; gap: .9rem;
  margin: 0 0 1rem; font-family: var(--font-serif); font-size: 1.02rem;
  line-height: 1.66; color: var(--ink);
}
/* El número vive en su propia columna para que el texto quede a plomo,
   como en el repertorio impreso. */
.ft-n {
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
  color: var(--ink-faint); text-align: right; padding-top: .32rem;
  text-decoration: none; scroll-margin-top: 5rem;
}
a.ft-n:hover { color: var(--accent); text-decoration: none; }
.ft-t { display: block; }
.ft-t mark { background: #fbe6a2; color: inherit; border-radius: 2px; padding: 0 .1em; }
html[data-theme="dark"] .ft-t mark { background: #6a5320; color: #fff5d6; }

/* La cabecera de la resolución (partes, composición de la Sala) es aparato,
   no razonamiento: se atenúa para que el cuerpo destaque. */
.ft-p.s-header .ft-t { color: var(--ink-soft); font-size: .95rem; }
.ft-p.s-dispositif .ft-t { font-weight: 600; }
.ft-p.ft-hit { background: var(--chip-bg); border-radius: 6px; }

.ft-foot { margin-top: .8rem; }

@media (max-width: 640px) {
  .ft-body { padding: 1rem .9rem 1rem .5rem; max-height: 34rem; }
  .ft-p { grid-template-columns: 2rem 1fr; gap: .6rem; font-size: .97rem; }
  .ft-find input { min-width: 8rem; }
}

/* Rótulo de sección dentro del texto íntegro. Marca dónde acaba el aparato y
   empieza el razonamiento, que es lo único que se lee de verdad. */
.ft-sec {
  grid-column: 1 / -1; font-family: var(--font-sans); font-size: .72rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--burgundy); margin: 1.9rem 0 .9rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
}
.ft-sec:first-child { margin-top: 0; }
.ft-p.s-dispositif { background: var(--chip-bg); border-radius: 6px; padding: .7rem .8rem .7rem 0; }
/* Títulos interiores del propio documento oficial ("Legal context", "The
   question referred"). Se distinguen de nuestros rótulos de sección: aquéllos
   son del Tribunal, éstos los ponemos nosotros. */
.ft-p.ft-title .ft-t { font-weight: 700; color: var(--ink); }
.ft-p.s-signature .ft-t { color: var(--ink-faint); font-size: .88rem; }

/* ===========================================================================
   REFERENCIAS CRUZADAS Y SU FICHA
   Dentro del texto, un asunto o un artículo citado es un enlace. Se marca con
   un subrayado punteado en vez de con color de enlace: en un párrafo con diez
   citas, diez trozos en rojo dejarían de leerse como texto.
   =========================================================================== */
.ref {
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted var(--burgundy-soft);
  cursor: pointer; transition: background .12s, border-color .12s;
}
.ref:hover, .ref:focus-visible {
  background: var(--chip-bg); border-bottom-color: var(--burgundy);
  text-decoration: none; border-radius: 2px;
}
.ref-x { border-bottom-style: dashed; }            /* fuera del corpus: EUR-Lex */
.ref-x::after { content: "↗"; font-size: .7em; vertical-align: super; opacity: .55; margin-left: .1em; }

.refpop {
  /* Por encima de la ventana de lectura (120): el popover se abre desde
     dentro de ella y tiene que quedar delante. */
  position: absolute; z-index: 130; width: min(30rem, calc(100vw - 2rem));
  background: var(--bg-raised); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem 1.1rem .9rem; font-family: var(--font-serif);
}
.refpop-x {
  position: absolute; top: .35rem; right: .45rem; border: 0; background: transparent;
  color: var(--ink-faint); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: .2rem .35rem;
}
.refpop-x:hover { color: var(--accent); }
.refpop-head { font-size: 1.02rem; color: var(--ink); padding-right: 1.4rem; line-height: 1.4; }
.refpop-kind {
  display: inline-block; font-family: var(--font-sans); font-size: .64rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--burgundy); border-radius: 3px;
  padding: .12rem .38rem; margin-right: .45rem; vertical-align: .12em;
}
.refpop-meta {
  font-family: var(--font-sans); font-size: .78rem; color: var(--ink-faint);
  margin-top: .35rem; line-height: 1.4;
}
.refpop-text { font-size: .93rem; line-height: 1.55; color: var(--ink-soft); margin: .7rem 0 0; }
.refpop-art {
  margin: .7rem 0 0; font-size: .93rem; line-height: 1.55;
  max-height: 17rem; overflow-y: auto; padding-right: .3rem;
}
.refpop-art .art-b { font-size: .93rem; }
.refpop-more { font-family: var(--font-sans); font-size: .76rem; color: var(--ink-faint); margin: .4rem 0 0; }
.refpop-go {
  display: inline-block; margin-top: .85rem; font-family: var(--font-sans);
  font-size: .82rem; font-weight: 600; color: var(--accent);
}

/* En el móvil la ficha se ancla abajo a todo el ancho: colocarla junto a una
   palabra en una pantalla de 375 px no deja sitio para nada. */
@media (max-width: 640px) {
  .refpop {
    position: fixed; left: .5rem !important; right: .5rem; top: auto !important;
    bottom: .5rem; width: auto; max-height: 70vh; overflow-y: auto;
  }
}
/* El apartado citado, dentro de la ficha: se presenta como una cita, con su
   número en el margen, igual que en el lector. */
.refpop-quote {
  position: relative; margin: .8rem 0 0; padding-left: 2.4rem;
  font-size: .95rem; line-height: 1.6; color: var(--ink);
}
.refpop-n {
  position: absolute; left: 0; top: .1rem; font-family: var(--font-sans);
  font-size: .76rem; font-weight: 700; color: var(--burgundy);
}
/* Aviso de que al artículo se ha llegado por la tabla de correspondencias del
   Anexo XII: lo que la sentencia cita es la Sexta Directiva, no lo que se abre. */
.refpop-corr {
  font-family: var(--font-sans); font-size: .78rem; line-height: 1.45;
  color: var(--ink-soft); background: var(--chip-bg);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); padding: .55rem .7rem;
  border-radius: 0 6px 6px 0; margin: .7rem 0 0;
}

/* Correspondencia del Anexo XII entre la Sexta Directiva y la 2006/112. Va
   ANTES del articulado y con el mismo tratamiento que el aviso de la ficha
   emergente: es contexto sobre el artículo, no parte de su texto. */
.art-equiv {
  font-family: var(--font-sans); font-size: .82rem; line-height: 1.5;
  color: var(--ink-soft); background: var(--chip-bg);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); padding: .6rem .8rem;
  border-radius: 0 6px 6px 0; margin: 0 0 1.1rem;
}
.art-equiv a { color: var(--burgundy); text-decoration: underline; }

/* Traducción no oficial: la pestaña y el aviso van en el color de alerta del
   sitio, no en el de marca. Lo que se lee ahí no lo ha escrito el Tribunal. */
.ft-tab .ft-mt {
  font-family: var(--font-sans); font-size: .72rem; font-weight: 600;
  color: var(--gold); margin-left: .35rem;
}
.ft-tab.is-mt { border-style: dashed; }
.ft-tab.is-mt.on .ft-mt { color: #f5dfae; }
.ft-lang.ft-warn { border-left-color: var(--accent); }
.ft-lang.ft-warn b { color: var(--accent); }

/* ===========================================================================
   CALENDARIO DE PRÓXIMAS RESOLUCIONES
   =========================================================================== */
.cal-filters { display: flex; gap: .4rem; margin: 1.4rem 0 .6rem; flex-wrap: wrap; }
.cal-f {
  font-family: var(--font-sans); font-size: .84rem; font-weight: 600;
  padding: .42rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
}
.cal-f:hover { border-color: var(--burgundy-soft); color: var(--ink); }
.cal-f.on { background: var(--burgundy); border-color: var(--burgundy); color: #fff; }
.cal-count { font-family: var(--font-sans); font-size: .8rem; color: var(--ink-faint); margin: 0 0 1.4rem; }

.cal-day { margin-bottom: 1.8rem; }
.cal-day h2 {
  font-family: var(--font-sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--burgundy);
  margin: 0 0 .7rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line);
}
.cal-day h2 span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-faint); margin-left: .5rem; }

.cal-item {
  display: grid; grid-template-columns: 4rem 1fr; gap: .9rem;
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .6rem;
}
/* El borde marca lo confirmado: se ve antes de leer nada. */
.cal-item.is-known { border: 1px solid color-mix(in srgb, var(--burgundy) 45%, var(--line)); }
.cal-time { font-family: var(--font-sans); font-size: .85rem; font-weight: 600; color: var(--ink-faint); padding-top: .1rem; }
.cal-head { font-family: var(--font-serif); font-size: 1.02rem; }
.cal-type {
  font-family: var(--font-sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: var(--burgundy-soft); border-radius: 3px; padding: .12rem .4rem;
  vertical-align: .1em; margin-right: .35rem;
}
.cal-num { font-weight: 700; color: var(--ink); }
a.cal-num { color: var(--accent); }
.cal-parties { font-family: var(--font-serif); color: var(--ink-soft); margin-top: .2rem; }
.cal-meta { font-family: var(--font-sans); font-size: .78rem; color: var(--ink-faint); margin-top: .3rem; }
.cal-tags { margin-top: .5rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cal-tag { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; padding: .18rem .5rem; border-radius: 999px; }
.cal-tag.ok { background: var(--chip-bg); color: var(--chip-ink); }
.cal-tag.maybe { background: transparent; color: var(--gold); border: 1px dashed var(--gold); }
.cal-ics { font-family: var(--font-sans); font-size: .74rem; font-weight: 600; }

@media (max-width: 640px) {
  .cal-item { grid-template-columns: 3.2rem 1fr; gap: .6rem; padding: .8rem .85rem; }
}

/* Asunto sin sentencia: lo que hay son las Conclusiones del Abogado General, y
   eso no vincula al Tribunal. Se avisa antes de leer nada. */
.ag-note {
  font-family: var(--font-sans); font-size: .84rem; line-height: 1.5;
  background: var(--chip-bg); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  padding: .6rem .8rem; border-radius: 0 6px 6px 0; margin: 0 0 1rem;
  color: var(--ink-soft);
}
.ag-note b { color: var(--gold); }
.sum-ag {
  font-family: var(--font-sans); font-size: .72rem; font-weight: 600;
  color: var(--gold); border: 1px dashed var(--gold); border-radius: 999px;
  padding: .15rem .55rem; display: inline-block; margin: .4rem 0 .2rem;
}

/* Recuento de coincidencias literales, visible solo al ordenar por ellas: es
   lo que permite comprobar el orden sin fiarse de una puntuación opaca. */
.hitcount {
  font-family: var(--font-sans); font-size: .72rem; font-weight: 600;
  color: var(--burgundy); background: var(--chip-bg);
  padding: .1rem .45rem; border-radius: 999px;
}

/* Anexos y artículos enlazados en los dos sentidos. Va antes del articulado y
   con menos peso visual que la correspondencia del Anexo XII: es navegación,
   no una advertencia sobre el texto. */
.art-rel {
  font-family: var(--font-sans); font-size: .82rem; line-height: 1.6;
  color: var(--ink-soft); margin: 0 0 1.1rem;
  padding-left: .8rem; border-left: 2px solid var(--line-strong);
}
.art-rel b { color: var(--ink); font-weight: 600; }
.art-rel a { color: var(--burgundy); }

/* Paginador de apartados: cuando la sentencia cita varios ("paragraphs 43 and
   45"), se recorren dentro de la ficha en vez de tener que abrir el asunto. */
.refpop-pager {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-left: auto; font-family: var(--font-sans);
  font-size: .72rem; color: var(--ink-faint); white-space: nowrap;
}
.refpop-arrow {
  border: 1px solid var(--line-strong); background: var(--bg-raised);
  color: var(--ink-soft); border-radius: 5px; cursor: pointer;
  width: 1.35rem; height: 1.35rem; line-height: 1; padding: 0;
  display: grid; place-items: center; font-size: .7rem;
}
.refpop-arrow::before { content: "\2039"; }
.refpop-arrow[data-step="1"]::before { content: "\203A"; }
.refpop-arrow:hover:not([disabled]) { border-color: var(--burgundy); color: var(--burgundy); }
.refpop-arrow[disabled] { opacity: .35; cursor: default; }
.refpop-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* --- Guidelines del Comité del IVA ---------------------------------------
   No son derecho vinculante y la ficha tiene que decirlo donde se leen, no en
   letra pequeña: se citan mucho y confundirlas con la norma es el error caro. */
.gl-warn { border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); padding-left: .7rem; }
.gl-warn b { color: var(--ink); }
.gl-list { display: grid; gap: .7rem; margin: 1rem 0 2rem; }
.gl {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-raised); padding: .8rem 1rem;
}
.gl.is-old { opacity: .72; border-style: dashed; }
.gl-meta {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  font-family: var(--font-sans); font-size: .74rem; color: var(--ink-faint);
  margin-bottom: .4rem;
}
.gl-mt { font-weight: 600; color: var(--burgundy); }
.gl-subj {
  background: var(--chip-bg); color: var(--chip-ink);
  padding: .08rem .45rem; border-radius: 999px;
}
.gl-old {
  background: var(--gold); color: #fff; font-weight: 600;
  padding: .08rem .45rem; border-radius: 999px;
}
.gl-txt { margin: 0; font-size: .95rem; line-height: 1.5; }
.gl-note {
  margin: .4rem 0 0; font-family: var(--font-sans); font-size: .78rem;
  color: var(--ink-faint); font-style: italic;
}
.gl-open {
  margin-top: .5rem; border: 1px solid var(--line-strong); background: transparent;
  color: var(--ink-soft); font-family: var(--font-sans); font-size: .78rem;
  padding: .25rem .7rem; border-radius: 999px; cursor: pointer;
}
.gl-open:hover { border-color: var(--burgundy); color: var(--burgundy); }
.gl-body {
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line);
  max-height: 26rem; overflow-y: auto; font-size: .9rem;
}
.gl-body p { margin: 0 0 .6rem; }
/* El enlace al PDF oficial reutiliza el botón de las guidelines. */
a.gl-open { display: inline-block; text-decoration: none; }
/* Casilla para ampliar la búsqueda al texto de las guidelines. */
.c-deep {
  display: flex; align-items: center; gap: .4rem; margin-top: .4rem;
  font-family: var(--font-sans); font-size: .76rem; color: var(--ink-faint);
  cursor: pointer;
}
.c-deep input { margin: 0; cursor: pointer; }
/* La coincidencia del texto se sabe a nivel de reunión, no de guideline. */
.gl-hit {
  background: var(--burgundy); color: #fff; font-weight: 600;
  padding: .08rem .45rem; border-radius: 999px;
}

/* =====================================================================
   LA VENTANA DE LECTURA (reader.js)

   El sitio se usa para leer mucho rato seguido, así que lo largo —una
   sentencia, las guidelines de una reunión, un artículo entero— se abre aquí
   en vez de dentro de una caja con scroll propio compitiendo con la página.

   Tres decisiones que no son estéticas:
     · La columna se acota (--rd-measure). Un renglón que cruza un monitor de
       lado a lado hace perder la vuelta al ojo en cada línea.
     · El tamaño de letra lo elige quien lee y se recuerda. No sabemos ni su
       vista ni a qué distancia está de la pantalla.
     · La barra y las pestañas quedan fijas: a la mitad de una sentencia hay
       que poder buscar sin volver arriba.
   ===================================================================== */
/* ⚠️ Un `display` explícito GANA al `[hidden]` del navegador. El atributo
   `hidden` sólo aplica `display: none` desde la hoja del agente de usuario, que
   es la de menor prioridad: en cuanto una regla propia dice `display: flex`, el
   elemento se sigue pintando aunque `el.hidden` valga true.

   Eso hacía que el botón de cerrar del lector pareciera roto: `close()` sí se
   ejecutaba —vaciaba el texto— pero el panel se quedaba delante, así que el
   efecto visible era "la X borra el contenido y no cierra". Y comprobarlo por
   `overlay.hidden` daba true, con el panel a la vista: hay que comprobar lo que
   se PINTA, no el atributo.

   Lo mismo valía para `.rd-sub`, que lleva `display: block`. */
.rd-overlay[hidden], .rd-sub[hidden], .rd-slot[hidden] { display: none; }

.rd-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(28, 18, 20, .58);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 2.2rem 1.5rem;
}
html[data-theme="dark"] .rd-overlay { background: rgba(0, 0, 0, .68); }

.rd-panel {
  --rd-measure: 40rem;
  --rd-font: 1.06rem;
  --rd-lh: 1.7;
  width: min(1120px, 100%); height: min(92vh, 100%);
  display: flex; flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.rd-panel:focus { outline: none; }

/* Los cuatro tamaños. La medida crece con la letra: si sólo creciera el cuerpo,
   la línea pasaría a tener muy pocas palabras y se leería a saltos. */
.rd-panel.rd-s  { --rd-font: .95rem;  --rd-measure: 36rem; --rd-lh: 1.66; }
.rd-panel.rd-m  { --rd-font: 1.06rem; --rd-measure: 40rem; --rd-lh: 1.7; }
.rd-panel.rd-l  { --rd-font: 1.2rem;  --rd-measure: 45rem; --rd-lh: 1.74; }
.rd-panel.rd-xl { --rd-font: 1.36rem; --rd-measure: 50rem; --rd-lh: 1.78; }

.rd-bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: .95rem 1.2rem .85rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
  flex: 0 0 auto;
}
.rd-titles { min-width: 0; }
.rd-title {
  font-family: var(--font-display); font-size: 1.28rem; margin: 0;
  color: var(--ink); line-height: 1.25;
}
.rd-sub {
  display: block; font-family: var(--font-sans); font-size: .8rem;
  color: var(--ink-faint); margin-top: .2rem;
}
.rd-tools { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.rd-size { display: flex; gap: .2rem; }
.rd-sz, .rd-x {
  font-family: var(--font-sans); background: transparent; cursor: pointer;
  border: 1px solid var(--line-strong); color: var(--ink-soft);
  border-radius: 6px; line-height: 1;
}
.rd-sz { font-size: .82rem; font-weight: 600; padding: .38rem .5rem; }
.rd-x { font-size: 1.3rem; padding: .16rem .48rem .28rem; border-color: transparent; }
.rd-sz:hover:not(:disabled), .rd-x:hover { border-color: var(--burgundy); color: var(--accent); }
.rd-sz:disabled { opacity: .35; cursor: default; }

/* Pestañas y "buscar dentro": fijas, nunca se van con el scroll. */
.rd-slot {
  flex: 0 0 auto; padding: .7rem 1.2rem;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.rd-slot > :first-child { margin-top: 0; }
.rd-slot > :last-child { margin-bottom: 0; }

.rd-body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.8rem 1.5rem 4rem;
  /* ⚠ Sin scroll suave A PROPÓSITO. Una sentencia mide más de 20.000 px aquí
     dentro, y con `scroll-behavior: smooth` un salto a la coincidencia de
     "buscar dentro" se convertía en una animación de veinte mil píxeles que no
     llegaba nunca: el contenedor se quedaba en 0 y parecía que el botón no
     hacía nada. Para saltar diez pantallas hay que aterrizar, no viajar. */
}
/* Aquí es donde se acota la columna. */
.rd-body > * { max-width: var(--rd-measure); margin-left: auto; margin-right: auto; }

.rd-body p, .rd-body li {
  font-family: var(--font-serif); font-size: var(--rd-font);
  line-height: var(--rd-lh); color: var(--ink);
}

/* El texto íntegro de una resolución dentro del lector: el número de apartado
   vuelve a su columna, pero ya sin la caja ni el scroll de antes. */
.rd-body .ft-body {
  /* `margin: 0` a secas anulaba el centrado de `.rd-body > *` y la columna se
     quedaba pegada al margen izquierdo con medio panel vacío a la derecha. */
  max-height: none; overflow: visible; margin: 0 auto; padding: 0;
  background: none; border: 0; box-shadow: none;
  max-width: calc(var(--rd-measure) + 3.8rem);
}
.rd-body .ft-p { font-size: var(--rd-font); line-height: var(--rd-lh); margin-bottom: 1.15rem; }
.rd-body .ft-sec { max-width: calc(var(--rd-measure) + 3.8rem); }
.rd-body .ft-foot { max-width: calc(var(--rd-measure) + 3.8rem); }

/* Las guidelines de una reunión llegan como párrafos sueltos. */
.rd-body .rd-gl p { margin: 0 0 1.05rem; }
.rd-body .rd-gl { max-width: var(--rd-measure); }

/* Un artículo del articulado, con su sangrado. */
.rd-body .art-b { font-size: var(--rd-font); line-height: var(--rd-lh); }

.rd-empty { color: var(--ink-faint); font-family: var(--font-sans); font-size: .9rem; }

@media (max-width: 720px) {
  .rd-overlay { padding: 0; }
  .rd-panel { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .rd-body { padding: 1.2rem 1rem 3rem; }
  .rd-bar { padding: .8rem .9rem .7rem; }
  .rd-slot { padding: .6rem .9rem; }
  .rd-title { font-size: 1.1rem; }
  .rd-body .ft-p { grid-template-columns: 2rem 1fr; gap: .6rem; }
}

/* La ficha emergente reproduce el artículo ENTERO, así que necesita su propio
   scroll: sin él, un 132(1) desbordaba la pantalla y no se llegaba al final. */
.refpop-body { max-height: min(62vh, 34rem); overflow-y: auto; overscroll-behavior: contain; }
.refpop-read {
  display: inline-block; margin: .7rem .6rem 0 0; cursor: pointer;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
  background: var(--chip-bg); color: var(--chip-ink);
  border: 1px solid var(--line-strong); border-radius: 6px; padding: .34rem .6rem;
}
.refpop-read:hover { border-color: var(--burgundy); color: var(--accent); }

/* --- Moverse dentro de un artículo del compendio -------------------------
   Un artículo muy trabajado apila cuatro capas —el texto, las Explanatory
   Notes, las guidelines del Comité y la jurisprudencia— y en el 44 eso son
   59 guidelines, y en el 168 más de quinientos asuntos. Sin índice ni filtro
   había que bajar a ciegas por varias pantallas leyendo números. */
.art-index {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: 1.1rem 0 1.4rem; padding: .6rem .75rem;
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.art-index-lbl {
  font-family: var(--font-sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  margin-right: .3rem;
}
.art-index a {
  font-family: var(--font-sans); font-size: .82rem; color: var(--ink-soft);
  text-decoration: none; padding: .26rem .55rem; border-radius: 6px;
  border: 1px solid transparent;
}
.art-index a:hover { color: var(--accent); border-color: var(--line-strong); background: var(--bg-raised); }

.art-count {
  display: inline-block; margin-left: .45rem; padding: .05rem .42rem;
  font-family: var(--font-sans); font-size: .72rem; font-weight: 700;
  background: var(--chip-bg); color: var(--chip-ink); border-radius: 99px;
  vertical-align: middle;
}

.art-filter {
  display: block; width: 100%; max-width: 30rem; margin: .2rem 0 .3rem;
  font-family: var(--font-sans); font-size: .88rem;
  padding: .5rem .7rem; color: var(--ink);
  background: var(--bg-raised); border: 1px solid var(--line-strong);
  border-radius: 8px;
}
.art-filter:focus { outline: none; border-color: var(--burgundy-soft); }
.art-filter-n {
  font-family: var(--font-sans); font-size: .78rem; color: var(--ink-faint);
  margin: 0 0 .8rem; min-height: 1rem;
}
.art-sec { scroll-margin-top: 4.5rem; }
.rd-back {
  font-family: var(--font-sans); font-size: .8rem; font-weight: 600;
  background: transparent; cursor: pointer; color: var(--ink-soft);
  border: 1px solid var(--line-strong); border-radius: 6px;
  padding: .38rem .6rem; line-height: 1; margin-right: .2rem;
}
.rd-back:hover { border-color: var(--burgundy); color: var(--accent); }

/* --- Explanatory Notes con texto dentro del artículo ----------------------- */
/* La sección es la unidad que se lee y la que se atribuye al artículo, así que
   se presenta como una tarjeta propia dentro de la nota, no como una línea más. */
.nt-sec { margin: .7rem 0 0; padding: .6rem .75rem; border-left: 2px solid var(--line);
          background: var(--bg-soft); border-radius: 0 4px 4px 0; }
.nt-h { margin: 0 0 .3rem; font-weight: 600; font-size: .84rem; line-height: 1.35; }
.nt-num { color: var(--accent); font-variant-numeric: tabular-nums; margin-right: .15rem; }
.nt-pg { float: right; font-weight: 400; font-size: .76rem; color: var(--muted);
         font-variant-numeric: tabular-nums; }
.nt-ex { margin: 0 0 .45rem; font-size: .84rem; line-height: 1.5; color: var(--fg-soft); }
.nt-open { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* Dentro de la ventana de lectura. */
.rd-nt .nt-doc { font-size: .8rem; color: var(--muted); text-transform: uppercase;
                 letter-spacing: .04em; margin: 0 0 .3rem; }
.rd-nt h3 { margin: 0 0 .9rem; line-height: 1.3; }
.rd-nt .nt-otras { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.rd-nt .nt-otras-h { font-size: .8rem; color: var(--muted); text-transform: uppercase;
                     letter-spacing: .04em; margin: 0 0 .5rem; }
.rd-nt .nt-otras ul { margin: 0; padding-left: 1.1rem; }
.rd-nt .nt-otras li { margin: .25rem 0; font-size: .88rem; }

/* El hecho, no la conclusión: cuántas sentencias sobre este artículo son
   posteriores a esta guideline o a estas notas. Que las contradiga o no, no se
   puede deducir de una fecha, así que no se insinúa. */
.gl-after { color: var(--accent); font-weight: 600; }

/* --- La doctrina, desde el buscador de jurisprudencia ---------------------- */
/* Va aparte y por encima de los asuntos: una guideline no es una sentencia, y
   mezclarlas en la misma lista las iguala. */
.doc-strip { margin: 0 0 1.4rem; padding: .8rem .9rem; border: 1px solid var(--line);
             border-radius: 6px; background: var(--bg-soft); }
.doc-strip-h { margin: 0 0 .6rem; font-size: .74rem; text-transform: uppercase;
               letter-spacing: .06em; color: var(--muted); }
.doc-strip-warn { color: var(--accent); font-weight: 700; letter-spacing: .02em; }
.doc-strip-list { display: grid; gap: .45rem;
                  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.doc-chip { display: block; padding: .5rem .6rem; border: 1px solid var(--line);
            border-radius: 5px; background: var(--bg); text-decoration: none;
            color: inherit; }
.doc-chip:hover { border-color: var(--accent); }
.doc-chip-a { display: block; font-weight: 700; font-size: .84rem; color: var(--accent); }
.doc-chip-n { display: block; font-size: .74rem; color: var(--muted); margin: .1rem 0; }
.doc-chip-t { display: block; font-size: .78rem; line-height: 1.35; color: var(--fg-soft);
              overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
              -webkit-box-orient: vertical; }

/* --- Discussion: etiquetas del comentario --------------------------------- */
/* La etiqueta va en la cabecera, donde se lee, no al pie en letra pequeña:
   sirve para decidir si merece la pena leer el mensaje. */
.c-topic, .c-country, .c-answered, .c-open {
  display: inline-block; margin-left: .4rem; padding: .05rem .4rem;
  border-radius: 3px; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; vertical-align: .08em;
}
.c-topic.t-question { background: var(--accent); color: #fff; }
.c-topic.t-practice { background: var(--gold, #8a6d3b); color: #fff; }
.c-country { border: 1px solid var(--line); color: var(--muted); font-variant-numeric: tabular-nums; }
.c-answered { border: 1px solid #2f7d4f; color: #2f7d4f; }
.c-open { border: 1px solid var(--line); color: var(--muted); }
.c-answer { margin-left: .4rem; }

/* El compositor: categoría y país ANTES de escribir. Puestos al final se
   saltan, y el país es el dato que más vale aquí. */
.compose-kind { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
                margin: .5rem 0 .6rem; font-size: .84rem; }
.compose-kind label { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); }
.compose-kind select { font: inherit; padding: .2rem .3rem; border: 1px solid var(--line);
                       border-radius: 4px; background: var(--bg); color: inherit; }
.compose-hint { flex-basis: 100%; margin: 0; font-size: .78rem; color: var(--muted); }

/* --- Discussion: la página agregada --------------------------------------- */
.disc-filters { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
                margin: 1.2rem 0 .6rem; }
.disc-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.disc-chip { font: inherit; font-size: .8rem; padding: .25rem .6rem; cursor: pointer;
             border: 1px solid var(--line); border-radius: 999px;
             background: var(--bg); color: inherit; }
.disc-chip:hover { border-color: var(--accent); }
.disc-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.disc-country { font-size: .82rem; color: var(--muted); display: inline-flex;
                align-items: center; gap: .35rem; }
.disc-country select { font: inherit; padding: .2rem .3rem; border: 1px solid var(--line);
                       border-radius: 4px; background: var(--bg); color: inherit; }
.disc-count { font-size: .8rem; color: var(--muted); margin: 0 0 .8rem; }
.disc-card { border: 1px solid var(--line); border-radius: 6px; padding: .8rem .9rem;
             margin-bottom: .7rem; background: var(--bg); }
.disc-top { margin-bottom: .45rem; }
.disc-anchor { font-weight: 700; font-size: .84rem; color: var(--accent); text-decoration: none; }
.disc-anchor:hover { text-decoration: underline; }
.disc-body { margin: 0 0 .5rem; line-height: 1.55; }
.disc-foot { font-size: .78rem; color: var(--muted); }

/* --- Guidelines del Comité del IVA, dentro de la ventana de lectura ---------
   El texto de una reunión son hasta diez documentos seguidos. Sin separarlos
   se lee como un bloque continuo de veinte mil caracteres en el que no se sabe
   dónde acaba un acuerdo y empieza el siguiente. Cada documento es su propia
   sección, con la materia (Subject) de titular y Origin/Reference como
   metadatos, que es lo que se cita. */
.rd-gl .gl-doc-block { margin: 0 0 2.4rem; }
.rd-gl .gl-doc-block + .gl-doc-block { padding-top: 1.8rem; border-top: 1px solid var(--line); }
.rd-gl .gl-doc { margin: 0 0 .35rem; font-family: var(--font-sans); font-size: .74rem;
                 letter-spacing: .02em; color: var(--muted); }
.rd-gl .gl-subject { margin: 0 0 .5rem; font-size: 1.06em; line-height: 1.32; }
.rd-gl .gl-rmeta { margin: 0 0 .35rem; font-family: var(--font-sans); font-size: .8rem;
                  color: var(--fg-soft); line-height: 1.5; }
.rd-gl .gl-rmeta b { font-weight: 500; color: var(--muted);
                    text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; }
.rd-gl .gl-section { margin: 0 0 1.1rem; font-family: var(--font-sans); font-size: .74rem;
                     color: var(--ink-faint); text-transform: none; letter-spacing: .02em; }
/* El aviso legal va UNA vez, al final y atenuado: se repite en el PDF detrás de
   cada documento, y el encabezado del lector ya dice que no son vinculantes. */
.rd-gl .gl-caveat { margin: 2.2rem 0 0; padding: .85rem 1rem; border-left: 2px solid var(--line);
                    background: var(--bg-soft); border-radius: 0 4px 4px 0;
                    font-family: var(--font-sans); font-size: .78rem; line-height: 1.55;
                    color: var(--muted); }

/* ======================================================= MARCO COMUN (it. 39)
   Todas las paginas en el mismo marco que la portada: mismo ancho maximo, mismo
   margen lateral y, por tanto, el mismo borde izquierdo al pasar de una a otra.
   Antes cada una tenia el suyo (46, 62, 74 y 84 rem, centrados) y el titulo
   saltaba de sitio al navegar. El texto corrido sigue en su columna de lectura:
   lo que usa el ancho es lo que se consulta, no lo que se lee. */
:root { --page-max: 84rem; --page-pad: clamp(1rem, 3vw, 2.5rem); --prose: 46rem; }
.layout { max-width: var(--page-max); padding-left: var(--page-pad); padding-right: var(--page-pad); }
.page-narrow, .page-wide, .page-frame, .comp-layout {
  max-width: var(--page-max); margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.4rem) var(--page-pad) 4rem;
}
/* Una sola cabecera de pagina para todas: titulo y entradilla, sin antetitulo. */
.page-narrow h1, .page-wide h1, .page-frame h1, .comp-layout h1 {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1.15;
  margin: 0 0 .6rem; text-wrap: balance;
}
.lede { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55; max-width: var(--prose); margin: 0 0 1.6rem; }
.page-source { margin-top: 2.5rem; max-width: var(--prose); }

/* Paginas de texto: la columna de lectura, pegada al borde comun. */
.page-narrow > * { max-width: var(--prose); }
.page-narrow { position: relative; }
.page-toc { display: none; }
@media (min-width: 1100px) {
  /* El indice va en el hueco de la derecha y acompaña al bajar. Posicion
     absoluta con la altura del texto y, dentro, sticky: asi no hay que meter el
     texto en una rejilla, que deshace el colapso de margenes entre parrafos. */
  .page-narrow.has-toc > .page-toc {
    display: block; position: absolute; max-width: none;
    top: clamp(1.5rem, 3vw, 2.4rem); bottom: 4rem; right: var(--page-pad);
    width: 15rem;
  }
  .page-toc .toc-in { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; }
}
.page-toc .toc-h { font-family: var(--font-sans); font-size: .8rem; font-weight: 600; color: var(--ink); margin: 0 0 .5rem; }
.page-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.page-toc li { margin: 0; }
.page-toc a {
  display: block; font-family: var(--font-sans); font-size: .8rem; line-height: 1.35;
  color: var(--ink-faint); text-decoration: none; padding: .28rem 0 .28rem .8rem; margin-left: -1px;
  border-left: 1px solid transparent;
}
.page-toc a:hover { color: var(--burgundy); }
.page-toc a[aria-current] { color: var(--burgundy); border-left-color: var(--burgundy); }
.page-narrow h2[id] { scroll-margin-top: 5rem; }

/* El calendario usa algo mas de ancho: cada evento lleva hora, tipo y etiquetas. */
.page-narrow > #cal-body, .page-narrow > .cal-filters { max-width: 62rem; }

/* --- Ficha del asunto: la misma idea que las filas de resultados. Lo que se
   lee a la izquierda; articulos, temas y textos oficiales en una columna a la
   derecha que acompaña al bajar. */
.case-page > .legal-meta { margin: 0 0 1rem; }
.case-grid { display: block; }
.case-grid > #case-body, .case-grid > .fulltext, .case-grid > .discussion { max-width: 52rem; }
.case-side:empty { display: none; }
.case-side .chips { flex-direction: column; align-items: flex-start; margin: 0 0 1.2rem; }
.case-side .chips-label { margin: 0 0 .15rem; }
.case-side .docs-line { flex-direction: column; gap: .35rem; margin: 0; padding-top: .9rem; border-top: 1px solid var(--line); }
@media (min-width: 1000px) {
  .case-grid {
    display: grid; grid-template-columns: minmax(0, 52rem) 16rem;
    column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
  }
  .case-grid > #case-body { grid-column: 1; grid-row: 1; }
  .case-grid > .fulltext { grid-column: 1; grid-row: 2; }
  .case-grid > .discussion { grid-column: 1; grid-row: 3; }
  .case-side {
    grid-column: 2; grid-row: 1 / span 3; align-self: start;
    position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto;
    padding-top: .5rem;
  }
}
@media (max-width: 999px) {
  .case-side { margin: 1rem 0 0; }
  .case-side .chips { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .case-side .docs-line { flex-direction: row; flex-wrap: wrap; }
}

/* --- Compendio: el indice de capas («On this article») pasa a una columna a la
   derecha que acompaña al bajar; el texto del articulo, en su columna. */
.comp-selectors > div { max-width: 22rem; }
.comp-selectors > div:has(#c-find) { max-width: 30rem; flex: 1.5; }
.comp-layout > .lede { margin-bottom: 1.4rem; }
.art-body, .art-rel, .art-source, .art-head, .crumb { max-width: 54rem; }
@media (min-width: 1100px) {
  #c-body:has(> .art-index) {
    display: grid; grid-template-columns: minmax(0, 60rem) 14rem;
    column-gap: clamp(2.5rem, 4vw, 4rem); align-items: start;
  }
  #c-body:has(> .art-index) > * { grid-column: 1; }
  #c-body > .art-index {
    grid-column: 2; grid-row: 1 / span 40; align-self: start;
    position: sticky; top: 5.5rem;
    flex-direction: column; align-items: flex-start; gap: .1rem;
    margin: 0; padding: 0 0 0 .9rem; border: 0; border-left: 1px solid var(--line); background: none;
  }
}
@media (min-width: 1100px) {
  #c-body > .art-index .art-index-lbl {
    font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--ink); margin: 0 0 .35rem;
  }
  #c-body > .art-index a { padding: .28rem 0; border: 0; background: none; font-size: .8rem; color: var(--ink-faint); }
  #c-body > .art-index a:hover { color: var(--burgundy); background: none; }
}
/* Sin esto, una pagina corta (sin barra de desplazamiento) quedaba 7 px mas a
   la derecha que una larga, y el borde comun saltaba al navegar. */
html { scrollbar-gutter: stable; }

/* Los selectores del compendio, con la misma forma que la barra de filtros de
   la portada: campos hundidos del color del papel, flecha dibujada, rotulo en
   minuscula. Eran los ultimos desplegables blancos con borde del sitio. */
.comp-selectors { gap: .85rem 1rem; align-items: flex-start; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.comp-selectors label:not(.c-deep) {
  font-size: .74rem; font-weight: 600; color: var(--ink-soft);
  text-transform: none; letter-spacing: 0; margin-bottom: .35rem;
}
.comp-selectors select, .comp-selectors input[type="search"] {
  font-size: .88rem; padding: .5rem .65rem; border: 1px solid transparent; border-radius: 8px;
  background-color: var(--bg-sunken); transition: border-color .15s ease-out;
}
.comp-selectors select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: var(--chevron); background-repeat: no-repeat;
  background-position: right .65rem center; padding-right: 1.9rem; text-overflow: ellipsis;
}
.comp-selectors select:hover, .comp-selectors input[type="search"]:hover { border-color: var(--line-strong); }
.comp-selectors .c-deep {
  display: flex; align-items: center; gap: .45rem; margin: .5rem 0 0;
  font-size: .8rem; font-weight: 400; color: var(--ink-soft);
  text-transform: none; letter-spacing: 0; cursor: pointer;
}
.comp-selectors .c-deep input { width: auto; padding: 0; margin: 0; }
.comp-matches { margin: .6rem 0 1.2rem; }

/* ======================================================= FICHA DEL ASUNTO (it. 40)
   Como la ficha de una consulta de la DGT: titulo, cadena de materias, un
   registro con lo que se cita, y el texto en la pagina, justificado y listo
   para imprimir. */
.case-head { margin: 0 0 2.2rem; }
.case-title {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: clamp(1.8rem, 3.2vw, 2.45rem); line-height: 1.15; margin: 0 0 .9rem;
  text-wrap: balance;
}
.case-title .num { color: var(--burgundy); white-space: nowrap; }
.case-head .headnote {
  font-family: var(--font-serif); font-style: normal; font-size: 1.02rem; line-height: 1.6;
  color: var(--ink-soft); margin: 0 0 1.4rem; max-width: 48rem;
}
/* El registro: etiqueta a la izquierda, dato a la derecha, una linea fina
   entre filas. Se lee de un vistazo y se imprime como una ficha. */
.case-record { margin: 0; max-width: 48rem; font-family: var(--font-sans); font-size: .88rem; border-bottom: 1px solid var(--line); }
.case-record > div {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem;
  padding: .5rem 0; border-top: 1px solid var(--line);
}
.case-record dt { color: var(--ink-faint); font-weight: 500; }
.case-record dd { margin: 0; color: var(--ink); line-height: 1.55; overflow-wrap: anywhere; }
.case-record dd a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.case-record dd a:hover { color: var(--burgundy); text-decoration-color: currentColor; }
@media (max-width: 520px) {
  .case-record > div { grid-template-columns: 1fr; gap: .1rem; }
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.case-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.case-actions:empty { display: none; }

/* Botones de la ficha: uno lleno para la accion principal, uno de linea y uno
   de texto. */
.btn-solid, .btn-line, .btn-link {
  font-family: var(--font-sans); font-size: .88rem; font-weight: 600; cursor: pointer;
  border-radius: 8px; line-height: 1.2; text-decoration: none;
}
.btn-solid { background: var(--burgundy); color: #fff; border: 1px solid var(--burgundy); padding: .6rem 1.15rem; }
.btn-solid:hover { background: var(--burgundy-soft); border-color: var(--burgundy-soft); }
/* En oscuro, texto blanco: el granate claro con texto oscuro daba 3,9:1. */
.btn-line { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); padding: .6rem 1.05rem; }
.btn-line:hover { border-color: var(--burgundy); color: var(--burgundy); }
.btn-link { background: none; border: 0; padding: .2rem 0; color: var(--burgundy); font-size: .84rem; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- El resumen: ya no es una caja, es una seccion de lectura. */
.case-summary {
  background: none; border: 0; border-radius: 0; padding: 0;
  margin: 0 0 2.6rem; max-width: 48rem;
}
.cs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.case-summary .cs-head h2, .fulltext .ft-head h2 {
  font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); margin: 0;
}
.cs-note { font-family: var(--font-sans); font-size: .8rem; color: var(--ink-faint); margin: .35rem 0 1.2rem; }
.case-summary .sum-sec { margin: 0 0 1.35rem; }
.case-summary .sum-sec h3 {
  font-family: var(--font-sans); font-size: .82rem; font-weight: 700; letter-spacing: 0;
  color: var(--burgundy); margin: 0 0 .35rem;
}
.case-summary .sum-sec p {
  font-family: var(--font-serif); font-size: 1.06rem; line-height: 1.72; color: var(--ink); margin: 0;
}

/* --- Texto justificado, con guiones, donde se lee de corrido. */
.case-summary .sum-sec p, .case-head .headnote, .ft-t {
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}
@media (max-width: 520px) {
  .case-summary .sum-sec p, .case-head .headnote, .ft-t { text-align: left; }
}

/* --- El texto integro, en la pagina. */
.fulltext { max-width: 48rem; }
.ft-docs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .4rem; }
.ft-doc-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left;
  font-family: var(--font-sans); cursor: pointer; padding: .55rem .95rem;
  background: transparent; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink-soft);
}
.ft-doc-tab b { font-size: .88rem; color: var(--ink); font-weight: 600; }
.ft-doc-tab span { font-size: .76rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ft-doc-tab:hover { border-color: var(--burgundy-soft); }
.ft-doc-tab[aria-selected="true"] { border-color: var(--burgundy); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--burgundy); }
.ft-doc-tab[aria-selected="true"] b { color: var(--burgundy); }
.ft-doc-tab.is-mt { border-style: dashed; }
.ft-tools { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; margin: .8rem 0 .2rem; }
.ft-loading { font-family: var(--font-sans); font-size: .86rem; color: var(--ink-faint); margin: 1rem 0; }
.ft-doc { position: relative; margin-top: 1.2rem; }
.ft-doc:not(.is-open) {
  max-height: 34rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.ft-more { margin: .6rem 0 0; }
.ft-doc.is-open + .ft-more { display: none; }
.ft-inline .ft-p {
  grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem;
  font-size: 1.06rem; line-height: 1.72; margin: 0 0 1.05rem;
}
.ft-inline .ft-sec:first-child { margin-top: 0; }
.ft-inline .ft-p.s-dispositif { padding: .8rem .9rem .8rem 0; }
.ft-inline .ft-p.ft-hit { box-shadow: 0 0 0 .5rem var(--chip-bg); }
.ft-inline .ft-n { scroll-margin-top: 6rem; }
@media (max-width: 640px) {
  .ft-inline .ft-p { grid-template-columns: 1.9rem minmax(0, 1fr); gap: .55rem; font-size: 1rem; }
}
/* Llamadas a nota de EUR-Lex: «( 2 )» pasa a volada. */
sup.fn {
  font-family: var(--font-sans); font-size: .66em; line-height: 0; vertical-align: super;
  color: var(--ink-faint); margin: 0 .08em;
}
.print-only { display: none; }

/* ============================================================ IMPRESION
   «Print the summary»: cabecera, registro, temas y resumen. «Print» en el
   texto integro: cabecera, registro y el documento entero. Ctrl+P a secas:
   el resumen, y el texto solo si esta abierto. Siempre en claro, sin la
   cromatica de pantalla, y sin nada que solo sirve para pulsar. */
@media print {
  @page { size: A4; margin: 18mm 17mm 20mm; }
  :root, html[data-theme="dark"] {
    --bg: #fff; --bg-raised: #fff; --bg-sunken: #fff; --chip-bg: #fff;
    --ink: #111; --ink-soft: #333; --ink-faint: #666; --line: #bbb; --line-strong: #999;
    --burgundy: #6e1423; --chip-ink: #111; --shadow: none; --shadow-sm: none;
    color-scheme: light;
  }
  html, body { background: #fff !important; }
  body { font-size: 10.5pt; }
  .topbar, footer.site, .foot, .to-top, #discussion, .case-actions, .cs-head .btn-link,
  .ft-tools, .ft-more, .ft-docs, .case-page > .legal-meta, .rd-overlay, .refpop,
  .skip-link { display: none !important; }
  .page-frame { max-width: none; padding: 0; margin: 0; }
  .case-grid { display: block !important; }
  .case-grid > #case-body, .case-grid > .fulltext, .case-summary, .case-record, .case-head .headnote { max-width: none; }
  .case-side { position: static !important; max-height: none !important; overflow: visible !important; margin: 0 0 6mm; padding: 0; }
  .case-side .chips { flex-direction: row !important; flex-wrap: wrap; gap: 0 .9em; margin: 0 0 2mm; }
  .chip { border: 0 !important; background: none !important; padding: 0 !important; color: #111 !important; font-size: 9pt; }
  .print-only { display: block !important; }
  .print-src { font-family: var(--font-sans); font-size: 8pt; color: #666; margin: 0 0 6mm; overflow-wrap: anywhere; }
  .case-title { font-size: 20pt; }
  .case-summary .sum-sec p, .ft-inline .ft-p { font-size: 10.5pt; line-height: 1.5; }
  a { color: inherit !important; text-decoration: none !important; }
  a.ref { border-bottom: 0 !important; }
  h2, h3, .ft-sec { break-after: avoid; }
  p { orphans: 3; widows: 3; }
  .ft-doc { max-height: none !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .ft-p.s-dispositif, .ft-inline .ft-p.ft-hit { background: none !important; box-shadow: none !important; }

  /* Imprimir el resumen: fuera el texto integro. */
  body.print-summary #fulltext { display: none !important; }
  /* Imprimir el documento: fuera el resumen y los temas. */
  body.print-doc .case-summary, body.print-doc .case-side { display: none !important; }
  /* Ctrl+P sin elegir: el texto solo si esta abierto. */
  body:not(.print-doc) #fulltext:not(:has(.ft-doc.is-open)) { display: none !important; }
}

@media (min-width: 1000px) {
  .case-grid { grid-template-columns: minmax(0, 48rem) 17rem; }
}

/* Con el documento abierto, la barra del texto acompaña al bajar: una
   sentencia abierta mide decenas de pantallas y las acciones no pueden
   quedarse arriba del todo. Dice que documento se esta leyendo. */
.ft-tools { position: sticky; top: 3.9rem; z-index: 5; background: var(--bg); padding: .45rem 0; align-items: baseline; }
.ft-tools-doc { display: none; margin-left: auto; font-family: var(--font-sans); font-size: .78rem; color: var(--ink-faint); }
#ft-page:has(.ft-doc.is-open) .ft-tools { border-bottom: 1px solid var(--line); }
#ft-page:has(.ft-doc.is-open) .ft-tools-doc { display: inline; }
#ft-page:not(:has(.ft-doc.is-open)) #ft-collapse { display: none; }
@media (max-width: 860px) { .ft-tools { top: 3.4rem; } .ft-tools-doc { display: none !important; } }

#fulltext, #summary, #discussion { scroll-margin-top: 5rem; }

/* ========================================================= FONDO BLANCO (it. 42)
   Daniel: el problema era el fondo y los bordes. Fondo blanco, y fuera las
   cajas: lo que separa es el aire, la tipografia y, entre asuntos o entre
   secciones, una raya neutra muy fina. Nada de hojas con borde. */

/* --- Lista de resultados y del compendio: una entrada por asunto. */
.card {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--line);
  padding: 1.55rem 0 1.6rem; margin: 0;
}
.card:first-child { padding-top: .6rem; }
.card-side .docs-line { border-top: 0; padding-top: 0; margin-top: .6rem; }

/* --- Articulos que interpreta y temas: como cita, no como pastillas. */
.cites {
  font-family: var(--font-sans); font-size: .86rem; line-height: 1.55;
  color: var(--ink-soft); margin: .55rem 0 0; max-width: 62rem;
}
.cites-lbl { font-weight: 600; color: var(--ink); margin-right: .35rem; }
.cites a { color: var(--burgundy); text-decoration: none; }
.cites a:hover { text-decoration: underline; text-underline-offset: 2px; }
.cites.topics a { color: var(--ink-soft); }
.cites.topics a:hover { color: var(--burgundy); }
.cites .sep-dot { color: var(--ink-faint); }
@media (max-width: 760px) { .card .cites { order: 2; } }

/* --- Ficha del asunto: secciones separadas por aire y una raya fina. */
.case-head, .case-summary, .fulltext, .discussion, .case-side {
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.case-head { padding: 0; margin: 0 0 2.4rem; }
.case-summary { padding: 2.2rem 0 0; margin: 0 0 2.4rem; border-top: 1px solid var(--line); max-width: none; }
.fulltext { padding: 2.2rem 0 0; margin: 0 0 2.4rem; border-top: 1px solid var(--line); max-width: none; }
.discussion { padding: 2.2rem 0 0; margin: 0; border-top: 1px solid var(--line); }
.case-side { padding: 0; }
.side-block { margin: 0 0 1.6rem; }
.side-h {
  font-family: var(--font-sans); font-size: .8rem; font-weight: 700; color: var(--ink);
  margin: 0 0 .45rem;
}
.side-cite { font-family: var(--font-sans); font-size: .88rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 .45rem; }
.side-cite a, .side-topics a { color: var(--burgundy); text-decoration: none; }
.side-cite a:hover, .side-topics a:hover { text-decoration: underline; text-underline-offset: 2px; }
.side-topics { list-style: none; margin: 0; padding: 0; font-family: var(--font-sans); font-size: .88rem; line-height: 1.45; }
.side-topics li { margin: 0 0 .35rem; }
.side-topics a { color: var(--ink-soft); }
.side-topics a:hover { color: var(--burgundy); }
.ft-tools { background: var(--bg); }
.case-head .case-record { border-bottom: 1px solid var(--line); }

/* --- Compendio: el texto del articulo sobre un fondo apenas tintado, sin
   borde; guidelines y notas como lista, no como cajas. */
.art-body { background: var(--bg-sunken); border: 0; box-shadow: none; }
.gl { background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: .95rem 0; }
.gl-list { gap: 0; }
.art-sec { margin-top: 2.4rem; }
.art-sec > .cases-head { padding-bottom: .5rem; border-bottom: 1px solid var(--line); margin-top: 0; }

/* --- «Also in the compendium» del buscador: sin caja ni bordes. */
.doc-strip { border: 0; background: var(--bg-sunken); border-radius: var(--radius); }
.doc-chip { border: 0; background: var(--bg); }

@media print {
  .case-summary, .fulltext { border-top: 0 !important; padding-top: 0 !important; }
}

/* ========================================================= BUSCADOR (it. 42)
   Daniel: la letra de la cabecera del buscador y la distribucion no dejaban
   ver las opciones. Letra de interfaz propia (Source Sans 3, la pareja de la
   Source Serif del texto) en lugar de la del sistema; la caja de busqueda mas
   presente; «Search in» y «Sort» con aspecto de control; las sugerencias como
   opciones que se pulsan; y los filtros en un panel propio, separados de los
   resultados, con campos que se ven. */
:root { --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

.hero .sub {
  font-family: var(--font-sans); font-size: 1.15rem; line-height: 1.5;
  color: var(--ink-soft); max-width: 38rem; margin: 0 auto 1.9rem;
}
.searchwrap { max-width: 46rem; }
.searchbox {
  border: 1.5px solid var(--line-strong); border-radius: 12px;
  padding: .85rem 1rem .85rem 1.2rem; gap: .75rem;
  box-shadow: 0 1px 2px rgba(26, 22, 23, .05), 0 6px 18px rgba(26, 22, 23, .06);
}
html[data-theme="dark"] .searchbox { box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.searchbox input { font-family: var(--font-sans); font-size: 1.14rem; color: var(--ink); }

/* «Search in» y «Sort»: rotulo y un desplegable con borde, como los filtros. */
.search-controls { gap: .6rem 1.4rem; margin-top: 1rem; }
.scope-control { font-size: .9rem; color: var(--ink-soft); gap: .5rem; }
.scope-control select {
  font-size: .9rem; font-weight: 600; color: var(--ink);
  background: var(--bg-raised) var(--chevron) no-repeat right .55rem center;
  border: 1px solid var(--line-strong); border-radius: 8px;
  padding: .32rem 1.8rem .32rem .65rem;
}
.scope-control select:hover { color: var(--burgundy); border-color: var(--burgundy-soft); }
.semstatus { font-size: .84rem; }
.syntax-help { font-size: .88rem; }
.syntax-help summary { color: var(--ink-soft); }

/* Sugerencias: opciones que se pulsan, sobre un fondo apenas tintado. */
.examples { gap: .5rem; margin-top: 1.3rem; font-size: .92rem; }
.examples::before { content: "Try"; color: var(--ink-soft); font-weight: 600; margin-right: .2rem; }
.example {
  background: var(--bg-sunken); color: var(--ink); text-decoration: none;
  border-radius: 999px; padding: .34rem .85rem; line-height: 1.3;
}
.example:hover { background: color-mix(in srgb, var(--burgundy) 10%, var(--bg-sunken)); color: var(--burgundy); }

/* Filtros: un panel propio, separado de los resultados. */
.filterbar {
  background: var(--bg-sunken); border: 0; border-radius: 12px;
  padding: 1rem clamp(1rem, 2vw, 1.4rem) 1.1rem; margin: .5rem 0 1.4rem;
}
.fb-field > label, .fb-label { font-size: .86rem; font-weight: 600; color: var(--ink); }
.filterbar select, .filterbar input[type="number"] {
  background-color: var(--bg-raised); border: 1px solid var(--line-strong);
  font-size: .95rem; padding: .55rem .7rem; color: var(--ink);
}
.filterbar select { padding-right: 2rem; }
.filterbar select:hover, .filterbar input[type="number"]:hover { border-color: var(--burgundy-soft); }
.year-presets { background: var(--bg-raised); border: 1px solid var(--line-strong); }
.year-presets button { font-size: .88rem; color: var(--ink-soft); }
.year-presets button.on { background: var(--burgundy); color: #fff; box-shadow: none; }
.fb-more { font-size: .9rem; color: var(--ink); }
.fb-extra { border-top-color: var(--line-strong); }
.chk { font-size: .92rem; color: var(--ink); }
.results-head { font-size: .95rem; }

/* ========================================================= BLOQUES (it. 43)
   Daniel: sobre el blanco, con sólo una raya fina, los asuntos y las
   guidelines «flotaban»: muy transparente, no se veía el salto de uno a otro.
   Cada entrada pasa a ser un BLOQUE con fondo relleno gris cálido, sin borde
   (los bordes eran lo que no le gustaba), y aire entre bloques. */
:root { --surface: #f6f4f0; --surface-hover: #efece6; }
html[data-theme="dark"] { --surface: #221a18; --surface-hover: #2a211e; }

/* --- Asuntos (buscador y compendio). */
.card {
  background: var(--surface); border: 0; border-radius: 12px;
  padding: 1.3rem clamp(1.1rem, 2.2vw, 1.7rem) 1.35rem;
  margin: 0 0 .85rem;
  transition: background-color .15s ease-out;
}
.card:first-child { padding-top: 1.3rem; }
.card:hover { background: var(--surface-hover); }
.card .ttl { font-size: 1.22rem; }
.card-side { color: var(--ink-soft); }

/* --- Guidelines del Comité y notas explicativas: el mismo bloque. */
.gl-list { gap: .75rem; }
.gl {
  background: var(--surface); border: 0; border-radius: 12px;
  padding: 1.05rem clamp(1rem, 2vw, 1.4rem) 1.1rem;
}
.gl.is-old { opacity: 1; background: none; outline: 1px dashed var(--line-strong); outline-offset: -1px; }
.gl-txt { font-size: 1rem; color: var(--ink); }
.gl-open { background: var(--bg-raised); border-color: var(--line-strong); color: var(--ink); font-size: .84rem; }
.gl-open:hover { border-color: var(--burgundy); color: var(--burgundy); }

/* El aviso «Not binding»: fondo tintado en vez de caja con borde dorado. */
.gl-warn {
  border: 0; background: color-mix(in srgb, var(--gold) 12%, var(--bg));
  border-radius: 10px; padding: .7rem .95rem; color: var(--ink-soft);
}

@media (max-width: 640px) {
  .card { padding: 1rem; margin-bottom: .65rem; }
}
@media print {
  .card, .gl { background: none !important; padding: 0 0 4mm !important; border-radius: 0 !important; }
}

/* Etiquetas dentro de un bloque: sobre blanco, que sobre el gris del bloque desaparecian. */
.gl .gl-subj, .card .chip { background: var(--bg-raised); }

/* ========================================================= ITERACION 44
   Daniel: la columna de datos de cada asunto era poco visible; calendario y
   discusion tenian el mismo problema que la lista; los titulos del texto
   integro, demasiado apretados; y el modo lectura pedia mas funciones. */

/* --- Columna de datos del asunto: mas grande, mas oscura, ordenada. */
.card-side { font-size: .92rem; color: var(--ink-soft); }
.side-meta { gap: .35rem; }
.card .badge-type {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: var(--burgundy);
  border-radius: 5px; padding: .22rem .55rem; line-height: 1.25;
}
.card .badge-type.opinion { background: var(--tone-opinion); color: #fff; }
.card .badge-type.order { background: var(--burgundy-soft); color: #fff; }
/* En oscuro: blanco sobre granate (4,8:1); sobre el dorado claro, texto oscuro. */
html[data-theme="dark"] .card .badge-type.opinion { color: #1a1112; }
.card .s-date { color: var(--ink); font-weight: 600; font-size: .98rem; }
.sum-badge {
  font-size: .86rem; color: var(--ink); background: var(--bg-raised);
  border: 1px solid var(--line-strong); border-radius: 8px; padding: .3rem .65rem; margin-top: .2rem;
}
.sum-badge:hover { color: var(--burgundy); border-color: var(--burgundy); text-decoration: none; }
.card-side .docs-line { gap: .35rem; margin-top: .8rem; font-size: .88rem; }
.card-side .docs-line a { color: var(--ink); }
.card-side .docs-line a b { font-weight: 600; }
.card-side .docs-line a:hover { color: var(--burgundy); }
.card { grid-template-columns: minmax(0, 1fr) 13.5rem; }

/* --- Calendario y discusion: los mismos bloques que la lista. */
.cal-item, .cal-item.is-known {
  background: var(--surface); border: 0; border-radius: 12px;
  padding: 1rem 1.2rem; margin-bottom: .75rem;
}
.cal-time { color: var(--ink-soft); font-size: .92rem; }
.cal-head { font-size: 1.08rem; }
.cal-parties { color: var(--ink); }
.cal-meta { font-size: .86rem; color: var(--ink-soft); }
.cal-tag { font-size: .8rem; }
.cal-tag.ok { background: var(--bg-raised); }
.cal-day h2 { font-size: .86rem; padding-bottom: .45rem; margin-bottom: .9rem; }
.disc-card {
  background: var(--surface); border: 0; border-radius: 12px;
  padding: 1.05rem 1.25rem; margin-bottom: .75rem;
}
.disc-anchor { font-size: .95rem; }
.disc-body { font-size: 1.02rem; color: var(--ink); }
.disc-foot { font-size: .86rem; color: var(--ink-soft); }

/* --- Titulos del texto integro: con aire. */
.ft-sec {
  font-size: .84rem; letter-spacing: .08em; margin: 3rem 0 1.3rem;
  padding-bottom: .55rem; border-bottom: 1px solid var(--line-strong);
}
.ft-p.ft-title { margin: 2rem 0 1rem; }
.ft-p.ft-title .ft-t { font-family: var(--font-serif); font-size: 1.12em; font-weight: 700; line-height: 1.4; }
.ft-sec + .ft-p.ft-title { margin-top: .4rem; }
.ft-p.s-header { margin-bottom: .55rem; }
.ft-p.s-dispositif { margin-top: 1.2rem; }

/* --- Modo lectura: la barra de navegacion. */
.rd-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  font-family: var(--font-sans); font-size: .88rem; color: var(--ink-soft); margin-top: .7rem;
}
.rd-nav-f { display: inline-flex; align-items: center; gap: .4rem; }
.rd-nav select, .rd-nav input {
  font-family: var(--font-sans); font-size: .88rem; color: var(--ink);
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: 8px;
  padding: .3rem .55rem;
}
.rd-nav select { max-width: 17rem; }
.rd-nav input { width: 5rem; }
.rd-nav-b {
  font-family: var(--font-sans); font-size: .86rem; font-weight: 600; cursor: pointer;
  color: var(--ink); background: var(--bg-raised); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: .32rem .7rem;
}
.rd-nav-b:hover { color: var(--burgundy); border-color: var(--burgundy); }
.rd-body .ft-p.ft-hit { background: var(--chip-bg); border-radius: 6px; }

/* Aviso breve al copiar una cita. */
.copy-toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  z-index: 200; max-width: min(40rem, calc(100vw - 2rem));
  background: var(--ink); color: var(--bg); font-family: var(--font-sans); font-size: .9rem;
  padding: .6rem 1rem; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.2);
  opacity: 0; transition: opacity .2s ease-out; pointer-events: none;
}
.copy-toast.show { opacity: 1; }

/* Las lineas del encabezamiento (tribunal, fecha) no son titulos de seccion. */
.ft-p.ft-title.s-header { margin: .35rem 0 .5rem; }
.ft-p.ft-title.s-header .ft-t { font-size: 1em; font-weight: 600; }