/*
 * layout.css — Cabecera fija y compactable (sección 10.2), navegación principal, pie de página
 * y contenedores comunes. Mobile-first: se escribe desde 320 px hacia arriba.
 *
 * El menú se expande desde 1200 px (navbar-expand-xl): por debajo, logo + nombre + zoom + enlaces
 * no caben en una línea y la cabecera crecería, restando alto a la vista horizontal.
 */

/* ---- Franja institucional bicolor (decorativa, aria-hidden) ---------------------------- */
.franja-institucional {
  display: flex;
  height: 0.375rem;
}
.franja-institucional span {
  flex: 1 1 0;
  background-color: var(--sus-azul);
}
.franja-institucional span + span {
  flex-basis: 0;
  flex-grow: 0.6;
  background-color: var(--sus-rojo-marca);
}

/* ---- Cabecera ------------------------------------------------------------------------------ */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--fondo);
  /* Compensa la altura perdida al compactar: el contenido no salta (CLS = 0). */
  margin-bottom: var(--cabecera-compensacion, 0px);
}

/* Pantallas bajas con zoom alto: la cabecera deja de ser fija para no tapar el contenido. */
.cabecera.is-estatica {
  position: relative;
}

/* Separación respecto del contenido sin línea fina: un escalón de tono bajo la barra. */
.cabecera::after {
  content: "";
  display: block;
  height: 0.25rem;
  background-color: var(--superficie);
}

.cabecera__nav {
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-padding-x: 0;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
}

.cabecera.is-compacta .cabecera__nav {
  --bs-navbar-padding-y: 0.125rem;
}

/* ---- Marca (logo y nombre) ------------------------------------------------------------------- */
.marca {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  min-width: 0;
  min-height: var(--objetivo-tactil);
  color: var(--tinta);
  text-decoration: none;
}
.marca:hover {
  color: var(--tinta);
}
.marca:hover .marca__nombre {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/*
 * Logotipo institucional oficial (escudo, Superintendencia de Seguridad Social y Gobierno de Chile),
 * tal como lo publica suseso.gob.cl (insumos/marca/FUENTE.md). Se muestra sin alterar ni recortar,
 * dimensionado en rem para que escale con el zoom propio.
 */
.marca__logo {
  display: block;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  transform-origin: left center;
  transition: transform var(--duracion) var(--curva);
}

.marca__nombre {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: var(--paso-texto);
  line-height: 1.2;
  max-width: 10rem;
}

.cabecera.is-compacta .marca__logo {
  transform: scale(0.8);
}

/* ---- Botón Menú (móvil y tableta) --------------------------------------------------------------- */
.cabecera__menu {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--objetivo-tactil);
  border: 2px solid var(--tinta);
  color: var(--tinta);
  font-weight: 500;
}
.cabecera__menu[aria-expanded="true"] {
  background-color: var(--tinta);
  color: var(--sus-blanco);
}

/* ---- Enlaces de navegación ---------------------------------------------------------------------- */
.cabecera__colapsable {
  flex-basis: 100%;
  order: 3;
}

.cabecera__enlaces {
  gap: 0;
  padding-block: var(--s2);
}

.cabecera__enlaces .nav-link {
  display: flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  max-width: 100%;
  padding-inline: 0;
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  overflow-wrap: anywhere;
  border-block-end: 3px solid transparent;
}
.cabecera__enlaces .nav-link:hover {
  color: var(--sus-azul);
  border-block-end-color: var(--sus-azul);
}
/* Página actual: subrayado grueso y color, no solo color (WCAG 1.4.1). */
.cabecera__enlaces .nav-link[aria-current="page"] {
  color: var(--sus-azul);
  border-block-end-color: currentColor;
}

/* ---- Controles de zoom: fuera del menú colapsable, siempre visibles (detalles en zoom.css) -------- */
.zoom {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
  max-width: 100%;
}
.zoom[hidden] {
  display: none;
}
.cabecera__nav > .zoom {
  margin-inline-start: auto;
}

