/* Sitio de documentación — Sistema Meridiano v3.1. Capa de layout sobre los
   tokens de meridiano-tokens.css: TOC fija a la izquierda, lectura de 72ch,
   sans en títulos y serif en el cuerpo. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente-serif);
  font-size: var(--fs-cuerpo);
  line-height: var(--lh-cuerpo);
  color: var(--color-texto-principal);
  background: var(--color-fondo-base);
}

/* Color de enlace: primaria en claro, azul suave legible en oscuro */
:root { --color-enlace: var(--color-accion-primaria); --color-enlace-activo: var(--color-accion-primaria-activa); }
@media (prefers-color-scheme: dark) {
  :root { --color-enlace: var(--azul-100); --color-enlace-activo: var(--lienzo); }
}
[data-tema="oscuro"] { --color-enlace: var(--azul-100); --color-enlace-activo: var(--lienzo); }

/* Tema claro forzado: revierte el re-mapeo del esquema oscuro del sistema */
[data-tema="claro"] {
  --color-texto-principal: var(--tinta);     --color-texto-secundario: var(--grafito);
  --color-texto-terciario: var(--pizarra);   --color-borde: var(--acero);
  --color-separador: var(--niebla);          --color-fondo-base: var(--lienzo);
  --color-fondo-elevado: var(--bruma);       --color-overlay: rgba(21, 23, 26, .45);
  --color-exito: var(--verde-600);           --color-exito-fondo: var(--verde-100);
  --color-exito-texto: var(--verde-700);     --color-advertencia: var(--ambar-600);
  --color-advertencia-fondo: var(--ambar-100); --color-advertencia-texto: var(--ambar-700);
  --color-error: var(--rojo-600);            --color-error-fondo: var(--rojo-100);
  --color-info: var(--cian-600);             --color-info-fondo: var(--cian-100);
  --color-accion-primaria-suave: var(--azul-100);
  --color-enlace: var(--color-accion-primaria);
  --color-enlace-activo: var(--color-accion-primaria-activa);
}

h1, h2, h3, h4, .topbar, .toc, .pie { font-family: var(--fuente-sans); }
h1 { font-size: var(--fs-titulo-1); line-height: var(--lh-titulo); margin: 0 0 var(--espacio-md); }
h2 { font-size: var(--fs-titulo-2); line-height: var(--lh-titulo); margin: var(--espacio-xl) 0 var(--espacio-sm); }
h3 { font-size: var(--fs-titulo-3); line-height: var(--lh-titulo); margin: var(--espacio-lg) 0 var(--espacio-xs); }

.saltar {
  position: absolute; left: -999px; top: 0; z-index: 20;
  background: var(--color-accion-primaria); color: var(--color-texto-invertido);
  padding: var(--espacio-xs) var(--espacio-md); border-radius: 0 0 var(--radio-md) 0;
  font-family: var(--fuente-sans); text-decoration: none;
}
.saltar:focus { left: 0; }

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--espacio-md); min-height: var(--topbar); padding: 0 var(--espacio-lg);
  background: var(--color-fondo-base); border-bottom: 1px solid var(--color-separador);
}
.marca {
  display: inline-flex; align-items: center; gap: var(--espacio-xs);
  font-weight: var(--peso-bold); color: var(--color-texto-principal); text-decoration: none;
}

.distribucion {
  display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr);
  gap: var(--espacio-2xl); max-width: var(--contenido-max);
  margin: 0 auto; padding: var(--espacio-xl) var(--espacio-lg) var(--espacio-2xl);
}

.toc {
  position: sticky; top: calc(var(--topbar) + var(--espacio-md)); align-self: start;
  max-height: calc(100vh - var(--topbar) - var(--espacio-xl));
  overflow-y: auto; font-size: var(--fs-pequeno); padding-right: var(--espacio-xs);
}
.toc-grupo {
  margin: var(--espacio-md) 0 var(--espacio-2xs); font-size: var(--fs-etiqueta);
  font-weight: var(--peso-semibold); text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-texto-secundario);
}
.toc-lista { list-style: none; margin: 0; padding: 0; }
.toc-lista a {
  display: block; padding: var(--espacio-2xs) var(--espacio-xs);
  border-left: 3px solid transparent; border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  color: var(--color-texto-secundario); text-decoration: none;
}
.toc-lista a:hover { background: var(--color-fondo-elevado); color: var(--color-texto-principal); }
.toc-lista a[aria-current="page"] {
  border-left-color: var(--color-accion-primaria); background: var(--color-accion-primaria-suave);
  color: var(--color-texto-principal); font-weight: var(--peso-media);
}

main { max-width: var(--lectura-max); min-width: 0; }
main a { color: var(--color-enlace); }
main a:hover { color: var(--color-enlace-activo); }

:is(button, a, input, select, [tabindex]):focus-visible { outline: 2px solid var(--color-foco); outline-offset: 2px; }

.pie {
  max-width: var(--contenido-max); margin: 0 auto;
  padding: var(--espacio-lg); border-top: 1px solid var(--color-separador);
  color: var(--color-texto-secundario); font-size: var(--fs-pequeno);
}

@media (max-width: 940px) {
  .distribucion { grid-template-columns: 1fr; gap: var(--espacio-lg); }
  .toc { position: static; max-height: none; }
}