/* ============================================================
   styles.css — generado automáticamente por build-css.sh
   NO EDITAR ACÁ. Editar los archivos fuente y volver a correr
   el script. Generado: 2026-09-16 09:08
   ============================================================ */


/* ---------- tokens.css ---------- */
/* ============================================================
   TOKENS.CSS — única fuente de verdad de color, tipografía y forma
   Si el Ministerio cambia un color institucional, se edita ACÁ
   y se propaga solo a todo el sitio. No tocar nada más.

   Paleta oficial (guía de marca "Paleta de colores - sitio web"):
   #3aaa37 verde / #388ccb azul / #49b2d6 celeste / #f25151 rojo /
   #c6c6c6 gris claro / #424242 gris / #1d1e1c casi negro.
   ============================================================ */
:root {
  /* Paleta institucional — primario (verde, "Sobre la dirección") */
  --color-primario: #3aaa37;
  /* Tintes derivados del color base con color-mix(): si el verde
     institucional cambia, estos se recalculan solos, sin mantener
     3 hex sueltos a mano. */
  --color-primario-100: color-mix(in srgb, var(--color-primario) 65%, white);
  --color-primario-200: color-mix(in srgb, var(--color-primario) 35%, white);
  --color-primario-300: color-mix(in srgb, var(--color-primario) 15%, white);

  /* Paleta institucional — secundario (azul, "Líneas de trabajo") */
  --color-secundario: #388ccb;
  /* #49b2d6 es un valor OFICIAL de la guía de marca (el celeste de
     la paleta), no un tinte inventado — por eso va fijo y no derivado. */
  --color-secundario-100: #49b2d6;
  --color-secundario-200: color-mix(in srgb, var(--color-secundario) 35%, white);
  --color-secundario-300: color-mix(in srgb, var(--color-secundario) 15%, white);

  /* Paleta institucional — acento (rojo, "Otras líneas") */
  --color-acento: #f25151;
  --color-acento-100: color-mix(in srgb, var(--color-acento) 65%, white);
  --color-acento-200: color-mix(in srgb, var(--color-acento) 35%, white);

  /* Neutros (grises de la guía + "Datos de contacto") */
  --color-neutro-oscuro: #1d1e1c;
  --color-neutro: #424242;
  --color-neutro-claro: #c6c6c6;
  --color-neutro-fondo: #F1F1F1;

  /* Especiales */
  --color-fondo-suave: color-mix(in srgb, var(--color-primario) 12%, white);
  --color-footer: var(--color-primario);
  --color-blanco: #FFFFFF;

  /* Tipografía — Figtree, con los 4 pesos que define la guía de marca:
     Medium para títulos, Regular para cuerpo, SemiBold para botón de
     menú, Bold para palabras destacadas. */
  --font-heading: 'Figtree', sans-serif;
  --font-body: 'Figtree', sans-serif;
  --peso-titulo: 500;
  /* Medium */
  --peso-cuerpo: 400;
  /* Regular */
  --peso-boton: 600;
  /* SemiBold */
  --peso-destacado: 700;
  /* Bold */

  /* Forma — el sitio institucional usa esquinas cuadradas.
     Si algún día se quiere un estilo más suave, cambiar SOLO acá. */
  --radio-borde: 0;
  --sombra-suave: -1px 3px 10px 0px rgba(168, 165, 168, .4);

  /* Movimiento */
  --transicion-rapida: .15s ease;
  --transicion: .25s ease;
  --transicion-lenta: .4s ease;

  /* Escala de espaciado — usada como valor de fallback en los
     componentes (padding, gap, margin). Permite afinar el "aire"
     de TODO el sitio cambiando 1 sola variable, o de una sola
     plantilla sobrescribiéndola en un selector más específico
     (ver bloque de personalización más abajo). */
  --espacio-2xs: .25rem;
  --espacio-xs: .5rem;
  --espacio-sm: .75rem;
  --espacio-md: 1rem;
  --espacio-lg: 1.25rem;
  --espacio-xl: 1.5rem;
  --espacio-2xl: 2rem;

  /* Escala tipográfica — mismo criterio que la de espaciado. */
  --fs-xs: .75rem;
  --fs-sm: .85rem;
  --fs-base: 1rem;
  --fs-md: 1.1rem;
  --fs-lg: 1.4rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.5rem;

  /* Escala de grosor de borde — 1/2/4px ya cubren casi todo el sitio. */
  --borde-fino: 1px;
  --borde-medio: 2px;
  --borde-grueso: 4px;

  /* Sombras — variantes además de --sombra-suave. */
  --sombra-fuerte: -2px 6px 18px 0px rgba(168, 165, 168, .5);
  --sombra-ninguna: none;
}

/* ============================================================
   PERSONALIZACIÓN POR PLANTILLA
   Todas las variables de este archivo son estándar de CSS: se
   pueden REDEFINIR en un selector más específico que :root y esa
   redefinición cae en cascada sobre todo lo que esté adentro,
   incluidos los tintes derivados con color-mix() (se recalculan
   solos porque las custom properties se resuelven por elemento,
   no una sola vez de forma global).

   Para personalizar UNA plantilla o sección puntual sin tocar el
   resto del sitio, envolverla en un selector propio (una clase en
   el <body> o un atributo data-plantilla) y pisar ahí SOLO los
   tokens que hacen falta:

   [data-plantilla="direccion-nivel-inicial"] {
     --color-primario: #2f8f6b;
     --espacio-lg: 1.5rem;
   }

   Cada componente (botones, tarjetas, bandas de sección, avisos...)
   ya usa estas variables — o variables propias con fallback a
   éstas — así que no hace falta escribir CSS nuevo por plantilla,
   solo declarar qué token cambia y dónde.
   ============================================================ */

