/* Doctrina IVA — sistema visual.
   La disposición que cualquier profesional espera de una base de datos jurídica, con la
   factura del mejor software actual: rejilla de 4 px, filetes de 1 px en vez de sombras,
   un solo azul funcional, cifras tabulares en todo número y estados de verdad.
   Dos voces tipográficas: la pila del sistema para la interfaz (identificadores incluidos)
   y Literata, una única fuente web, para el texto de la doctrina. */
:root {
  /* Los colores, las familias, los radios y el tiempo están en tokens.css, que comparten
     esta página, la de imprimir y la de artículo. Aquí solo lo que es del buscador. */
  --cab: 52px;
  --filtros: 44px;
  --tam: 18px;
  /* Lo que el usuario ajusta a mano: el ancho de la columna de texto (menú "Aa") y el de
     la lista (arrastrando el borde). app.js los pone desde las preferencias. */
  --ancho: 900px;
  --lista: 440px;
  --sombra-sm: 0 1px 2px rgb(16 24 40 / .06), 0 2px 6px -2px rgb(16 24 40 / .08);
  --sombra: 0 1px 2px rgb(16 24 40 / .08), 0 6px 12px -4px rgb(16 24 40 / .12);
  --sombra-cajon: 0 0 0 1px rgb(16 24 40 / .04), -24px 0 48px -12px rgb(16 24 40 / .22);
}
/* Tema. Por defecto sigue al sistema; en el menú "Aa" (y con el botón de la cabecera) se
   puede fijar claro u oscuro: data-tema="claro" | "oscuro" en <html>. Los valores oscuros
   van dos veces porque CSS no deja juntar una media query y un selector en una sola regla. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --papel: #0e1116; --hoja: #151a21; --tinta: #e6eaef; --tinta-2: #a7b0bc; --tinta-3: #8a94a1;
    --regla: #262d37; --regla-2: #1d232b; --sel: #1b2129;
    --acento: #7f9cff; --acento-2: #a3b8ff; --acento-suave: #182136; --sobre-acento: #0e1116;
    --peligro: #ef8078;
    --marca-sel: #2b3b63; --marca-sel-tinta: #eaeef6;
    --busq: #4f4113; --busq-fondo: #2b2514; --busq-trazo: #c9a14a;
    --s-amarillo: #5f5213; --s-verde: #2c4a2f; --s-azul: #23405c; --s-rosa: #572b37;
    --sombra-sm: 0 1px 2px rgb(0 0 0 / .4), 0 2px 6px -2px rgb(0 0 0 / .45);
    --sombra: 0 1px 2px rgb(0 0 0 / .45), 0 6px 12px -4px rgb(0 0 0 / .5);
    --sombra-cajon: -24px 0 48px -12px rgb(0 0 0 / .7);
  }
}
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --papel: #0e1116; --hoja: #151a21; --tinta: #e6eaef; --tinta-2: #a7b0bc; --tinta-3: #8a94a1;
  --regla: #262d37; --regla-2: #1d232b; --sel: #1b2129;
  --acento: #7f9cff; --acento-2: #a3b8ff; --acento-suave: #182136; --sobre-acento: #0e1116;
  --peligro: #ef8078;
  --marca-sel: #2b3b63; --marca-sel-tinta: #eaeef6;
  --busq: #4f4113; --busq-fondo: #2b2514; --busq-trazo: #c9a14a;
  --s-amarillo: #5f5213; --s-verde: #2c4a2f; --s-azul: #23405c; --s-rosa: #572b37;
  --sombra-sm: 0 1px 2px rgb(0 0 0 / .4), 0 2px 6px -2px rgb(0 0 0 / .45);
  --sombra: 0 1px 2px rgb(0 0 0 / .45), 0 6px 12px -4px rgb(0 0 0 / .5);
  --sombra-cajon: -24px 0 48px -12px rgb(0 0 0 / .7);
}
/* La hoja de lectura es papel, no pantalla. El blanco puro con tinta casi negra (18:1) es
   el contraste máximo y cansa en lecturas largas; un blanco roto, apenas cálido, deja el
   texto en 17:1 y quita el deslumbramiento. Solo cambia dentro del lector: la interfaz
   sigue fría y blanca, que es lo que separa el documento de la herramienta. Se puede volver
   al blanco en el menú "Aa" (data-fondo="blanco"). En oscuro no aplica. */
@media (prefers-color-scheme: light) {
  :root:not([data-fondo="blanco"]):not([data-tema="oscuro"]) #lector {
    --hoja: #fbfaf7; --papel: #f3f1eb; --regla: #dcd8cf; --regla-2: #e8e5dd; --sel: #eeebe4;
  }
}
:root[data-tema="claro"]:not([data-fondo="blanco"]) #lector {
  --hoja: #fbfaf7; --papel: #f3f1eb; --regla: #dcd8cf; --regla-2: #e8e5dd; --sel: #eeebe4;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta);
  font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
input, select, textarea { font: inherit; color: inherit; caret-color: var(--acento); }
a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--acento-2); }