@media (min-width: 1200px) {
  .cabecera__nav {
    flex-wrap: nowrap;
  }
  .marca,
  .cabecera__nav > .zoom {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  .cabecera__colapsable {
    order: 0;
    flex-basis: auto;
    justify-content: flex-end;
  }
  .cabecera__enlaces {
    gap: var(--s3);
    padding-block: 0;
  }
  .cabecera__enlaces .nav-link {
    white-space: nowrap;
  }
  .cabecera__nav > .zoom {
    margin-inline-start: var(--s3);
  }
}

/* Teléfonos: logo y nombre en la primera fila; botón Menú y zoom juntos en la segunda. */
@media (max-width: 575.98px) {
  .cabecera .marca__logo {
    width: 3.5rem;
    height: 3.5rem;
  }
  .cabecera__nav {
    column-gap: var(--s2);
  }
  .cabecera__menu {
    padding-inline: 0.75rem;
  }
}

/*
 * Zoom propio amplio (≥ 150 %): la barra se comporta como en tableta, porque a 1280 px con el
 * doble de tamaño los enlaces ya no caben en una línea. zoom.js agrega .zoom-amplio a <html>.
 */
@media (min-width: 1200px) {
  .zoom-amplio .cabecera__nav {
    flex-wrap: wrap;
  }
  .zoom-amplio .navbar-expand-xl .navbar-toggler {
    display: inline-flex;
  }
  .zoom-amplio .navbar-expand-xl .navbar-collapse:not(.show) {
    display: none !important;
  }
  .zoom-amplio .navbar-expand-xl .navbar-collapse.show {
    display: block !important;
    flex-basis: 100%;
    order: 3;
  }
  .zoom-amplio .navbar-expand-xl .navbar-nav {
    flex-direction: column;
    gap: 0;
  }
  .zoom-amplio .cabecera__nav > .zoom {
    margin-inline-start: auto;
  }
}

/* ---- Cabeza de página interior ------------------------------------------------------------------ */
.cabeza-pagina {
  padding-block: var(--s5) var(--s4);
}
.cabeza-pagina h1 {
  max-width: 22ch;
}

/* ---- Pie de página --------------------------------------------------------------------------------- */
.pie {
  position: relative;
  overflow: hidden; /* recorta el monumento tipográfico decorativo, no texto informativo */
  margin-top: var(--separacion-seccion);
  background-color: var(--campo-oscuro);
  color: var(--sus-blanco);
}
.pie:focus {
  outline: none;
}

.pie a {
  max-width: 100%;
  color: var(--sus-blanco);
  overflow-wrap: anywhere;
}
.pie a:hover {
  color: var(--sus-blanco);
  text-decoration-thickness: 2px;
}

.pie__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5) var(--s4);
  padding-block: var(--s6) var(--s5);
}

.pie__frase {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: min(var(--paso-titulo), 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 24ch;
  margin-bottom: var(--s4);
}

.pie__accion {
  --bs-btn-bg: var(--sus-blanco);
  --bs-btn-color: var(--sus-azul-noche);
  --bs-btn-border-color: var(--sus-blanco);
  --bs-btn-hover-bg: var(--sus-superficie);
  --bs-btn-hover-color: var(--sus-azul-noche);
  --bs-btn-hover-border-color: var(--sus-superficie);
  --bs-btn-active-bg: var(--sus-superficie);
  --bs-btn-active-color: var(--sus-azul-noche);
}
.pie .pie__accion,
.pie .pie__accion:hover {
  color: var(--sus-azul-noche);
  text-decoration: none;
}

.pie__nav ul,
.pie__legal {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pie__nav li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  font-weight: 500;
}
.pie__nav a[aria-current="page"] {
  text-decoration-thickness: 3px;
}

.pie .marca,
.pie .marca:hover {
  color: var(--sus-blanco);
}
.pie .marca__logo {
  width: 5rem;
  height: 5rem;
}

.pie__aviso {
  margin: 0;
  color: var(--sus-texto-sobre-oscuro);
  max-width: 62ch;
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-size: var(--paso-pequeno);
  color: var(--sus-texto-sobre-oscuro);
}

/* Monumento del pie: el nombre del centenario recortado por el borde inferior (decorativo). */
.pie__monumento {
  margin: 0;
  padding-inline: var(--margen);
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: clamp(5rem, 26vw, 24rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  white-space: nowrap;
  color: var(--sus-azul);
  transform: translateY(22%);
  user-select: none;
  max-width: none;
}

@media (min-width: 768px) {
  .pie__cuerpo {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .pie__invitacion {
    grid-column: 1 / span 7;
  }
  .pie__nav {
    grid-column: 9 / span 4;
  }
  .pie__marca {
    grid-column: 1 / span 6;
  }
  .pie__aviso {
    grid-column: 7 / span 6;
  }
  .pie__legal {
    grid-column: 1 / -1;
    justify-content: space-between;
  }
}

/* ---- Contraste alto y colores forzados ------------------------------------------------------------- */
@media (prefers-contrast: more) {
  .cabecera::after {
    background-color: var(--tinta);
  }
  .pie__aviso,
  .pie__legal {
    color: var(--sus-blanco);
  }
}

@media (forced-colors: active) {
  .cabecera {
    border-block-end: 2px solid CanvasText;
  }
  .franja-institucional {
    display: none;
  }
  /* El logo es una imagen con sus propios colores: se rodea con un borde del sistema. */
  .marca__logo {
    outline: 1px solid CanvasText;
  }
  .cabecera__enlaces .nav-link[aria-current="page"] {
    border-block-end-color: LinkText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marca__logo {
    transition: none;
  }
}