/* ---------- bootstrap-theme.css ---------- */
/* ============================================================
   BOOTSTRAP-THEME.CSS
   Cargar DESPUÉS de bootstrap.min.css y DESPUÉS de tokens.css,
   ANTES de base.css y /componentes/*.
   Pisa las variables nativas de Bootstrap 5.3 con los tokens
   institucionales: así .btn-primary, .bg-primary, .text-primary,
   .badge.bg-danger, etc. YA salen con la paleta del Ministerio,
   sin escribir CSS de botones a mano.
   ============================================================ */
:root {
  --bs-primary: var(--color-primario);
  --bs-primary-rgb: 0, 137, 0;
  --bs-secondary: var(--color-secundario);
  --bs-secondary-rgb: 34, 128, 255;
  --bs-danger: var(--color-acento);
  --bs-danger-rgb: 241, 106, 106;
  --bs-light: var(--color-neutro-fondo);
  --bs-light-rgb: 241, 241, 241;
  --bs-dark: var(--color-neutro-oscuro);
  --bs-dark-rgb: 30, 30, 30;

  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--color-neutro);
  --bs-link-color: var(--color-primario);
  --bs-link-color-rgb: 0, 137, 0;
  --bs-link-hover-color: var(--color-primario-100);
  --bs-border-radius: var(--radio-borde);
  --bs-border-radius-lg: var(--radio-borde);
  --bs-border-radius-sm: var(--radio-borde);
  --bs-border-radius-xl: var(--radio-borde);
  --bs-border-radius-2xl: var(--radio-borde);
  --bs-border-radius-pill: var(--radio-borde);

  --bs-btn-border-radius: var(--radio-borde);
  --bs-btn-font-family: var(--font-heading);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --bs-heading-color: var(--color-neutro-oscuro);
}

/* ---------- base.css ---------- */
/* ============================================================
   BASE.CSS — tipografía global y elementos genéricos
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: var(--espacio-lg);
}

body {
  font-family: var(--font-body);
  font-weight: var(--peso-cuerpo);
  color: var(--color-neutro);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--peso-titulo);
}

h1.fw-normal,
h2.fw-normal,
h3.fw-normal,
h4.fw-normal,
h5.fw-normal,
h6.fw-normal {
  font-weight: var(--peso-cuerpo);
}

b,
strong {
  font-weight: var(--peso-destacado);
}

button,
a.btn,
.nav-link,
.dropdown-item {
  font-family: var(--font-heading);
  font-weight: var(--peso-boton);
}

a {
  transition: color var(--transicion);
}

/* Texto largo justificado — aplica a todo párrafo del sitio.
   text-align-last evita que la ÚLTIMA línea de cada párrafo se
   estire con espacios raros, y hyphens ayuda al justificado en
   columnas angostas (celular) partiendo palabras largas del español. */
p {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}

/* Para texto largo que NO está en un <p> (un <span> dentro de un
   <li>, una celda de tabla, etc.) — aplicar esta clase a mano. */
.texto-justificado {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}

:focus-visible {
  outline: 3px solid var(--color-secundario);
  outline-offset: 2px;
}

/* ---------- componentes/colores.css ---------- */
/* Utilidades semánticas — usar ESTAS en código nuevo */
.texto-color-primario {
  color: var(--color-primario) !important;
}

.texto-color-primario-100 {
  color: var(--color-primario-100) !important;
}

.texto-color-secundario {
  color: var(--color-secundario) !important;
}

.texto-color-secundario-100 {
  color: var(--color-secundario-100) !important;
}

.texto-color-acento {
  color: var(--color-acento) !important;
}

.texto-color-neutro {
  color: var(--color-neutro) !important;
}

.texto-color-neutro-oscuro {
  color: var(--color-neutro-oscuro) !important;
}

.bg-color-primario {
  background-color: var(--color-primario) !important;
}

.bg-color-secundario {
  background-color: var(--color-secundario) !important;
}

.bg-color-acento {
  background-color: var(--color-acento) !important;
}

.bg-color-neutro {
  background-color: var(--color-neutro-fondo) !important;
}

.bg-color-fondo-suave {
  background-color: var(--color-fondo-suave) !important;
}

/* Alias de compatibilidad — no usar en código nuevo, están para no romper
   páginas viejas mientras se migra el markup gradualmente */
.texto-verde {
  color: var(--color-primario) !important;
}

.texto-verde-1 {
  color: var(--color-primario-100) !important;
}

.texto-verde-2 {
  color: var(--color-primario-200) !important;
}

.texto-verde-3 {
  color: var(--color-primario-300) !important;
}

.texto-azul {
  color: var(--color-secundario) !important;
}

.fondo-verde {
  background-color: var(--color-primario) !important;
}

.fondo-verde-1 {
  background-color: var(--color-primario-100) !important;
}

.fondo-verde-2 {
  background-color: var(--color-primario-200) !important;
}

