/* =====================================================================
   ENFÓCATE HOY — Sistema de diseño
   Hoja única del sitio. Derivada del esqueleto de ConsultorOrlando
   (assets/styles.css, 489 líneas), con los cambios de token que manda
   docs/09-especificacion-web.md §4.
   Verificado y fechado. Última edición: 2026-07-23.

   REGLAS QUE ESTA HOJA HACE CUMPLIR
   1. Cero @import y cero recursos externos http(s). Control 6 del
      verificador de piezas. Las fuentes se autohospedan (ver bloque
      @font-face más abajo).
   2. Un solo acento por pantalla. --accent es exclusivo de .btn-cta.
      Ningún enlace, borde de tarjeta ni titular usa el terracota.
   3. El color nunca es el único portador de significado: los estados de
      vigencia llevan siempre la palabra escrita (D-W4, WCAG 1.4.1).
   ===================================================================== */

/* ---------------------------------------------------------------------
   FUENTES AUTOHOSPEDADAS  (D-W1)
   ---------------------------------------------------------------------
   Los cinco WOFF2 NO están en el repositorio todavía: producirlos es la
   tarea descrita en assets/LEEME-ASSETS.md §1. Mientras no existan, este
   bloque queda COMENTADO a propósito, para no pedirle al navegador cinco
   archivos que devolverían 404. La pila de respaldo (Georgia / system-ui)
   sostiene el diseño sin saltos de peso.

   PARA ACTIVARLO: cree assets/fonts/, copie allí los cinco archivos con
   estos nombres exactos y borre las dos líneas de comentario que envuelven
   el bloque. No hay ningún otro cambio que hacer.
--------------------------------------------------------------------- */
/*
@font-face{ font-family:'Source Serif 4'; src:url('fonts/source-serif-4-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; }
@font-face{ font-family:'Source Serif 4'; src:url('fonts/source-serif-4-400i.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Source Serif 4'; src:url('fonts/source-serif-4-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Montserrat'; src:url('fonts/montserrat-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Montserrat'; src:url('fonts/montserrat-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap; }
*/

/* ---------- Tokens ---------- */
:root{
  /* Ancla compartida con ConsultorOrlando — no se toca */
  --ink:        #1B2537;
  --ink-soft:   #2A3852;

  /* Papel neutro de lectura */
  --bg:         #FBFAF8;
  --bg-2:       #F2F0EB;
  --bg-3:       #E8E4DB;   /* solo la trama del placeholder .ph */
  --surface:    #FFFFFF;
  --line:       #E3E0D9;
  --line-2:     #D3CFC6;

  /* Texto secundario — calibrado AA sobre --bg */
  --muted:      #5F6672;   /* 5,56:1 */
  --muted-ink:  #4A5261;   /* 7,45:1 */

  /* Tierra editorial */
  --tan:        #6E6250;   /* 5,79:1 */
  --tan-soft:   #A2957E;   /* solo reglas decorativas, nunca texto */

  /* Acento — terracota. EXCLUSIVO del botón de acción. */
  --accent:     #A6462E;
  --accent-700: #8C3A25;
  --accent-300: #C57A63;   /* solo bordes y foco, nunca texto */
  --accent-tint:#F7EBE6;

  /* Estados de vigencia (D-W4) */
  --st-vigente:  #1B2537;
  --st-revisar:  #8A5A00;
  --st-derogada: #8C3A25;

  /* Tipografía */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala fluida */
  --step--1: clamp(.82rem, .80rem + .12vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.12rem + .4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + .9vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.15rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.2vw, 4.6rem);
  --step-5:  clamp(3.2rem, 2.1rem + 5vw, 6rem);

  /* Espacio */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* Medida — EH es publicación, no embudo */
  --maxw: 1120px;
  --maxw-narrow: 720px;

  --radius:10px; --radius-lg:18px; --radius-sm:7px;

  --shadow-sm: 0 1px 2px rgba(27,37,55,.05), 0 2px 8px rgba(27,37,55,.04);
  --shadow:    0 8px 30px rgba(27,37,55,.08), 0 2px 8px rgba(27,37,55,.05);
  --shadow-lg: 0 24px 60px rgba(27,37,55,.16), 0 6px 18px rgba(27,37,55,.08);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--step-0); line-height:1.72;
  font-weight:400; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,h5{ margin:0; font-family:var(--serif); font-weight:400; line-height:1.12; letter-spacing:-.01em; }
p{ margin:0; text-wrap:pretty; }
::selection{ background:var(--ink); color:#fff; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* Reserva de altura del header y del footer inyectados: evita el salto de
   layout (CLS) que produce site.js al escribirlos. */
[data-site-header]{ display:block; min-height:74px; }
[data-site-footer]{ display:block; min-height:340px; }

/* ---------- Salto al contenido y texto solo para lectores ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--bg); font-weight:600;
  padding:12px 18px; border-radius:0 0 var(--radius-sm) 0;
}
.skip:focus{ left:0; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Tipografía: utilidades ---------- */
.h-display{ font-size:var(--step-5); line-height:1; }
.h1{ font-size:var(--step-4); }
.h2{ font-size:var(--step-3); }
.h3{ font-size:var(--step-2); }
.h4{ font-size:var(--step-1); font-weight:500; }
.serif{ font-family:var(--serif); }
.lead{ font-size:var(--step-1); line-height:1.5; color:var(--muted-ink); font-weight:400; }
.fine{ font-size:var(--step--1); color:var(--muted); }
.italic{ font-style:italic; }
.balance{ text-wrap:balance; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:.74rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tan);
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--tan); opacity:.7; }
.eyebrow.no-rule::before{ display:none; }
.section.dark .eyebrow{ color:var(--tan-soft); }
.section.dark .eyebrow::before{ background:var(--tan-soft); }

/* La frase que aterriza. Hereda .clarity del esqueleto de CO; en EH el
   nombre publicable es .aterriza (la palabra "claridad" es territorio de
   ConsultorOrlando y no se usa en textos de esta marca). */
.clarity,
.aterriza{
  display:block; font-family:var(--serif); font-style:italic;
  color:var(--tan); font-size:var(--step-0);
}
.section.dark .aterriza{ color:var(--tan-soft); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--sp-5); }
.narrow{ max-width:var(--maxw-narrow); margin-inline:auto; }

/* Un .narrow ANIDADO dentro de .wrap quedaba 24 px a la izquierda de un
   .wrap.narrow, y las dos formas conviven en el sitio. Causa: en .wrap.narrow el
   max-width de 720 px incluye el padding-inline, mientras que el .narrow anidado
   se centra dentro del contenido ya despadeado del .wrap. Restarle ese padding
   iguala las dos: 720 - 48 = 672 px de contenido, y ambas arrancan en el mismo x.

   No era cosmético: en la portada 17 bloques de prosa se sentaban en 316 y otros
   8 en 340, así que el margen izquierdo iba y venía al bajar. También afectaba a
   sobre.html, observatorio/, parte/ y expediente/. Medido el 2026-07-30. */
