/* ============================================================
   SAM — Base: reset, tipografía, a11y
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--c-surface-highest) var(--c-black);
  /* Permite transicionar height/block-size hacia `auto` (Chromium 129+).
     Habilita la animación de <details> y cualquier colapso a tamaño natural. */
  interpolate-size: allow-keywords;
  /* Reserva el hueco del scrollbar vertical aunque no haga falta: sin esto,
     al alternar contenido corto/largo (p.ej. pestañas SDUI) el scrollbar
     aparece y desaparece y todo el layout centrado salta 4px en horizontal. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--c-black);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }

/* ---- Tipografía (DESIGN.md) ---- */
h1, h2, h3, h4 { margin: 0; color: var(--c-heading, #fff); }

.t-display {
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 18px var(--c-primary-text-shadow);
}
.t-headline {
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 2px;
  text-shadow: 0 0 14px var(--c-primary-text-shadow);
}
.t-kicker {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1px;
}
.t-body { font-size: 15px; font-weight: 500; line-height: 1.6; }
.t-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-text-variant);
}
.t-micro {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.t-cyan { color: var(--c-text-cyan); }
.t-muted { color: var(--c-text-muted); }

p { margin: 0 0 var(--sp-xs); }

/* ---- Enlaces: parecen enlaces (Biblia cap.16) ---- */
a {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(142, 213, 255, 0.5);
}
a:hover { text-decoration-color: var(--c-primary); }

/* ---- Foco visible siempre (teclado) ---- */
:focus-visible {
  outline: 2px solid var(--c-primary-bright);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- Transición de tema (claro ↔ oscuro) ----
   Con View Transitions el navegador hace el crossfade solo; esta duración
   afina ese fade. La clase .theme-transition es el fallback: durante el
   cambio, TODOS los colores interpolan en vez de saltar. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 380ms; }
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 380ms ease,
    color 380ms ease,
    border-color 380ms ease,
    box-shadow 380ms ease,
    fill 380ms ease,
    stroke 380ms ease !important;
  transition-delay: 0s !important;
}

/* ---- <details>: apertura/cierre animado en todo el panel ----
   Cubre los desplegables de los módulos clásicos (p.ej. grupos de permisos).
   En navegadores sin ::details-content degrada a abrir/cerrar instantáneo. */
details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition:
    block-size var(--t-slow) var(--ease-out),
    content-visibility var(--t-slow) allow-discrete;
}
details[open]::details-content { block-size: auto; }
details summary { transition: margin-bottom var(--t-slow) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  details::details-content, details summary { transition: none; }
}

/* ---- Selección ---- */
::selection { background: rgba(var(--c-primary-rgb), 0.35); color: var(--c-heading, #fff); }

/* ---- Scrollbar discreto ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--c-surface-highest); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Utilidades ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Texto largo del mundo real (Biblia cap.10): nunca romper layout */
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wrap-any { overflow-wrap: anywhere; min-width: 0; }

/* ---- Reduced motion: se apaga toda coreografía ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}