.fondo-verde-3 {
  background-color: var(--color-primario-300) !important;
}

.fondo-azul {
  background-color: var(--color-secundario) !important;
}

.fondo-azul-1 {
  background-color: var(--color-secundario-100) !important;
}

.fondo-azul-2 {
  background-color: var(--color-secundario-200) !important;
}

.fondo-azul-3 {
  background-color: var(--color-secundario-300) !important;
}

/* Variantes "suaves" (fondo tenue) para alertas y estados —
   útiles en herramientas con JS como buscadores/formularios,
   donde no siempre alcanza con el color sólido. */
.bg-color-acento-suave {
  background-color: var(--color-acento-200) !important;
}

.bg-color-secundario-suave {
  background-color: var(--color-secundario-300) !important;
}

/* ---------- componentes/bordes.css ---------- */
.borde-color-primario {
  border: var(--borde-medio) solid var(--color-primario);
}

.borde-color-primario-100 {
  border: var(--borde-medio) solid var(--color-primario-100);
}

.borde-color-secundario {
  border: var(--borde-medio) solid var(--color-secundario);
}

.borde-color-secundario-100 {
  border: var(--borde-medio) solid var(--color-secundario-100);
}

.borde-color-acento {
  border: var(--borde-medio) solid var(--color-acento);
}

.borde-color-neutro {
  border: var(--borde-medio) solid var(--color-neutro);
}

.borde-color-neutro-oscuro {
  border: var(--borde-medio) solid var(--color-neutro-oscuro);
}

/* Alias de compatibilidad */
.borde-verde {
  border: var(--borde-medio) solid var(--color-primario);
}

.borde-verde-1 {
  border: var(--borde-medio) solid var(--color-primario-100);
}

.borde-verde-2 {
  border: var(--borde-medio) solid var(--color-primario-200);
}

.borde-verde-3 {
  border: var(--borde-medio) solid var(--color-primario-300);
}

.borde-azul {
  border: var(--borde-medio) solid var(--color-secundario);
}

.borde-azul-1 {
  border: var(--borde-medio) solid var(--color-secundario-100);
}

.borde-azul-2 {
  border: var(--borde-medio) solid var(--color-secundario-200);
}

.borde-azul-3 {
  border: var(--borde-medio) solid var(--color-secundario-300);
}

.borde-negro {
  border: var(--borde-medio) solid var(--color-neutro-oscuro);
}

.borde-gris-oscuro {
  border: var(--borde-medio) solid var(--color-neutro);
}

/* Acento de borde izquierdo (4px) — para tarjetas de listado donde
   el color codifica una categoría (nivel, tipo, estado...) sin
   recurrir a una barra sólida de color como las bandas de sección. */
.borde-izq-color-primario {
  border-left: var(--borde-grueso) solid var(--color-primario);
}

.borde-izq-color-secundario {
  border-left: var(--borde-grueso) solid var(--color-secundario);
}

.borde-izq-color-acento {
  border-left: var(--borde-grueso) solid var(--color-acento);
}

.borde-izq-color-neutro {
  border-left: var(--borde-grueso) solid var(--color-neutro-claro);
}

/* ---------- componentes/botones.css ---------- */
/* Base compartida por TODAS las variantes de botón (color aparte,
   ver bloques de abajo). Sacar acá el grosor de borde / radio /
   tipografía a variables locales permite ajustar TODOS los botones
   de una plantilla con una sola declaración, sin tocar cada color. */
.btn.btn-primario,
.btn.btn-verde,
.btn.btn-primario-outline,
.btn.btn-verde-outline,
.btn.btn-secundario,
.btn.btn-azul,
.btn.btn-secundario-outline,
.btn.btn-azul-outline,
.btn.btn-acento,
.btn.btn-acento-outline,
.btn.btn-neutro-oscuro,
.btn.btn-negro,
.btn.btn-neutro-oscuro-outline,
.btn.btn-negro-outline,
.btn.btn-neutro,
.btn.btn-gris,
.btn.btn-neutro-outline,
.btn.btn-gris-outline {
  border-width: var(--btn-borde-ancho, var(--borde-medio));
  border-style: solid;
  border-radius: var(--btn-radio, var(--radio-borde));
  font-family: var(--font-heading);
  font-weight: var(--peso-boton);
  transition: var(--btn-transicion, var(--transicion));
}

/* Botón PRIMARIO (verde institucional) */
.btn.btn-primario,
.btn.btn-verde {
  color: var(--color-blanco);
  background-color: var(--color-primario);
  border-color: var(--color-primario);
}

.btn.btn-primario:hover,
.btn.btn-verde:hover {
  background-color: var(--color-primario-100);
  border-color: var(--color-primario-100);
}

.btn.btn-primario-outline,
.btn.btn-verde-outline {
  color: var(--color-primario);
  background-color: var(--color-blanco);
  border-color: var(--color-primario);
}

.btn.btn-primario-outline:hover,
.btn.btn-verde-outline:hover {
  color: var(--color-blanco);
  background-color: var(--color-primario);
}

/* Botón SECUNDARIO (azul) */
.btn.btn-secundario,
.btn.btn-azul {
  color: var(--color-blanco);
  background-color: var(--color-secundario);
  border-color: var(--color-secundario);
}