.wrap > .narrow{ max-width:calc(var(--maxw-narrow) - var(--sp-5) * 2); }
.section{ padding-block:var(--sp-9); }
.section-sm{ padding-block:var(--sp-8); }
.section.dark{ background:var(--ink); color:var(--bg); }
.section.dark .lead{ color:#C3CCD9; }
.section.cream{ background:var(--bg-2); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

.grid{ display:grid; gap:var(--sp-5); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr;} }
@media (max-width:900px){
  .grid[style*="grid-template-columns"]{ grid-template-columns:1fr !important; gap:var(--sp-6) !important; }
}

.grid.split{ grid-template-columns:1fr 1fr; }
.grid.split-l{ grid-template-columns:1.05fr .95fr; }
.grid.split-r{ grid-template-columns:.9fr 1.1fr; }
.grid.split-head{ grid-template-columns:1fr auto; }
@media (max-width:860px){
  .grid.split,.grid.split-l,.grid.split-r{ grid-template-columns:1fr; gap:var(--sp-6); }
  .grid.split-r > *:first-child{ order:2; }
}
@media (max-width:620px){
  .grid.split-head{ grid-template-columns:1fr; }
  .ph.tall{ min-height:300px; }
}

.stack > * + *{ margin-top:var(--sp-4); }
.stack-lg > * + *{ margin-top:var(--sp-6); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:600; font-size:.98rem;
  padding:15px 26px; border-radius:var(--radius-sm); border:1.5px solid transparent;
  transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
  min-height:52px; text-align:center; line-height:1.1;
}
.btn svg{ width:18px; height:18px; }

/* El ÚNICO elemento terracota de la pantalla. */
.btn-cta{ background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn-cta:hover{ background:var(--accent-700); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-cta:active{ transform:translateY(0); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--ink); background:rgba(27,37,55,.03); }
.section.dark .btn-ghost{ color:var(--bg); border-color:rgba(251,250,248,.32); }
.section.dark .btn-ghost:hover{ border-color:var(--bg); background:rgba(251,250,248,.08); }
.btn-block{ width:100%; }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* Enlace de texto en tinta. Es la forma OBLIGATORIA de enlazar hacia
   consultororlando.com: nunca con el acento, nunca con el verde de CO. */
.link-ink{
  color:var(--ink); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; font-weight:600;
}
.link-ink:hover{ color:var(--ink-soft); text-decoration-thickness:2px; }
.btn-link{
  display:inline-flex; align-items:center; gap:8px; font-weight:600;
  color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  padding:0; min-height:0; border:0; background:none;
}
.btn-link svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
.btn-link:hover svg{ transform:translateX(4px); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;
}
.site-header.scrolled{ border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(27,37,55,.02); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); height:74px; }
.brand{ display:inline-flex; align-items:center; gap:13px; flex-shrink:0; }
.monogram{
  width:38px; height:38px; border-radius:9px; background:var(--ink); color:var(--bg);
  display:grid; place-items:center; font-family:var(--sans); font-weight:700;
  font-size:.92rem; letter-spacing:.02em; flex-shrink:0;
}
.brand b{ font-family:var(--serif); font-weight:600; font-size:1.16rem; letter-spacing:-.01em; line-height:1; }
.brand small{
  display:block; font-family:var(--sans); font-weight:500; font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:4px;
}
.nav-links{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-links a{
  font-weight:500; font-size:.95rem; color:var(--ink-soft); padding:9px 13px; border-radius:7px;
  transition:background .15s, color .15s; position:relative;
}
.nav-links a:hover{ background:rgba(27,37,55,.04); color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:13px; right:13px; bottom:2px; height:2px;
  background:var(--tan); border-radius:2px;
}
.nav-cta{ display:flex; align-items:center; gap:10px; margin-left:8px; }
.nav-cta .btn{ min-height:44px; padding:11px 18px; font-size:.92rem; }
.icon-btn{
  width:46px; height:46px; border-radius:8px; display:grid; place-items:center;
  border:1.5px solid var(--line-2); background:transparent; color:var(--ink);
}
.icon-btn:hover{ border-color:var(--ink); }
.burger{ display:none; }
@media (max-width:1020px){
  .nav-links{ display:none; }
  .nav-cta .full{ display:none; }
  .burger{ display:grid; }
}
@media (max-width:520px){ .brand small{ display:none; } }

/* Menú móvil */
.m-menu{
  position:fixed; inset:0; z-index:100; background:var(--bg);
  transform:translateX(100%); transition:transform .38s var(--ease);
  display:flex; flex-direction:column; padding:var(--sp-5);
  visibility:hidden; overflow-y:auto;
}
.m-menu.open{ transform:translateX(0); visibility:visible; }
@media (prefers-reduced-motion: reduce){ .m-menu{ transition:none; } }
.m-menu-top{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.m-menu nav{ display:flex; flex-direction:column; gap:2px; margin-top:var(--sp-5); }
.m-menu nav a{
  font-family:var(--serif); font-size:1.7rem; padding:12px 0;
  border-bottom:1px solid var(--line); color:var(--ink);
}
.m-menu .btn{ margin-top:var(--sp-6); }
.m-foot{ margin-top:var(--sp-5); color:var(--muted); font-size:.85rem; }

/* ---------- Hero de página ---------- */
.page-hero{ padding-block:var(--sp-9) var(--sp-8); }
.page-hero .eyebrow{ margin-bottom:var(--sp-4); }
.crumbs{ font-size:.8rem; color:var(--muted); margin-bottom:var(--sp-5); display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a{ text-decoration:underline; text-underline-offset:2px; }
.crumbs a:hover{ color:var(--ink); }
.crumbs span{ color:var(--line-2); }

/* ---------- Placeholder tipográfico (dirección de arte honesta) ---------- */
.ph{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:repeating-linear-gradient(135deg, var(--bg-2) 0 14px, var(--bg-3) 14px 28px);
  border:1px solid var(--line); display:grid; place-items:center; min-height:220px;
  color:var(--muted-ink);
}
.ph.dark{ background:repeating-linear-gradient(135deg,#222E44 0 14px,#27344C 14px 28px); border-color:rgba(255,255,255,.1); color:#9FB0C9; }
.ph .ph-note{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; text-align:center;
  padding:10px 14px; max-width:82%; background:rgba(251,250,248,.72);
  border-radius:6px; line-height:1.5;
}
.ph.dark .ph-note{ background:rgba(27,37,55,.55); }
.ph.tall{ min-height:520px; height:100%; }
.ph.wide{ aspect-ratio:16/9; min-height:0; }
.ph.square{ aspect-ratio:1; min-height:0; }
.ph.portrait{ aspect-ratio:4/5; min-height:0; }
.photo{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-lg); display:block; box-shadow:var(--shadow); }
.photo.portrait{ aspect-ratio:4/5; }

/* ---------- Tarjetas ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--sp-6); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.card > h3{ font-size:var(--step-1); font-weight:600; color:var(--ink); }
.card-link:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2); }
.section.dark .card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); color:var(--bg); }
.section.dark .card h3{ color:var(--bg); }
.section.dark .card p{ color:#C3CCD9; }

.tag{
  display:inline-block; font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tan); padding:5px 11px; border:1px solid var(--line-2); border-radius:100px;
}
.tag.solid{ background:var(--ink); color:var(--bg); border-color:var(--ink); letter-spacing:.12em; }

/* Tarjeta de pieza */
.article-card{
  display:flex; flex-direction:column; height:100%; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.article-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.article-card .ph{ border-radius:0; border:0; border-bottom:1px solid var(--line); min-height:150px; }
.article-card .body{ padding:var(--sp-5); display:flex; flex-direction:column; gap:10px; flex:1; }
.article-card h3{ font-size:var(--step-1); }
.article-meta{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  font-size:.78rem; color:var(--muted); margin-top:auto; padding-top:var(--sp-4);
}
.article-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--line-2); }

/* ---------- Lista de comprobaciones / fichas citadas ---------- */
.checks{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.checks li{ display:grid; grid-template-columns:24px 1fr; gap:13px; align-items:start; }
.checks svg{ width:22px; height:22px; color:var(--tan); margin-top:3px; }
.checks .t{ font-weight:600; }
.checks .d{ color:var(--muted-ink); font-size:.95rem; }

/* =====================================================================
   COMPONENTES PROPIOS DE ENFÓCATE HOY
   ===================================================================== */

/* ---- 1. Sello de verificación ----------------------------------------
   Formato fijo: Norma · Entidad · estado · verificado AAAA-MM-DD · dominio.gov.co
   Lo emite el script al publicar. Un sello escrito a mano es una falla de
   integridad, no un descuido de estilo. */
.verify-seal{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.76rem; line-height:1.5; color:var(--muted-ink);
  background:var(--bg-2); border:1px solid var(--line-2);
  border-left:3px solid var(--tan);
  border-radius:var(--radius-sm); padding:11px 14px; margin-top:var(--sp-5);
}
.verify-seal .sep{ color:var(--line-2); }
.verify-seal strong{ color:var(--ink); }
.verify-seal a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

/* ---- 2. Estado de ficha. El color acompaña; la palabra manda (D-W4) ---- */
.estado{
  display:inline-block; font-family:var(--sans); font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:4px 10px;
  border:1.5px solid currentColor; border-radius:100px; white-space:nowrap;
}
.estado.vigente{ color:var(--st-vigente); }
.estado.revisar,
.estado.compilada,
.estado.modificada,
.estado.en-tramite,
.estado.suspendida{ color:var(--st-revisar); }
.estado.derogada{ color:var(--st-derogada); }

/* ---- 3. Barra de estado del registro ---- */
.ledger-bar{
  display:flex; flex-wrap:wrap; gap:var(--sp-5);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--sp-5);
}
.ledger-bar div{ min-width:150px; }
.ledger-bar .n{ font-family:var(--serif); font-size:var(--step-2); line-height:1; display:block; }
.ledger-bar .l{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ---- 4. Tarjeta de sello (columna derecha del hero de la portada) ---- */
.seal-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--sp-6); box-shadow:var(--shadow);
}
.seal-card .rule{ width:46px; height:2px; background:var(--tan); margin-bottom:var(--sp-5); }
.seal-card dl{ margin:var(--sp-5) 0 0; display:grid; gap:12px; }
.seal-card dt{
  font-family:var(--mono); font-size:.72rem; color:var(--ink); font-weight:600;
}
.seal-card dd{ margin:2px 0 0; font-size:.9rem; color:var(--muted-ink); }

/* ---- 5. Sello de método al pie de cada pieza ---- */
.sello-metodo{
  font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tan);
  display:inline-flex; align-items:center; gap:10px;
}
.sello-metodo::before{ content:""; width:22px; height:1px; background:var(--tan); opacity:.7; }

/* ---------- Puente hacia ConsultorOrlando ----------------------------
   Una sola vez por página, siempre al pie. El enlace va en tinta con
   subrayado: el acento terracota no sale de .btn-cta y el verde de CO
   no aparece jamás en este dominio. */
.bridge{
  background:var(--bg-2); border:1px solid var(--line-2);
  border-left:3px solid var(--tan);
  border-radius:var(--radius-lg); padding:var(--sp-6);
}
.bridge .eyebrow{ color:var(--tan); }

/* ---------- Formulario de captura ---------- */
.form-box{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--sp-6);
}
.field{ display:flex; flex-direction:column; gap:7px; margin-top:var(--sp-4); }
.field label{ font-size:.82rem; font-weight:600; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:1rem; padding:13px 15px; border:1.5px solid var(--line-2);
  border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent-300); box-shadow:0 0 0 3px var(--accent-tint);
}
.consent{ display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; margin-top:var(--sp-5); }
.consent input[type="checkbox"]{ width:20px; height:20px; margin:3px 0 0; accent-color:var(--ink); }
.consent label{ font-size:.92rem; line-height:1.6; color:var(--ink); font-weight:500; }
.consent .d{ display:block; font-size:.84rem; color:var(--muted); font-weight:400; margin-top:4px; }
.form-msg{
  margin-top:var(--sp-4); font-size:.9rem; color:var(--st-derogada); font-weight:600;
  border-left:3px solid var(--st-derogada); padding-left:12px;
}
.form-msg[hidden]{ display:none; }

