/* ===========================================================================
   ws.css — el puesto de trabajo de VATcodex (29-09-2026).

   La disposicion que un profesional espera de una base de datos juridica, con
   la factura de Doctrina IVA: barra con la busqueda, fila de filtros
   desplegables, lista a la izquierda y el asunto a la derecha, cada columna
   con su propio scroll. Rejilla de 4 px, filetes de 1 px, un solo acento
   (granate) para lo activo y cifras tabulares en todo numero.
   Todo lleva prefijo w- para no chocar con app.css, que sigue cargado por los
   componentes que se reutilizan (texto integro, lector, fichas de referencias).
   =========================================================================== */
:root { --cab: 52px; --filtros: 44px; --tam: 18px;
  /* Lo que cada cual ajusta a mano (como en Doctrina IVA): el ancho de la
     columna de texto, en «Aa», y el de la lista, arrastrando su borde. Los pone
     assets/tema.js desde las preferencias: --ancho y --lista-u, que si existe
     manda sobre el --lista de fábrica. */
  --ancho: 900px; --lista: 460px; }
/* El índice del compendio lleva tres columnas de cifras: algo más de sitio. */
body.w-comp { --lista: 500px; }

body.ws { background: var(--papel); color: var(--tinta); font: 14.5px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; }
/* En el puesto de trabajo desplazan la lista y el lector, no la ventana: el
   hueco reservado de app.css (scrollbar-gutter: stable) era una franja vacía de
   15 px a la derecha. La página del asunto sí desplaza la ventana y lo conserva. */
html:has(body.ws:not(.w-pagina)) { scrollbar-gutter: auto; }
/* Reinicio con :where(), especificidad (0,0,1). Con `body.ws button` (0,1,2)
   ganaba a `.w-herr` y `.w-filtro` y les quitaba el relleno: los botones de la
   barra del lector medían 16 px de ancho y las flechas de los filtros iban
   pegadas al texto. */
:where(body.ws) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(body.ws) input, :where(body.ws) select, :where(body.ws) textarea { font: inherit; color: inherit; caret-color: var(--acento); }
/* Los enlaces, también con :where(): con `body.ws a:hover` (0,2,2) el color de
   enlace ganaba al de los componentes y, en Soporte, el botón de donar quedaba
   con texto granate oscuro sobre fondo granate al pasar el ratón. */
:where(body.ws) a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(body.ws) a:hover { color: var(--acento-2); }
body.ws ::selection { background: var(--marca-sel); color: var(--marca-sel-tinta); }
body.ws * { scrollbar-width: thin; scrollbar-color: var(--regla) transparent; }
body.ws :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--r-sm); }
body.ws :where(button, a, [tabindex]):focus:not(:focus-visible) { outline: none; }
.w-ico { width: 16px; height: 16px; flex: none; }
.w-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num, .w-cifra { font-variant-numeric: tabular-nums; }

/* ---------- Barra superior ---------- */
.w-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; }
.w-marca { display: flex; align-items: baseline; gap: 9px; text-decoration: none; color: var(--tinta) !important; white-space: nowrap; }
.w-marca b { font: 700 17px/1 var(--serif); letter-spacing: -.01em; }
.w-marca b i { font-style: normal; color: var(--acento); }
.w-marca span { font-size: 12.5px; color: var(--tinta-3); }
.w-buscador { flex: 1; max-width: 700px; position: relative; }
.w-buscador > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
#q.w-q { width: 100%; height: 34px; padding: 0 64px 0 34px; border: 1px solid var(--regla); border-radius: var(--r);
  background: var(--papel); outline: none; font-size: 14.5px; transition: border-color var(--paso), box-shadow var(--paso), background var(--paso); }
#q.w-q:hover { border-color: var(--tinta-3); }
#q.w-q:focus { border-color: var(--acento); background: var(--hoja); box-shadow: 0 0 0 3px var(--acento-suave); }
#q.w-q::placeholder { color: var(--tinta-3); }
.w-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; }
.w-buscador .w-borrar { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px;
  display: none; place-items: center; border-radius: var(--r-sm); color: var(--tinta-3); }
.w-buscador .w-borrar:hover { background: var(--sel); color: var(--tinta); }
.w-buscador .w-borrar.show { display: grid; }
.w-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.w-nav a, .w-nav .w-nav-b { display: inline-flex; align-items: center; height: 30px; padding: 0 9px; border-radius: var(--r);
  color: var(--tinta-2) !important; text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.w-nav a:hover, .w-nav .w-nav-b:hover { background: var(--sel); color: var(--tinta) !important; }
.w-nav a.active { color: var(--acento) !important; }
.w-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: 13.5px; color: var(--tinta-2); z-index: 30; }
.w-sintaxis.abierta { display: block; }
.w-sintaxis dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.w-sintaxis dt { font: 12px var(--mono); color: var(--tinta); }
.w-sintaxis dd { margin: 0; }

/* ---------- Barra de filtros ---------- */
.w-filtros { height: var(--filtros); display: flex; align-items: center; gap: 6px; padding: 8px 16px;
  background: var(--hoja); border-bottom: 1px solid var(--regla); position: sticky; top: var(--cab); z-index: 18; }
.w-filtro { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border: 1px solid var(--regla) !important;
  border-radius: var(--r); font-size: 13.5px; font-weight: 500; color: var(--tinta-2) !important; white-space: nowrap;
  transition: background var(--paso), border-color var(--paso), color var(--paso); }