/* Las superficies que no dibujamos también son del sistema. */
::selection { background: var(--marca-sel); color: var(--marca-sel-tinta); }
* { scrollbar-width: thin; scrollbar-color: var(--regla) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--regla); border: 3px solid transparent; background-clip: content-box; border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); background-clip: content-box; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--r-sm); }
:where(button, a, [tabindex]):focus:not(:focus-visible) { outline: none; }

mark { color: inherit; border-radius: var(--r-xs); }
/* Coincidencias de búsqueda: trazo bajo la palabra, para no confundirlas con tus subrayados */
mark.busq { background: var(--busq-fondo); box-shadow: inset 0 -2px 0 var(--busq-trazo); border-radius: 0; }
mark.sub.busq-en { box-shadow: inset 0 -2px 0 var(--busq-trazo); }
mark.busq.actual, mark.busq-en.actual { outline: 2px solid var(--acento); outline-offset: 1px; }
.fuera-vista { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.icono { width: 16px; height: 16px; flex: none; }

.btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--regla);
  border-radius: var(--r); background: var(--hoja); color: var(--tinta-2); font-size: 13px; font-weight: 500;
  white-space: nowrap; transition: background var(--paso), border-color var(--paso), color var(--paso); }
.btn:hover { color: var(--tinta); border-color: var(--tinta-3); background: var(--sel); }
.btn.primario { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.btn.primario:hover { background: var(--acento-2); border-color: var(--acento-2); color: var(--sobre-acento); }
.btn.activo { color: var(--acento); border-color: var(--acento); background: var(--acento-suave); }
.btn-txt { color: var(--tinta-2); font-size: 13px; font-weight: 500; border-radius: var(--r-sm); }
.btn-txt:hover { color: var(--acento); }

/* ---------- Cabecera ---------- */
.barra { height: var(--cab); display: flex; align-items: center; gap: 20px; padding: 0 16px;
  background: var(--hoja); border-bottom: 1px solid var(--regla); position: sticky; top: 0; z-index: 20; }
.marca { display: flex; align-items: baseline; gap: 9px; text-decoration: none; color: var(--tinta); white-space: nowrap; }
.marca b { font: 600 16px/1 var(--serif); letter-spacing: -.01em; }
.marca span { font-size: 12px; color: var(--tinta-3); }
.buscador { flex: 1; max-width: 680px; position: relative; }
.buscador > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
#q { width: 100%; height: 32px; padding: 0 44px 0 34px; border: 1px solid var(--regla); border-radius: var(--r);
  background: var(--papel); outline: none; font-size: 13.5px; transition: border-color var(--paso), box-shadow var(--paso), background var(--paso); }
#q:hover { border-color: var(--tinta-3); }
#q:focus { border-color: var(--acento); background: var(--hoja); box-shadow: 0 0 0 3px var(--acento-suave); }
#q::placeholder { color: var(--tinta-3); }
.buscador kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font: 11px var(--mono);
  color: var(--tinta-3); border: 1px solid var(--regla); border-radius: var(--r-sm); padding: 1px 5px; }
#btnPanel { display: none; }
.sintaxis { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--hoja);
  border: 1px solid var(--regla); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--sombra);
  font-size: 13px; color: var(--tinta-2); z-index: 30; }
.sintaxis.abierta { display: block; }
.sintaxis dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.sintaxis dt { font-family: var(--mono); font-size: 12px; color: var(--tinta); }
.sintaxis dd { margin: 0; }

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: var(--lista) 1fr; height: calc(100dvh - var(--cab) - var(--filtros)); position: relative; }
/* Bordes que se arrastran. El lateral cambia el ancho de la lista; el superior no tiene
   alto intermedio que valga, así que pliega la cabecera entera (buscador y filtros) y deja
   una pestaña para recuperarla. Doble clic en el lateral vuelve al ancho de siempre. */
#divisor { position: absolute; top: 0; bottom: 0; left: calc(var(--lista) - 4px); width: 8px; z-index: 12; cursor: col-resize; }
#tirador { position: absolute; top: -4px; left: 0; right: 0; height: 8px; z-index: 19; cursor: row-resize; }
#divisor::after, #tirador::after { content: ""; position: absolute; background: var(--acento); opacity: 0; transition: opacity var(--paso); }
#divisor::after { top: 0; bottom: 0; left: 3px; width: 2px; }
#tirador::after { left: 0; right: 0; top: 3px; height: 2px; }
#divisor:hover::after, #tirador:hover::after, body.arrastrando-x #divisor::after, body.arrastrando-y #tirador::after { opacity: 1; }
body.arrastrando-x, body.arrastrando-y { user-select: none; -webkit-user-select: none; }
body.arrastrando-x, body.arrastrando-x * { cursor: col-resize !important; }
body.arrastrando-y, body.arrastrando-y * { cursor: row-resize !important; }
body.lectura #divisor { display: none; }
/* Cabecera plegada: toda la altura para leer. La pestaña del borde la devuelve. */
body.sin-cab { --cab: 0px; --filtros: 0px; }
body.sin-cab .barra, body.sin-cab .filtros { display: none; }
#mostrarCab { display: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 20;
  height: 16px; padding: 0 14px; align-items: center; background: var(--hoja); border: 1px solid var(--regla); border-top: 0;
  border-radius: 0 0 var(--r) var(--r); color: var(--tinta-3); box-shadow: var(--sombra-sm); }
