/* ============================================================
   layout.css
   Composición de páginas: secciones, hero, grids, splits, sidebar,
   timeline. NO componentes — solo cómo se acomodan en la página.
   Cargar después de variables.css, base.css y components.css.
   ============================================================ */

/* ============================================================
   1. SECCIONES
   Padding vertical estándar y variantes de superficie.
   ============================================================ */

.seccion {
  padding-block: var(--sp-7);
}

@media (min-width: 768px) {
  .seccion {
    padding-block: var(--sp-8);
  }
}

.seccion-pequena {
  padding-block: var(--sp-5);
}

.seccion-grande {
  padding-block: var(--sp-8);
}

@media (min-width: 768px) {
  .seccion-grande {
    padding-block: var(--sp-9);
  }
}

/* Variantes de fondo para alternar secciones */
.seccion--clara   { background-color: var(--color-gris-claro); }
.seccion--blanca  { background-color: var(--color-superficie); }
.seccion--azul    { background-color: var(--color-azul-claro); }
.seccion--oscura  {
  background-color: var(--color-azul-principal);
  color: var(--color-blanco);
}
.seccion--oscura h1,
.seccion--oscura h2,
.seccion--oscura h3,
.seccion--oscura h4 {
  color: var(--color-blanco);
}

/* Encabezado de sección — pequeña etiqueta + título */
.seccion__encabezado {
  margin-bottom: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.seccion__etiqueta {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-dorado);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.seccion__titulo {
  margin: 0;
}

.seccion__descripcion {
  color: var(--color-texto-secundario);
  font-size: var(--fs-lg);
  max-width: var(--ancho-lectura);
}

/* Encabezado en línea — título a la izquierda, link "ver todos" a la derecha */
.seccion__encabezado--inline {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* ============================================================
   2. HERO PRINCIPAL
   Variantes: con patrón de fondo, con imagen, centrado, alineado.
   ============================================================ */

.hero {
  position: relative;
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--color-blanco);
  background-color: var(--color-azul-principal);
  /* Patrón sutil de puntos sobre el azul */
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.08) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero {
    padding: var(--sp-9) var(--sp-6);
  }
}

.hero__contenido {
  max-width: 56rem;
  margin-inline: auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}

.hero__logo {
  width: 120px;
  height: 120px;
  border-radius: var(--radio-pill);
  background-color: var(--color-blanco);
  padding: var(--sp-4);
  box-shadow: var(--sombra-lg);
}

.hero__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radio-pill);
}

.hero__titulo {
  color: var(--color-blanco);
  font-size: var(--fs-3xl);
  max-width: 50rem;
  margin: 0;
}

@media (min-width: 768px) {
  .hero__titulo {
    font-size: var(--fs-5xl);
  }
}

.hero__lead {
  font-size: var(--fs-lg);
  max-width: 42rem;
  color: rgba(255, 255, 255, 0.92);
  /* Reset al max-width de párrafos del base.css */
  margin: 0;
}

.hero__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

@media (min-width: 480px) {
  .hero__acciones {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Hero compacto — para páginas internas (Trámites, Transparencia, etc.) */
.hero-pagina {
  background-color: var(--color-azul-principal);
  color: var(--color-blanco);
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero-pagina {
    padding: var(--sp-8) var(--sp-6);
  }
}

.hero-pagina__contenido {
  max-width: 48rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
}

.hero-pagina__titulo {
  color: var(--color-blanco);
  margin: 0;
}

.hero-pagina__lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-lg);
  max-width: 42rem;
  margin: 0;
}

/* ============================================================
   3. GRIDS GENÉRICOS
   Sistema flexible de 1/2/3/4 columnas con ajuste mobile-first.
   ============================================================ */

.grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Grid auto-fit: se adapta al ancho disponible. Útil para listas largas
   sin saber cuántos elementos vamos a tener (convenios, documentos). */