.w-filtro:hover { border-color: var(--tinta-3) !important; color: var(--tinta) !important; background: var(--sel) !important; }
.w-filtro[aria-expanded="true"] { border-color: var(--tinta-3) !important; background: var(--sel) !important; color: var(--tinta) !important; }
.w-filtro.puesto { border-color: var(--acento) !important; color: var(--acento) !important; background: var(--acento-suave) !important; }
.w-filtro .valor { font-weight: 600; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }
.w-filtro .valor:empty { display: none; }
.w-filtro .caret { width: 9px; height: 6px; opacity: .55; }
.w-filtro .cuenta { font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.w-filtro.puesto .cuenta { color: inherit; }
.w-filtro .cuenta:empty { display: none; }
.w-activos { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
.w-activos .active-chip, .w-pill { display: inline-flex; align-items: center; gap: 4px; max-width: 34ch; height: 24px; padding: 0 4px 0 8px;
  border-radius: var(--r-sm); background: var(--acento-suave) !important; border: 1px solid var(--acento) !important; color: var(--acento) !important;
  font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-activos .active-chip:hover { background: var(--acento) !important; color: var(--sobre-acento) !important; }
.w-limpiar { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: var(--r);
  color: var(--tinta-2) !important; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.w-limpiar:hover { background: var(--sel) !important; color: var(--tinta) !important; }
.w-limpiar[hidden] { display: none; }
.w-orden { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
/* A la medida de lo elegido, no de la opción más larga («Case name & number»
   dejaba «Everything» con 150 px y un hueco). La flecha, dibujada: gris
   neutro que se lee en claro y en oscuro. */
.w-orden select { height: 28px; border: 1px solid transparent; border-radius: var(--r);
  -webkit-appearance: none; appearance: none; field-sizing: content; min-width: 0;
  background: no-repeat right 7px center / 9px 6px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%237a818c' stroke-width='1.5'/%3E%3C/svg%3E");
  color: var(--tinta-2); font-size: 13.5px; font-weight: 500; cursor: pointer; padding: 0 22px 0 8px; }
.w-orden select:hover { border-color: var(--regla); background-color: var(--sel); }

.w-desp { position: fixed; z-index: 30; width: 360px; max-height: min(72vh, 660px); overflow-y: auto;
  background: var(--hoja); border: 1px solid var(--regla); border-radius: var(--r-lg); box-shadow: var(--sombra); padding: 12px; }
.w-desp.ancho { width: 560px; }
.w-desp[hidden] { display: none; }
.w-p-tit { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 8px; }
.w-campo { width: 100%; height: 30px; padding: 0 9px; 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); }
.w-campo:hover { border-color: var(--tinta-3); }
.w-campo:focus { border-color: var(--acento); background: var(--hoja); box-shadow: 0 0 0 3px var(--acento-suave); }
.w-opciones { display: grid; gap: 1px; margin-top: 8px; }
.w-opcion { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; padding: 6px 8px;
  border-radius: var(--r-sm); text-align: left; transition: background var(--paso); }
.w-opcion:hover { background: var(--sel); }
.w-opcion.activo { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.w-opcion > span:last-child { font: 12px var(--mono); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.w-opcion.activo > span:last-child { color: var(--acento); }
.w-opcion.cero { opacity: .45; }
/* Indice de la norma: segmentado de normas y arbol Titulo > Capitulo > Articulo. */
.w-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; margin-bottom: 10px; }
.w-seg button { padding: 6px 4px 5px; text-align: center; font-size: 12px; font-weight: 500; color: var(--tinta-2);
  border-radius: var(--r-sm); line-height: 1.2; transition: background var(--paso), color var(--paso); }
.w-seg button:hover { background: var(--sel); color: var(--tinta); }
.w-seg button small { display: block; font: 11px var(--mono); color: var(--tinta-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.w-seg button[aria-selected=true] { background: var(--hoja); color: var(--tinta); font-weight: 600; box-shadow: var(--sombra-sm); }
.w-seg button[aria-selected=true] small { color: var(--acento); }
.w-norma-cab { font: 600 14px/1.3 var(--sans); margin: 4px 0 8px; }
/* Con el nombre completo de cada norma (nada de «13th Directive») cinco
   columnas no caben: rejilla de dos, nombre a la izquierda y recuento a la derecha. */
.w-seg.normas { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.w-seg.normas button { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 6px 9px; text-align: left; font-size: 12.5px; }
.w-seg.normas button small { display: inline; margin: 0; flex: none; }
.w-norma-nota { font-size: 12.5px; color: var(--tinta-3); margin: -4px 0 8px; }
.w-arbol { margin: 8px -6px 0; }
.w-g-cab { display: flex; align-items: flex-start; gap: 6px; width: 100%; padding: 5px 8px; border-radius: var(--r-sm); text-align: left; }
.w-g-cab:hover { background: var(--sel); }
.w-g-cab svg { flex: none; margin-top: 4px; color: var(--tinta-3); transition: transform var(--paso); }
.w-g[data-abierto="1"] > .w-g-cab svg { transform: rotate(90deg); }
.w-g-rot { font-weight: 600; font-size: 12.5px; }
.w-g-nom { color: var(--tinta-2); font-size: 12.5px; }
.w-g-hijos { display: none; padding-left: 14px; }
.w-g[data-abierto="1"] > .w-g-hijos { display: block; }
.w-g-todo { display: block; margin: 0 0 2px 8px; padding: 2px 8px; font-size: 12px; color: var(--tinta-3); border-radius: var(--r-sm); }
.w-g-todo:hover { color: var(--acento); background: var(--sel); }
.w-art { display: grid; grid-template-columns: 94px 1fr auto; gap: 6px; width: 100%; padding: 4px 8px;
  border-radius: var(--r-sm); text-align: left; align-items: baseline; }
.w-art:hover { background: var(--sel); }
.w-art-n { font: 600 12px var(--mono); color: var(--tinta); font-variant-numeric: tabular-nums; }
.w-art-nom { font-size: 12.5px; color: var(--tinta-2); }
.w-art-c { font: 11.5px var(--mono); color: var(--tinta-3); min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.w-art.cero { opacity: .42; }
.w-art.activo { background: var(--acento-suave); }
.w-art.activo .w-art-n, .w-art.activo .w-art-c { color: var(--acento); }
.w-art mark { background: var(--busq); }
/* Años */
.w-histo { display: flex; align-items: flex-end; gap: 2px; height: 68px; }
.w-histo button { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; border-radius: var(--r-xs); }
.w-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); }
.w-histo button:hover i { background: var(--tinta-3); }
.w-histo button.dentro i { background: var(--acento); }
.w-histo-ejes { display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--tinta-3); margin-top: 5px; }
.w-rango { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--tinta-3); }
.w-rango input { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.w-presets { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.w-presets button { height: 26px; padding: 0 9px; border: 1px solid var(--regla) !important; border-radius: var(--r); font-size: 12.5px; color: var(--tinta-2) !important; }
.w-presets button:hover { background: var(--sel) !important; color: var(--tinta) !important; }
.w-presets button.on { border-color: var(--acento) !important; color: var(--acento) !important; background: var(--acento-suave) !important; }
/* Carpetas */
.w-carpeta { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; padding: 7px 8px; border-radius: var(--r); text-align: left; }
.w-carpeta:hover { background: var(--sel); }
.w-carpeta.activo { background: var(--acento-suave); }
.w-carpeta b { font: 600 13.5px/1.35 var(--sans); }
.w-carpeta.activo b { color: var(--acento); }
.w-carpeta span { font: 12px var(--mono); color: var(--tinta-3); }
.w-carpeta-nueva { display: flex; gap: 6px; margin-top: 10px; }
.w-ayuda-vacia { color: var(--tinta-3); font-size: 13.5px; line-height: 1.55; margin: 0; }

/* ---------- Estructura ---------- */
.w-app { display: grid; grid-template-columns: var(--lista-u, var(--lista)) minmax(0, 1fr);
  height: calc(100dvh - var(--cab) - var(--filtros)); position: relative; }
#w-lista, #w-lector { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
#w-lista { border-right: 1px solid var(--regla); background: var(--papel); }
#w-lector { background: var(--hoja); position: relative; }
body.lectura .w-app { grid-template-columns: minmax(0, 1fr); }
body.lectura #w-lista, body.lectura .w-filtros { display: none; }
body.lectura .w-app { height: calc(100dvh - var(--cab)); }
/* Bordes que se arrastran (common.js). El lateral cambia el ancho de la lista;
   doble clic lo devuelve al de fábrica. El superior no tiene alto intermedio
   que valga: pliega la cabecera entera (buscador y filtros) y deja una pestaña
   para recuperarla; «/» también la devuelve. */
#w-divisor { position: absolute; top: 0; bottom: 0; left: calc(var(--lista-u, var(--lista)) - 4px); width: 8px; z-index: 12; cursor: col-resize; touch-action: none; }
#w-tirador { position: absolute; top: -4px; left: 0; right: 0; height: 8px; z-index: 19; cursor: row-resize; touch-action: none; }
#w-divisor::after, #w-tirador::after { content: ""; position: absolute; background: var(--acento); opacity: 0; transition: opacity var(--paso); }
#w-divisor::after { top: 0; bottom: 0; left: 3px; width: 2px; }
#w-tirador::after { left: 0; right: 0; top: 3px; height: 2px; }
#w-divisor:hover::after, #w-divisor:focus-visible::after, #w-tirador:hover::after,
body.arrastrando-x #w-divisor::after, body.arrastrando-y #w-tirador::after { opacity: 1; }
body.ws #w-divisor:focus-visible { outline: none; }
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 #w-divisor { display: none; }
#w-mostrar-cab { 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); }
#w-mostrar-cab:hover { color: var(--acento); }
@media (min-width: 821px) {
  /* Cabecera plegada: toda la altura para leer. */
  html[data-cab="plegada"] { --cab: 0px; --filtros: 0px; }
  html[data-cab="plegada"] .w-barra, html[data-cab="plegada"] .w-filtros { display: none; }
  html[data-cab="plegada"] #w-mostrar-cab { display: inline-flex; }
  html[data-cab="plegada"] #w-tirador { top: 0; }
}

/* ---------- Lista ---------- */
.w-r-cab { position: sticky; top: 0; z-index: 5; background: var(--papel); padding: 10px 16px 9px; border-bottom: 1px solid var(--regla);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#results-head { font-size: 13px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
#results-head .count { color: var(--tinta); font-weight: 600; }
#results-head .scope { color: var(--tinta-3); }
#results-head a { color: var(--acento); }
.w-r-cab .semstatus { margin-left: auto; font-size: 12px; color: var(--tinta-3); display: inline-flex; align-items: center; gap: 5px; }
.w-carpeta-cab { padding: 12px 16px; border-bottom: 1px solid var(--regla); background: var(--hoja); }
.w-carpeta-cab h2 { font: 600 17px/1.3 var(--serif); margin: 0 0 4px; }
.w-carpeta-cab .acc { display: flex; gap: 14px; font-size: 13px; }
.w-carpeta-cab .acc button { color: var(--acento); font-weight: 500; }
#results { list-style: none; margin: 0; padding: 0; }
.w-res { padding: 11px 16px 12px; border-bottom: 1px solid var(--regla-2); cursor: pointer; position: relative; transition: background var(--paso); }
.w-res:hover { background: var(--sel); }
.w-res.activo { background: var(--acento-suave); box-shadow: inset 2px 0 0 var(--acento); }
.w-res-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.w-res-num { font: 600 13px var(--mono); color: var(--tinta); letter-spacing: -.01em; }
.w-res-tipo { font-size: 12px; }
.w-res-tipo.j { color: var(--tinta); font-weight: 600; }
.w-res-tipo.o { color: #7d5f2c; font-weight: 600; }
html[data-theme="dark"] .w-res-tipo.o { color: #d9b87e; }
.w-res-marcas { margin-left: auto; display: inline-flex; gap: 7px; align-items: center; }
.w-res-marcas svg { width: 13px; height: 13px; color: var(--tinta-3); }
.w-res-marcas .guardada { color: var(--acento); }
.w-res-nom { margin: 4px 0 0; font: 600 15px/1.35 var(--serif); color: var(--tinta); }
.w-res-txt { margin: 3px 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; }
.w-res.activo .w-res-txt { color: var(--tinta); }
.w-res mark, .w-res-txt mark { background: var(--busq); color: inherit; border-radius: var(--r-xs); }
.w-res-arts { margin-top: 6px; font-size: 12px; color: var(--tinta-3); }
.w-mas { display: block; width: calc(100% - 32px); margin: 14px 16px 28px; padding: 8px; border: 1px solid var(--regla) !important;
  border-radius: var(--r); color: var(--tinta-2) !important; font-size: 13.5px; font-weight: 500; background: var(--hoja) !important; }
.w-mas:hover { background: var(--sel) !important; color: var(--tinta) !important; border-color: var(--tinta-3) !important; }
.w-vacio { padding: 44px 28px; color: var(--tinta-3); text-align: center; font-size: 13.5px; line-height: 1.55; }
.w-vacio b { display: block; font: 600 15px var(--sans); color: var(--tinta); margin-bottom: 6px; }
/* La doctrina que casa con la busqueda, arriba de la lista. */
#w-lista .doc-strip { margin: 12px 16px; padding: 10px 12px; border: 0; border-radius: var(--r); background: var(--sel); }
#w-lista .doc-strip-h { font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 6px; }
#w-lista .doc-strip-warn { color: var(--acento); }
#w-lista .doc-strip-list { display: grid; gap: 2px; }
#w-lista .doc-chip { display: block; padding: 6px 8px; border-radius: var(--r-sm); text-decoration: none; background: none; border: 0; }
#w-lista .doc-chip:hover { background: var(--sel); }
#w-lista .doc-chip-a { font-weight: 600; font-size: 13px; color: var(--tinta); }
#w-lista .doc-chip-n { font-size: 12px; color: var(--tinta-3); }
#w-lista .doc-chip-t { font-size: 12.5px; color: var(--tinta-2); }
#concept-banner { display: none; }

/* ---------- Lector ---------- */
.w-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: 13.5px; color: var(--tinta-2); min-height: 46px; transition: border-color var(--paso); }
.w-doc-barra.plegada { border-bottom-color: var(--regla); }
.w-doc-barra .num { font: 600 14px var(--serif); color: var(--tinta); opacity: 0; transition: opacity var(--paso); margin-left: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.w-doc-barra.plegada .num { opacity: 1; }
/* `.w-sep` y no `.sep`: en app.css `.sep` es una raya con 2,5 rem de margen
   (la colisión de la iteración 40, otra vez), y pintaba un trazo en la barra
   y la dejaba en 80 px de alto. */
.w-doc-barra .w-sep { flex: 1; }
.w-herr { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border-radius: var(--r);
  color: var(--tinta-2) !important; white-space: nowrap; text-decoration: none !important; font-size: 13.5px; font-weight: 500;
  transition: background var(--paso), color var(--paso); }
.w-herr:hover { background: var(--sel) !important; color: var(--tinta) !important; }
.w-herr.activo { color: var(--acento) !important; background: var(--acento-suave) !important; }
.w-herr.primario { background: var(--acento) !important; color: var(--sobre-acento) !important; font-weight: 600; }
.w-herr.primario:hover { background: var(--acento-2) !important; }
.w-herr.primario.activo { background: var(--acento-suave) !important; color: var(--acento) !important; box-shadow: inset 0 0 0 1px var(--acento); }
#w-volver { display: none; }
.w-menu { position: fixed; z-index: 40; min-width: 230px; background: var(--hoja); border: 1px solid var(--regla);
  border-radius: var(--r-lg); box-shadow: var(--sombra); padding: 5px; font-size: 14px; }
.w-menu[hidden] { display: none; }
.w-menu .m-tit { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); padding: 8px 9px 5px; }
.w-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) !important; text-decoration: none !important; transition: background var(--paso); }
.w-menu .m-item:hover { background: var(--sel); }
.w-menu .m-item[disabled] { opacity: .4; cursor: default; }
.w-menu .m-item input { margin: 0; accent-color: var(--acento); }
.w-menu .m-sep { height: 1px; background: var(--regla-2); margin: 5px 4px; }
.w-menu .m-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 9px; }
.w-menu .ctrl { display: inline-flex; border: 1px solid var(--regla); border-radius: var(--r); overflow: hidden; }
.w-menu .ctrl button { width: 32px; height: 26px; }
.w-menu .ctrl button:hover { background: var(--sel); }
.w-menu .ctrl span { min-width: 44px; text-align: center; font: 12px/26px var(--mono);
  border-left: 1px solid var(--regla); border-right: 1px solid var(--regla); }
.w-menu .ctrl button[disabled] { opacity: .35; cursor: default; }
.w-menu .ctrl button[disabled]:hover { background: none; }
/* Opciones excluyentes (tema, fondo): un segmentado, la elegida en el acento. */
.w-menu .ctrl.opciones button { width: auto; padding: 0 10px; font-size: 12.5px; color: var(--tinta-2); }
.w-menu .ctrl.opciones button + button { border-left: 1px solid var(--regla); }
.w-menu .ctrl.opciones button[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.w-menu .w-campo { margin: 4px 0 2px; }

/* El asunto. El ancho de la columna lo pone quien lee (--ancho, 900 px de
   partida; «Aa › Text width»). */
.w-doc { max-width: var(--ancho); margin: 0 auto; padding: 30px 44px 120px; }
body.lectura .w-doc { max-width: calc(var(--ancho) + 60px); }
.w-doc h1 { font: 600 30px/1.12 var(--serif); letter-spacing: -.015em; font-variant-numeric: tabular-nums; margin: 0 0 6px; color: var(--tinta); }
.w-doc .w-nom { font: 500 20px/1.3 var(--serif); color: var(--tinta); margin: 0 0 10px; }
.w-sobre { font-size: 13.5px; color: var(--tinta-2); margin: 0 0 2px; }
.w-sobre .v { color: var(--tinta); font-weight: 600; }
.w-fecha { color: var(--tinta-3); margin: 0 0 18px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.w-aviso { margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--regla); border-radius: var(--r); background: var(--papel);
  font-size: 13.5px; color: var(--tinta-2); }
.w-aviso b { color: var(--tinta); }
.w-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.w-chip-norma { display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%; padding: 4px 9px;
  border: 1px solid var(--regla) !important; border-radius: var(--r); background: var(--hoja) !important; text-align: left;
  transition: border-color var(--paso), background var(--paso); }
.w-chip-norma:hover { border-color: var(--acento) !important; background: var(--acento-suave) !important; }
.w-chip-norma b { font: 600 12.5px var(--sans); white-space: nowrap; color: var(--tinta); }
.w-chip-norma:hover b { color: var(--acento); }
.w-chip-norma span { font-size: 12.5px; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.w-chip-tema { font-size: 12.5px; background: var(--papel); border: 1px solid var(--regla); border-radius: var(--r);
  padding: 4px 9px; color: var(--tinta-2) !important; text-decoration: none !important; }
.w-chip-tema:hover { border-color: var(--acento); color: var(--acento) !important; }
.w-resumen { margin: 0 0 26px; padding: 16px 20px; background: var(--sel); border: 0; border-radius: var(--r-lg, 10px); font-size: 14.5px; }
.w-resumen > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.w-resumen > summary::-webkit-details-marker { display: none; }
.w-resumen > summary h2 { font: 650 16px/1.35 var(--sans); margin: 0; color: var(--tinta); }
.w-resumen > summary span { font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; }
.w-resumen .w-sum-h { font: 600 12px var(--sans); color: var(--acento); margin: 14px 0 3px; }
.w-resumen p { margin: 0; font: 15.5px/1.62 var(--serif); color: var(--tinta); text-align: justify; hyphens: auto; }
.w-resumen .nota-ia { font: 12.5px var(--sans); color: var(--tinta-3); margin-top: 12px; text-align: left; }
.w-notas { margin: 0 0 26px; }
.w-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: 14.5px/1.5 var(--sans); outline: none;
  transition: border-color var(--paso), box-shadow var(--paso), background var(--paso); }
.w-notas textarea::placeholder { color: var(--tinta-3); }
.w-notas textarea:focus { border-color: var(--acento); background: var(--hoja); box-shadow: 0 0 0 3px var(--acento-suave); }
.w-notas .estado { font-size: 12px; color: var(--tinta-3); height: 16px; margin-top: 3px; }
.w-doc h3.w-h, .w-doc .ft-head h2, .w-doc .disc-head h2 { 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); }
.w-materia { font: 16px/1.62 var(--serif); color: var(--tinta-2); margin: 0; text-align: justify; hyphens: auto; }
.w-registro { margin: 0; font-size: 13.5px; }
.w-registro > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--regla-2); }
.w-registro dt { color: var(--tinta-3); }
.w-registro dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }
.w-registro .mono { font: 12.5px var(--mono); }
/* Texto integro dentro del lector: hereda .ft-* de app.css, con la voz serif del sistema. */
.w-doc .fulltext { margin: 0; padding: 0; border: 0; max-width: none; background: none; }
.w-doc .ft-head { margin: 0; }
.w-doc .ft-docs { margin: 4px 0 6px; }
.w-doc .ft-doc-tab { border-color: var(--regla); border-radius: var(--r); padding: 7px 12px; }
.w-doc .ft-doc-tab[aria-selected="true"] { border-color: var(--acento); box-shadow: none; background: var(--acento-suave); }
.w-doc .ft-tools { background: var(--hoja); top: 46px; }
.w-doc .ft-inline .ft-p { font: var(--tam)/1.68 var(--serif); }
.w-doc .ft-t { text-align: justify; hyphens: auto; }
/* Citas en bloque (common.js › VATLexCitas): lo que la resolución reproduce
   entre comillas —la norma, las cuestiones planteadas, otra sentencia—, sangrado
   y con un filete, para que no se confunda con lo que dice el Tribunal. */
.ft-p.cita .ft-t { margin-left: 1.5em; padding-left: 1em; border-left: 1px solid var(--regla); }
/* Las notas al pie de las conclusiones (texto provisional), al final y en menor. */
.w-doc .ft-p.s-notes, .rd-body .ft-p.s-notes { font-size: .86em; line-height: 1.55; color: var(--tinta-2); }
.w-doc .discussion { margin: 0; padding: 0; border: 0; background: none; }
/* Subrayados del usuario */
mark.w-sub { padding: 1px 0; border-radius: var(--r-xs); cursor: pointer; color: inherit;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.w-sub.amarillo { background: var(--s-amarillo); }
mark.w-sub.verde { background: var(--s-verde); }
mark.w-sub.azul { background: var(--s-azul); }
mark.w-sub.rosa { background: var(--s-rosa); }
mark.w-sub.con-nota::after { content: attr(data-n); font: 600 10px var(--sans); vertical-align: super; margin-left: 2px; color: var(--acento); }
mark.w-sub.foco { outline: 2px solid var(--acento); outline-offset: 1px; }
.w-anot { list-style: none; padding: 0; margin: 0; }
.w-anot li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--regla-2); cursor: pointer; }
.w-anot .n { font: 600 12px var(--sans); color: var(--acento); }
.w-anot .cita { font: italic 14.5px/1.5 var(--serif); color: var(--tinta-2); padding-left: 14px; position: relative; }
.w-anot .cita::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: var(--r-xs); background: var(--p-amarillo); }
.w-anot .cita.verde::before { background: var(--p-verde); } .w-anot .cita.azul::before { background: var(--p-azul); } .w-anot .cita.rosa::before { background: var(--p-rosa); }
.w-anot .donde { font-size: 12px; color: var(--tinta-3); margin-top: 3px; }
.w-anot .txt { margin-top: 5px; font-size: 14px; white-space: pre-wrap; }
/* Bienvenida */
.w-bienv { max-width: 660px; margin: 0 auto; padding: 56px 40px 80px; }
.w-bienv h2 { font: 600 28px/1.2 var(--serif); letter-spacing: -.012em; margin: 0 0 12px; }
.w-bienv > p { font: 16.5px/1.65 var(--serif); color: var(--tinta-2); margin: 0 0 14px; }
.w-bienv ul { padding-left: 18px; color: var(--tinta-2); line-height: 1.85; font-size: 14px; margin: 0; }
.w-bienv 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); }
.w-bienv .ejemplos { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.w-bienv .ejemplos button { height: 28px; padding: 0 10px; border: 1px solid var(--regla) !important; border-radius: var(--r); font-size: 13px; color: var(--tinta-2) !important; background: var(--hoja) !important; }
.w-bienv .ejemplos button:hover { border-color: var(--acento) !important; color: var(--acento) !important; background: var(--acento-suave) !important; }
.w-novedades { margin-top: 34px; border-top: 1px solid var(--regla); padding-top: 18px; }
.w-novedades h3 { font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 8px; }
.w-novedades ol { list-style: none; margin: 0; padding: 0; }
.w-novedades li + li { border-top: 1px solid var(--regla-2); }
.w-novedades li button { display: block; width: 100%; text-align: left; padding: 10px 0; }
.w-novedades li button:hover .t { color: var(--acento); }
.w-novedades .m { display: block; font: 12.5px/1.4 var(--sans); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.w-novedades .m b { color: var(--tinta-2); font-weight: 600; }
.w-novedades .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 15.5px/1.5 var(--serif); margin-top: 2px; color: var(--tinta); }
.w-pie { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--regla); font-size: 12.5px; color: var(--tinta-3); line-height: 1.6; }
.w-pie a { color: var(--tinta-2); }

