/* Header de la landing gracias: lo común a las 5 opciones (ver base.js y ../../CONTRATO.md).
   Aquí solo va lo que comparten: texto para lector, foco, el contenido del panel de Accesibilidad y el menú modal.
   El aspecto de cada opción vive en header-N.css. */

.gh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* foco visible sobre rojo, blanco y negro: anillo blanco con borde oscuro */
.gh-foco:focus { outline: none; }
.gh-foco:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.55);
}

/* ---------- panel de Accesibilidad (contenido común; cada opción lo ubica y le da su piel) ---------- */
.gh-a11y {
  --gh-a11y-fondo: #0d0d0d;
  --gh-a11y-texto: #fff;
  --gh-a11y-suave: rgba(255, 255, 255, 0.62);
  --gh-a11y-pista: rgba(255, 255, 255, 0.1);
  --gh-a11y-activo: #fff;
  --gh-a11y-activo-texto: #0d0d0d;
  width: min(320px, calc(100vw - 32px));
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--gh-a11y-fondo);
  color: var(--gh-a11y-texto);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-family: inherit;
}
.gh-a11y[hidden] { display: none; }
.gh-a11y--linea {
  width: auto;
  padding: 0;
  background: none;
  box-shadow: none;
}
.gh-a11y-titulo {
  margin: 0 0 12px;
  font-size: calc(12px * var(--a11y-fs, 1));
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gh-a11y-suave);
}
.gh-a11y-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
}
.gh-a11y-etq {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: calc(15px * var(--a11y-fs, 1));
  font-weight: 700;
  line-height: 1.2;
}
.gh-a11y-etq .gh-icon { flex: none; }
.gh-a11y-seg {
  display: flex;
  flex: none;
  padding: 3px;
  border-radius: 999px;
  background: var(--gh-a11y-pista);
}
.gh-a11y-seg button {
  min-width: 44px;
  min-height: 44px; /* 44 px de toque, la regla del proyecto */
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--gh-a11y-texto);
  font: inherit;
  font-size: calc(14px * var(--a11y-fs, 1));
  font-weight: 800;
  cursor: pointer;
}
.gh-a11y-seg button[aria-pressed="true"] {
  background: var(--gh-a11y-activo);
  color: var(--gh-a11y-activo-texto);
}
.gh-switch {
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--gh-a11y-pista);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  cursor: pointer;
}
/* el interruptor se dibuja de 48 x 28, pero se toca en 48 x 44 (un área invisible arriba y abajo); además el texto de
   su fila también lo activa (base.js) */
.gh-switch::after {
  content: "";
  position: absolute;
  inset: -8px 0;
}
.gh-a11y-fila:has(.gh-switch) .gh-a11y-etq { cursor: pointer; }
.gh-switch-perno {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gh-a11y-texto);
  transition: transform 0.2s ease;
}
.gh-switch[aria-checked="true"] { background: var(--gh-a11y-activo); }
.gh-switch[aria-checked="true"] .gh-switch-perno {
  transform: translateX(20px);
  background: var(--gh-a11y-activo-texto);
}

/* ---------- menú modal ---------- */
.gh-menu[hidden] { display: none; }
.gh-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html[data-gh-menu] { overflow: hidden; }

/* ---------- movimiento reducido y Pausar animaciones ---------- */
@media (prefers-reduced-motion: reduce) {
  .gh-header *,
  .gh-menu *,
  .gh-switch-perno { transition: none !important; animation: none !important; }
}
html[data-rm] .gh-header *,
html[data-rm] .gh-menu *,
html[data-rm] .gh-switch-perno { transition: none !important; animation: none !important; }

/* ---------- alto contraste (el mismo atributo que ya usa gracias.css) ---------- */
html[data-contraste="1"] .gh-a11y:not(.gh-a11y--linea) { background: #000; box-shadow: inset 0 0 0 2px #fff; }
html[data-contraste="1"] .gh-switch { box-shadow: inset 0 0 0 2px #fff; }
html[data-contraste="1"] .gh-a11y-seg { box-shadow: inset 0 0 0 2px #fff; background: #000; }
html[data-contraste="1"] .gh-a11y-titulo { color: #fff; }

@media (forced-colors: active) {
  /* la caja solo en el panel suelto: en línea (dentro de un menú, sin relleno) el borde tocaba el texto */
  .gh-a11y:not(.gh-a11y--linea) { border: 2px solid CanvasText; }
  .gh-switch, .gh-a11y-seg button { border: 2px solid ButtonText; }
  /* el perno apagado, con borde: blanco sobre Canvas casi no se veía */
  .gh-switch-perno { box-sizing: border-box; border: 2px solid ButtonText; }
  .gh-switch[aria-checked="true"] .gh-switch-perno,
  .gh-a11y-seg button[aria-pressed="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .gh-foco:focus-visible { outline: 3px solid Highlight; }
}