.btn.btn-secundario:hover,
.btn.btn-azul:hover {
  background-color: var(--color-secundario-100);
  border-color: var(--color-secundario-100);
}

.btn.btn-secundario-outline,
.btn.btn-azul-outline {
  color: var(--color-secundario);
  background-color: var(--color-blanco);
  border-color: var(--color-secundario);
}

.btn.btn-secundario-outline:hover,
.btn.btn-azul-outline:hover {
  color: var(--color-blanco);
  background-color: var(--color-secundario);
}

/* Botón ACENTO (salmón — "Plan Estratégico") */
.btn.btn-acento {
  color: var(--color-blanco);
  background-color: var(--color-acento);
  border-color: var(--color-acento);
}

.btn.btn-acento:hover {
  background-color: var(--color-acento-100);
  border-color: var(--color-acento-100);
}

.btn.btn-acento-outline {
  color: var(--color-acento);
  background-color: var(--color-blanco);
  border-color: var(--color-acento);
}

.btn.btn-acento-outline:hover {
  color: var(--color-blanco);
  background-color: var(--color-acento);
}

/* Botón NEUTRO OSCURO (ex "negro") */
.btn.btn-neutro-oscuro,
.btn.btn-negro {
  color: var(--color-blanco);
  background-color: var(--color-neutro-oscuro);
  border-color: var(--color-neutro-oscuro);
}

.btn.btn-neutro-oscuro:hover,
.btn.btn-negro:hover {
  background-color: var(--color-neutro);
  border-color: var(--color-neutro);
}

.btn.btn-neutro-oscuro-outline,
.btn.btn-negro-outline {
  color: var(--color-neutro-oscuro);
  background-color: var(--color-blanco);
  border-color: var(--color-neutro-oscuro);
}

.btn.btn-neutro-oscuro-outline:hover,
.btn.btn-negro-outline:hover {
  color: var(--color-blanco);
  background-color: var(--color-neutro-oscuro);
}

/* Botón NEUTRO (ex "gris") */
.btn.btn-neutro,
.btn.btn-gris {
  color: var(--color-blanco);
  background-color: var(--color-neutro);
  border-color: var(--color-neutro);
}

.btn.btn-neutro:hover,
.btn.btn-gris:hover {
  background-color: var(--color-neutro-oscuro);
  border-color: var(--color-neutro-oscuro);
}

.btn.btn-neutro-outline,
.btn.btn-gris-outline {
  color: var(--color-neutro);
  background-color: var(--color-blanco);
  border-color: var(--color-neutro);
}

.btn.btn-neutro-outline:hover,
.btn.btn-gris-outline:hover {
  color: var(--color-blanco);
  background-color: var(--color-neutro);
}

/* Tamaños — opt-in, se agregan junto a cualquier variante de color
   (ej: class="btn btn-primario btn-tam-lg"). */
.btn.btn-tam-sm {
  padding: var(--espacio-2xs) var(--espacio-sm);
  font-size: var(--fs-xs);
}

.btn.btn-tam-lg {
  padding: var(--espacio-sm) var(--espacio-xl);
  font-size: var(--fs-md);
}

/* ---------- componentes/menu.css ---------- */
.nav-item {
  font-family: var(--font-heading);
}

/* OJO: estas reglas eran ".nav-link" a secas y se filtraban a
   CUALQUIER componente que use esa clase de Bootstrap (por ejemplo
   los nav-tabs del Plan Estratégico), aplastando su padding y
   achicando el texto. Se acotan al menú de navegación real. */
.navbar-nav .nav-link {
  text-align: center;
  color: var(--color-neutro-oscuro);
  font-weight: var(--peso-boton);
  font-size: var(--menu-nav-link-fs, .7rem);
  cursor: pointer;
  transition: color var(--transicion);
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--color-primario);
}

.navbar-nav .nav-link.show {
  color: var(--color-primario);
}

.link-menu-destacado {
  border: var(--borde-medio) solid var(--color-primario);
  background-color: var(--color-primario);
  transition: var(--transicion);
}

.link-menu-destacado .nav-link {
  color: var(--color-blanco);
  transition: var(--transicion);
}

.link-menu-destacado:hover {
  background-color: var(--color-blanco);
}

.link-menu-destacado:hover .nav-link {
  color: var(--color-primario);
}

.dropdown-item {
  font-family: var(--font-heading);
  font-size: var(--menu-dropdown-item-fs, .65rem);
  text-align: left;
  transition: .15s ease-in;
}

.dropdown-item:hover {
  color: var(--color-blanco);
  background-color: var(--color-primario);
}

/* ---------- componentes/tabs.css ---------- */
/* ============================================================
   TABS.CSS (NUEVO) — nav-tabs de Bootstrap con el mismo modificador
   de color que .banda-seccion / .aviso / .stat (-primario/-secundario/
   -acento/-neutro). La pestaña activa cambia de fondo SOLA cuando
   Bootstrap le agrega .active al hacer clic — no hace falta tocar
   clases a mano por botón ni usar estilos inline.
   ============================================================ */
.nav-tabs.-primario,
.nav-tabs.-secundario,
.nav-tabs.-acento,
.nav-tabs.-neutro {
  border-bottom: none;
  gap: 2px;
}