/* Barra flotante de subrayado y editor de nota */
.w-flota { position: fixed; 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); }
.w-flota[hidden] { display: none; }
.w-flota .color, .w-editor .color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; transition: transform var(--paso); }
.w-flota .color:hover { transform: scale(1.12); }
.w-flota .color.amarillo, .w-editor .color.amarillo { background: var(--p-amarillo); }
.w-flota .color.verde, .w-editor .color.verde { background: var(--p-verde); }
.w-flota .color.azul, .w-editor .color.azul { background: var(--p-azul); }
.w-flota .color.rosa, .w-editor .color.rosa { background: var(--p-rosa); }
.w-flota .f-btn { height: 26px; padding: 0 9px; border-radius: var(--r-sm); color: var(--hoja) !important; font-size: 12.5px; font-weight: 500; }
.w-flota .f-btn:hover { background: rgb(255 255 255 / .16) !important; }
.w-flota .f-sep { width: 1px; height: 18px; background: rgb(255 255 255 / .25); margin: 0 2px; }
.w-editor { position: fixed; z-index: 46; width: 330px; background: var(--hoja); border: 1px solid var(--regla);
  border-radius: var(--r-lg); box-shadow: var(--sombra); padding: 12px; }
.w-editor[hidden] { display: none; }
.w-editor .cita { font: italic 14px/1.45 var(--serif); color: var(--tinta-2); max-height: 4.3em; overflow: hidden; margin-bottom: 8px; }
.w-editor 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: 14px/1.5 var(--sans); }
.w-editor textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); background: var(--hoja); }
.w-editor .pie { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.w-editor .colores { display: flex; gap: 6px; }
.w-editor .color { width: 20px; height: 20px; }
.w-editor .color.sel { border-color: var(--tinta); }
.w-editor .borrar { color: var(--peligro) !important; font-size: 13px; }

/* Panel del articulo */
.w-velo { position: fixed; inset: 0; background: rgb(12 16 22 / .38); z-index: 60; }
.w-velo[hidden] { display: none; }
.w-cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(660px, 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); }
.w-cajon.abierto { transform: none; }
/* Cerrado, fuera: sin esto `display: flex` gana a [hidden] y la sombra del
   cajón asomaba por el borde derecho de la pantalla. */