/* ---------- Acordeón ---------- */
.accordion{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{
  width:100%; background:none; border:0; text-align:left; padding:22px 44px 22px 0; position:relative;
  font-family:var(--serif); font-size:var(--step-1); color:var(--ink); display:flex;
}
.acc-q .sign{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:22px; height:22px; transition:transform .3s var(--ease); color:var(--tan); }
.acc-q[aria-expanded="true"] .sign{ transform:translateY(-50%) rotate(45deg); }
.acc-a{ overflow:hidden; max-height:0; transition:max-height .35s var(--ease); }
.acc-a .inner{ padding:0 44px 24px 0; color:var(--muted-ink); }
@media (prefers-reduced-motion: reduce){ .acc-a{ transition:none; } }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--bg); padding-block:var(--sp-8) var(--sp-6); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--sp-6); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--sp-7) var(--sp-5);} }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer .brand b{ color:var(--bg); }
.site-footer .brand small{ color:#8B97A8; }
.site-footer .monogram{ background:var(--bg); color:var(--ink); }
.site-footer .sello-metodo{ color:var(--tan-soft); }
.site-footer .sello-metodo::before{ background:var(--tan-soft); }
.footer-grid h2{
  font-family:var(--sans); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:#8B97A8; margin:0 0 16px; font-weight:600;
}
.footer-grid a{ display:block; color:#C3CCD9; padding:6px 0; font-size:.95rem; }
.footer-grid a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer-note{ color:#C3CCD9; font-size:.9rem; line-height:1.65; max-width:38ch; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:var(--sp-7); padding-top:var(--sp-5);
  display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  color:#8B97A8; font-size:.82rem;
}
.footer-bottom a{ color:#C3CCD9; text-decoration:underline; text-underline-offset:3px; }
.footer-bottom a:hover{ color:#fff; }

/* ---------- Aviso de almacenamiento local (no es un banner de cookies) ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:1200;
  background:var(--ink); color:var(--bg);
  transform:translateY(120%); transition:transform .45s var(--ease);
  box-shadow:0 -8px 30px rgba(0,0,0,.18);
}
.cookie-banner.show{ transform:none; }
@media (prefers-reduced-motion: reduce){ .cookie-banner{ transition:none; } }
.cookie-inner{
  max-width:1120px; margin:0 auto; padding:18px clamp(16px,4vw,40px);
  display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:space-between;
}
.cookie-text{ font-size:.92rem; line-height:1.55; color:#D7DDE6; max-width:66ch; margin:0; }
.cookie-text strong{ color:var(--bg); }
.cookie-text a{ color:#fff; text-decoration:underline; }
.cookie-banner .btn-ghost{ color:var(--bg); border-color:rgba(255,255,255,.3); }
.cookie-banner .btn-ghost:hover{ border-color:rgba(255,255,255,.6); }
@media (max-width:560px){ .cookie-inner .btn{ width:100%; } }

/* ---------- Páginas legales y editoriales ---------- */
.legal-body{ font-size:1.04rem; line-height:1.72; color:var(--ink); }
.legal-body > * + *{ margin-top:1.15em; }
.legal-body h2{ font-family:var(--serif); font-size:var(--step-1); font-weight:600; color:var(--ink); margin-top:1.9em; scroll-margin-top:100px; }
.legal-body h3{ font-size:1.02rem; font-weight:600; color:var(--ink-soft); margin-top:1.5em; font-family:var(--sans); }
.legal-body ul,.legal-body ol{ padding-left:1.2em; }
.legal-body li{ margin-top:.4em; }
.legal-body strong{ font-weight:600; }
.legal-body a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.legal-body table{ width:100%; border-collapse:collapse; margin-top:.6em; font-size:.95rem; }
.legal-body th,.legal-body td{ text-align:left; padding:11px 14px; border:1px solid var(--line); vertical-align:top; }
.legal-body th{ background:var(--bg-2); font-weight:600; }
.legal-body caption{ caption-side:top; text-align:left; font-size:.86rem; color:var(--muted); padding-bottom:8px; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:.6em; }
.table-scroll:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; }
.table-scroll table{ margin-top:0; min-width:600px; }
.legal-note{
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:18px 20px; font-size:.95rem; color:var(--muted-ink); line-height:1.65;
}
.legal-note a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.legal-meta{
  display:flex; gap:10px 22px; flex-wrap:wrap; font-family:var(--sans); font-size:.8rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
}
.legal-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--tan); align-self:center; }

/* ---------- Cuerpo de pieza ---------- */
.article-body{ font-size:1.08rem; line-height:1.72; color:var(--ink); }
.article-body > * + *{ margin-top:1.25em; }
.article-body h2{ font-size:var(--step-2); margin-top:1.8em; scroll-margin-top:100px; }
.article-body h3{ font-size:var(--step-1); font-weight:500; margin-top:1.4em; }
.article-body strong{ font-weight:600; }
.article-body a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.article-body ul,.article-body ol{ padding-left:1.2em; }
.article-body li{ margin-top:.45em; }
.article-body figure{ margin:1.8em 0; }
.article-body figure img,
.article-body > img{ width:100%; height:auto; border-radius:var(--radius); display:block; }
.article-body figcaption{ font-size:.86rem; color:var(--muted); margin-top:10px; font-style:italic; }
.article-body blockquote{
  border-left:3px solid var(--tan); padding:6px 0 6px 22px; margin:1.6em 0;
  font-family:var(--serif); font-size:1.18rem; font-style:italic; color:var(--ink-soft);
}
.article-body .table-scroll{ margin:1.6em 0; }
.article-body table{ width:100%; border-collapse:collapse; font-size:.95rem; min-width:560px; }
.article-body th,.article-body td{ text-align:left; padding:11px 14px; border:1px solid var(--line); vertical-align:top; }
.article-body th{ background:var(--bg-2); font-weight:600; }

/* ---------- Redes (solo en la página de autor) ---------- */
.socials{ display:flex; align-items:center; gap:14px; margin-top:var(--sp-6); flex-wrap:wrap; }
.socials-label{ font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.social-link{
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--ink-soft);
  transition:color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.social-link svg{ width:19px; height:19px; }
.social-link:hover{ color:var(--ink); border-color:var(--ink); transform:translateY(-2px); }

/* ---------- Reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* ---------- Misc ---------- */
.kicker-num{ font-family:var(--serif); font-style:italic; color:var(--tan); font-size:var(--step-2); line-height:1; }
.note-box{ border-left:2px solid var(--tan); padding:6px 0 6px 18px; color:var(--muted-ink); font-style:italic; font-family:var(--serif); }
.lockup-quote{ font-family:var(--serif); font-size:var(--step-2); line-height:1.32; letter-spacing:-.01em; }
.lockup-quote em{ color:var(--tan-soft); font-style:italic; }
.pordef{
  display:inline-block; font-family:var(--mono); font-size:.72rem; color:var(--tan);
  background:var(--bg-2); border:1px dashed var(--tan-soft); padding:2px 8px;
  border-radius:5px; letter-spacing:.02em;
}
.vacio{
  border:1px dashed var(--line-2); border-radius:var(--radius-lg); padding:var(--sp-7);
  text-align:center; color:var(--muted-ink); background:var(--bg-2);
}

/* =====================================================================
   =====================================================================
   AMPLIACIÓN v1.1 — LA TRÍADA ENFÓCATE
   Vigencia · Evidencia · Decisión
   Añadido el 2026-07-23. Bloque ESTRICTAMENTE ADITIVO: no borra ni
   reescribe ninguna regla anterior. Donde corrige algo, lo hace con una
   regla nueva de igual o mayor especificidad, colocada después, y lo
   declara en el comentario.

   LO QUE ESTE BLOQUE SIGUE CUMPLIENDO
   1. Cero @import y cero recursos externos http(s) (control 6).
   2. --accent sigue siendo exclusivo de .btn-cta y del anillo de foco.
      Ningún componente nuevo usa terracota como color de superficie.
      El modo oscuro NO redefine el acento: la regla del acento es la
      misma en los dos esquemas.
   3. Ningún estado, nivel ni resultado depende del color. Cada insignia
      lleva la palabra escrita y, además, una marca de forma distinta
      (WCAG 1.4.1). El color es el tercer portador, nunca el primero.
   4. Todos los valores de color salen de la paleta de
      config/parametros-eh.json. El modo oscuro deriva sus superficies
      de --ink; no introduce matices nuevos de marca.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. CORRECCIONES DE ACCESIBILIDAD, ADITIVAS
   Cinco reglas que reparan hallazgos AA del informe de Fase 0 sin quitar
   nada. Van primero porque son transversales a todo lo que sigue.
--------------------------------------------------------------------- */

/* Token derivado: color de borde de control. Es --muted, que ya está en
   la fuente única; se le da nombre propio para que el modo oscuro y los
   componentes nuevos lo usen sin repetir el valor. 5,55:1 sobre --bg. */
:root{ --control-line: var(--muted); }

/* B1 · El foco vuelve a verse en los campos. La regla previa anulaba el
   contorno en :focus; esta la gana en :focus-visible por venir después. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
  outline:2.5px solid var(--accent); outline-offset:2px;
  border-color:var(--accent-700);
}

/* B2 · Bordes de control a 3:1. --line-2 daba 1,55:1 sobre blanco. */
.field input, .field select, .field textarea,
.btn-ghost, .icon-btn{ border-color:var(--control-line); }
.section.dark .btn-ghost,
.cookie-banner .btn-ghost{ border-color:rgba(251,250,248,.5); }

/* B3 · El salto al contenido deja de aparecer fuera de pantalla cuando la
   página está desplazada. */
.skip:focus{ position:fixed; left:0; top:0; }

/* B4 · WCAG 2.2 SC 2.4.11: el foco no queda tapado por la cabecera
   pegajosa ni por el aviso inferior. */
:focus-visible{ scroll-margin-top:96px; scroll-margin-bottom:230px; }

/* B6 · Objetivo táctil de 24 px en las casillas de consentimiento, que
   son controles de autorización de datos personales. */
.consent{ grid-template-columns:24px 1fr; }
.consent input[type="checkbox"]{ width:24px; height:24px; margin:2px 0 0; }
.crumbs a{ padding-block:4px; }

/* B9 · El movimiento de hover también respeta prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce){
  .btn-cta:hover, .card-link:hover, .article-card:hover,
  .social-link:hover, .evidence-card:hover, .ruta-card:hover{ transform:none; }
  .btn-link:hover svg{ transform:none; }
  .source-trace > summary::after{ transition:none; }
}

/* Utilidad transversal: el atributo hidden manda sobre display:flex/grid.
   Los módulos nuevos lo usan para el progreso del cuestionario y para los
   controles que solo tienen sentido con JS. */
[hidden]{ display:none !important; }

/* ---------------------------------------------------------------------
   1. CABECERA CON NAVEGACIÓN AMPLIADA
   La Tríada lleva el menú de 5 a 9 entradas. A 1020 px ya no caben: el
   punto de colapso a hamburguesa sube a 1180 px. No se toca la regla
   anterior; esta la cubre por rango y especificidad.
--------------------------------------------------------------------- */
@media (max-width:1180px){
  .site-header .nav-links{ display:none; }
  .site-header .nav-cta .full{ display:none; }
  .site-header .burger{ display:grid; }
}
/* Una etiqueta del menú nunca se parte por dentro. Sin esto, por encima de 1320 px
   —donde ya no aplica el rango apretado de abajo— «El Registro» y «El método»
   caían a dos líneas: la barra crecía de 44 a 70 px de alto y esas dos entradas
   quedaban desalineadas respecto de las otras cinco.

   Medido el 2026-07-29: el contenedor tope a 1120 px, y las siete entradas con el
   padding normal ocupan 740 px que, sumados a marca (187), botón (121) y los dos
   huecos de 24, dan 1095. Cabe. El defecto no era falta de espacio sino que el
   texto podía partirse; por eso la corrección es esta línea y no otro breakpoint. */
.site-header .nav-links a{ white-space:nowrap; }

@media (min-width:1181px) and (max-width:1320px){
  .site-header .nav-links a{ padding:9px 10px; font-size:.9rem; }
  .site-header .nav-links a[aria-current="page"]::after{ left:10px; right:10px; }
}

/* M1 · El botón de la cabecera dejaba una píldora vacía en móvil: el texto
   se ocultaba y el reemplazo era sr-only. Ahora aparece un icono. */
.nav-cta .cta-ico{ display:none; }
.nav-cta .cta-ico svg{ width:19px; height:19px; }
@media (max-width:1180px){
  .site-header .nav-cta .cta-ico{ display:grid; place-items:center; }
  .site-header .nav-cta .btn{ padding:11px 14px; min-width:46px; }
}

/* Menú móvil con 9 entradas: la escala fija de 1.7rem desbordaba en
   pantallas cortas. */
.m-menu nav a{ font-size:clamp(1.15rem, 4.4vw, 1.6rem); }
.m-menu nav a[aria-current="page"]{ color:var(--ink); font-weight:600; }
.m-menu nav a[aria-current="page"]::after{
  content:"·  aquí estás"; font-family:var(--sans); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tan);
  margin-left:10px; white-space:nowrap;
}
.m-menu .m-sep{
  margin:var(--sp-5) 0 var(--sp-2); font-family:var(--sans); font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
@media (max-height:720px){
  .m-menu nav a{ font-size:1.14rem; padding:9px 0; }
  .m-menu-top{ height:60px; }
}

/* El pie creció con la Tríada; la reserva anti-CLS se ajusta. */
[data-site-footer]{ min-height:420px; }
@media (max-width:860px){ [data-site-footer]{ min-height:760px; } }
@media (max-width:480px){ [data-site-footer]{ min-height:1100px; } }

/* ---------------------------------------------------------------------
   2. TRAZABILIDAD DE FUENTES — el núcleo de la Tríada
   Tres componentes. Dos sellos que deben distinguirse entre sí SIN
   depender del color, y un desplegable común de infraestructura.

   Norma  → barra izquierda MACIZA, fondo crema, glifo §, palabra "Norma".
   Evidencia → barra izquierda DOBLE, fondo blanco y regla superior
               punteada, glifo ◈, palabra "Evidencia".
   Quien no distingue colores ve dos cajas con borde distinto y dos
   palabras distintas. Quien usa lector de pantalla oye la palabra.
--------------------------------------------------------------------- */

/* Base común de los dos sellos. No se usa sola. */
.legal-seal, .evidence-seal{
  display:block; font-family:var(--mono); font-size:.76rem; line-height:1.62;
  color:var(--muted-ink); border-radius:var(--radius-sm);
  padding:11px 14px; margin-top:var(--sp-5);
}
.legal-seal .sep, .evidence-seal .sep{ color:var(--line-2); padding:0 2px; }
.legal-seal strong, .evidence-seal strong{ color:var(--ink); font-weight:600; }
.legal-seal a, .evidence-seal a{
  color:var(--ink); text-decoration:underline; text-underline-offset:2px;
  word-break:break-word;
}
.legal-seal a:hover, .evidence-seal a:hover{ text-decoration-thickness:2px; }

/* La palabra que dice de qué clase de fuente se trata. Nunca se omite. */
.seal-kind{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tan);
  margin-right:10px; white-space:nowrap;
}
.seal-kind::before{ font-family:var(--mono); font-size:.95rem; line-height:1; }

/* 2.1 · Sello de norma (LegalSourceSeal)
   Norma · Entidad · verificado AAAA-MM-DD · enlace al documento exacto */
.legal-seal{
  background:var(--bg-2); border:1px solid var(--line-2);
  border-left:3px solid var(--tan);
}
.legal-seal .seal-kind::before{ content:"\00A7"; }

/* 2.2 · Sello de evidencia (EvidenceSourceSeal)
   Institución · Título · Año · territorio o muestra · verificado AAAA-MM-DD · fuente */
.evidence-seal{
  background:var(--surface); border:1px solid var(--line-2);
  border-top:1px dashed var(--tan-soft);
  border-left:4px double var(--ink-soft);
}
.evidence-seal .seal-kind{ color:var(--ink-soft); }
.evidence-seal .seal-kind::before{ content:"\25C8"; }
.evidence-seal .seal-muestra{ font-style:normal; color:var(--muted); }

/* Ambos sellos, dentro de una tarjeta, pierden el margen superior. */
.card > .legal-seal:first-child, .card > .evidence-seal:first-child,
.evidence-card .legal-seal, .evidence-card .evidence-seal{ margin-top:var(--sp-4); }

/* 2.3 · SourceTrace — desplegable de infraestructura, details/summary
   nativo: accesible y operable con teclado sin una línea de JavaScript.
   Es el componente que hace auditable el sello. */
.source-trace{
  margin-top:var(--sp-4); border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--surface);
}
.source-trace > summary{
  list-style:none; cursor:pointer; position:relative;
  padding:12px 46px 12px 15px; min-height:44px;
  font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--ink-soft);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-radius:var(--radius-sm);
}
.source-trace > summary::-webkit-details-marker{ display:none; }
.source-trace > summary::marker{ content:""; }
.source-trace > summary:hover{ background:var(--bg-2); }
.source-trace > summary:focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; }
.source-trace > summary::after{
  content:"+"; position:absolute; right:16px; top:50%;
  transform:translateY(-50%); font-family:var(--mono); font-size:1.25rem;
  line-height:1; color:var(--tan); transition:transform .25s var(--ease);
}
.source-trace[open] > summary::after{ content:"\2212"; }
.source-trace[open] > summary{ border-bottom:1px solid var(--line); }
.source-trace .trace-body{ padding:var(--sp-5) 15px; }
.source-trace .trace-grid{
  margin:0; display:grid; grid-template-columns:190px 1fr; gap:10px 18px;
}
@media (max-width:620px){ .source-trace .trace-grid{ grid-template-columns:1fr; gap:4px 0; } }
.source-trace .trace-grid dt{
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.source-trace .trace-grid dd{
  margin:0; font-size:.92rem; color:var(--ink); line-height:1.6;
}
@media (max-width:620px){ .source-trace .trace-grid dd{ margin-bottom:12px; } }
.source-trace .trace-url{
  font-family:var(--mono); font-size:.78rem; word-break:break-all;
  color:var(--ink); text-decoration:underline; text-underline-offset:2px;
}
.source-trace .trace-id{ font-family:var(--mono); font-size:.8rem; }
.source-trace .trace-limites{
  border-left:2px solid var(--tan); padding-left:14px; color:var(--muted-ink);
}
.source-trace .trace-foot{
  margin-top:var(--sp-5); padding-top:12px; border-top:1px dashed var(--line-2);
  font-size:.78rem; color:var(--muted);
}

/* En papel, la trazabilidad se imprime abierta: un sello que no se puede
   auditar en el impreso no es un sello. */
@media print{
  .source-trace{ break-inside:avoid; }
  .source-trace > summary::after{ content:""; }
  .source-trace .trace-body{ display:block !important; }
}

/* ---------------------------------------------------------------------
   3. INSIGNIAS: ESTADO EDITORIAL, NIVEL DE EVIDENCIA, APLICABILIDAD
   Tres ejes independientes. Cada uno con su palabra y su marca de forma.
   Los identificadores de clase corresponden uno a uno con los de
   datos/estados-editoriales.json, datos/niveles-evidencia.json y
   config/parametros-eh.json → evidencia.niveles_aplicabilidad.
--------------------------------------------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:.7rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  padding:4px 11px; border:1.5px solid currentColor; border-radius:100px;
  white-space:nowrap; line-height:1.5;
}
.badge::before{ font-family:var(--mono); font-size:.8rem; line-height:1; font-weight:400; }
.badge-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* 3.1 · Estado editorial (8). La marca de forma dice, sin color:
   ● publicable · ◐ visible con aviso · ○ no visible · ✕ retirado */
.badge-estado.es-verificado{ color:var(--st-vigente); }
.badge-estado.es-verificado::before{ content:"\25CF"; }
.badge-estado.es-verificado-limitaciones{ color:var(--st-vigente); border-style:dashed; }
.badge-estado.es-verificado-limitaciones::before{ content:"\25D0"; }
.badge-estado.es-en-revision{ color:var(--st-revisar); }
.badge-estado.es-en-revision::before{ content:"\25CB"; }
.badge-estado.es-requiere-actualizacion{ color:var(--st-revisar); }
.badge-estado.es-requiere-actualizacion::before{ content:"\26A0"; }
.badge-estado.es-sustituido{ color:var(--st-revisar); }
.badge-estado.es-sustituido::before{ content:"\21B1"; }
.badge-estado.es-retirado{ color:var(--st-derogada); }
.badge-estado.es-retirado::before{ content:"\2715"; }
.badge-estado.es-archivado{ color:var(--muted); }
.badge-estado.es-archivado::before{ content:"\25A1"; }
.badge-estado.es-borrador{ color:var(--muted); border-style:dotted; }
.badge-estado.es-borrador::before{ content:"\2026"; }

/* 3.2 · Nivel de evidencia (7). La marca de forma es una escala de
   cuadros llenos: ▰▰▰ robusta · ▰▰ moderada · ▰ exploratoria, y glifos
   propios para los cuatro niveles que no son escala de fuerza. */
.badge-nivel{ color:var(--tan); border-color:var(--tan-soft); }
.badge-nivel.nv-robusta::before{ content:"\25B0\25B0\25B0"; letter-spacing:-1px; }
.badge-nivel.nv-moderada::before{ content:"\25B0\25B0"; letter-spacing:-1px; }
.badge-nivel.nv-exploratoria::before{ content:"\25B0"; }
.badge-nivel.nv-opinion::before{ content:"\275D"; }
.badge-nivel.nv-caso::before{ content:"\2022"; }
.badge-nivel.nv-descriptivo::before{ content:"\2211"; }
.badge-nivel.nv-insuficiente{ color:var(--muted); border-style:dashed; }
.badge-nivel.nv-insuficiente::before{ content:"?"; }

/* Un nivel nunca se muestra suelto: viaja con su definición legible.
   .nivel-def es el texto obligatorio que lo acompaña. */
.nivel-def{
  display:block; font-size:.86rem; line-height:1.6; color:var(--muted-ink);
  margin-top:7px; max-width:62ch;
}
.nivel-lockup{ display:block; }
.nivel-lockup .badge{ margin-bottom:2px; }

/* 3.3 · Aplicabilidad al contexto colombiano. Dimensión independiente
   del nivel: un estudio impecable puede ser solo referencial aquí. */
.badge-aplica{ color:var(--ink-soft); border-color:var(--line-2); }
.badge-aplica.ap-colombia::before{ content:"\25C6"; }
.badge-aplica.ap-ajustes::before{ content:"\25C7"; }
.badge-aplica.ap-referencial::before{ content:"\2192"; }
.badge-aplica.ap-no-aplicable{ color:var(--muted); border-style:dashed; }
.badge-aplica.ap-no-aplicable::before{ content:"\2715"; }
.badge-aplica.ap-indeterminada{ color:var(--muted); border-style:dotted; }
.badge-aplica.ap-indeterminada::before{ content:"?"; }

/* 3.4 · Jerarquía de fuente A/B/C. La letra ES el contenido. */
.badge-fuente{ font-family:var(--mono); letter-spacing:.04em; color:var(--ink-soft); }
.badge-fuente.nf-a{ border-color:var(--ink-soft); }
.badge-fuente.nf-b{ border-style:dashed; }
.badge-fuente.nf-c{ border-style:dotted; color:var(--muted); }

/* 3.5 · Aviso público obligatorio de un registro que superó su revisión.
   Se muestra CON el aviso; nunca se esconde (regla ES5). */
.aviso-registro{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--bg-2); border:1px solid var(--line-2);
  border-left:3px solid var(--st-revisar);
  border-radius:var(--radius-sm); padding:12px 15px; margin-top:var(--sp-4);
  font-size:.9rem; line-height:1.6; color:var(--muted-ink);
}
.aviso-registro::before{
  content:"\26A0"; font-family:var(--mono); color:var(--st-revisar);
  font-size:1rem; line-height:1.6;
}
.aviso-registro strong{ color:var(--ink); }