.nav-tabs.-primario .nav-link,
.nav-tabs.-secundario .nav-link,
.nav-tabs.-acento .nav-link,
.nav-tabs.-neutro .nav-link {
  --bs-nav-link-padding-x: .75rem !important;
  --bs-nav-link-padding-y: .4rem !important;
  background-color: var(--color-neutro-fondo);
  color: var(--color-neutro-oscuro);
  border-color: var(--color-neutro-fondo);
  padding-left: .75rem !important;
  padding-right: .75rem !important;
}

.nav-tabs.-primario .nav-link.active {
  background-color: var(--color-primario);
  color: var(--color-blanco);
  border-color: var(--color-primario) var(--color-primario) var(--color-blanco);
}

.nav-tabs.-secundario .nav-link.active {
  background-color: var(--color-secundario);
  color: var(--color-blanco);
  border-color: var(--color-secundario) var(--color-secundario) var(--color-blanco);
}

.nav-tabs.-acento .nav-link.active {
  background-color: var(--color-acento);
  color: var(--color-blanco);
  border-color: var(--color-acento) var(--color-acento) var(--color-blanco);
}

.nav-tabs.-neutro .nav-link.active {
  background-color: var(--color-neutro-oscuro);
  color: var(--color-blanco);
  border-color: var(--color-neutro-oscuro) var(--color-neutro-oscuro) var(--color-blanco);
}

/* Envoltorio ".tabs-scroll" — mantiene las pestañas SIEMPRE en una
   sola fila (nunca se apilan en 2 líneas) y agrega scroll horizontal.
   En pantallas chicas (donde es más probable que no entren todas)
   se ve además un degradé + flechita a la derecha, avisando que hay
   más — dibujada con ::before/::after (borde rotado, sin SVG ni
   trucos de background-attachment), 100% CSS y sin JS. */
.tabs-scroll {
  position: relative;
}

.tabs-scroll .nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
}

.tabs-scroll .nav-tabs::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari — el scroll sigue funcionando, solo se oculta la barra */
}

.tabs-scroll .nav-tabs .nav-item {
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .tabs-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--tabs-flecha-fondo, var(--color-blanco)) 70%);
    pointer-events: none;
  }

  .tabs-scroll::before {
    content: "";
    position: absolute;
    top: 50%;
    right: .6rem;
    width: .5rem;
    height: .5rem;
    border-top: 2px solid var(--color-neutro);
    border-right: 2px solid var(--color-neutro);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    z-index: 1;
  }
}

/* ---------- componentes/secciones.css ---------- */
/* ============================================================
   SECCIONES.CSS (NUEVO) — la "banda de sección" del mockup del
   Ministerio: franja de color sólido full-width con título, y
   leyenda de colores arriba de todo. Un componente, 4 modificadores.
   ============================================================ */
/* Hero de sección — franja de degradé institucional que suele ir
   arriba de todo en una página de Dirección/Junta, antes del título.
   Alto y colores configurables por plantilla via las variables. */
.hero-seccion {
  height: var(--hero-seccion-alto, 25rem);
  background: var(--hero-seccion-fondo, linear-gradient(135deg, var(--color-primario-200), var(--color-secundario-200)));
}

.banda-seccion {
  padding: var(--banda-seccion-padding-y, var(--espacio-sm)) var(--banda-seccion-padding-x, var(--espacio-lg));
  color: var(--color-blanco);
  font-family: var(--font-heading);
  font-weight: var(--peso-titulo);
  font-size: var(--banda-seccion-fs, var(--fs-md));
  border-radius: var(--radio-borde) var(--radio-borde) 0 0;
}

.banda-seccion.-primario {
  background-color: var(--color-primario);
}

.banda-seccion.-primario-100 {
  background-color: var(--color-primario-100);
  color: var(--color-neutro-oscuro);
}

.banda-seccion.-secundario {
  background-color: var(--color-secundario);
}

.banda-seccion.-secundario-100 {
  background-color: var(--color-secundario-100);
  color: var(--color-neutro-oscuro);
}

.banda-seccion.-acento {
  background-color: var(--color-acento);
}

.banda-seccion.-neutro {
  background-color: var(--color-neutro-claro);
  color: var(--color-neutro-oscuro);
}

.contenido-seccion {
  padding: var(--contenido-seccion-padding, var(--espacio-lg));
}

/* Leyenda de colores (chips "Nuestro Propósito / Líneas de acción / ...") */
.leyenda-seccion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-md);
  align-items: center;
  font-size: 1rem;
  color: var(--color-neutro);
}

.leyenda-seccion .item-leyenda {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transicion);
}

.leyenda-seccion .item-leyenda:hover {
  color: var(--color-neutro-oscuro);
  text-decoration: underline;
}

.leyenda-seccion .punto {
  width: .65rem;
  height: .65rem;
  border-radius: 2px;
  display: inline-block;
}

.leyenda-seccion .punto.-primario {
  background-color: var(--color-primario);
}

.leyenda-seccion .punto.-secundario {
  background-color: var(--color-secundario);
}

.leyenda-seccion .punto.-acento {
  background-color: var(--color-acento);
}

.leyenda-seccion .punto.-neutro {
  background-color: var(--color-neutro-claro);
}

/* Flecha colapsable entre bandas (el "v" del mockup) */
.toggle-seccion {
  text-align: center;
  cursor: pointer;
  color: var(--color-neutro-claro);
  padding: .25rem 0;
  transition: var(--transicion);
}

