/* ============================================================
   layout.css — Estructura: barra institucional, navegación,
   bandas de contenido y pie de página.
   Depende de: base.css
   ============================================================ */

.diseno-pagina {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.diseno-pagina > .contenido-principal { flex: 1 0 auto; }

/* ============================================================
   1. Barra institucional (franja fina superior)
   ============================================================ */
.barra-institucional {
  background-color: var(--color-primario-profundo);
  color: var(--color-texto-inverso-suave);
  font-size: var(--texto-xs);
}

.barra-institucional__contenido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-4);
  padding-block: var(--espacio-2);
}

.barra-institucional p { margin: 0; }

.barra-institucional a {
  color: var(--color-texto-inverso-suave);
  text-decoration: none;
}

.barra-institucional a:hover {
  color: var(--color-texto-inverso);
  text-decoration: underline;
}

.barra-institucional__grupo {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
}

/* ============================================================
   2. Navegación principal (fina, fija y translúcida)
   `.nav-bg` y `.navegacion-principal` conservan su nombre porque
   las vistas .php siguen usando ese marcado.
   ============================================================ */
.nav-bg {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: rgba(2, 32, 63, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

@supports (backdrop-filter: blur(1px)) {
  .nav-bg {
    background-color: rgba(2, 32, 63, 0.96);
    backdrop-filter: saturate(160%) blur(14px);
  }
}

.navegacion-principal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  min-height: var(--alto-nav);
}

/* Enlaces: tanto los del menú nuevo como los sueltos de las
   vistas .php, que cuelgan directamente de `.navegacion-principal`. */
.nav-enlaces a:not(.btn),
.navegacion-principal > a:not(.marca):not(.btn) {
  display: inline-block;
  padding: var(--espacio-2) var(--espacio-3);
  color: var(--color-texto-inverso-suave);
  font-size: var(--texto-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  border-radius: var(--radio-sm);
  white-space: nowrap;
  transition: color var(--transicion), background-color var(--transicion);
}

.nav-enlaces a:not(.btn):hover,
.navegacion-principal > a:not(.marca):not(.btn):hover {
  color: var(--color-texto-inverso);
  background-color: rgba(255, 255, 255, 0.10);
}

.nav-enlaces a[aria-current="page"],
.navegacion-principal > a[aria-current="page"] {
  color: var(--color-texto-inverso);
  position: relative;
}

.nav-enlaces a[aria-current="page"]::after,
.navegacion-principal > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--espacio-3);
  right: var(--espacio-3);
  bottom: -0.35rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-acento);
}

/* ---- Marca (logotipo + nombre) ---- */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-3);
  text-decoration: none;
  color: var(--color-texto-inverso);
  flex: 0 0 auto;
}

.marca__logo {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radio-sm);
  object-fit: contain;
  padding: 2px;
  background-color: #ffffff;
  flex: 0 0 auto;
}

.marca__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.marca__nombre { font-size: var(--texto-sm); font-weight: 700; }

.marca__sub {
  font-size: var(--texto-xs);
  font-weight: 400;
  color: var(--color-texto-inverso-suave);
}

/* ---- Menú desplegable en móvil ---- */
.nav-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radio-sm);
  background-color: transparent;
  color: var(--color-texto-inverso);
  cursor: pointer;
}

.nav-boton:hover { background-color: rgba(255, 255, 255, 0.12); }

.nav-boton__barras,
.nav-boton__barras::before,
.nav-boton__barras::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform var(--transicion), opacity var(--transicion);
}

.nav-boton__barras { position: relative; }

.nav-boton__barras::before,
.nav-boton__barras::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-boton__barras::before { top: -0.375rem; }
.nav-boton__barras::after { top: 0.375rem; }

.nav-boton[aria-expanded="true"] .nav-boton__barras { background-color: transparent; }
.nav-boton[aria-expanded="true"] .nav-boton__barras::before { transform: translateY(0.375rem) rotate(45deg); }
.nav-boton[aria-expanded="true"] .nav-boton__barras::after { transform: translateY(-0.375rem) rotate(-45deg); }

/* ---- Comportamiento responsive del menú ---- */
.nav-enlaces {
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
}