/* ---------------------------------------------------------------------
   4. OBSERVATORIO DE EVIDENCIA
--------------------------------------------------------------------- */

/* 4.1 · Tarjeta de evidencia. Estructura fija: cabecera con insignias,
   hallazgo, límite declarado, sello y meta. El límite NO es opcional:
   el campo que_no_permite_concluir es lo que separa al Observatorio de
   repetir titulares, y por eso tiene lugar propio en la tarjeta. */
.evidence-card{
  display:flex; flex-direction:column; height:100%; gap:12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--sp-5);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.evidence-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2); }
.evidence-card .head{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.evidence-card h3{ font-size:var(--step-1); color:var(--ink); }
.evidence-card h3 a{ text-decoration:none; }
.evidence-card h3 a:hover{ text-decoration:underline; text-underline-offset:3px; }
.evidence-card .hallazgo{
  font-family:var(--serif); font-size:1.06rem; line-height:1.6; color:var(--ink-soft);
}
.evidence-card .limite{
  border-left:2px solid var(--tan); padding:2px 0 2px 14px;
  font-size:.9rem; line-height:1.6; color:var(--muted-ink);
}
.evidence-card .limite b{
  display:block; font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tan); margin-bottom:3px;
}
.evidence-card .evidence-meta{
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
  margin-top:auto; padding-top:var(--sp-4); border-top:1px solid var(--line);
  font-size:.78rem; color:var(--muted);
}
.evidence-card .evidence-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--line-2); }