.toggle-seccion:hover {
  color: var(--color-neutro);
}

/* ---------- componentes/tarjetas-autoridad.css ---------- */
/* ============================================================
   TARJETAS-AUTORIDAD.CSS (NUEVO) — card de "Director / contacto"
   de la sección Autoridades del mockup.
   ============================================================ */
.tarjeta-autoridad {
  background-color: var(--color-neutro-fondo);
  border-radius: var(--radio-borde);
  padding: var(--tarjeta-autoridad-padding, var(--espacio-lg));
}

.tarjeta-autoridad .cargo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-neutro);
}

.tarjeta-autoridad .nombre {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-neutro-oscuro);
}

/* Foto de perfil — opcional, para la autoridad destacada. */
.tarjeta-autoridad .foto {
  width: var(--tarjeta-autoridad-foto-tam, 6.875rem);
  height: var(--tarjeta-autoridad-foto-tam, 6.875rem);
  object-fit: cover;
  border-radius: var(--radio-borde);
}

.tarjeta-autoridad .contacto {
  font-size: var(--fs-base);
  color: var(--color-neutro-oscuro);
}

.tarjeta-autoridad .contacto a {
  color: var(--color-neutro-oscuro);
  text-decoration: none;
}

.tarjeta-autoridad .contacto a:hover {
  text-decoration: underline;
}

/* Variante para directorios largos (muchas entradas seguidas):
   sin fondo, solo separador — evita "una caja gris atrás de otra". */
.tarjeta-autoridad.-lista {
  background-color: transparent;
  padding: var(--espacio-md) 0;
  border-bottom: var(--borde-fino) solid var(--color-neutro-fondo);
}

/* Variante destacada para la máxima autoridad (Ministra/o) */
.tarjeta-autoridad.-destacada {
  background-color: var(--color-fondo-suave);
  border-left: var(--borde-grueso) solid var(--color-primario);
  padding: var(--espacio-xl);
}

.tarjeta-autoridad.-destacada .cargo {
  color: var(--color-primario);
}

.tarjeta-autoridad.-destacada .nombre {
  font-size: var(--fs-lg);
}

/* ---------- componentes/acordeon.css ---------- */
.accordion-button.-primario,
.btn-verde.accordion-button {
  background-color: var(--color-blanco);
  color: var(--color-neutro);
  font-weight: bold;
}

.accordion-button.-primario:not(.collapsed),
.btn-verde.accordion-button:not(.collapsed) {
  color: var(--color-neutro);
  background-color: var(--color-primario-200);
}

.accordion-button.-secundario,
.btn-blanco.accordion-button {
  background-color: var(--color-blanco);
  color: var(--color-neutro);
  font-weight: bold;
}

.accordion-button.-secundario:not(.collapsed),
.btn-blanco.accordion-button:not(.collapsed) {
  color: var(--color-neutro);
  background-color: var(--color-secundario-200);
}

.accordion-item>.accordion-collapse>.accordion-body {
  background-color: var(--color-primario-300);
  color: var(--color-neutro);
}

/* ---------- componentes/paginador.css ---------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  list-style: none;
}

.pagination>.page-item>.page-link {
  color: var(--color-primario-100);
  font-weight: bold;
  border: none;
}

.pagination .page-item.active .page-link {
  color: var(--color-blanco);
  background-color: var(--color-primario-100);
  border: none;
}

.pagination .page-item:hover a {
  color: var(--color-blanco);
  background-color: var(--color-primario-100);
  border: none;
}

/* ---------- componentes/prensa.css ---------- */
.bajada_nota {
  font-weight: bold;
  font-size: 1.2rem !important;
  color: var(--color-neutro);
  text-align: justify;
}

.desarrollo_nota {
  font-size: var(--fs-base);
  text-align: justify;
}

.parrafo-prensa {
  font-weight: 600;
  font-size: 1rem !important;
  color: var(--color-neutro);
}

.fecha-prensa {
  font-weight: bold;
  color: var(--color-neutro);
}

.efecto-prensa img {
  transition-duration: .3s;
  transition-property: transform;
  transform: scale(1);
  opacity: 1;
}

.efecto-prensa:hover img {
  transform: scale(1.1);
  opacity: .8;
}

.efecto-prensa .card-body {
  border-bottom: 5px solid var(--color-primario-100);
  transition-duration: .3s;
}

.efecto-prensa:hover .card-body {
  border-bottom: 10px solid var(--color-primario-100);
}

/* ---------- componentes/programas.css ---------- */
.titulo-programa {
  font-weight: var(--peso-titulo);
  color: var(--color-primario);
}

.parrafo-programa {
  font-weight: var(--peso-cuerpo);
  color: var(--color-neutro);
  line-height: 2em;
}

.efecto-ped {
  cursor: pointer;
}

.hvr-hollow.efecto-ped h5 {
  transition-duration: .25s;
}

.hvr-hollow.efecto-ped:hover h5 {
  color: var(--color-primario-100);
  transition-property: transform;
  transform: scale(1.1);
}

.hvr-underline-from-center.efecto-ped {
  transition-duration: .25s;
}

.hvr-underline-from-center.efecto-ped::before {
  background-color: var(--color-primario-100);
}

.efecto-boton img {
  opacity: 1;
  transition: 1s ease;
  transform: scale(1);
}

.efecto-boton:hover img {
  opacity: .8;
  transform: scale(1.05);
}

