/* Estilos de marca para la página de Transparencia */
:root { 
  --brand-main: #164443; 
  --brand-dark: #0f3332; 
}

/* Ajustes específicos para la página de transparencia */
#main-content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
 
/* Botones outline con color de marca */
.btn-outline-brand {
  color: var(--brand-main);
  border-color: var(--brand-main);
}
.btn-outline-brand:hover,
.btn-outline-brand:focus {
  color: #fff;
  background-color: var(--brand-main);
  border-color: var(--brand-main);
}

/* Enlaces de las secciones (2–9) en sidebar */
.sidebar-nav a.fw-bold { color: var(--brand-main); }
.sidebar-nav a.fw-bold:hover { color: var(--brand-dark); text-decoration: underline; }

/* Estado activo para cualquier enlace del sidebar */
/* Usamos mayor especificidad para sobreescribir los estilos de :hover de los botones sin usar !important */
body[data-page-title="Transparencia y Acceso a la Información Pública"] .sidebar-nav a.active {
  color: #fff;
  background-color: var(--brand-main);
  border-color: var(--brand-main);
}

/* Buscador de Transparencia */
.search-card {
  background-color: #e9f4f2; /* Verde institucional muy claro para no saturar */
  border: 1px solid #cfe7e5; /* Borde sutil del mismo tono */
  box-shadow: 0 4px 12px rgba(22, 68, 67, 0.08); /* Sombra suave */
  transition: all 0.2s ease-in-out;
}
.search-card:hover {
  box-shadow: 0 8px 20px rgba(22, 68, 67, 0.12);
  transform: translateY(-2px);
}
.search-form .input-group-text {
  background-color: var(--brand-main);
  border-color: var(--brand-main);
  color: #ffffff;
}
.search-form .form-control {
  background-color: #ffffff;
  color: #212529;
  border-color: var(--brand-dark);
  font-size: 1rem;
  padding-top: .45rem;
  padding-bottom: .45rem;
  padding-left: .9rem;
  padding-right: .9rem;
  height: 42px; /* altura unificada */
  border-width: 2px;
}
.search-form .form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}
.search-form .form-control:focus {
  border-color: var(--brand-main);
  box-shadow: 0 0 0 .15rem rgba(15, 31, 30, 0.15);
}
.search-form .input-group > .form-control,
.search-form .input-group > .input-group-text,
.search-form .input-group > .btn {
  border-width: 2px;
}
.search-form .input-group .btn { white-space: nowrap; }
.search-form .btn {
  height: 42px; /* Alinear altura con el input */
  border-width: 2px;
  display: inline-flex;
  align-items: center;
}
/* Botón para limpiar la búsqueda */
.search-form #search-clear-btn {
  border-color: var(--brand-dark);
  color: #6c757d;
  z-index: 4; /* Para que aparezca sobre la sombra de foco del input */
}
/* Texto de ayuda para el buscador */
#search-help-text {
  color: #495057;
  font-size: 0.875rem;
}
/* Botón sólido de marca */
 .btn-brand {
   color: #fff;
   background-color: var(--brand-main);
   border-color: var(--brand-main);
 }
 .btn-brand:hover,
 .btn-brand:focus {
   color: #fff;
   background-color: var(--brand-dark);
   border-color: var(--brand-dark);
 }
 /* Resaltado de coincidencias en búsqueda en vivo */
 mark.search-hit {
   background-color: #fff3cd;
   padding: 0 .15em;
   border-radius: .15rem;
 }
 
 /* Estilos para el HERO de la página de Transparencia */
 .hero-section-transparencia {
   background-color: #f8f9fa; /* Un gris muy claro para un contraste suave */
   padding: clamp(2rem, 5vw, 4rem) 1rem;
   color: #212529; /* Color de texto oscuro por defecto */
   position: relative;
   /* overflow: hidden; */ /* Se comenta para evitar que el texto se corte */
   box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 }
 
 /* Título con color institucional y texto del párrafo legible */
 .hero-section-transparencia h1 {
   color: var(--brand-main);
   text-shadow: none;
   line-height: 1.4; /* Aumenta el espaciado vertical para mejor legibilidad */
 }
 
 .hero-section-transparencia .hero-lead {
   margin: 1rem auto 0;
   max-width: 800px;
   font-size: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
   line-height: 1.6;
   color: #495057; /* Gris oscuro para el texto, mejora la legibilidad */
   text-shadow: none;
   padding: 0 1rem;
 }
 
 .hero-section-transparencia .hero-icon {
   font-size: 3rem;
   color: var(--brand-main); /* Color de marca para el ícono */
   margin-top: 1rem;
 }

/* Alinear sidebar sticky con la altura real del header/nav */
.sidebar-nav { scroll-margin-top: 110px; }
/* Unificar con altura del header fijo (110px) usando mayor especificidad */
body[data-page-title="Transparencia y Acceso a la Información Pública"] aside .position-sticky { top: 110px; }

/* Tarjetas dentro de la grilla principal: márgenes y tipografía proporcionados */
.card-title-custom {
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
}
.card-text-custom {
  font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
}

/* Contenedor de búsqueda: evitar que se expanda demasiado y mantener proporción */
/* ------------------------------ */
/* Opción B: robustecer layout    */
/* ------------------------------ */
/* Evitar que contenido ancho rompa la grilla y empuje el sidebar */
.container.my-5 .row.g-4 > * { min-width: 0; }
section.col-lg-8.col-md-7 { min-width: 0; }

/* Hacer desplazamiento horizontal en tablas/blocks demasiado anchos */
.anchor-target .table-responsive { overflow-x: auto; }
.anchor-target table { display: block; width: 100%; overflow-x: auto; }

/* Asegurar que textos/URLs largas no desborden */
.anchor-target a, .anchor-target td, .anchor-target th {
  word-break: break-word;
  overflow-wrap: anywhere;
}