.w-cajon[hidden] { display: none; }
.w-cajon-cab { padding: 16px 24px 14px; border-bottom: 1px solid var(--regla-2); }
.w-cajon-cab .fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.w-cajon-cab h2 { font: 600 21px/1.25 var(--serif); margin: 0 0 4px; }
.w-cajon-cab .sobre { font-size: 13px; color: var(--tinta-3); display: block; margin-bottom: 10px; }
.w-cajon-cab .herramientas { display: flex; flex-wrap: wrap; gap: 8px; }
.w-cajon-cuerpo { overflow-y: auto; padding: 20px 24px 60px; }
.w-cajon-cuerpo .art-b { font: 16.5px/1.64 var(--serif); }
.w-cajon-cuerpo .w-equiv { font-size: 13px; color: var(--tinta-2); padding: 8px 12px; background: var(--papel); border-radius: var(--r); margin: 0 0 16px; }

/* ---------- Movil ---------- */
@media (max-width: 1279px) {
  :root { --lista: 400px; }
  body.w-comp { --lista: 420px; }
}
/* Menú de la barra (common.js): en escritorio el contenedor no existe a efectos
   de maquetación; por debajo de 1.080 px los enlaces se despliegan bajo la barra. */
.w-nav-menu { display: contents; }
.w-burger { display: none !important; }
@media (max-width: 1080px) {
  .w-marca span { display: none; }
  .w-burger { display: inline-flex !important; }
  .w-nav-menu { display: none; position: absolute; top: calc(100% + 4px); right: 10px; z-index: 40; min-width: 230px;
    flex-direction: column; gap: 1px; padding: 6px; background: var(--hoja); border: 1px solid var(--regla);
    border-radius: var(--r-lg); box-shadow: var(--sombra); }
  .w-nav.abierta .w-nav-menu { display: flex; }
  .w-nav-menu a, .w-nav-menu .w-nav-b { width: 100%; height: 36px; justify-content: flex-start; }
}
@media (max-width: 820px) {
  :root { --cab: 96px; --tam: 17px; }
  .w-barra { flex-wrap: wrap; align-content: center; gap: 8px 12px; padding: 8px 14px; }
  .w-buscador { order: 3; flex: 1 0 100%; max-width: none; }
  .w-buscador kbd { display: none; }
  .w-buscador .w-borrar { right: 8px; }
  .w-filtros { overflow-x: auto; scrollbar-width: none; padding: 8px 12px; }
  .w-filtros::-webkit-scrollbar { display: none; }
  .w-activos { flex: none; }
  .w-desp, .w-desp.ancho { width: calc(100vw - 20px); max-height: 66vh; }
  .w-app, body.lectura .w-app { grid-template-columns: minmax(0, 1fr); }
  body.lectura #w-lista { display: block; }
  #w-lista { border-right: 0; }
  #w-divisor, #w-tirador, #w-mostrar-cab { display: none !important; }
  .ft-p.cita .ft-t { margin-left: .4em; padding-left: .8em; }
  #w-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 #w-lector { transform: none; }
  #w-volver { display: inline-flex; }
  .w-doc-barra { padding: 6px 10px; }
  .w-herr .txt { display: none; }
  .w-doc { padding: 20px 18px 80px; }
  .w-doc h1 { font-size: 26px; }
  .w-doc .ft-t, .w-resumen p, .w-materia { text-align: left; }
  .w-editor { width: calc(100% - 24px); }
  .w-registro > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ws *, body.ws *::before, body.ws *::after { transition-duration: .01ms !important; }
}

