/* ═══════════════════════════════════════════════════════════════════════════
   Documentación de LexCopilot
   ───────────────────────────────────────────────────────────────────────────
   Hoja independiente de la aplicación: la comparte el aire de familia (Spectral
   para los títulos, Manrope para el texto, el violeta de la marca), no el
   código. Así la documentación se puede rediseñar sin tocar el producto.

   Tres estados de tema, no dos: `data-tema="claro"` y `data-tema="oscuro"` son
   elecciones explícitas, y `auto` —el valor de partida— sigue al sistema.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Papel apenas cálido: el blanco puro cansa en textos largos. */
  --papel:        #FBFAF8;
  --papel-alto:   #FFFFFF;
  --papel-hundido:#F3F1EE;

  /* Tinta con sesgo violeta, de la familia del acento. */
  --tinta:        #1A1830;
  --tinta-media:  #4A476A;
  --tinta-suave:  #6E6B85;

  --linea:        rgba(26, 24, 48, 0.10);
  --linea-fuerte: rgba(26, 24, 48, 0.18);

  --acento:       #6B4CF6;
  --acento-suave: rgba(107, 76, 246, 0.10);
  --menta:        #1E9E76;
  --ambar:        #B4791B;
  --ambar-suave:  rgba(180, 121, 27, 0.10);

  --sombra: 0 1px 2px rgba(26, 24, 48, 0.04), 0 8px 24px -12px rgba(26, 24, 48, 0.18);

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ancho-indice: 268px;
  --ancho-sumario: 210px;
  --alto-cabecera: 60px;
}

/* El sistema manda mientras nadie elija; una elección explícita de claro gana
 * a un sistema oscuro, de ahí el :not(). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel:        #131324;
    --papel-alto:   #1A1A2E;
    --papel-hundido:#0E0E1C;
    --tinta:        #ECEBF5;
    --tinta-media:  #B6B4CC;
    --tinta-suave:  #8E8CA6;
    --linea:        rgba(236, 235, 245, 0.11);
    --linea-fuerte: rgba(236, 235, 245, 0.20);
    --acento:       #A794FF;
    --acento-suave: rgba(167, 148, 255, 0.14);
    --menta:        #4BD3A6;
    --ambar:        #E0A94A;
    --ambar-suave:  rgba(224, 169, 74, 0.13);
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px -12px rgba(0, 0, 0, 0.60);
  }
}
/* Y el interruptor gana en la otra dirección. */
:root[data-tema="oscuro"] {
  --papel:        #131324;
  --papel-alto:   #1A1A2E;
  --papel-hundido:#0E0E1C;
  --tinta:        #ECEBF5;
  --tinta-media:  #B6B4CC;
  --tinta-suave:  #8E8CA6;
  --linea:        rgba(236, 235, 245, 0.11);
  --linea-fuerte: rgba(236, 235, 245, 0.20);
  --acento:       #A794FF;
  --acento-suave: rgba(167, 148, 255, 0.14);
  --menta:        #4BD3A6;
  --ambar:        #E0A94A;
  --ambar-suave:  rgba(224, 169, 74, 0.13);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px -12px rgba(0, 0, 0, 0.60);
}

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

/* El atributo `hidden` lo oculta todo… salvo lo que traiga su propio `display`:
 * la regla del navegador pierde contra cualquier hoja de autor. `.puerta` es
 * `display: grid`, así que se quedaba a la vista tapando la documentación ya
 * cargada. Esto lo zanja para cualquier elemento, no solo para ese. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

a { color: var(--acento); text-decoration-color: color-mix(in srgb, var(--acento) 35%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }

/* ── Puerta ──────────────────────────────────────────────────────────────── */
.puerta {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -12%, var(--acento-suave), transparent 65%),
    var(--papel);
}
.puerta-caja {
  max-width: 430px; width: 100%;
  text-align: center;
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 40px 34px 30px;
  box-shadow: var(--sombra);
}
.puerta-caja h1 { font-family: var(--serif); font-size: 25px; font-weight: 500; margin: 18px 0 8px; letter-spacing: -0.01em; }
.puerta-caja p { color: var(--tinta-media); margin: 0 0 22px; }
.puerta-pie { font-size: 13px; color: var(--tinta-suave); margin: 20px 0 0 !important; }

