/* ==========================================================
   Base: reset, tipografía, enlaces, foco, utilidades
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--sp-4)); }
body {
  font-family: var(--f-sans); font-size: var(--fs-base); line-height: var(--lh-body);
  color: var(--c-text); background: var(--c-bg);
  min-height: 100vh; display: flex; flex-direction: column;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { color: var(--c-ink); font-weight: 700; line-height: var(--lh-snug); text-wrap: balance; }
p { text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; }
a { color: var(--c-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
address { font-style: normal; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Foco visible, nunca tapado por el encabezado fijo (scroll-padding y scroll-margin) */
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
:target, [id] { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: var(--sp-2); top: -100px; z-index: 300;
  padding: var(--sp-3) var(--sp-4); background: var(--c-deep); color: #fff; font-weight: 700;
}
.skip:focus { top: var(--sp-2); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* Cambio de tema: transición breve solo de colores, y solo mientras ocurre el cambio */
@media (prefers-reduced-motion: no-preference) {
  .theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
    transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease) !important;
  }
}

/* Etiqueta técnica en mono (lecturas, índices, conteos) */
.mono { font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }

/* PENDIENTE: dato que falta en la versión A. Solo se ve con html.show-pending */
.pending {
  display: none; align-items: center; gap: var(--sp-1);
  font-family: var(--f-mono); font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-pending); background: var(--c-pending-bg); border: 1px dashed var(--c-pending);
  padding: 1px var(--sp-2); border-radius: var(--r-ctl); line-height: 1.6; vertical-align: middle;
}
.show-pending .pending { display: inline-flex; }

/* Espacio reservado para una foto o imagen que falta */
.ph {
  position: relative; display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(135deg, var(--c-ph-1) 0 10px, var(--c-ph-2) 10px 20px);
  color: var(--c-muted); font-family: var(--f-mono); font-size: var(--fs-xs); padding: var(--sp-4);
}
.ph .pending { display: inline-flex; }