#mostrarCab:hover { color: var(--acento); }
body.sin-cab #mostrarCab { display: inline-flex; }
body.sin-cab #tirador { top: 0; }
#resultados, #lector { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
#resultados { border-right: 1px solid var(--regla); background: var(--papel); }
#lector { background: var(--hoja); position: relative; }
/* Modo lectura: la lista se quita del todo (display, no visibility: nada queda a medio pintar) */
body.lectura .app { grid-template-columns: 1fr; }
body.lectura #resultados, body.lectura .filtros { display: none; }

/* ---------- Barra de filtros ---------- */
.filtros { height: var(--filtros); display: flex; align-items: center; gap: 6px; padding: 0 16px;
  background: var(--hoja); border-bottom: 1px solid var(--regla); position: sticky; top: var(--cab); z-index: 18; }
.filtro { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border: 1px solid var(--regla);
  border-radius: var(--r); font-size: 13px; font-weight: 500; color: var(--tinta-2); white-space: nowrap;
  transition: background var(--paso), border-color var(--paso), color var(--paso); }
.filtro:hover { border-color: var(--tinta-3); color: var(--tinta); background: var(--sel); }
.filtro[aria-expanded="true"] { border-color: var(--tinta-3); background: var(--sel); color: var(--tinta); }
.filtro.puesto { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }
.filtro .valor { font-weight: 600; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
.filtro .valor:empty { display: none; }
.filtro .caret { width: 9px; height: 6px; opacity: .55; }
.filtro .cuenta { font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.filtro.puesto .cuenta { color: inherit; }
.filtro .cuenta:empty { display: none; }
.filtro[hidden] { display: none; }
.activos { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
.filtros #orden { height: 28px; border: 1px solid transparent; border-radius: var(--r); background: none;
  color: var(--tinta-2); font-size: 13px; font-weight: 500; cursor: pointer; margin-left: auto; padding: 0 4px; }
.filtros #orden:hover { border-color: var(--regla); background: var(--sel); }
.barra .ayuda-btn { margin-left: auto; }
/* Los textos legales: enlace fijo en la cabecera y al pie de la lista (en móvil, solo al pie). */
a.btn-txt { text-decoration: none; padding: 4px 6px; }
a.btn-txt:hover { color: var(--tinta); background: var(--sel); }
.legal-enlace[hidden] { display: none; }
.legal-pie { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 18px 16px 28px; font-size: 12px; }
.legal-pie a { color: var(--tinta-3); text-decoration: none; }
.legal-pie a:hover { color: var(--acento); text-decoration: underline; }
.barra .tema-btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r); color: var(--tinta-2);
  transition: background var(--paso), color var(--paso); }
.barra .tema-btn:hover { background: var(--sel); color: var(--tinta); }
.barra .tema-btn svg { width: 16px; height: 16px; }
.limpiar { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: var(--r);
  border: 1px solid transparent; background: none; color: var(--tinta-2); font-size: 12.5px; font-weight: 500;
  white-space: nowrap; transition: background var(--paso), color var(--paso), border-color var(--paso); }
.limpiar:hover { background: var(--sel); border-color: var(--regla); color: var(--tinta); }
.limpiar .icono { width: 13px; height: 13px; }

.desplegable { position: fixed; z-index: 30; width: 340px; max-height: min(70vh, 640px); overflow-y: auto;
  background: var(--hoja); border: 1px solid var(--regla); border-radius: var(--r-lg); box-shadow: var(--sombra); padding: 12px; }
.desplegable.ancho { width: 560px; }   /* ancho para leer el arranque de cada apartado */
.desplegable[hidden] { display: none; }

/* ---------- Indice de la normativa ---------- */
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 2px;
  background: var(--papel); border: 1px solid var(--regla); border-radius: var(--r); padding: 2px; }
.seg button { padding: 6px 4px 5px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--tinta-2);
  border-radius: var(--r-sm); line-height: 1.2; transition: background var(--paso), color var(--paso); }
