/*
 * modal.css — Ficha del hito y biografía en el modal #detalle (sección 10.13).
 *
 * Composición: cabecera en escalón de tono con el año como protagonista tipográfico, cerrada por
 * el hilo del siglo (3 px azul); cuerpo blanco con figura + información a ≥ 992 px; pie en tono
 * con la navegación entre ítems. Sin líneas finas: las zonas se separan por tono y espacio.
 * La sombra es legítima porque el diálogo flota. El movimiento lo resuelve Bootstrap (.fade), que
 * ya anula sus transiciones con prefers-reduced-motion: reduce.
 */

.detalle {
  --detalle-pad: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.detalle .modal-content {
  border-radius: var(--radio-tarjeta);
}
@media (min-width: 768px) {
  .detalle .modal-content {
    box-shadow: 0 1.5rem 4rem rgba(10, 19, 45, 0.35);
  }
}

/* ---- Cabecera: el año ---------------------------------------------------------------------- */
.detalle__cabeza {
  align-items: flex-end;
  gap: var(--s3);
  padding: var(--detalle-pad) var(--detalle-pad) var(--s3);
  background-color: var(--superficie);
  border-block-end: var(--grosor-hilo) solid var(--linea);
}
.detalle__anio {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: clamp(3.5rem, 2.25rem + 5vw, 7rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--tinta);
}
/* En personas el período es texto ("Por confirmar" o "1990 a 1994"): tamaño menor. */
.detalle__periodo {
  font-size: var(--paso-titulo);
  line-height: var(--interlineado-titulo);
  letter-spacing: -0.03em;
}
.detalle__cabeza .btn-close {
  align-self: flex-start;
  margin: 0 0 0 auto;
  flex-shrink: 0;
}

/* ---- Cuerpo ------------------------------------------------------------------------------- */
.detalle__cuerpo {
  padding: var(--s4) var(--detalle-pad) var(--s5);
}
.detalle__titulo {
  max-width: 26ch;
  margin-bottom: var(--s3);
  font-size: var(--paso-titulo);
}
.detalle__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.detalle__cargo {
  font-size: var(--paso-destacado);
  color: var(--tinta-suave);
  flex-basis: 100%;
}

.detalle__columnas {
  display: grid;
  gap: var(--s4) var(--s5);
}
@media (min-width: 992px) {
  .detalle__columnas {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .detalle__figura--retrato {
    max-width: 20rem;
  }
  .detalle[data-modo="personas"] .detalle__columnas {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
}

.detalle__figura {
  margin: 0;
}
.detalle__figura[hidden] {
  display: none;
}
.detalle__img {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--superficie);
  border-radius: var(--radio-tarjeta);
}
.detalle__credito {
  margin-top: var(--s2);
  font-size: var(--paso-pequeno);
  color: var(--tinta-suave);
}

/* ---- Pestañas (patrón ARIA APG; teclado en detail-modal.js) --------------------------------- */
.detalle__pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-bottom: var(--s3);
}
.detalle__pestana {
  min-height: var(--objetivo-tactil);
  padding: var(--s2) var(--s3);
  border: 0;
  border-block-end: var(--grosor-hilo) solid transparent;
  border-radius: 0;
  background-color: transparent;
  color: var(--tinta);
  font: inherit;
  font-weight: 500;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
}
.detalle__pestana:hover {
  background-color: var(--superficie);
  border-block-end-color: var(--borde);
}
/* Activa: subrayado grueso azul, color y peso; no depende solo del color (WCAG 1.4.1). */
.detalle__pestana[aria-selected="true"] {
  color: var(--sus-azul);
  font-weight: 700;
  border-block-end-color: var(--sus-azul);
}
.detalle__panel,
.detalle__resena {
  max-width: var(--medida);
}
.detalle__panel {
  padding-block: var(--s2);
}
.detalle__panel > :last-child,
.detalle__resena > :last-child {
  margin-bottom: 0;
}

/* ---- Secciones: video, fuentes y compartir ---------------------------------------------- */
.detalle__seccion {
  margin-top: var(--s5);
}
.detalle__seccion h3 {
  margin-bottom: var(--s3);
}
.detalle__info .detalle__seccion {
  margin-top: var(--s4);
}
.detalle__video {
  max-width: 48rem;
}
.detalle__reproductor {
  background-color: var(--sus-azul-noche);
}
.detalle__video-nota {
  margin: var(--s2) 0 var(--s1);
  font-size: var(--paso-pequeno);
  color: var(--tinta-suave);
}
.detalle__fuentes {
  padding-inline-start: 1.25rem;
  margin-bottom: 0;
}
.detalle__fuentes li + li {
  margin-top: var(--s2);
}
.detalle__compartir h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
.detalle__enlace-manual {
  margin-top: var(--s3);
  max-width: 40rem;
}
.detalle__enlace-manual[hidden] {
  display: none;
}
.detalle__enlace-manual .form-control {
  min-height: var(--objetivo-tactil);
  border: 2px solid var(--borde);
}

/* ---- Pie: navegación entre ítems ---------------------------------------------------------- */
.detalle__pie {
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s3) var(--detalle-pad);
  background-color: var(--superficie);
}
.detalle__pie > * {
  margin: 0;
}
.detalle__posicion {
  color: var(--tinta-suave);
  font-size: var(--paso-pequeno);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: center;
}
/* En móvil la posición sube a su propia línea y los botones se reparten el ancho. */
@media (max-width: 575.98px) {
  .detalle__posicion {
    order: -1;
    flex-basis: 100%;
  }
  .detalle__pie > .btn {
    flex: 1 1 0;
    padding-inline: var(--s2);
  }
}

/* ---- Preferencias del sistema ----------------------------------------------------------- */
@media (prefers-contrast: more) {
  .detalle__pestana:hover {
    border-block-end-color: var(--tinta);
  }
  .detalle .modal-content {
    box-shadow: none;
    border: 2px solid var(--tinta);
  }
}

@media (forced-colors: active) {
  .detalle .modal-content {
    border: 2px solid CanvasText;
  }
  .detalle__cabeza {
    border-block-end-color: CanvasText;
  }
  .detalle__pestana {
    border-block-end-color: Canvas;
    color: ButtonText;
  }
  .detalle__pestana[aria-selected="true"] {
    border-block-end-color: Highlight;
  }
}