.grid-auto {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ============================================================
   4. STATS ROW
   Fila de estadísticas que se monta sobre el hero (overlap negativo).
   ============================================================ */

.stats-row {
  position: relative;
  margin-top: calc(var(--sp-7) * -1);
  margin-bottom: var(--sp-7);
  z-index: 2;
}

.stats-row__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

@media (min-width: 480px) {
  .stats-row__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .stats-row__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   5. SPLIT (50/50)
   Imagen + contenido lado a lado. Apilado en mobile.
   ============================================================ */

.split {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
}

.split--invertido > :first-child {
  /* Inverte el orden visual sin cambiar el HTML (la imagen aparece a la
     derecha en desktop pero queda como segundo elemento). */
  order: 2;
}

@media (max-width: 767px) {
  .split--invertido > :first-child {
    order: 0;
  }
}

.split__contenido {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.split__media {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--color-azul-claro);
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lista de checks — usado dentro de splits ("Consulta de préstamos", etc.) */
.lista-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.lista-checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-weight: var(--fw-semibold);
  color: var(--color-texto);
}

.lista-checks li::before {
  content: '✓';
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radio-pill);
  background-color: var(--color-dorado);
  color: var(--color-blanco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  margin-top: 0.1em;
}

/* ============================================================
   6. SIDEBAR + MAIN
   Layout para Transparencia (categorías a la izquierda + contenido).
   ============================================================ */

.layout-sidebar {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1024px) {
  .layout-sidebar {
    grid-template-columns: 280px 1fr;
  }
}

.sidebar {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--sp-4);
  box-shadow: var(--sombra-sm);
}

@media (min-width: 1024px) {
  .sidebar {
    position: sticky;
    /* Pegado bajo la nav + alert + un margen */
    top: calc(var(--altura-nav) + var(--altura-alert) + var(--sp-4));
  }
}

.sidebar__titulo {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-3);
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radio-sm);
  color: var(--color-texto-secundario);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  transition: background-color var(--transicion), color var(--transicion);
}

.sidebar__link:hover {
  background-color: var(--color-azul-claro);
  color: var(--color-azul-principal);
}

.sidebar__link[aria-current='page'],
.sidebar__link.activo {
  background-color: var(--color-azul-principal);
  color: var(--color-blanco);
}

/* ============================================================
   7. TIMELINE / HITOS
   Línea horizontal con tarjetas alternadas (Victorias Sindicales).
   ============================================================ */

.timeline {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    padding-block: var(--sp-6);
  }

  /* Línea horizontal central, dorada */
  .timeline::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    background-color: var(--color-dorado);
    transform: translateY(-50%);
    z-index: 0;
  }
}

.timeline__hito {
  background-color: var(--color-superficie);
  border: 2px solid var(--color-dorado);
  border-radius: var(--radio);
  padding: var(--sp-5);
  text-align: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  /* Hitos pares se desplazan hacia arriba para alternar la línea */
  .timeline__hito:nth-child(even) {
    margin-top: var(--sp-7);
    border-color: var(--color-azul-principal);
  }
}

/* Punto sobre la línea (solo visible en desktop) */
.timeline__hito::before {
  content: '';
  display: none;
}

@media (min-width: 768px) {
  .timeline__hito::before {
    display: block;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: var(--radio-pill);
    background-color: var(--color-dorado);
    border: 3px solid var(--color-superficie);
  }

  .timeline__hito:nth-child(even)::before {
    top: auto;
    bottom: -10px;
    background-color: var(--color-azul-principal);
  }
}

.timeline__anio {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-azul-principal);
  margin-bottom: var(--sp-2);
}

.timeline__titulo {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-azul-principal);
  margin: 0 0 var(--sp-2) 0;
}

.timeline__descripcion {
  font-size: var(--fs-sm);
  color: var(--color-texto-secundario);
  margin: 0;
}

/* ============================================================
   8. LISTA DE EVENTOS
   Bloque vertical de próximas sesiones con fecha destacada.
   ============================================================ */