/* 4.2 · Barra de estado de la colección. Hermana de .ledger-bar, con los
   mismos nombres internos .n y .l para no inventar un dialecto nuevo.
   Añade .upd (última actualización) y .nota (por qué el número es ese). */
.collection-bar{
  display:flex; flex-wrap:wrap; gap:var(--sp-5);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--sp-5);
}
.collection-bar > div{ min-width:150px; }
.collection-bar .n{ font-family:var(--serif); font-size:var(--step-2); line-height:1; display:block; }
.collection-bar .l{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.collection-bar .upd{ font-family:var(--mono); font-size:.8rem; color:var(--ink); }
.collection-bar .nota{
  flex-basis:100%; margin-top:var(--sp-2); padding-top:var(--sp-4);
  border-top:1px solid var(--line); font-size:.86rem; color:var(--muted-ink);
}

/* 4.3 · Chips de filtro. Son <button> reales: teclado, foco y aria-pressed
   nativos. La barra nace con el atributo hidden en el HTML y solo el JS la
   revela, para no dejar controles muertos cuando no hay JavaScript. */
.filter-bar{
  display:flex; flex-direction:column; gap:var(--sp-4);
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--sp-5);
}
.filter-group{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.filter-group__label{
  font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-right:4px;
  flex-basis:100%;
}
@media (min-width:700px){ .filter-group__label{ flex-basis:auto; min-width:132px; } }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:.86rem; font-weight:600; line-height:1.2;
  color:var(--ink-soft); background:var(--surface);
  border:1.5px solid var(--control-line); border-radius:100px;
  padding:8px 15px; min-height:38px;
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip::before{ content:"+"; font-family:var(--mono); font-size:.95rem; line-height:1; color:var(--tan); }
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.chip[aria-pressed="true"]::before{ content:"\2713"; color:var(--bg); }
.chip[disabled]{ opacity:.45; cursor:not-allowed; }
.chip .count{
  font-family:var(--mono); font-size:.76rem; font-weight:400; opacity:.75;
}
.filter-reset{
  align-self:flex-start; font-family:var(--sans); font-size:.84rem; font-weight:600;
  color:var(--ink); background:none; border:0; padding:6px 0; min-height:32px;
  text-decoration:underline; text-underline-offset:3px;
}
/* Región viva: anuncia cuántos registros quedan tras filtrar. Es texto,
   no un color que cambia. */
.filter-status{
  font-size:.86rem; color:var(--muted-ink); font-weight:600;
  border-top:1px solid var(--line); padding-top:var(--sp-4);
}

/* 4.4 · Tabla de datos. El desplazamiento va CONTENIDO en .table-scroll,
   que ya existe en esta hoja y ya tiene foco propio; aquí solo se añade la
   tabla y la cabecera ordenable. El envoltorio DEBE llevar
   role="region" + aria-label + tabindex="0" (ver COMPONENTES.md). */
.data-table{
  width:100%; border-collapse:collapse; font-size:.92rem; min-width:720px;
  background:var(--surface);
}
.data-table caption{
  caption-side:top; text-align:left; font-size:.86rem; color:var(--muted);
  padding-bottom:10px;
}
.data-table th, .data-table td{
  text-align:left; padding:11px 14px; border:1px solid var(--line); vertical-align:top;
}
.data-table thead th{
  background:var(--bg-2); font-family:var(--sans); font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
.data-table tbody tr:hover{ background:var(--bg-2); }
.data-table .col-num{ text-align:right; font-family:var(--mono); font-size:.86rem; white-space:nowrap; }
.data-table .col-fecha{ font-family:var(--mono); font-size:.84rem; white-space:nowrap; }
/* Cabecera ordenable: el estado se lee en aria-sort y se ve en la flecha. */
.data-table th button{
  display:inline-flex; align-items:center; gap:7px; background:none; border:0;
  font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
  padding:2px 0; min-height:28px; text-align:left;
}
.data-table th button::after{ content:"\2195"; font-family:var(--mono); color:var(--tan-soft); }
.data-table th[aria-sort="ascending"] button::after{ content:"\2191"; color:var(--tan); }
.data-table th[aria-sort="descending"] button::after{ content:"\2193"; color:var(--tan); }
.data-table th[aria-sort]:not([aria-sort="none"]){ background:var(--bg-3); }
.table-scroll[role="region"]{ border-radius:var(--radius); }

/* 4.5 · Estados VACÍO / CARGA / ERROR. Los tres dicen en palabras qué
   pasó y qué hacer. Ninguno finge contenido. */
.estado-vacio{
  border:1px dashed var(--line-2); border-radius:var(--radius-lg); padding:var(--sp-7);
  text-align:center; color:var(--muted-ink); background:var(--bg-2);
}
.estado-vacio h3{ font-size:var(--step-1); color:var(--ink); margin-bottom:10px; }
.estado-vacio p{ max-width:56ch; margin-inline:auto; }
.estado-vacio .fine{ margin-top:var(--sp-4); }

.estado-carga{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--sp-6); background:var(--surface); color:var(--muted-ink);
}
.estado-carga p{ font-size:.9rem; }
.skeleton{
  display:block; height:14px; border-radius:5px; background:var(--bg-2);
  border:1px solid var(--line); margin-top:12px; overflow:hidden; position:relative;
}
.skeleton.w-70{ width:70%; } .skeleton.w-45{ width:45%; } .skeleton.tall{ height:70px; }
.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--bg-3), transparent);
  animation:efh-sk 1.35s var(--ease) infinite;
}
@keyframes efh-sk{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){ .skeleton::after{ animation:none; } }

.estado-error{
  border:1px solid var(--line-2); border-left:3px solid var(--st-derogada);
  border-radius:var(--radius); background:var(--bg-2);
  padding:var(--sp-5); color:var(--muted-ink);
}
.estado-error h3{
  font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--st-derogada); margin-bottom:8px;
}
.estado-error h3::before{ content:"\2715  "; font-family:var(--mono); }
.estado-error p{ font-size:.92rem; line-height:1.65; }
.estado-error a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

/* ---------------------------------------------------------------------
   5. BRÚJULA DE DECISIÓN
   Cuestionario paso a paso. Sin JavaScript el lector ve TODOS los pasos
   seguidos y puede leerlos: el motor solo los agrupa y calcula. Ninguna
   respuesta sale del navegador ni entra en una URL.
--------------------------------------------------------------------- */
.quiz{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--sp-6);
}
@media (max-width:620px){ .quiz{ padding:var(--sp-5); } }
.quiz-head{ display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:baseline; justify-content:space-between; }
.quiz-head h2{ font-size:var(--step-2); }
.quiz-paso-num{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; color:var(--muted);
  white-space:nowrap;
}

/* Barra de progreso. role="progressbar" + aria-valuenow en el HTML, y el
   texto de "paso N de M" al lado: el porcentaje nunca vive solo en la
   anchura de una barra de color. */
.quiz-progress{
  height:8px; border-radius:100px; background:var(--bg-2);
  border:1px solid var(--line); overflow:hidden; margin-top:var(--sp-4);
}
.quiz-progress .bar{
  display:block; height:100%; width:0%; background:var(--tan);
  transition:width .35s var(--ease);
}
@media (prefers-reduced-motion: reduce){ .quiz-progress .bar{ transition:none; } }
.quiz-progress-label{ font-size:.8rem; color:var(--muted); margin-top:8px; }

.quiz-step{ margin-top:var(--sp-6); }
.quiz-step > legend, .quiz-step .pregunta{
  font-family:var(--serif); font-size:var(--step-1); line-height:1.35;
  color:var(--ink); padding:0; margin-bottom:var(--sp-4);
}
.quiz-ayuda{ font-size:.88rem; color:var(--muted); margin-bottom:var(--sp-4); }

/* Grupos de opciones: <fieldset> + <legend> + <input> reales. El input no
   se oculta con display:none (perdería el foco): se hace transparente y
   se dibuja encima, y el estado :checked / :focus-visible pinta la caja. */