.seg button:hover { background: var(--sel); color: var(--tinta); }
.seg button small { display: block; font: 11px var(--mono); color: var(--tinta-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.seg button[aria-selected=true] { background: var(--hoja); color: var(--tinta); font-weight: 600; box-shadow: var(--sombra-sm); }
.seg button[aria-selected=true] small { color: var(--acento); }
.p-tit { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 8px; }
.norma-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 14px 0 8px; }
.norma-cab div { font: 600 14px/1.3 var(--sans); }
.norma-cab a { font-size: 12px; white-space: nowrap; }
.toda { display: flex; justify-content: space-between; width: 100%; padding: 6px 8px; border-radius: var(--r-sm);
  font-weight: 500; color: var(--tinta-2); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.toda:hover { background: var(--sel); color: var(--tinta); }
.toda.activo { background: var(--acento-suave); color: var(--acento); }
.campo { width: 100%; height: 30px; padding: 0 9px; border: 1px solid var(--regla); border-radius: var(--r);
  background: var(--papel); outline: none; font-size: 13px; transition: border-color var(--paso), box-shadow var(--paso); }
.campo:hover { border-color: var(--tinta-3); }
.campo:focus { border-color: var(--acento); background: var(--hoja); box-shadow: 0 0 0 3px var(--acento-suave); }
#filtroIndice { margin-bottom: 8px; }
.arbol { margin: 0 -6px; }
.g-cab { display: flex; align-items: flex-start; gap: 6px; width: 100%; padding: 5px 8px; border-radius: var(--r-sm); text-align: left; }
.g-cab:hover { background: var(--sel); }
.g-cab svg { flex: none; margin-top: 4px; color: var(--tinta-3); transition: transform var(--paso); }
.g[data-abierto="1"] > .g-cab svg { transform: rotate(90deg); }
.g-rot { font-weight: 600; font-size: 12.5px; }
.g-nom { color: var(--tinta-2); font-size: 12.5px; }
.g-hijos { display: none; padding-left: 14px; }
.g[data-abierto="1"] > .g-hijos { display: block; }
.g-todo { display: block; margin: 0 0 2px 8px; padding: 2px 8px; font-size: 12px; color: var(--tinta-3); border-radius: var(--r-sm); }
.g-todo:hover { color: var(--acento); background: var(--sel); }
.art { display: grid; grid-template-columns: 4.6em 1fr auto; gap: 6px; width: 100%; padding: 4px 8px;
  border-radius: var(--r-sm); text-align: left; align-items: baseline; }
.art:hover { background: var(--sel); }
.art-n { font: 600 12px var(--mono); color: var(--tinta); font-variant-numeric: tabular-nums; }
.art-nom { font-size: 12.5px; color: var(--tinta-2); }
.art-c { font: 11.5px var(--mono); color: var(--tinta-3); min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.art.cero { opacity: .42; }
.art.activo { background: var(--acento-suave); }
.art.activo .art-n, .art.activo .art-c { color: var(--acento); }
.art.activo .art-nom { color: var(--tinta); }
.art mark { background: var(--busq); }
/* Apartados de un artículo: la flecha a la derecha de la fila y la lista sangrada por nivel. */
.art-fila { display: grid; grid-template-columns: 1fr auto; align-items: start; }
.art-fila > .aps { grid-column: 1 / -1; }
.art-ap { width: 24px; height: 24px; margin-top: 1px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--tinta-3); }
.art-ap:hover { background: var(--sel); color: var(--tinta); }
.art-ap svg { transition: transform var(--paso); }
.art-fila.abierta > .art-ap svg { transform: rotate(180deg); }
.aps { margin: 0 0 6px 2.2em; padding-left: 8px; border-left: 1px solid var(--regla); }
.ap { display: grid; grid-template-columns: 3.4em 1fr auto; gap: 6px; width: 100%; align-items: baseline;
  padding: 3px 8px 3px calc(8px + var(--nivel, 0) * 14px); border-radius: var(--r-sm); text-align: left; }
.ap:hover { background: var(--sel); }
.ap-r { font: 600 11.5px var(--mono); color: var(--tinta); white-space: nowrap; }
.ap-t { font-size: 12px; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap.activo { background: var(--acento-suave); }
.ap.activo .ap-r, .ap.activo .art-c { color: var(--acento); }

/* ---------- Tipo, anos y carpetas ---------- */
.opciones { display: grid; gap: 1px; }
.opcion { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 8px;
  border-radius: var(--r-sm); text-align: left; transition: background var(--paso); }
.opcion:hover { background: var(--sel); }
.opcion.activo { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.opcion > span:last-child { font: 12px var(--mono); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.opcion.activo > span:last-child { color: var(--acento); }
.histo { display: flex; align-items: flex-end; gap: 2px; height: 68px; }
.histo button { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; border-radius: var(--r-xs); }
.histo button i { display: block; width: 100%; background: var(--regla); border-radius: var(--r-xs) var(--r-xs) 0 0; min-height: 2px;
  transition: background var(--paso); }
.histo button:hover i { background: var(--tinta-3); }
.histo button.dentro i { background: var(--acento); }
.histo-ejes { display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--tinta-3);
  margin-top: 5px; font-variant-numeric: tabular-nums; }
.rango { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--tinta-3); }
.rango input { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.rango-pista { margin: 8px 0 0; font-size: 12px; color: var(--tinta-3); }
.carpeta-nueva { display: flex; gap: 6px; margin-top: 10px; }
.carpeta-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; padding: 7px 8px;
  border-radius: var(--r); text-align: left; }
.carpeta-item:hover { background: var(--sel); }
.carpeta-item.activo { background: var(--acento-suave); }
.carpeta-item b { font: 600 13.5px/1.35 var(--sans); }
.carpeta-item.activo b { color: var(--acento); }
.carpeta-item span { font: 12px var(--mono); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.carpeta-item small { grid-column: 1 / -1; color: var(--tinta-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ayuda-vacia { color: var(--tinta-3); font-size: 13px; line-height: 1.55; }

/* ---------- Resultados ---------- */
.r-cab { position: sticky; top: 0; z-index: 5; background: var(--papel); padding: 10px 16px 9px; border-bottom: 1px solid var(--regla); }
#recuento { font-size: 12.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
#recuento b { color: var(--tinta); font-weight: 600; }
.repes { color: var(--tinta-3); font-size: 12.5px; }
.res-gem { font: 11.5px var(--mono); color: var(--tinta-3); }
.carpeta-cab { margin-bottom: 10px; }
.carpeta-cab h2 { font: 600 17px/1.3 var(--serif); letter-spacing: -.01em; margin: 0 0 2px; }
.carpeta-cab p { margin: 0 0 8px; color: var(--tinta-2); font-size: 13px; }
.carpeta-cab .acciones { display: flex; gap: 14px; }
.pill { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 4px 2px 8px;
  border-radius: var(--r-sm); background: var(--acento-suave); border: 1px solid var(--acento); color: var(--acento); font-size: 12.5px; font-weight: 500; }
.pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill button { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: var(--r-xs); color: inherit; font-size: 14px; line-height: 1; }
.pill button:hover { background: var(--acento); color: var(--sobre-acento); }
#lista { list-style: none; margin: 0; padding: 0; }
.res { padding: 10px 16px 11px; border-bottom: 1px solid var(--regla-2); cursor: pointer; position: relative;
  transition: background var(--paso); }
.res:hover { background: var(--sel); }
.res.activo { background: var(--acento-suave); box-shadow: inset 2px 0 0 var(--acento); }
.res-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.res-num { font: 600 12.5px var(--mono); color: var(--tinta); letter-spacing: -.01em; }
.res-tipo { font-size: 11.5px; }
.res-tipo.v { color: var(--tinta); font-weight: 600; }
.res-fuente { font: 600 10px var(--sans); letter-spacing: .05em; border: 1px solid var(--regla);
  border-radius: var(--r-xs); padding: 1px 4px; color: var(--tinta-2); }
.res-marcas { margin-left: auto; display: inline-flex; gap: 7px; align-items: center; }
.res-marcas svg { width: 13px; height: 13px; color: var(--tinta-3); }
.res-marcas .guardada { color: var(--acento); }
.res-cit { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.res-txt { margin: 5px 0 0; font: 13.5px/1.45 var(--sans); color: var(--tinta-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.res.activo .res-txt { color: var(--tinta); }
.res-txt mark { background: var(--busq); }
.res-arts { margin-top: 6px; font: 11.5px var(--mono); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.mas { display: block; width: calc(100% - 32px); margin: 14px 16px 28px; padding: 8px; border: 1px solid var(--regla);
  border-radius: var(--r); color: var(--tinta-2); font-size: 13px; font-weight: 500; background: var(--hoja);
  transition: background var(--paso), color var(--paso), border-color var(--paso); }
.mas:hover { background: var(--sel); color: var(--tinta); border-color: var(--tinta-3); }
.vacio { padding: 44px 28px; color: var(--tinta-3); text-align: center; font-size: 13px; line-height: 1.55; }
.vacio b { display: block; font: 600 15px var(--sans); color: var(--tinta); margin-bottom: 6px; }
.cargando { opacity: .55; transition: opacity .2s; }

/* ---------- Lector ---------- */
/* 6. La barra se alinea con la medida del texto, no con el panel: las herramientas quedan
   sobre la columna sobre la que actúan. */
.doc-barra { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: 4px;
  padding: 7px max(16px, calc((100% - var(--ancho)) / 2 + 36px));
  background: var(--hoja); border-bottom: 1px solid transparent; font-size: 13px; color: var(--tinta-2);
  min-height: 46px; transition: border-color var(--paso); }
.doc-barra.plegada { border-bottom-color: var(--regla); }
.doc-barra .num { font: 600 13.5px var(--serif); color: var(--tinta); opacity: 0; transition: opacity var(--paso); margin-left: 6px; }
.doc-barra.plegada .num { opacity: 1; }
.doc-barra .sep { flex: 1; }
.herr { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border-radius: var(--r);
  color: var(--tinta-2); white-space: nowrap; text-decoration: none; font-size: 13px; font-weight: 500;
  transition: background var(--paso), color var(--paso); }
.herr:hover { background: var(--sel); color: var(--tinta); }
.herr.activo { color: var(--acento); background: var(--acento-suave); }
/* Guardar es la acción primaria del lector: el único botón relleno de la pantalla. */
#bGuardar { background: var(--acento); color: var(--sobre-acento); font-weight: 600; }
#bGuardar:hover { background: var(--acento-2); color: var(--sobre-acento); }
#bGuardar.activo { background: var(--acento-suave); color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.herr.activo svg { fill: currentColor; }
.nav-marcas { display: inline-flex; align-items: center; gap: 2px; font: 12px var(--mono); color: var(--tinta-3);
  margin-right: 6px; font-variant-numeric: tabular-nums; }
.nav-marcas button { width: 26px; height: 26px; border-radius: var(--r-sm); color: var(--tinta-2); }
.nav-marcas button:hover { background: var(--sel); color: var(--tinta); }
#cerrarLector { display: none; }
.menu { position: absolute; z-index: 40; min-width: 224px; background: var(--hoja); border: 1px solid var(--regla);
  border-radius: var(--r-lg); box-shadow: var(--sombra); padding: 5px; font-size: 13.5px; }
.menu[hidden] { display: none; }
.menu .m-tit { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); padding: 8px 9px 5px; }
.menu .m-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border-radius: var(--r-sm);
  text-align: left; color: var(--tinta); text-decoration: none; transition: background var(--paso); }
.menu .m-item:hover { background: var(--sel); }
.menu .m-item input { margin: 0; accent-color: var(--acento); }
.menu .m-sep { height: 1px; background: var(--regla-2); margin: 5px 4px; }
.menu .m-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 9px; }
.menu .m-fila .ctrl { display: inline-flex; border: 1px solid var(--regla); border-radius: var(--r); overflow: hidden; }
.menu .m-fila .ctrl button { width: 32px; height: 26px; }
.menu .m-fila .ctrl button:hover { background: var(--sel); }
.menu .m-fila .ctrl.opciones button { width: auto; padding: 0 10px; font-size: 12.5px; color: var(--tinta-2); }
.menu .m-fila .ctrl.opciones button + button { border-left: 1px solid var(--regla); }
.menu .m-fila .ctrl.opciones button[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.menu .m-fila .ctrl span { min-width: 42px; text-align: center; font: 12px/26px var(--mono);
  font-variant-numeric: tabular-nums; border-left: 1px solid var(--regla); border-right: 1px solid var(--regla); }
.menu .campo { margin: 4px 0 2px; }

/* El ancho de la columna lo pone el usuario (--ancho, 900 px de partida; menú "Aa"). Con
   700 px fijos, en una pantalla de 1.900 px quedaban 440 px vacíos a cada lado del texto. */
.doc { max-width: var(--ancho); margin: 0 auto; padding: 32px 44px 120px; }
body.lectura .doc { max-width: calc(var(--ancho) + 60px); }
/* El identificador manda: encabezado primero, metadatos debajo. */
.doc h1 { font: 600 32px/1.12 var(--serif); letter-spacing: -.015em; font-variant-numeric: tabular-nums; margin: 0 0 8px; }
.doc-sobre { font-size: 12.5px; color: var(--tinta-2); margin: 0 0 4px; }
.doc-sobre .v { color: var(--tinta); font-weight: 600; }
.doc-fecha { color: var(--tinta-3); margin: 0 0 20px; font-size: 13px; font-variant-numeric: tabular-nums; }
.chips-normas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; }
.chip-norma { display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%; padding: 4px 9px;
  border: 1px solid var(--regla); border-radius: var(--r); background: var(--hoja); text-align: left;
  transition: border-color var(--paso), background var(--paso); }
.chip-norma:hover { border-color: var(--acento); background: var(--acento-suave); }
.chip-norma:hover b { color: var(--acento); }
.chip-norma b { font: 600 12px var(--mono); white-space: nowrap; color: var(--tinta); font-variant-numeric: tabular-nums; }
.chip-norma em { font: 11.5px var(--mono); font-style: normal; color: var(--tinta-2); white-space: nowrap; }
.chip-norma span { font-size: 12.5px; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.chip-concepto { font-size: 12.5px; background: var(--papel); border: 1px solid var(--regla); border-radius: var(--r);
  padding: 4px 9px; color: var(--tinta-2); }
.resumen { margin: 0 0 28px; padding: 14px 18px; background: var(--papel); border: 1px solid var(--regla);
  border-radius: var(--r); font-size: 14px; }
.resumen summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.resumen summary::-webkit-details-marker { display: none; }
.resumen summary h2 { font: 650 16px/1.35 var(--sans); margin: 0; }
.resumen summary span { font-size: 12px; color: var(--tinta-3); white-space: nowrap; }
.resumen p { margin: 10px 0 0; }
.resumen .nota-ia { font-size: 12px; color: var(--tinta-3); }
.mis-notas { margin: 0 0 28px; }
.mis-notas textarea { width: 100%; min-height: 42px; resize: vertical; border: 1px solid var(--regla); border-radius: var(--r);
  background: var(--papel); padding: 9px 12px; font: 14px/1.5 var(--sans); outline: none;
  transition: border-color var(--paso), box-shadow var(--paso), background var(--paso); }
.mis-notas textarea::placeholder { color: var(--tinta-3); }
.mis-notas textarea:focus { border-color: var(--acento); background: var(--hoja); box-shadow: 0 0 0 3px var(--acento-suave); }
.mis-notas .estado-guardado { font-size: 11.5px; color: var(--tinta-3); height: 16px; margin-top: 3px; }
.interes { margin: 0 0 28px; padding: 12px 16px; border: 1px solid var(--acento); background: var(--acento-suave);
  border-radius: var(--r); }
.doc h3 { font: 600 11.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3);
  margin: 34px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--regla-2); }
.doc h3:first-of-type { margin-top: 8px; }
.texto p { font: var(--tam)/1.68 var(--serif); margin: 0 0 1em; text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
.texto.contestacion p:first-child::first-letter { font-weight: 600; }
/* El formato del original (formatoSeccion en comun.js): los tribunales publican títulos
   centrados, citas sangradas con filete, negritas, cursivas y subrayados. Se respeta tal
   cual; en la DGT, que no publica formato, solo se sangran las citas entre comillas. */
.texto b { font-weight: 600; }
.texto u { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.texto p.centro { text-align: center; hyphens: none; -webkit-hyphens: none; }
.texto p.dcha { text-align: right; }
.texto p.tit { font-weight: 600; margin-top: 1.7em; hyphens: none; -webkit-hyphens: none; }
.texto p.neg { font-weight: 600; }
.texto p.cur { font-style: italic; }
.texto p.cita, .texto p.cita2 { margin-left: 1.5em; padding-left: 1em; border-left: 1px solid var(--regla); }
.texto p.cita2 { margin-left: 3.2em; }
.texto a { color: var(--acento); }
mark.sub { padding: 1px 0; border-radius: var(--r-xs); cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.sub.amarillo { background: var(--s-amarillo); }
mark.sub.verde { background: var(--s-verde); }
mark.sub.azul { background: var(--s-azul); }
mark.sub.rosa { background: var(--s-rosa); }
mark.sub.con-nota::after { content: attr(data-n); font: 600 10px var(--sans); vertical-align: super; margin-left: 2px; color: var(--acento); }
mark.sub.foco { outline: 2px solid var(--acento); outline-offset: 1px; }
.relac { list-style: none; padding: 0; margin: 0; }
.relac li { padding: 7px 0; border-bottom: 1px solid var(--regla-2); display: grid; grid-template-columns: 6.5em 6em 1fr;
  gap: 10px; font-size: 13px; align-items: baseline; }
.relac li .n { font: 600 12.5px var(--mono); font-variant-numeric: tabular-nums; }
.relac li .f { color: var(--tinta-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.relac li .t { color: var(--tinta-2); }
.relac li.fuera { color: var(--tinta-3); }
.anotaciones { list-style: none; padding: 0; margin: 0; }
.anotaciones li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--regla-2); cursor: pointer; }
.anotaciones li:hover .cita { color: var(--tinta); }
.anotaciones .n { font: 600 12px var(--sans); color: var(--acento); }
/* El color del subrayado se enseña con su propia muestra, no con un filete grueso. */
.anotaciones .cita { font: italic 14px/1.5 var(--serif); color: var(--tinta-2); padding-left: 14px; position: relative; }
.anotaciones .cita::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px;
  border-radius: var(--r-xs); background: var(--s-amarillo); }
.anotaciones .cita.verde::before { background: var(--s-verde); }
.anotaciones .cita.azul::before { background: var(--s-azul); }
.anotaciones .cita.rosa::before { background: var(--s-rosa); }
.anotaciones .txt { margin-top: 5px; font-size: 13.5px; white-space: pre-wrap; }
.normativa-raw { font-size: 12.5px; color: var(--tinta-3); margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--regla-2); }
.bienvenida { max-width: 640px; margin: 0 auto; padding: 64px 40px; }
.bienvenida h2 { font: 600 26px/1.2 var(--serif); letter-spacing: -.012em; margin: 0 0 12px; }
.bienvenida p { font: 16px/1.65 var(--serif); color: var(--tinta-2); }
.novedades { margin-top: 36px; border-top: 1px solid var(--regla); padding-top: 18px; }
.novedades h3 { font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 8px; }
.novedades ol { list-style: none; margin: 0 0 10px; padding: 0; }
.novedades li + li { border-top: 1px solid var(--regla-2); }
.novedades li button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 0; cursor: pointer; color: var(--tinta); font: inherit; }
.novedades li button:hover .nv-txt { color: var(--acento); }
.novedades .nv-meta { display: block; font: 12.5px/1.4 var(--sans); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.novedades .nv-meta b { color: var(--tinta-2); font-weight: 600; }
.novedades .nv-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 15px/1.5 var(--serif); margin-top: 2px; }
.bienvenida ul { padding-left: 18px; color: var(--tinta-2); line-height: 1.85; font-size: 13.5px; }
.bienvenida code, kbd.t { font: 12px var(--mono); background: var(--papel); border: 1px solid var(--regla);
  padding: 1px 5px; border-radius: var(--r-sm); color: var(--tinta); }

/* Resolución íntegra de los tribunales: el marcador es un icono dibujado, no un glifo. */
.resolucion { margin-top: 30px; border-top: 1px solid var(--regla-2); padding-top: 12px; }
.resolucion summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; border-radius: var(--r-sm); }
.resolucion summary::-webkit-details-marker { display: none; }
.resolucion summary::before { content: ""; width: 12px; height: 12px; flex: none;
  background: currentColor; color: var(--tinta-3); transition: transform var(--paso);
  -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; }
.resolucion[open] summary::before { transform: rotate(90deg); }
.resolucion summary span { font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.resolucion > summary h3 { border: 0; padding: 0; margin: 0; }
:root { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Barra flotante de subrayado */
.flota { position: absolute; z-index: 45; display: flex; align-items: center; gap: 4px; padding: 4px;
  background: var(--tinta); color: var(--hoja); border-radius: var(--r-lg);
  box-shadow: 0 2px 4px rgb(16 24 40 / .2), 0 8px 16px -6px rgb(16 24 40 / .3); }
.flota[hidden] { display: none; }
.flota .color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; }
.flota .color:hover { transform: scale(1.12); }
.flota .color { transition: transform var(--paso); }
.flota .color.sel { border-color: var(--hoja); }
.flota .color.amarillo { background: var(--p-amarillo); } .flota .color.verde { background: var(--p-verde); }
.flota .color.azul { background: var(--p-azul); } .flota .color.rosa { background: var(--p-rosa); }
.flota .f-btn { height: 26px; padding: 0 9px; border-radius: var(--r-sm); color: var(--hoja); font-size: 12.5px; font-weight: 500; }
.flota .f-btn:hover { background: rgb(255 255 255 / .16); }
.flota .f-sep { width: 1px; height: 18px; background: rgb(255 255 255 / .25); margin: 0 2px; }
.editor-nota { position: absolute; z-index: 46; width: 320px; background: var(--hoja); border: 1px solid var(--regla);
  border-radius: var(--r-lg); box-shadow: var(--sombra); padding: 12px; }
.editor-nota[hidden] { display: none; }
.editor-nota .cita { font: italic 13.5px/1.45 var(--serif); color: var(--tinta-2); max-height: 4.2em; overflow: hidden; margin-bottom: 8px; }
.editor-nota textarea { width: 100%; min-height: 90px; resize: vertical; border: 1px solid var(--regla);
  border-radius: var(--r); background: var(--papel); padding: 8px 10px; outline: none; font: 13.5px/1.5 var(--sans);
  transition: border-color var(--paso), box-shadow var(--paso); }
.editor-nota textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); background: var(--hoja); }
.editor-nota .pie { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.editor-nota .colores { display: flex; gap: 6px; }
.editor-nota .color { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; }
.editor-nota .color.sel { border-color: var(--tinta); }
.editor-nota .color.amarillo { background: var(--p-amarillo); } .editor-nota .color.verde { background: var(--p-verde); }
.editor-nota .color.azul { background: var(--p-azul); } .editor-nota .color.rosa { background: var(--p-rosa); }

/* Panel del artículo del BOE */
.velo { position: fixed; inset: 0; background: rgb(12 16 22 / .38); z-index: 60; }
.velo[hidden] { display: none; }
.cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100%); z-index: 61; background: var(--hoja);
  box-shadow: var(--sombra-cajon); display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
.cajon.abierto { transform: none; }
.cajon-cab { padding: 16px 24px 14px; border-bottom: 1px solid var(--regla-2); }
.cajon-cab .fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cajon-cab h2 { font: 600 21px/1.25 var(--serif); letter-spacing: -.012em; margin: 0 0 4px; }
.cajon-cab .sobre { font-size: 12.5px; color: var(--tinta-3); display: block; margin-bottom: 12px; }
.cajon-cab .herramientas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cajon-cab select { height: 30px; border: 1px solid var(--regla); border-radius: var(--r); background: var(--papel);
  padding: 0 8px; max-width: 100%; font-size: 13px; }
.aviso-version { margin-top: 10px; font-size: 12.5px; color: var(--tinta-2); }
.aviso-version.distinta { color: var(--peligro); font-weight: 500; }
.cajon-cuerpo { overflow-y: auto; padding: 20px 24px 60px; }
.boe-p { font: 16.5px/1.64 var(--serif); margin: 0 0 .8em; text-align: justify; hyphens: auto; }
.boe-sangria { padding-left: 1.4em; }
.boe-nota { font-size: 12.5px; color: var(--tinta-3); border-left: 1px solid var(--regla); padding-left: 10px; margin: 0 0 1em; }

/* El único momento con movimiento es el panel del artículo, que entra deslizando desde la
   derecha. Nada de animar el documento al pintarlo: se repinta en cada subrayado. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  :root { --lista: 400px; }
}
@media (max-width: 820px) {
  :root { --cab: 96px; --tam: 17px; }
  .barra { flex-wrap: wrap; align-content: center; gap: 8px 12px; padding: 8px 14px; }
  .buscador { order: 3; flex: 1 0 100%; max-width: none; }
  .marca span, .buscador kbd { display: none; }
  .barra .ayuda-btn { margin-left: auto; font-size: 12.5px; }
  .barra .legal-cab { display: none; }
  /* La barra de filtros se desplaza a lo ancho en lugar de apilarse */
  .filtros { overflow-x: auto; scrollbar-width: none; padding: 0 12px; }
  .filtros::-webkit-scrollbar { display: none; }
  .activos { flex: none; }
  .filtros #orden { margin-left: 4px; }
  .desplegable, .desplegable.ancho { width: calc(100vw - 20px); max-height: 66vh; }
  .app, body.lectura .app { grid-template-columns: 1fr; }
  #divisor, #tirador, #mostrarCab { display: none !important; }
  body.lectura #resultados { display: block; }
  #resultados { border-right: 0; }
  #lector { position: fixed; inset: calc(var(--cab) + var(--filtros)) 0 0 0; z-index: 16; transform: translateX(100%);
    transition: transform 200ms cubic-bezier(.22, 1, .36, 1); }
  body.lector-abierto #lector { transform: none; }
  #cerrarLector { display: inline-flex; }
  .doc-barra { padding: 6px 10px; }
  .herr .txt, .nav-marcas .pos { display: none; }
  .doc { padding: 20px 18px 80px; }
  .doc h1 { font-size: 26px; }
  .texto p { text-align: left; }
  .texto p.cita, .texto p.cita2 { margin-left: .4em; padding-left: .8em; }
  .texto p.cita2 { margin-left: 1.4em; }
  .relac li { grid-template-columns: 6.5em 1fr; }
  .relac li .f { display: none; }
  .editor-nota { width: calc(100% - 24px); }
}