.eventos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.evento {
  display: flex;
  align-items: stretch;
  gap: var(--sp-4);
  background-color: var(--color-superficie);
  border-left: 4px solid var(--color-dorado);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: var(--sp-4);
  box-shadow: var(--sombra-sm);
  transition: box-shadow var(--transicion);
}

.evento:hover {
  box-shadow: var(--sombra);
}

.evento--secundario {
  border-left-color: var(--color-azul-principal);
}

.evento__fecha {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radio);
  background-color: var(--color-azul-claro);
  color: var(--color-azul-principal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
}

.evento__dia {
  font-size: var(--fs-xl);
  line-height: 1;
}

.evento__mes {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.evento__cuerpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
}

.evento__titulo {
  font-size: var(--fs-base);
  margin: 0;
  color: var(--color-texto);
}

.evento__meta {
  font-size: var(--fs-xs);
  color: var(--color-texto-secundario);
}

/* ============================================================
   9. GRID DE CATEGORÍAS (CONVENIOS)
   Tarjetas cuadradas con icono grande + etiqueta.
   ============================================================ */

.categorias {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .categorias {
    grid-template-columns: repeat(4, 1fr);
  }
}

.categoria {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radio);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  text-align: center;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.categoria:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra);
}

.categoria__icono {
  font-size: 2.5rem;
}

.categoria--principal {
  background-color: var(--color-azul-principal);
  color: var(--color-blanco);
}

.categoria--dorada {
  background-color: var(--color-dorado);
  color: var(--color-blanco);
}

.categoria--neutra {
  background-color: var(--color-superficie);
  color: var(--color-azul-principal);
  border: 1px solid var(--color-borde);
}

/* ============================================================
   10. BLOQUE MENSAJE DEL SECRETARIO
   Foto + cita en bloque azul oscuro.
   ============================================================ */

.mensaje-secretario {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 768px) {
  .mensaje-secretario {
    grid-template-columns: 1fr 2fr;
    gap: var(--sp-7);
  }
}

.mensaje-secretario__foto {
  aspect-ratio: 1 / 1;
  border-radius: var(--radio);
  overflow: hidden;
  border: 4px solid var(--color-dorado);
  box-shadow: var(--sombra-lg);
  max-width: 320px;
  width: 100%;
  margin-inline: auto;
}

.mensaje-secretario__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   11. ORGANIGRAMA (DIRECTIVA)
   Estructura jerárquica: 1 cabeza arriba, 4 secretarías abajo.
   ============================================================ */

.organigrama {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

.organigrama__nivel {
  display: grid;
  gap: var(--sp-4);
  width: 100%;
  grid-template-columns: 1fr;
}

.organigrama__nivel--cabeza {
  max-width: 360px;
}

.organigrama__nivel--secretarias {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .organigrama__nivel--secretarias {
    grid-template-columns: repeat(4, 1fr);
  }
}

.organigrama__conector {
  width: 2px;
  height: var(--sp-5);
  background-color: var(--color-borde-fuerte);
}

@media (max-width: 767px) {
  /* En mobile el conector se oculta — el orden vertical es suficiente */
  .organigrama__conector {
    display: none;
  }
}

.directivo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--sp-5);
  box-shadow: var(--sombra-sm);
}

.directivo--principal {
  border: 2px solid var(--color-dorado);
  box-shadow: var(--sombra);
}

.directivo__nombre {
  font-size: var(--fs-base);
  margin: 0;
}

.directivo--principal .directivo__nombre {
  font-size: var(--fs-xl);
}

.directivo__cargo {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================
   12. CTA FINAL
   Bloque destacado al final de algunas páginas (afiliación, etc.)
   ============================================================ */

.cta-bloque {
  background-color: var(--color-azul-principal);
  color: var(--color-blanco);
  border-radius: var(--radio);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.cta-bloque h2 {
  color: var(--color-blanco);
  margin: 0;
}

.cta-bloque p {
  color: rgba(255, 255, 255, 0.92);
  max-width: 42rem;
  margin: 0;
}

.cta-bloque__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

@media (min-width: 480px) {
  .cta-bloque__acciones {
    flex-direction: row;
  }
}