.opt-group{ border:0; padding:0; margin:0; display:grid; gap:10px; }
.opt{
  display:grid; grid-template-columns:26px 1fr; gap:14px; align-items:start;
  border:1.5px solid var(--line-2); border-radius:var(--radius);
  padding:15px 17px; background:var(--surface); cursor:pointer;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.opt:hover{ border-color:var(--ink-soft); background:var(--bg-2); }
.opt input{ width:22px; height:22px; margin:1px 0 0; accent-color:var(--ink); cursor:pointer; }
.opt .t{ font-weight:600; color:var(--ink); line-height:1.45; }
.opt .d{ display:block; font-size:.88rem; color:var(--muted-ink); font-weight:400; margin-top:4px; }
.opt:has(input:checked){ border-color:var(--ink); background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--ink); }
.opt:has(input:focus-visible){ outline:2.5px solid var(--accent); outline-offset:2px; }
/* Respaldo para navegadores sin :has() — la marca del radio ya indica el
   estado; esta clase la añade el motor del cuestionario. */
.opt.is-checked{ border-color:var(--ink); background:var(--bg-2); }

.quiz-nav{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line);
}
.quiz-nav .spacer{ margin-left:auto; }
.quiz-aviso{
  margin-top:var(--sp-5); font-size:.84rem; color:var(--muted); line-height:1.6;
}

/* 5.2 · Ficha de resultado: "Mapa Inicial de Decisión".
   Pensada para imprimirse y llevársela. */
.decision-map{
  background:var(--surface); border:1px solid var(--line-2);
  border-top:4px solid var(--ink);
  border-radius:var(--radius-lg); padding:var(--sp-6);
}
.decision-map .map-head{
  display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:space-between;
  align-items:flex-start; padding-bottom:var(--sp-5); border-bottom:1px solid var(--line);
}
.decision-map .map-title{ font-family:var(--serif); font-size:var(--step-2); line-height:1.2; }
.decision-map .map-fecha{ font-family:var(--mono); font-size:.78rem; color:var(--muted); white-space:nowrap; }
.decision-map .map-block{ margin-top:var(--sp-5); }
.decision-map .map-block > h3{
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--tan); margin-bottom:9px;
}
.decision-map .map-block > p{ color:var(--ink); line-height:1.7; }
.map-list{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.map-list li{
  display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start;
  font-size:.96rem; line-height:1.6; color:var(--ink);
}
.map-list li::before{
  content:"\2192"; font-family:var(--mono); color:var(--tan); line-height:1.6;
}
.map-list.preguntas li::before{ content:"?"; }
.map-list.fuentes li::before{ content:"\00A7"; }
.map-deslinde{
  margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px dashed var(--line-2);
  font-size:.86rem; line-height:1.65; color:var(--muted-ink);
}
.map-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--sp-6); }

/* 5.3 · Tarjeta de ruta de la Brújula (las tres rutas declaradas). */
.ruta-card{
  display:flex; flex-direction:column; gap:11px; height:100%;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--tan);
  border-radius:var(--radius-lg); padding:var(--sp-6);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ruta-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.ruta-card h3{ font-size:var(--step-1); color:var(--ink); }
.ruta-card .para-quien{
  font-family:var(--serif); font-style:italic; color:var(--tan); font-size:.98rem;
}
.ruta-card .btn-link{ margin-top:auto; padding-top:var(--sp-4); }

/* 5.4 · Impresión del Mapa. Se imprime el mapa y nada más. */
@media print{
  .site-header, .site-footer, .cookie-banner, .m-menu, .skip,
  .quiz, .filter-bar, .map-actions, .bridge{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11.5pt; }
  .decision-map{
    border:1px solid #444; border-top-width:3px; border-radius:0;
    padding:0; box-shadow:none; break-inside:avoid;
  }
  .decision-map .map-head{ padding:0 0 12pt; }
  .decision-map .map-block > h3{ color:#000; }
  .map-list li::before{ color:#000; }
  .decision-map a[href^="http"]::after{
    content:" (" attr(href) ")"; font-family:monospace; font-size:8.5pt; word-break:break-all;
  }
  a{ text-decoration:underline; }
}

/* ---------------------------------------------------------------------
   6. BLOQUE DE LAS TRES CAPAS (portada)
   Vigencia · Evidencia · Decisión, cada una con su pregunta rectora.
   El orden importa y es el orden del documento: primero qué rige,
   después qué muestra la evidencia, y solo entonces qué decisión cabe.
--------------------------------------------------------------------- */
.triada{ display:grid; gap:var(--sp-5); grid-template-columns:repeat(3,1fr); }
@media (max-width:940px){ .triada{ grid-template-columns:1fr; } }
.capa{
  display:flex; flex-direction:column; gap:12px; height:100%;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--sp-6);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.capa:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2); }
.capa .num{
  font-family:var(--serif); font-style:italic; color:var(--tan);
  font-size:var(--step-2); line-height:1;
}
.capa h3{ font-size:var(--step-1); color:var(--ink); }
.capa .pregunta{
  font-family:var(--serif); font-size:1.06rem; line-height:1.55; color:var(--ink-soft);
  border-left:2px solid var(--tan); padding-left:14px;
}
.capa .modulo{
  font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.capa .estado-capa{
  font-family:var(--mono); font-size:.76rem; color:var(--muted);
  margin-top:auto; padding-top:var(--sp-4); border-top:1px solid var(--line);
}
.capa .btn-link{ padding-top:6px; }
/* Marca de forma por capa: la barra superior cambia de trazo, no solo de
   color, y el número ordinal está escrito. */
.capa-vigencia{ border-top:3px solid var(--ink); }
.capa-evidencia{ border-top:3px double var(--ink-soft); }
.capa-decision{ border-top:3px dashed var(--tan); }
.section.dark .capa{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
.section.dark .capa h3{ color:var(--bg); }
.section.dark .capa .pregunta{ color:#C3CCD9; }

/* =====================================================================
   =====================================================================
   AMPLIACIÓN v1.2 — EVIDENCIA JURÍDICA
   Buscador · Verificador de citas · Matriz de autoridades · Documento
   jurídico · Panel de la Brújula · Planes · Investigación
   Añadido el 2026-07-28. Bloque ESTRICTAMENTE ADITIVO: no borra, no
   redefine y no reordena ninguna regla anterior. Todo lo que sigue
   reutiliza los tokens y las clases que ya existen (.badge, .chip,
   .filter-bar, .data-table, .table-scroll, .source-trace, .field,
   .estado-vacio/.estado-carga/.estado-error) y solo añade lo que no
   estaba.

   LO QUE ESTE BLOQUE SIGUE CUMPLIENDO
   1. Cero recursos externos y cero @import.
   2. --accent sigue siendo exclusivo de .btn-cta y del anillo de foco.
      NINGUNA clase de este bloque usa terracota: ni las seis
      clasificaciones del verificador, ni el resaltado de búsqueda, ni
      las insignias de plan.
   3. Ningún estado, clasificación o nivel depende del color: los seis
      resultados del verificador llevan su palabra escrita y una marca
      de forma propia, igual que las insignias de la v1.1.
   4. Lo que no consta se muestra con .no-verificado y la palabra
      «No verificado». Nunca se deja en blanco.
   ===================================================================== */

/* ---------------------------------------------------------------------
   6bis.1 · BUSCADOR DEL CORPUS VERIFICADO
   Un resultado SIEMPRE trae su procedencia; por eso la tarjeta reserva
   sitio para ella y no depende de que quien escriba se acuerde.
--------------------------------------------------------------------- */
.search-panel{
  display:flex; flex-direction:column; gap:var(--sp-5);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--sp-6);
}
@media (max-width:620px){ .search-panel{ padding:var(--sp-5); } }
.search-form{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.search-field{ flex:1 1 320px; margin-top:0; }
.search-field input{ min-height:52px; }
.search-submit{ flex:0 0 auto; }
.search-hint{ font-size:.86rem; color:var(--muted); flex-basis:100%; }

.search-toolbar{
  display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center;
  justify-content:space-between; border-top:1px solid var(--line);
  padding-top:var(--sp-4);
}
.search-count{ font-size:.88rem; font-weight:600; color:var(--muted-ink); }
.search-sort{ display:flex; align-items:center; gap:9px; font-size:.84rem; color:var(--muted); }
.search-sort select{
  font-family:var(--sans); font-size:.88rem; padding:8px 12px; min-height:38px;
  border:1.5px solid var(--control-line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink);
}
/* Nota de alcance del corpus. Va SIEMPRE con el buscador: un buscador
   que no dice qué no cubre insinúa que lo cubre todo. */
.corpus-nota{
  background:var(--bg-2); border:1px solid var(--line-2);
  border-left:3px solid var(--tan); border-radius:var(--radius-sm);
  padding:12px 15px; font-size:.88rem; line-height:1.6; color:var(--muted-ink);
}
.corpus-nota b{ color:var(--ink); }

.search-results{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4); }
.search-result{
  display:flex; flex-direction:column; gap:9px;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--line-2);
  border-radius:var(--radius); padding:var(--sp-5);
}
.search-result[hidden]{ display:none; }
/* La clase de registro se dice con la palabra y se distingue con la
   marca de forma del borde, igual que los dos sellos de la v1.1. */
.result-kind{
  font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.result-kind::before{ font-family:var(--mono); margin-right:7px; }
.result-kind.k-norma::before{ content:"\00A7"; }
.result-kind.k-evidencia::before{ content:"\25C8"; }
.search-result:has(.k-norma){ border-left-style:solid; border-left-color:var(--ink-soft); }
.search-result:has(.k-evidencia){ border-left-style:double; border-left-width:4px; }
.result-title{ font-family:var(--serif); font-size:var(--step-1); line-height:1.25; color:var(--ink); }
.result-title a:hover{ text-decoration:underline; text-underline-offset:3px; }
.result-sub{ font-size:.9rem; color:var(--muted-ink); }
.result-snippet{ font-size:.94rem; line-height:1.65; color:var(--muted-ink); }
.result-snippet b{
  font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tan); display:block; margin-bottom:3px;
}
/* Resaltado: subrayado grueso y fondo neutro. NO usa el acento, que es
   exclusivo del CTA, y no depende del color para leerse. */
.result-snippet mark, .result-title mark{
  background:var(--bg-3); color:inherit; padding:0 2px;
  border-bottom:2px solid var(--tan); border-radius:2px;
}
.result-proc{ margin-top:0; }
/* Aviso por resultado: no publicable, vencido, modificado. Se muestra,
   no se esconde. */
.result-flag{
  font-size:.86rem; line-height:1.55; color:var(--muted-ink);
  border-left:3px solid var(--st-derogada); background:var(--bg-2);
  border-radius:var(--radius-sm); padding:9px 13px;
}
.result-flag b{ color:var(--ink); }
.result-flag.aviso{ border-left-color:var(--st-revisar); }
.result-flag::before{ content:"\26A0  "; font-family:var(--mono); color:var(--st-revisar); }

/* El rótulo de lo que no consta. Es una clase, no una frase suelta, para
   que sea imposible escribir otra cosa en su lugar. */
.no-verificado{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
  border:1.5px dotted var(--control-line); border-radius:100px; padding:1px 9px;
  white-space:nowrap;
}
.no-verificado::before{ content:"?"; font-family:var(--mono); font-weight:400; }
.result-proc dd.mono, .doc-card .mono{ font-family:var(--mono); font-size:.86rem; }

/* ---------------------------------------------------------------------
   6bis.2 · LAS SEIS CLASIFICACIONES DEL VERIFICADOR
   Cada una con su palabra escrita y su marca de forma. Dos de las seis
   BLOQUEAN publicación y llevan además una línea que lo dice.
   Ninguna afirma corrección jurídica: eso es lenguaje prohibido.
--------------------------------------------------------------------- */
.badge-verif{ font-family:var(--sans); }
.badge-verif.vf-localizada{ color:var(--st-vigente); }
.badge-verif.vf-localizada::before{ content:"\25CF"; }
.badge-verif.vf-parcial{ color:var(--st-vigente); border-style:dashed; }
.badge-verif.vf-parcial::before{ content:"\25D0"; }
.badge-verif.vf-no-verificable{ color:var(--st-revisar); border-style:dotted; }
.badge-verif.vf-no-verificable::before{ content:"\25CB"; }
.badge-verif.vf-no-localizada{ color:var(--st-derogada); }
.badge-verif.vf-no-localizada::before{ content:"\2715"; }
.badge-verif.vf-no-aplicable{ color:var(--tan); }
.badge-verif.vf-no-aplicable::before{ content:"\21B1"; }
.badge-verif.vf-no-pertinente{ color:var(--tan); border-style:dashed; }
.badge-verif.vf-no-pertinente::before{ content:"\2260"; }

.verif-panel{
  display:flex; flex-direction:column; gap:var(--sp-4);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--sp-6);
}
/* Aviso obligatorio: lo que produce la máquina es preliminar. */
.verif-preliminar{
  background:var(--bg-2); border:1px solid var(--line-2);
  border-left:3px solid var(--tan); border-radius:var(--radius-sm);
  padding:12px 15px; font-size:.88rem; line-height:1.6; color:var(--muted-ink);
}
.verif-preliminar b{ color:var(--ink); }
.verif-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4); }
.verif-item{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--sp-4) var(--sp-5); background:var(--surface);
  display:flex; flex-direction:column; gap:8px;
}
.verif-cita{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; font-size:.98rem; }
.verif-cita b{ font-family:var(--mono); font-size:.92rem; color:var(--ink); }
.verif-motivo{ font-size:.92rem; line-height:1.65; color:var(--muted-ink); }
.verif-bloqueo{
  font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.06em;
  color:var(--st-derogada); border-left:3px solid var(--st-derogada);
  background:var(--bg-2); border-radius:var(--radius-sm); padding:8px 12px; line-height:1.5;
}
.verif-bloqueo::before{ content:"\2715  "; font-family:var(--mono); }
.verif-deslinde{
  font-size:.88rem; line-height:1.6; color:var(--muted-ink);
  border-top:1px solid var(--line); padding-top:var(--sp-4);
}