/* ---------- Impresion ---------- */
@media print {
  body.ws { background: #fff; }
  .w-barra, .w-filtros, #w-lista, .w-doc-barra, .w-notas textarea:placeholder-shown, .w-flota, .w-editor, .w-menu, .w-desp,
  .w-cajon, .w-velo, .ft-tools, .ft-more, .ft-docs, #discussion, .to-top, #w-divisor, #w-tirador, #w-mostrar-cab { display: none !important; }
  .w-app { display: block; height: auto; }
  #w-lector { overflow: visible; }
  .w-doc { max-width: none; padding: 0; }
  .w-resumen { break-inside: avoid-page; }
  .w-doc .ft-doc { max-height: none !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
}

/* ---------- case.html: el asunto en su propia pagina ---------- */
/* overflow visible: con el `overflow-y: auto` del panel, #w-lector era el
   contenedor de desplazamiento de las barras fijas aunque no desplazase nada,
   y la barra del asunto se iba con la página en vez de quedarse arriba. */
.w-pagina .w-lector-pagina { display: block; background: var(--hoja); min-height: calc(100vh - var(--cab)); }
.w-pagina #w-lector { overflow: visible; }
.w-pagina .w-doc-barra { top: var(--cab); }
.w-pagina .w-doc .ft-tools { top: calc(var(--cab) + 46px); }
@media (max-width: 820px) {
  .w-pagina #w-lector { position: static; transform: none; inset: auto; }
}

/* ---------- Páginas de texto (calendario, discusión, legales, cuenta) ----------
   La barra del puesto de trabajo arriba y, debajo, la página de lectura de
   siempre: en blanco y con su serif, no con la letra de interfaz. */
body.ws.w-texto { background: var(--hoja); font: 17px/1.6 var(--serif); }
body.w-texto .w-barra { font-family: var(--sans); }
@media (max-width: 820px) {
  body.w-texto { --cab: 96px; }
}

/* ===========================================================================
   Compendio (compendium.html, 30-09-2026): el índice de la norma a la
   izquierda y el artículo a la derecha, con sus capas en pestañas.
   =========================================================================== */
/* Fila de instrumentos y capas */
.c-sep { width: 1px; height: 20px; background: var(--regla); margin: 0 4px; flex: none; }
.c-capa.puesto { border-color: var(--acento) !important; color: var(--acento) !important; background: var(--acento-suave) !important; }
.c-gltxt { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; color: var(--tinta-2); white-space: nowrap; cursor: pointer; }
.c-gltxt input { margin: 0; accent-color: var(--acento); }

/* Índice: cabecera, leyenda de columnas y filas */
.c-cab { justify-content: space-between; }
#c-cab { font-size: 13px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
#c-cab .count { color: var(--tinta); font-weight: 600; }
#c-cab .scope { color: var(--tinta-3); }
.c-plegar { font-size: 12.5px; color: var(--acento) !important; font-weight: 500; }
.c-plegar[hidden] { display: none; }
/* El índice es una tabla en árbol (02-10-2026). TODAS las filas —leyenda,
   títulos, capítulos, secciones y artículos— usan la misma rejilla: número,
   texto y tres columnas de recuentos del mismo ancho, ancladas a la derecha.
   Cada nivel entra un paso (16 px) y la flecha de una división cae en el
   hueco de ese paso, así que su rótulo y los números de sus artículos empiezan
   en la misma vertical. Antes los artículos quedaban más a la izquierda que
   el título del que colgaban, las columnas medían 42, 66 y 42 px y los ceros
   no se veían: los números parecían sueltos. */
body.w-comp #w-lista { container: lista / inline-size; }
/* --c-rot: el rótulo más largo de las cinco normas, «Article 369zb», mide 71 px. */
.c-fila { --c-rot: 76px; --c-col: 50px; --c-hueco: 10px; --c-paso: 16px; --c-n: 0;
  position: relative; display: grid; align-items: baseline; width: 100%;
  grid-template-columns: var(--c-rot) minmax(0, 1fr) repeat(3, var(--c-col)); column-gap: var(--c-hueco);
  padding: 6px 16px 6px calc(16px + var(--c-n) * var(--c-paso)); text-align: left; border-radius: 0; }
.c-fila[data-n="1"] { --c-n: 1; }
.c-fila[data-n="2"] { --c-n: 2; }
.c-fila[data-n="3"] { --c-n: 3; }
.c-leyenda { position: sticky; top: 38px; z-index: 4; padding-top: 6px; padding-bottom: 6px; background: var(--papel);
  border-bottom: 1px solid var(--regla); font: 500 11.5px/1.3 var(--sans); color: var(--tinta-3); }
.c-leyenda .c-ley-v { grid-column: 1 / 3; }
/* «Guidelines» mide un par de píxeles más que su columna: que sobre hacia la
   izquierda y su final caiga sobre las cifras. */
.c-leyenda span:not(.c-ley-v) { justify-self: end; white-space: nowrap; }
.c-otras { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 16px; border-bottom: 1px solid var(--regla-2); font-size: 12.5px; color: var(--tinta-3); }
.c-otras[hidden] { display: none; }
.c-otras button { height: 24px; padding: 0 8px; border-radius: var(--r-sm); background: var(--sel) !important; color: var(--tinta) !important; font-size: 12.5px; }
.c-otras button:hover { background: var(--acento-suave) !important; color: var(--acento) !important; }
.c-otras .cuenta { font: 11px var(--mono); color: var(--tinta-3); }
#c-indice { padding: 0 0 40px; }
/* Divisiones. El rótulo ocupa las dos primeras columnas; el «Title X ·» va en
   gris y el nombre en negrita, que es lo que se busca al recorrer la lista. */
.c-g[data-nivel="0"] { border-bottom: 1px solid var(--regla-2); }
.c-g-cab { padding-top: 8px; padding-bottom: 8px; transition: background var(--paso); }
.c-g-cab:hover { background: var(--sel); }
.c-g-fl { position: absolute; left: calc(var(--c-n) * var(--c-paso)); top: 13px; color: var(--tinta-3); transition: transform var(--paso); }
.c-g[data-abierto="1"] > .c-g-cab .c-g-fl { transform: rotate(90deg); }
.c-g-rot { grid-column: 1 / 3; font: 13.5px/1.35 var(--sans); color: var(--tinta); text-wrap: pretty; }
.c-g-num { color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-g-nom { font-weight: 600; }
.c-g[data-nivel="1"] > .c-g-cab, .c-g[data-nivel="2"] > .c-g-cab { padding-top: 6px; padding-bottom: 6px; }
.c-g[data-nivel="1"] > .c-g-cab .c-g-fl, .c-g[data-nivel="2"] > .c-g-cab .c-g-fl { top: 11px; }
.c-g[data-nivel="1"] > .c-g-cab .c-g-rot { font-size: 13px; }
.c-g[data-nivel="2"] > .c-g-cab .c-g-rot { font-size: 13px; }
.c-g[data-nivel="2"] > .c-g-cab .c-g-nom { font-weight: 500; }
.c-g-hijos { display: none; }
.c-g[data-abierto="1"] > .c-g-hijos { display: block; }
.c-g[data-nivel="0"][data-abierto="1"] > .c-g-hijos { padding-bottom: 6px; }
/* Artículos: el número en su columna, las primeras palabras en la segunda. */
.c-art { transition: background var(--paso); }
.c-art:hover { background: var(--sel); }
.c-art.activo { background: var(--acento-suave); box-shadow: inset 2px 0 0 var(--acento); }
.c-n { font: 500 13px/1.4 var(--sans); color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-t { font: 13px/1.4 var(--sans); color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-art.activo .c-n { color: var(--acento); font-weight: 600; }
.c-art.activo .c-t { color: var(--tinta); }
/* Recuentos: cifras tabulares a la derecha de su columna. El cero es un punto
   apagado pero visible, para que la columna se siga leyendo como columna. */
.c-c { font: 12.5px/1.4 var(--sans); color: var(--tinta); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-g-cab .c-c { color: var(--tinta-2); }
.c-c.cero { color: color-mix(in srgb, var(--tinta-3) 55%, transparent); }
/* Resultados de la búsqueda: el número a lo ancho, las cifras en sus columnas
   y el porqué debajo, a todo lo ancho. */
.c-hit { padding-top: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--regla-2); }
.c-hit .c-t { display: none; }
.c-hit .c-n { grid-column: 1 / 3; font-weight: 600; }
/* Con la lista estrecha (el divisor arrastrado, un móvil) no cabe el extracto:
   se quita antes que dejarlo en tres letras, y los niveles entran menos. */
@container lista (max-width: 440px) {
  .c-fila { --c-paso: 12px; }
  .c-art .c-t { display: none; }
  .c-art .c-n { grid-column: 1 / 3; }
}
/* Menú de instrumentos */
.c-m-norma { display: grid !important; gap: 1px; min-width: 300px; }
.c-m-norma.activo { background: var(--acento-suave); }
.c-m-nom { font-weight: 600; font-size: 13.5px; }
.c-m-norma.activo .c-m-nom { color: var(--acento); }
.c-m-nom i { font-style: normal; font-weight: 400; font-size: 12px; color: var(--tinta-3); }
.c-m-n { font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.c-instr .valor { max-width: 34ch; }
.c-por { grid-column: 1 / -1; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--tinta-2); }
.c-por mark { background: var(--busq); color: inherit; border-radius: var(--r-xs); }
.c-por-k { font: 600 10.5px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); margin-right: 5px; }

/* El artículo */
.c-barra .num { font-family: var(--sans); font-size: 13.5px; }
.c-barra .w-herr[disabled] { opacity: .35; cursor: default; }
.c-doc h1 { margin-bottom: 8px; }
.c-ruta { font-size: 12.5px; color: var(--tinta-3); margin: 0 0 10px; line-height: 1.5; }
.c-equiv, .c-rel { font-size: 13.5px; line-height: 1.55; color: var(--tinta-2); background: var(--sel); border-radius: var(--r-lg); padding: 10px 14px; margin: 0 0 10px; }
.c-equiv b, .c-rel b { color: var(--tinta); font-weight: 600; }
.c-tabs { position: sticky; top: 46px; z-index: 6; display: flex; gap: 2px; margin: 18px 0 0; background: var(--hoja); border-bottom: 1px solid var(--regla); overflow-x: auto; scrollbar-width: none; }
.c-tabs::-webkit-scrollbar { display: none; }
.c-tab { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--tinta-2) !important;
  white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; transition: color var(--paso), box-shadow var(--paso); }
.c-tab:hover { color: var(--tinta) !important; }
.c-tab[aria-selected="true"] { color: var(--acento) !important; box-shadow: inset 0 -2px 0 var(--acento); }
.c-tab-n { font: 11.5px var(--mono); color: var(--tinta-3); background: var(--sel); border-radius: var(--r-sm); padding: 1px 6px; }
.c-tab[aria-selected="true"] .c-tab-n { color: var(--acento); background: var(--acento-suave); }
.c-tab.cero { opacity: .55; }
.c-panel { padding-top: 20px; }
/* El texto de la norma: sin caja (la de app.css era una hoja con borde). */
.c-texto.art-body { background: none; border: 0; box-shadow: none; padding: 0; max-width: none;
  font: var(--tam)/1.66 var(--serif); color: var(--tinta); }
.c-texto .art-b { margin-bottom: .55rem; }
.c-texto .art-b .art-m { font: 600 13.5px/1.9 var(--sans); color: var(--tinta-2); }
.c-texto .art-b.art-h { margin: 1.5rem 0 .6rem; font: 600 15px/1.4 var(--sans); color: var(--tinta); }
/* Las partes de un artículo de la Sexta («A. Exemptions for certain activities
   in the public interest»), también en la ficha emergente y en el cajón. */
.art-b.art-h { font-family: var(--sans); font-weight: 600; margin-top: 1rem; }
.c-texto .art-b.art-h:first-child { margin-top: 0; }
.c-fuente { margin: 28px 0 0; padding-top: 12px; border-top: 1px solid var(--regla-2); font-size: 12.5px; color: var(--tinta-3); line-height: 1.55; }
.c-vacio { color: var(--tinta-3); font-size: 14px; padding: 18px 0; }
.c-nota-aviso { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-lg); background: var(--acento-suave); color: var(--tinta); font-size: 13.5px; line-height: 1.55; }
.c-nota-aviso b { color: var(--acento); }
/* Guidelines, notas y asuntos: bloques rellenos, sin borde (iteración 43). */
.c-bloque, .c-caso { margin: 0 0 10px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--sel); }
.c-bloque[hidden], .c-caso[hidden] { display: none; }
.c-bloque h3 { font: 600 16px/1.35 var(--serif); margin: 6px 0 4px; color: var(--tinta); }
.c-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: 12.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.c-meta-k { font-weight: 600; color: var(--tinta); }
.c-despues { color: var(--tinta-2); font-weight: 500; }
.c-viejo { color: var(--peligro); font-weight: 600; }
.c-acierto { color: var(--acento); font-weight: 600; }
.c-bloque.viejo .c-gl-txt { color: var(--tinta-3); }
.c-gl-txt { margin: 8px 0 0; font: 15.5px/1.55 var(--serif); color: var(--tinta); }
.c-sub { margin: 4px 0 0; font-size: 13px; color: var(--tinta-3); }
.c-sec { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--regla); }
.c-sec-h { margin: 0; font-weight: 600; font-size: 14px; color: var(--tinta); }
.c-sec-num { font: 600 12.5px var(--mono); color: var(--tinta-2); margin-right: 4px; }
.c-sec-pg { font: 12px var(--mono); color: var(--tinta-3); font-weight: 400; margin-left: 6px; }
.c-sec-ex { margin: 5px 0 8px; font: 14.5px/1.55 var(--serif); color: var(--tinta-2); }
.c-leer { margin-top: 10px; height: 30px; background: var(--hoja) !important; box-shadow: inset 0 0 0 1px var(--regla); }
.c-leer:hover { box-shadow: inset 0 0 0 1px var(--tinta-3); }
.c-pdf { margin: 12px 0 0; font-size: 13px; }
.c-filtro { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.c-filtro .w-campo { max-width: 360px; }
.c-filtro-n { font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; }
.c-casos-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13.5px; color: var(--tinta-2); }
.c-casos-cab b { color: var(--tinta); }
.c-casos-cab .w-campo { flex: 1; min-width: 200px; max-width: 360px; }
.c-casos-cab .w-orden { margin-left: 0; }
/* Filtro por el apartado que cita cada asunto: «135(1)(f) 19». Fichas pequeñas
   y calladas; la elegida, en el acento. Varias suman. */