.marca {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--acento), var(--menta));
  color: #fff;
  font-family: var(--serif); font-style: italic; font-size: 17px;
}
.marca--grande { width: 52px; height: 52px; border-radius: 15px; font-size: 25px; margin: 0 auto; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px;
  border-radius: 11px;
  border: 1px solid transparent;
  font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 160ms ease, background 160ms ease, border-color 160ms ease;
}
.boton--principal { background: var(--acento); color: #fff; }
.boton--principal:hover { filter: brightness(1.08); }
.boton--discreto { background: transparent; color: var(--tinta-media); border-color: var(--linea-fuerte); }
.boton--discreto:hover { background: var(--papel-hundido); color: var(--tinta); }

/* ── Cabecera ────────────────────────────────────────────────────────────── */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  height: var(--alto-cabecera);
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  background: color-mix(in srgb, var(--papel) 86%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linea);
}
.marca-enlace { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-texto strong { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.marca-texto em { font-style: normal; font-size: 11px; color: var(--tinta-suave); }

.icono {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--tinta-media);
  cursor: pointer;
}
.icono:hover { background: var(--papel-hundido); color: var(--tinta); }
.ico-oscuro { display: none; }
:root[data-tema="oscuro"] .ico-claro { display: none; }
:root[data-tema="oscuro"] .ico-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ico-claro { display: none; }
  :root:not([data-tema="claro"]) .ico-oscuro { display: block; }
}

/* ── Buscador ────────────────────────────────────────────────────────────── */
.buscador { position: relative; flex: 1; max-width: 460px; margin: 0 auto; }
.buscador > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--tinta-suave); pointer-events: none; }
.buscador input {
  width: 100%;
  padding: 8px 40px 8px 35px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 11px;
  background: var(--papel-alto);
  color: var(--tinta);
  font: inherit; font-size: 14px;
}
.buscador input::placeholder { color: var(--tinta-suave); }
.buscador kbd {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 11px;
  color: var(--tinta-suave);
  border: 1px solid var(--linea-fuerte); border-radius: 5px;
  padding: 1px 6px;
  pointer-events: none;
}
.resultados {
  position: absolute; top: calc(100% + 7px); left: 0; right: 0;
  max-height: 62vh; overflow-y: auto;
  background: var(--papel-alto);
  border: 1px solid var(--linea-fuerte);
  border-radius: 13px;
  box-shadow: var(--sombra);
  padding: 6px;
}
.resultados a {
  display: block; padding: 8px 11px; border-radius: 9px;
  text-decoration: none; color: inherit;
}
.resultados a:hover, .resultados a.activo { background: var(--acento-suave); }
.resultados .r-titulo { font-weight: 600; font-size: 14px; }
.resultados .r-seccion { font-size: 11.5px; color: var(--tinta-suave); }
.resultados .r-vacio { padding: 14px 12px; color: var(--tinta-suave); font-size: 14px; }

/* ── Estructura ──────────────────────────────────────────────────────────── */
.cuerpo {
  display: grid;
  grid-template-columns: var(--ancho-indice) minmax(0, 1fr) var(--ancho-sumario);
  gap: 34px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Índice ──────────────────────────────────────────────────────────────── */
.indice {
  position: sticky; top: var(--alto-cabecera);
  height: calc(100dvh - var(--alto-cabecera));
  overflow-y: auto;
  padding: 26px 4px 40px;
}
.indice h2 {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--tinta-suave);
  margin: 22px 0 7px; padding: 0 10px;
}
.indice h2:first-child { margin-top: 0; }
.indice a {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--tinta-media);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.indice a:hover { background: var(--papel-hundido); color: var(--tinta); }
.indice a.activo {
  background: var(--acento-suave);
  color: var(--acento);
  font-weight: 600;
  border-left-color: var(--acento);
}

/* ── Sumario ─────────────────────────────────────────────────────────────── */
.sumario {
  position: sticky; top: var(--alto-cabecera);
  height: calc(100dvh - var(--alto-cabecera));
  overflow-y: auto;
  padding: 30px 0 40px;
  font-size: 13px;
}
.sumario-titulo { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; color: var(--tinta-suave); margin: 0 0 9px; }
.sumario ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linea); }
.sumario a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--tinta-suave); text-decoration: none; }
.sumario a:hover { color: var(--tinta); }
.sumario a.activo { color: var(--acento); border-left-color: var(--acento); font-weight: 600; }
.sumario .nivel-3 a { padding-left: 24px; font-size: 12.5px; }

/* ── Página ──────────────────────────────────────────────────────────────── */
.pagina { min-width: 0; padding: 34px 0 72px; }
.prosa { max-width: 72ch; }

.prosa h1 {
  font-family: var(--serif);
  font-size: 37px; font-weight: 600; line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  text-wrap: balance;
}
.prosa .entradilla { font-size: 17.5px; color: var(--tinta-media); margin: 0 0 34px; text-wrap: pretty; }
.prosa h2 {
  font-family: var(--serif);
  font-size: 25px; font-weight: 600; letter-spacing: -0.01em;
  margin: 46px 0 12px; padding-top: 14px;
  border-top: 1px solid var(--linea);
  text-wrap: balance;
}
.prosa h3 { font-size: 16.5px; font-weight: 700; margin: 30px 0 8px; letter-spacing: -0.005em; }
.prosa p, .prosa li { text-wrap: pretty; }
.prosa p { margin: 0 0 15px; }
.prosa ul, .prosa ol { margin: 0 0 16px; padding-left: 22px; }
.prosa li { margin-bottom: 7px; }
.prosa li::marker { color: var(--tinta-suave); }
.prosa strong { font-weight: 700; }
.prosa code {
  font-family: var(--mono); font-size: 0.87em;
  background: var(--papel-hundido);
  border: 1px solid var(--linea);
  border-radius: 5px;
  padding: 1px 5px;
}
.prosa hr { border: 0; border-top: 1px solid var(--linea); margin: 34px 0; }