/* Móvil y tableta pequeña: el menú se despliega bajo la barra */
@media (max-width: 55rem) {
  .nav-enlaces {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--espacio-3) var(--espacio-5) var(--espacio-5);
    background-color: var(--color-primario-fuerte);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--sombra-3);
  }

  .nav-enlaces[hidden] { display: none !important; }

  .nav-enlaces a:not(.btn) {
    padding: var(--espacio-3) var(--espacio-2);
    font-size: var(--texto-md);
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }

  .nav-enlaces a[aria-current="page"]::after { display: none; }

  .nav-enlaces a[aria-current="page"] {
    border-left: 3px solid var(--color-acento);
    padding-left: var(--espacio-3);
  }

  .nav-enlaces .btn {
    margin-top: var(--espacio-4);
    justify-content: center;
    border-bottom: 0;
  }
}

/* Escritorio: el botón de menú desaparece */
@media (min-width: 55.0625rem) {
  .nav-boton { display: none; }
  .nav-enlaces[hidden] { display: flex !important; }
}

/* ============================================================
   3. Contenido principal y bandas de sección
   ============================================================ */
.contenido-principal { display: block; }

/* Una "banda" ocupa todo el ancho y aporta el ritmo vertical.
   El contenido interior sigue limitado por `.contenedor`. */
.banda {
  padding-block: var(--espacio-8);
}

.banda--compacta { padding-block: var(--espacio-7); }
.banda--amplia { padding-block: var(--espacio-9); }

.banda--clara { background-color: var(--color-superficie-alt); }
.banda--tenue { background-color: var(--color-primario-tenue); }

.banda--oscura {
  background-color: var(--color-primario-profundo);
  color: var(--color-texto-inverso);
}

.banda--oscura h1,
.banda--oscura h2,
.banda--oscura h3 { color: var(--color-texto-inverso); }

.banda--oscura .entradilla { color: var(--color-texto-inverso-suave); }
.banda--oscura .antetitulo { color: var(--color-acento); }

.banda__cabecera {
  max-width: var(--ancho-texto);
  margin-bottom: var(--espacio-7);
}

.banda__cabecera--centrada {
  margin-inline: auto;
  text-align: center;
}

.banda__cabecera--centrada .entradilla { margin-inline: auto; }

/* Compatibilidad con las vistas .php */
.hero2 { padding-block: var(--espacio-6); }

/* ============================================================
   4. Tira de logotipos institucionales
   `.imagenLogo` conserva el nombre por las vistas .php.
   ============================================================ */
.imagenLogo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-6) var(--espacio-8);
  padding-block: var(--espacio-5);
}

.imagenLogo img {
  max-height: 3.5rem;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter var(--transicion), opacity var(--transicion);
}

.imagenLogo img:hover {
  filter: grayscale(0);
  opacity: 1;
}

@media (max-width: 30rem) {
  .imagenLogo {
    gap: var(--espacio-5);
  }
  .imagenLogo img { max-height: 2.5rem; }
}

/* ============================================================
   5. Pie de página
   ============================================================ */
.pie-sitio {
  margin-top: auto;
  background-color: var(--color-primario-profundo);
  color: var(--color-texto-inverso-suave);
  font-size: var(--texto-sm);
  padding-block: var(--espacio-7) var(--espacio-5);
}

.pie-sitio__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--espacio-6);
  padding-bottom: var(--espacio-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.pie-sitio h2 {
  font-size: var(--texto-sm);
  font-weight: 600;
  letter-spacing: var(--track-suelto);
  text-transform: uppercase;
  color: var(--color-texto-inverso);
  margin-bottom: var(--espacio-4);
}

.pie-sitio ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espacio-3);
}

.pie-sitio a {
  color: var(--color-texto-inverso-suave);
  text-decoration: none;
}

.pie-sitio a:hover {
  color: var(--color-texto-inverso);
  text-decoration: underline;
}

.pie-sitio__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3) var(--espacio-5);
  padding-top: var(--espacio-5);
  font-size: var(--texto-xs);
}

.pie-sitio__legal p { margin: 0; }

/* Estructura antigua de pie (vistas .php) */
.pie-sitio__contenido {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3) var(--espacio-5);
  align-items: center;
  justify-content: space-between;
}

/* ---- Vistas .php heredadas ----
   Su <nav> no tiene `.marca` y trae enlaces vacíos de relleno; sin
   esto, `space-between` los separa a los dos extremos de la barra. */
.navegacion-principal > a:empty { display: none; }

.navegacion-principal:not(:has(.marca)) {
  justify-content: flex-start;
  gap: var(--espacio-1);
}