.libro.card-img-overlay {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-primario-100) 75%);
  opacity: 0;
  transition: .25s ease-in;
}

.card:hover .libro.card-img-overlay {
  opacity: 1;
  box-shadow: var(--sombra-suave);
  transition: .25s ease-out;
}

@media (max-width: 575.98px) {
  .libro.card-img-overlay {
    opacity: 0;
  }
}

/* ---------- componentes/slider.css ---------- */
.tarjeta-flotante {
  border: var(--borde-fino) solid #dee2e6;
  padding: var(--espacio-md);
  box-shadow: var(--sombra-suave);
  background-color: var(--color-blanco);
}

.slider-caption {
  text-align: center;
  padding: var(--espacio-xs);
  background: var(--color-neutro-fondo);
}

.cuadro-slider {
  background-color: var(--color-primario-100);
  color: var(--color-blanco);
  padding: var(--espacio-xl);
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 2rem;
}

.carousel-item>img {
  height: 32.5rem !important;
  object-fit: cover;
}

.carousel-control-prev,
.carousel-control-next {
  color: var(--color-neutro);
  opacity: .8;
}

/* ---------- componentes/footer.css ---------- */
#footer {
  bottom: 0;
  min-height: 100%;
}

.item-footer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--color-footer);
}

.link-footer {
  text-decoration: none;
}

.link-footer:hover {
  text-decoration: underline;
}

/* ---------- componentes/scrollbar.css ---------- */
*::-webkit-scrollbar {
  width: 5px;
}

*::-webkit-scrollbar-track {
  background: var(--color-neutro-fondo);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--color-primario);
  border-radius: 5px;
  border: 3px solid var(--color-primario);
}

/* ---------- componentes/aviso.css ---------- */
/* ============================================================
   AVISO.CSS (NUEVO) — caja de aviso/comunicado destacado,
   como la tabla "CONCURSO PARA CARGOS SUPERVISIVOS" de las
   páginas de Juntas. Franja de color a la izquierda + fondo tenue.
   ============================================================ */
.aviso {
  border-left: var(--aviso-borde-ancho, var(--borde-grueso)) solid var(--color-neutro);
  background-color: var(--color-neutro-fondo);
  padding: var(--aviso-padding-y, var(--espacio-md)) var(--aviso-padding-x, var(--espacio-lg));
}

.aviso .aviso-titulo {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: .03em;
  display: block;
  margin-bottom: .35rem;
}

.aviso.-primario {
  border-color: var(--color-primario);
  background-color: var(--color-fondo-suave);
}

.aviso.-secundario {
  border-color: var(--color-secundario);
  background-color: var(--color-secundario-300);
}

.aviso.-acento {
  border-color: var(--color-acento);
  background-color: var(--color-acento-200);
}

/* ---------- componentes/listado-documentos.css ---------- */
/* ============================================================
   LISTADO-DOCUMENTOS.CSS (NUEVO) — lista de PDFs / carpetas de
   Drive / normativa, muy común en páginas de Juntas y Direcciones.
   ============================================================ */
.lista-documentos {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-documentos li+li {
  border-top: var(--borde-fino) solid var(--color-neutro-fondo);
}

.lista-documentos a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem var(--espacio-2xs);
  color: var(--color-neutro-oscuro);
  text-decoration: none;
  transition: var(--transicion);
}

.lista-documentos a:hover {
  color: var(--color-primario);
}

.lista-documentos .icono {
  font-size: var(--fs-md);
  color: var(--color-neutro-claro);
  flex-shrink: 0;
}

.lista-documentos a:hover .icono {
  color: var(--color-primario);
}

/* ---------- componentes/equipo.css ---------- */
/* ============================================================
   EQUIPO.CSS (NUEVO) — roster de equipo por rol, para bloques tipo
   "Equipo Técnico-Pedagógico / Administrativo" de las Direcciones.
   ============================================================ */
.equipo-rol+.equipo-rol {
  margin-top: var(--espacio-md);
}

.equipo-rol .rol-titulo {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--color-neutro-claro);
  display: block;
  margin-bottom: .35rem;
}

.equipo-rol .integrantes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem var(--espacio-sm);
}

.equipo-rol .integrantes li {
  font-weight: 600;
  color: var(--color-neutro-oscuro);
}

/* ---------- componentes/ficha-modalidad.css ---------- */
/* ============================================================
   FICHA-MODALIDAD.CSS (NUEVO) — bloque repetible para las
   "Modalidades del Sistema Educativo" (Educación Rural, EIB,
   Domiciliaria y Hospitalaria...): título + mini tabla de datos
   + párrafo descriptivo.
   ============================================================ */
.ficha-modalidad {
  border: var(--borde-fino) solid var(--color-neutro-fondo);
  padding: var(--ficha-modalidad-padding, var(--espacio-lg));
}

.ficha-modalidad+.ficha-modalidad {
  margin-top: var(--espacio-lg);
}

.ficha-modalidad h3 {
  font-size: var(--fs-md);
  color: var(--color-primario);
  margin-bottom: var(--espacio-sm);
}

.ficha-modalidad .datos-modalidad {
  width: 100%;
  margin-bottom: var(--espacio-md);
  font-size: .9rem;
}