/* Ruta de menú: «Menú › Documentos». Se repite tanto que merece su forma. */
.ruta {
  font-family: var(--mono); font-size: 0.85em;
  background: var(--papel-hundido);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* Tablas: se desbordan solas en pantallas estrechas, nunca la página. */
.tabla-marco { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--linea); border-radius: 12px; }
.prosa table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prosa th, .prosa td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.prosa thead th { background: var(--papel-hundido); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); }
.prosa tbody tr:last-child td { border-bottom: 0; }

/* Avisos */
.aviso {
  display: flex; gap: 11px;
  border: 1px solid var(--linea-fuerte);
  border-left-width: 3px;
  border-radius: 11px;
  padding: 13px 16px;
  margin: 0 0 20px;
  background: var(--papel-alto);
  font-size: 14.5px;
}
.aviso p { margin: 0; }
.aviso p + p { margin-top: 8px; }
.aviso strong { display: block; margin-bottom: 2px; }
.aviso--nota { border-left-color: var(--acento); }
.aviso--ojo { border-left-color: var(--ambar); background: var(--ambar-suave); }
.aviso--permiso { border-left-color: var(--menta); font-size: 14px; }
.aviso--permiso code { background: transparent; border: 0; padding: 0; font-weight: 500; }

/* Pasos numerados */
.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 0 0 22px; }
.pasos > li {
  counter-increment: paso;
  position: relative;
  padding-left: 38px;
  margin-bottom: 15px;
}
.pasos > li::before {
  content: counter(paso);
  position: absolute; left: 0; top: 0;
  width: 25px; height: 25px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--acento-suave);
  color: var(--acento);
  font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Rejilla de tarjetas para las portadas de sección */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 13px; margin: 0 0 24px; }
.tarjeta {
  display: block;
  padding: 15px 17px;
  border: 1px solid var(--linea);
  border-radius: 13px;
  background: var(--papel-alto);
  text-decoration: none; color: inherit;
  transition: border-color 160ms ease, transform 160ms ease;
}
.tarjeta:hover { border-color: var(--acento); transform: translateY(-1px); }
.tarjeta strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.tarjeta span { font-size: 13px; color: var(--tinta-suave); }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie { max-width: 72ch; margin-top: 56px; }
.pie-ayuda {
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 18px 20px;
  background: var(--papel-alto);
}
.pie-ayuda h2 { font-family: var(--serif); font-size: 19px; font-weight: 600; margin: 0 0 6px; }
.pie-ayuda p { margin: 0; color: var(--tinta-media); font-size: 14.5px; }
.pie-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.pie-nav a {
  flex: 1; max-width: 48%;
  border: 1px solid var(--linea); border-radius: 12px;
  padding: 11px 15px;
  text-decoration: none; color: inherit;
}
.pie-nav a:hover { border-color: var(--acento); }
.pie-nav .n-dir { display: block; font-size: 11.5px; color: var(--tinta-suave); }
.pie-nav .n-tit { font-weight: 600; font-size: 14.5px; color: var(--acento); }
.pie-nav .anterior { text-align: left; }
/* margin-left para cuando no hay «anterior»: sin él, «siguiente» se pegaría
 * a la izquierda en lugar de quedarse en su lado. */
.pie-nav .siguiente { text-align: right; margin-left: auto; }

/* ── Carga y errores ─────────────────────────────────────────────────────── */
.cargando { color: var(--tinta-suave); padding: 40px 0; }
.error { border: 1px solid var(--linea-fuerte); border-left: 3px solid var(--ambar); border-radius: 12px; padding: 18px 20px; background: var(--ambar-suave); }

/* ── Adaptación ──────────────────────────────────────────────────────────── */
.solo-movil { display: none; }
.velo { position: fixed; inset: 0; background: rgba(10, 10, 20, 0.45); z-index: 45; }

@media (max-width: 1180px) {
  .cuerpo { grid-template-columns: var(--ancho-indice) minmax(0, 1fr); }
  .sumario { display: none; }
}
@media (max-width: 860px) {
  .solo-movil { display: grid; }
  .solo-escritorio { display: none; }
  .cuerpo { grid-template-columns: minmax(0, 1fr); padding: 0 18px; }
  .marca-texto { display: none; }
  .indice {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    width: 290px; height: 100dvh;
    background: var(--papel-alto);
    border-right: 1px solid var(--linea);
    padding: 20px 12px 40px;
    transform: translateX(-100%);
    transition: transform 200ms ease;
  }
  .indice.abierto { transform: none; }
  .prosa h1 { font-size: 30px; }
  .pagina { padding: 24px 0 60px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}