/* 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;
}

/* Asegurar que el contenido principal tenga márgenes consistentes */
.container {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Ajustar el ancho del sidebar y contenido principal */
@media (min-width: 992px) {
  .container {
    max-width: 1440px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Asegurar que el logo se muestre correctamente */
.navbar .navbar-brand img.hospital-logo {
  height: 84px;
  width: auto;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) 
          drop-shadow(0 2px 6px rgba(0,0,0,.22));
  transform: translateY(0) scaleX(1.1) scale(1);
  transform-origin: center;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), 
              filter .28s ease;
}

.navbar .navbar-brand img.hospital-logo:hover,
.navbar .navbar-brand img.hospital-logo:focus-visible {
  transform: translateY(-2px) scaleX(1.1) scale(1.08);
  filter: drop-shadow(0 0 3px rgba(255,255,255,.9))
          drop-shadow(0 6px 14px rgba(0,0,0,.24));
}

/* Ajustes específicos para el logo en pantallas grandes */
@media (min-width: 992px) {
  .navbar .navbar-brand img.hospital-logo {
    max-height: 140px !important;
    height: auto !important;
  }
}

/* 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 */
.sidebar-nav a.active {
  color: #fff !important;
  background-color: var(--brand-main) !important;
  border-color: var(--brand-main) !important;
}

/* Buscador de Transparencia */
.search-card {
  background: #f8fbfb; /* sutil contraste sobre fondo blanco */
  box-shadow: 0 0.25rem 0.75rem rgba(15, 51, 50, 0.08);
  border: 1px solid rgba(15, 51, 50, 0.12);
}
.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: .6rem;
  padding-bottom: .6rem;
}
.search-form .form-control.rounded-pill {
  padding-top: .45rem;
  padding-bottom: .45rem;
  padding-left: .9rem;
  padding-right: .9rem;
  height: 44px; /* más delgada y proporcionada */
  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(22, 68, 67, .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; }

/* 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;
}

/* Espaciado superior para el texto de la ley en el hero de Transparencia */
.hero-section-transparencia .hero-lead {
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .hero-section-transparencia .hero-lead { margin-top: 2rem; }
}

/* ------------------------------ */
/* Correcciones de layout locales */
/* ------------------------------ */
/* El CSS global define section { padding: ... } lo que duplica espacios aquí. */
/* Reducimos el padding en las secciones ancladas solo en Transparencia. */
.anchor-target {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
  /* Asegura que al hacer scroll a una ancla quede justo bajo el header fijo */
  scroll-margin-top: 110px;
}



/* Normalizar el bloque HERO local (sin desbordes ni saltos grandes) */
.hero-section-transparencia {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Alinear sidebar sticky con la altura real del header/nav */
.sidebar-nav { scroll-margin-top: 110px; }
/* Unificar con altura del header fijo (110px) */
aside .position-sticky { top: 110px !important; }

/* 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 */
.search-card .form-control.rounded-pill {
  height: 42px;
}


/* ------------------------------ */
/* 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;
}