/* ---------------------------------------------------------------------
   6bis.3 · TARJETA DE DOCUMENTO JURÍDICO RECUPERADO
   Es un documento recuperado, NO una Ficha de Vigencia. Por eso la
   tarjeta no puede llevar el sello de la marca y sí lleva, siempre, el
   aviso de que no ha pasado por revisión humana.
--------------------------------------------------------------------- */
.doc-card{
  display:flex; flex-direction:column; gap:11px;
  background:var(--bg-2); border:1px dashed var(--line-2);
  border-radius:var(--radius-lg); padding:var(--sp-5);
}
.doc-card .head{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.doc-id{ font-family:var(--mono); font-size:.8rem; color:var(--muted); letter-spacing:.02em; }
.doc-entidad{ font-family:var(--sans); font-size:.92rem; font-weight:600; color:var(--ink); }
.doc-jurisdiccion{ font-size:.82rem; color:var(--muted); }
.doc-fechas{ display:flex; flex-wrap:wrap; gap:6px 16px; font-family:var(--mono); font-size:.8rem; color:var(--muted-ink); }
/* El fragmento se conserva literal: la ley obliga a conformarse
   puntualmente con la edición oficial. Ni se resume ni se reescribe. */
.doc-fragmento{
  font-family:var(--serif); font-size:1rem; line-height:1.6; color:var(--ink-soft);
  border-left:2px solid var(--tan); padding:4px 0 4px 14px; white-space:pre-wrap;
}
.doc-ubicacion{ font-family:var(--mono); font-size:.78rem; color:var(--muted); }
.doc-hash{ font-family:var(--mono); font-size:.72rem; color:var(--muted); word-break:break-all; }
.doc-aviso{
  font-size:.86rem; line-height:1.55; color:var(--muted-ink);
  border-top:1px dashed var(--line-2); padding-top:11px;
}
.doc-aviso b{ color:var(--ink); }

/* ---------------------------------------------------------------------
   6bis.4 · MATRIZ DE AUTORIDADES
   Hereda .data-table y su envoltorio .table-scroll: mismo desplazamiento
   contenido, mismo orden por cabecera, mismo aria-sort. Aquí solo se
   añade lo propio de la comparación de fuentes.
--------------------------------------------------------------------- */
.matrix{ display:flex; flex-direction:column; gap:var(--sp-4); }
.matrix-table th[scope="row"]{
  font-family:var(--sans); font-size:.88rem; font-weight:600; color:var(--ink);
  background:var(--bg-2); text-align:left; vertical-align:top; min-width:180px;
}
.matrix-table .matrix-aspecto{ min-width:180px; }
.matrix-fuente{ display:block; }
/* La fuerza de la fuente va escrita: es lo que impide leer un concepto
   como si obligara. */
.matrix-fuerza{
  display:block; font-family:var(--sans); font-size:.66rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  margin-top:3px; white-space:normal;
}
.matrix-cell{ font-size:.9rem; line-height:1.6; vertical-align:top; }
/* Una inferencia del editor NUNCA se confunde con una cita. */
.matrix-inferencia{
  display:inline-block; font-family:var(--sans); font-size:.64rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tan);
  border:1.5px dashed var(--tan-soft); border-radius:100px; padding:1px 8px; margin-left:6px;
}
.matrix-inferencia::before{ content:"\2248 "; font-family:var(--mono); }
.matrix-discrepancia{
  background:var(--bg-2); border:1px solid var(--line-2);
  border-left:3px solid var(--st-revisar); border-radius:var(--radius-sm);
  padding:12px 15px; font-size:.9rem; line-height:1.6; color:var(--muted-ink);
}
.matrix-discrepancia b{ color:var(--ink); }
.matrix-limite{
  border-left:2px solid var(--tan); padding:2px 0 2px 14px;
  font-size:.9rem; line-height:1.6; color:var(--muted-ink);
}
.matrix-limite b{
  display:block; font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tan); margin-bottom:3px;
}
.matrix-nota{ font-size:.84rem; line-height:1.6; color:var(--muted); }
.matrix-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* Editor de matriz. Controles reales, no adornos: si el JavaScript no
   corre, este bloque nace con hidden y no aparece. */
.matrix-editor{
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.matrix-editor[hidden]{ display:none; }
.editor-grid{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(2,1fr); }
@media (max-width:760px){ .editor-grid{ grid-template-columns:1fr; } }
.editor-field{ display:flex; flex-direction:column; gap:7px; }
.editor-field label{ font-size:.8rem; font-weight:600; color:var(--ink-soft); }
.editor-field input, .editor-field select, .editor-field textarea{
  font-family:var(--sans); font-size:.95rem; padding:11px 13px;
  border:1.5px solid var(--control-line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); width:100%;
}
.editor-field textarea{ min-height:96px; resize:vertical; }
.editor-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.editor-hint{ font-size:.84rem; color:var(--muted); line-height:1.6; }

/* ---------------------------------------------------------------------
   6bis.5 · PANEL DE RESULTADOS DE LA BRÚJULA (los seis bloques)
   Qué encontramos · qué puede significar · qué falta por comprobar ·
   qué riesgos · próximo paso · cuándo acudir a un profesional.
   El orden es el orden del documento y NO se altera: el último bloque
   es el deslinde y nunca se sube ni se esconde.
--------------------------------------------------------------------- */
.brujula-panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--sp-6);
  display:flex; flex-direction:column; gap:var(--sp-5);
}
.brujula-panel[hidden]{ display:none; }
.bp-head{ display:flex; flex-wrap:wrap; gap:12px; align-items:baseline; justify-content:space-between;
  border-bottom:1px solid var(--line); padding-bottom:var(--sp-4); }