.c-aps { display: grid; gap: 6px; margin: 0 0 14px; }
.c-aps-fila { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 8px; align-items: baseline; }
.c-aps-k { font-size: 12.5px; line-height: 24px; color: var(--tinta-3); }
.c-aps-l { display: flex; flex-wrap: wrap; gap: 4px; }
.c-ap { display: inline-flex; align-items: baseline; gap: 5px; height: 24px; padding: 0 7px; border: 1px solid var(--regla) !important;
  border-radius: var(--r-sm); background: var(--hoja) !important; color: var(--tinta-2) !important; font-size: 12.5px; line-height: 22px;
  font-variant-numeric: tabular-nums; white-space: nowrap; transition: border-color var(--paso), background var(--paso), color var(--paso); }
.c-ap:hover { border-color: var(--tinta-3) !important; color: var(--tinta) !important; }
.c-ap.puesto { border-color: var(--acento) !important; background: var(--acento-suave) !important; color: var(--acento) !important; font-weight: 600; }
.c-ap-n { font-size: 11.5px; color: var(--tinta-3); font-weight: 400; }
.c-ap.puesto .c-ap-n { color: inherit; }
.c-aps-quitar { justify-self: start; font-size: 12.5px; font-weight: 500; color: var(--acento) !important; }
.c-aps-quitar:hover { text-decoration: underline; }
.c-caso .w-res-meta { flex-wrap: wrap; row-gap: 2px; }
.c-caso .w-res-nom { font-size: 16px; margin: 5px 0 0; }
.c-caso .w-res-nom a { color: var(--tinta) !important; text-decoration: none; }
.c-caso .w-res-nom a:hover { color: var(--acento) !important; text-decoration: underline; }
.c-menc { margin-left: auto; }
.c-snip { margin: 5px 0 0; font: 14.5px/1.55 var(--serif); color: var(--tinta-2); }
.c-sexta { margin: 6px 0 0; font-size: 12.5px; color: var(--tinta-3); }
.c-docs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 12.5px; }
.c-mas { width: 100%; margin: 6px 0 0; }
.c-bienv ul { list-style: none; padding: 0; margin: 4px 0 18px; font-size: 14.5px; line-height: 1.9; color: var(--tinta-2); }
.c-bienv ul b { color: var(--tinta); font-variant-numeric: tabular-nums; }

@media (max-width: 820px) {
  .c-aps-fila { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .c-gltxt { margin-left: 8px; }
  .c-doc h1 { font-size: 26px; }
  .c-tab { padding: 0 10px; font-size: 13.5px; }
}
@media print {
  body.w-comp .c-tabs, body.w-comp .c-casos-cab .w-campo, body.w-comp .c-casos-cab .w-orden, body.w-comp .c-leer, body.w-comp .c-filtro, body.w-comp .c-aps { display: none !important; }
  body.w-comp .c-bloque, body.w-comp .c-caso { background: none; padding: 8px 0; border-bottom: 1px solid #ccc; border-radius: 0; }
  body.w-comp .c-equiv, body.w-comp .c-rel, body.w-comp .c-nota-aviso { background: none; padding: 0; }
}