.ficha-modalidad .datos-modalidad tr+tr td,
.ficha-modalidad .datos-modalidad tr+tr th {
  border-top: var(--borde-fino) solid var(--color-neutro-fondo);
}

.ficha-modalidad .datos-modalidad th,
.ficha-modalidad .datos-modalidad td {
  padding: .4rem var(--espacio-xs);
  vertical-align: top;
}

.ficha-modalidad .datos-modalidad th {
  font-family: var(--font-heading);
  font-weight: 700;
  width: 35%;
  color: var(--color-neutro);
  text-align: left;
}

/* ---------- componentes/estadisticas.css ---------- */
/* ============================================================
   ESTADISTICAS.CSS (NUEVO) — números destacados ("35 Supervisiones",
   "322 instituciones"...), muy usados en las bandas de "Nuestro
   Propósito" de cada Dirección.
   ============================================================ */
.stat {
  text-align: center;
  padding: var(--espacio-md) var(--espacio-xs);
}

.stat .stat-numero {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: var(--stat-numero-fs, var(--fs-2xl));
  line-height: 1;
  color: var(--color-primario);
  display: block;
}

.stat .stat-label {
  font-size: .8rem;
  color: var(--color-neutro);
  text-transform: uppercase;
  letter-spacing: .03em;
  display: block;
  margin-top: .35rem;
}

.stat.-secundario .stat-numero {
  color: var(--color-secundario);
}

.stat.-acento .stat-numero {
  color: var(--color-acento);
}

.stat.-neutro .stat-numero {
  color: var(--color-neutro-oscuro);
}

.fila-stats {
  border-top: var(--borde-fino) solid var(--color-neutro-fondo);
  border-bottom: var(--borde-fino) solid var(--color-neutro-fondo);
}

.fila-stats .stat+.stat {
  border-left: var(--borde-fino) solid var(--color-neutro-fondo);
}

/* ---------- componentes/iconos.css ---------- */
/* ============================================================
   ICONOS.CSS (NUEVO) — grilla de ícono + texto ("Información",
   "Info-íconos" del catálogo provincial) y tarjeta de servicio.
   ============================================================ */
.info-icono {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}

.info-icono .icono {
  font-size: var(--info-icono-fs, var(--fs-xl));
  color: var(--color-primario);
  flex-shrink: 0;
  line-height: 1;
}

.info-icono h4 {
  font-size: var(--fs-base);
  font-weight: 800;
  margin-bottom: var(--espacio-2xs);
}

.info-icono p {
  margin-bottom: 0;
  font-size: .9rem;
  color: var(--color-neutro);
}

/* Tarjeta de servicio/trámite — ícono grande + título + link */
.tarjeta-servicio {
  border: var(--borde-fino) solid var(--color-neutro-fondo);
  padding: var(--tarjeta-servicio-padding, var(--espacio-xl));
  height: 100%;
  transition: var(--transicion);
}

.tarjeta-servicio:hover {
  border-color: var(--color-primario);
}

.tarjeta-servicio .icono {
  font-size: var(--tarjeta-servicio-icono-fs, 2rem);
  color: var(--color-primario);
  margin-bottom: var(--espacio-sm);
  display: block;
}

.tarjeta-servicio h4 {
  font-size: 1.05rem;
  margin-bottom: var(--espacio-xs);
}

.tarjeta-servicio p {
  font-size: .9rem;
  color: var(--color-neutro);
}

.tarjeta-servicio a.enlace-servicio {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-primario);
  text-decoration: none;
}

.tarjeta-servicio a.enlace-servicio:hover {
  text-decoration: underline;
}

/* ---------- componentes/plantillas.css ---------- */
/* ============================================================
   PLANTILLAS.CSS (NUEVO) — modificadores globales opcionales para
   personalizar una plantilla o sección puntual sin escribir CSS
   nuevo. Se agregan como clase en el <body> o en el contenedor de
   la plantilla; no cambian nada si no se usan (mismo look de
   siempre). Ver también el bloque de PERSONALIZACIÓN en tokens.css
   para pisar colores/tokens puntuales por plantilla.
   ============================================================ */

/* Densidad — reduce o aumenta el "aire" de tarjetas, bandas de
   sección, avisos, etc. en TODA la plantilla envuelta. */
.tema-compacto {
  --espacio-2xs: .2rem;
  --espacio-xs: .35rem;
  --espacio-sm: .5rem;
  --espacio-md: .75rem;
  --espacio-lg: 1rem;
  --espacio-xl: 1.25rem;
  --espacio-2xl: 1.5rem;
}

.tema-amplio {
  --espacio-2xs: .35rem;
  --espacio-xs: .75rem;
  --espacio-sm: 1rem;
  --espacio-md: 1.5rem;
  --espacio-lg: 2rem;
  --espacio-xl: 2.5rem;
  --espacio-2xl: 3rem;
}

/* Forma — el sitio institucional usa esquinas cuadradas por
   defecto (--radio-borde: 0 en tokens.css). Esta clase permite
   una plantilla puntual con esquinas suaves sin tocar el resto
   del sitio. */
.tema-bordes-redondeados {
  --radio-borde: .5rem;
}

/* Sombras — apaga las sombras de tarjetas/slider en plantillas
   más planas (ej. una landing de prensa dentro de un iframe). */
.tema-sin-sombras {
  --sombra-suave: none;
  --sombra-fuerte: none;
}