.bp-head .map-title{ font-family:var(--serif); font-size:var(--step-2); }
.bp-block{ border-left:3px solid var(--line-2); padding:2px 0 2px 16px; display:flex; flex-direction:column; gap:7px; }
.bp-title{
  font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.bp-title::before{ font-family:var(--mono); margin-right:8px; color:var(--tan); }
.bp-list{ margin:0; padding-left:18px; font-size:.94rem; line-height:1.7; color:var(--muted-ink); }
.bp-list li{ margin-bottom:6px; }
/* Marca de forma por bloque: cada uno con su glifo y su trazo. */
.bp-encontramos{ border-left-style:solid; border-left-color:var(--ink-soft); }
.bp-encontramos .bp-title::before{ content:"\00A7"; }
.bp-significa{ border-left-style:double; border-left-width:4px; }
.bp-significa .bp-title::before{ content:"\25C8"; }
.bp-falta{ border-left-style:dashed; border-left-color:var(--st-revisar); }
.bp-falta .bp-title::before{ content:"\25CB"; }
.bp-riesgos{ border-left-style:solid; border-left-color:var(--st-derogada); }
.bp-riesgos .bp-title::before{ content:"\26A0"; }
.bp-siguiente{ border-left-style:solid; border-left-color:var(--tan); }
.bp-siguiente .bp-title::before{ content:"\2192"; }
.bp-profesional{ border-left-style:dotted; border-left-color:var(--tan-soft); background:var(--bg-2);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:12px 15px 12px 16px; }
.bp-profesional .bp-title::before{ content:"\2691"; }
.bp-profesional p{ font-size:.9rem; line-height:1.65; color:var(--muted-ink); }

/* ---------------------------------------------------------------------
   6bis.6 · PLANES Y LÍMITES
   Un plan propuesto NO se pinta como disponible. El distintivo dice en
   qué estado está, y la nota de exigibilidad —que un límite en el
   navegador es autolimitación y no barrera— es parte del componente.
--------------------------------------------------------------------- */
.plans-table th[scope="row"]{ background:var(--bg-2); text-align:left; vertical-align:top; }
.plan-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 10px; border:1.5px solid currentColor;
  border-radius:100px; white-space:nowrap; line-height:1.5;
}
.plan-badge::before{ font-family:var(--mono); font-size:.78rem; font-weight:400; }
.plan-badge.pb-propuesto{ color:var(--st-revisar); border-style:dashed; }
.plan-badge.pb-propuesto::before{ content:"\25CB"; }
.plan-badge.pb-vigente{ color:var(--st-vigente); }
.plan-badge.pb-vigente::before{ content:"\25CF"; }
.plan-badge.pb-no-disponible{ color:var(--muted); border-style:dotted; }
.plan-badge.pb-no-disponible::before{ content:"\2715"; }
.plan-precio{ font-family:var(--serif); font-size:var(--step-2); line-height:1; color:var(--ink); }
.plan-periodo{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.plan-incluye, .plan-no-incluye{ margin:0; padding-left:18px; font-size:.9rem; line-height:1.65; }
.plan-incluye li::marker{ content:"\2713  "; color:var(--tan); }
.plan-no-incluye{ color:var(--muted-ink); }
.plan-no-incluye li::marker{ content:"\2715  "; color:var(--muted); }
.plan-conflicto{
  font-size:.86rem; line-height:1.6; color:var(--muted-ink);
  border-left:3px solid var(--st-revisar); background:var(--bg-2);
  border-radius:var(--radius-sm); padding:9px 13px;
}
.plan-nota{
  font-size:.86rem; line-height:1.6; color:var(--muted-ink);
  border-top:1px solid var(--line); padding-top:var(--sp-4);
}
.limite-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:.8rem; color:var(--ink-soft);
  border:1.5px solid var(--control-line); border-radius:var(--radius-sm);
  padding:3px 10px; background:var(--surface);
}
.limite-chip.lc-sin-definir{ color:var(--muted); border-style:dotted; }
.limite-chip.lc-sin-definir::after{ content:"sin definir"; font-family:var(--sans); font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase; }

/* ---------------------------------------------------------------------
   6bis.7 · EXPEDIENTE DE INVESTIGACIÓN Y ALMACENAMIENTO LOCAL
   Todo lo que el lector guarda vive en su navegador. El aviso y el botón
   de borrado son parte del componente, no un añadido opcional.
--------------------------------------------------------------------- */
.dossier{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.dossier-head{ display:flex; flex-wrap:wrap; gap:12px; align-items:baseline; justify-content:space-between; }
.dossier-head h3{ font-size:var(--step-1); color:var(--ink); }
.dossier-meta{ display:flex; flex-wrap:wrap; gap:6px 16px; font-family:var(--mono); font-size:.78rem; color:var(--muted); }
.dossier-item{
  border-left:2px solid var(--line-2); padding:4px 0 4px 14px;
  display:flex; flex-direction:column; gap:5px;
}
.dossier-tipo{
  font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tan);
}
.dossier-nota{ font-size:.92rem; line-height:1.65; color:var(--muted-ink); }
.dossier-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  border-top:1px solid var(--line); padding-top:var(--sp-4); }

.local-aviso{
  background:var(--bg-2); border:1px solid var(--line-2);
  border-left:3px solid var(--ink-soft); border-radius:var(--radius-sm);
  padding:13px 16px; font-size:.9rem; line-height:1.6; color:var(--muted-ink);
  display:flex; flex-direction:column; gap:10px;
}
.local-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---------------------------------------------------------------------
   6bis.8 · FUNCIÓN QUE EXIGE SERVIDOR Y NO ESTÁ DISPONIBLE
   No se esconde y no se simula: se dice qué falta y qué acción externa
   la activaría. Es el componente de la degradación honesta.
--------------------------------------------------------------------- */
.fn-no-disponible{
  border:1px dashed var(--line-2); border-left:3px solid var(--muted);
  border-radius:var(--radius); background:var(--bg-2);
  padding:var(--sp-5); color:var(--muted-ink);
  display:flex; flex-direction:column; gap:9px;
}
.fn-no-disponible h3{
  font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink);
}
.fn-no-disponible h3::before{ content:"\25CB  "; font-family:var(--mono); color:var(--muted); }
.fnd-motivo{ font-size:.92rem; line-height:1.65; }
.fnd-accion{ font-size:.9rem; line-height:1.65; border-top:1px solid var(--line); padding-top:11px; }
.fnd-accion b{ color:var(--ink); }
.fn-no-disponible code{ font-family:var(--mono); font-size:.82rem; background:var(--surface);
  border:1px solid var(--line); border-radius:4px; padding:1px 6px; }

/* Complemento de los estados heredados: la línea de acción del error.
   Un error que no dice qué hacer es una pared. */
.estado-error .accion{
  font-size:.9rem; line-height:1.6; color:var(--ink);
  border-top:1px solid var(--line-2); padding-top:11px; margin-top:11px;
}

/* Impresión de los módulos nuevos: se van los controles, queda el
   contenido y su procedencia. */
@media print{
  .search-form, .search-toolbar, .filter-bar, .matrix-editor,
  .matrix-actions, .dossier-actions, .local-aviso, .editor-actions{ display:none !important; }
  .search-result, .verif-item, .doc-card, .brujula-panel{ break-inside:avoid; border-color:#999; }
  .result-snippet mark, .result-title mark{ background:none; border-bottom:2px solid #666; }
}

/* ---------------------------------------------------------------------
   7. MODO OSCURO (prefers-color-scheme)
   Se remapean SUPERFICIES y TEXTO. No se remapea el acento: --accent
   sigue siendo #A6462E en los dos esquemas, sigue siendo exclusivo de
   .btn-cta y del anillo de foco, y sobre él el blanco mantiene 5,94:1.
   Los componentes que usan --ink como FONDO (pie, .section.dark,
   .cookie-banner, .monogram, .tag.solid, .skip) se reanclan a una tinta
   más profunda para no invertirse.
--------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root{
    /* Superficies derivadas de --ink #1B2537, no matices nuevos */
    --bg:        #131A28;
    --bg-2:      #1A2333;
    --bg-3:      #232E42;
    --surface:   #182131;
    --line:      #2C3648;
    --line-2:    #3C4759;

    /* Texto: la tinta pasa a papel */
    --ink:       #E8ECF3;   /* 14,7:1 sobre --bg */
    --ink-soft:  #C7D0DE;
    --muted:     #9AA6B8;   /* 7,08:1 */
    --muted-ink: #B9C3D2;

    /* Tierra editorial aclarada para conservar el contraste */
    --tan:       #C0B49A;   /* 8,44:1 */
    --tan-soft:  #8E836E;

    /* El acento NO cambia. Solo el tinte del anillo, que sobre papel
       oscuro debe ser oscuro para seguir viéndose. */
    --accent-tint:#2A1712;

    /* Estados: la palabra sigue mandando; el color se aclara para AA */
    --st-vigente:  #E8ECF3;
    --st-revisar:  #E0A83C;
    --st-derogada: #E88C6E;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --shadow:    0 8px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.35);
  }

  /* Componentes que usaban --ink como fondo: se reanclan, no se invierten */
  .section.dark, .site-footer, .cookie-banner{ background:#0C1220; color:var(--ink); }
  .section.dark{ border-block:1px solid var(--line); }
  .skip{ background:var(--ink); color:#0C1220; }
  .monogram{ background:var(--ink); color:#0C1220; }
  .tag.solid{ background:var(--ink); color:#0C1220; border-color:var(--ink); }
  .chip[aria-pressed="true"]{ background:var(--ink); color:#0C1220; border-color:var(--ink); }
  .chip[aria-pressed="true"]::before{ color:#0C1220; }
  ::selection{ background:var(--ink); color:#0C1220; }
  .site-footer .brand b{ color:var(--ink); }
  .site-footer .monogram{ background:var(--ink); color:#0C1220; }
  .section.dark .card, .section.dark .capa{ background:rgba(255,255,255,.05); }
  .section.dark .lead, .section.dark .card p, .section.dark .capa .pregunta{ color:var(--muted-ink); }
  .section.dark .btn-ghost, .cookie-banner .btn-ghost{ color:var(--ink); border-color:rgba(232,236,243,.5); }

  /* Placeholder tipográfico: la trama clara sobre papel oscuro deslumbra */
  .ph{ background:repeating-linear-gradient(135deg, var(--bg-2) 0 14px, var(--bg-3) 14px 28px); }
  .ph .ph-note{ background:rgba(19,26,40,.78); }

  /* La cabecera translúcida necesita más cuerpo sobre fondo oscuro */
  .site-header{ background:color-mix(in srgb, var(--bg) 92%, transparent); }

  /* Imágenes y sellos: nada que corregir salvo el brillo de las fotos */
  .photo{ filter:brightness(.92); }
}

/* ---------------------------------------------------------------------
   7bis. MODO OSCURO — AJUSTES DE LA AMPLIACIÓN v1.2
   Casi nada que corregir: los componentes nuevos se construyeron sobre
   los tokens que el bloque anterior ya remapea. Aquí solo van las tres
   superficies que sobre papel oscuro necesitan cuerpo propio.
--------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  /* El resaltado con fondo claro deslumbra: se conserva el subrayado,
     que es la marca que no depende del color. */
  .result-snippet mark, .result-title mark{
    background:rgba(192,180,154,.16); border-bottom-color:var(--tan);
  }
  .doc-card{ background:rgba(255,255,255,.03); }
  .fn-no-disponible, .local-aviso, .verif-preliminar, .corpus-nota{ background:rgba(255,255,255,.04); }
  .search-result, .verif-item, .dossier, .brujula-panel, .search-panel{ background:var(--surface); }
  .search-sort select, .editor-field input, .editor-field select, .editor-field textarea{
    background:var(--surface); color:var(--ink);
  }
}

/* Modo oscuro + alto contraste forzado: el sistema manda sobre todo esto */
@media (forced-colors: active){
  .badge, .estado, .chip{ border-color:ButtonBorder; }
  .chip[aria-pressed="true"]{ background:Highlight; color:HighlightText; }
  .quiz-progress .bar{ background:Highlight; }
  .btn-cta{ border-color:ButtonBorder; }
  .source-trace > summary::after{ color:CanvasText; }
  /* Ampliación v1.2: insignias, distintivos y marcas de la aplicación */
  .badge-verif, .plan-badge, .no-verificado, .limite-chip, .matrix-inferencia{ border-color:ButtonBorder; }
  .result-snippet mark, .result-title mark{ background:Highlight; color:HighlightText; }
  .search-result, .verif-item, .doc-card, .fn-no-disponible{ border-color:CanvasText; }
}