/* ===========================
   RESET Y ESTRUCTURA GENERAL
   =========================== */
html, body {
  height: 100%;
  margin: 0;
  background-color: #f4f6f9;
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
}
main { flex: 1; }

/* ===========================
   PALETA DE COLORES (GLOBAL)
   =========================== */
:root{
  --navy: #0b1740;
  --magenta: #ec008c;
  --cyan: #00bfff;
  --cyan-2:#14a4e0;
  --yellow:#ffcc00;
  --white:#ffffff;
  --ink:#00111a;
  --shadow:0 2px 6px rgba(0,0,0,.18);
}

header{ isolation:isolate }

/* =================================================================
   HEADER — TOPBAR CELESTE + NAVBAR BLANCA
   ================================================================= */

/* TOPBAR con el mismo estilo celeste que Accesos Rápidos */
header.sticky-top .topbar,
.topbar{
  background: linear-gradient(135deg, var(--navy), var(--cyan), var(--cyan-2)) !important;
  color: #ffffff !important;
  border: 0 !important;
  margin: 0 !important;
  padding-top: .45rem !important;
  padding-bottom: .45rem !important;
  box-shadow: var(--shadow);
}

/* Redes */
header.sticky-top .topbar .social a,
.topbar .social a{
  color: #ffffff !important;
  font-size: 1.1rem;
  opacity: .95;
  transition: opacity .15s ease, transform .15s ease;
}
header.sticky-top .topbar .social a:hover,
.topbar .social a:hover{
  opacity: 1;
  transform: translateY(-2px) scale(1.06);
}

/* Teléfono centro */
header.sticky-top .topbar .phone{
  color: #fdfdfd !important;
  font-weight: 700;
}

/* Pills (Ley Lobby / Transparencia) */
header.sticky-top .topbar .pill-link,
.pill-link{
  background: rgba(255,255,255,.18) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: .6rem !important;
  padding: .45rem .85rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px;
  min-width: 200px;
  text-align: center;
  transition: background .15s ease, transform .15s ease, color .15s ease, box-shadow .15s ease;
}
header.sticky-top .topbar .pill-link:hover,
header.sticky-top .topbar .pill-link:focus-visible,
.pill-link:hover,
.pill-link:focus-visible{
  background: rgba(255,255,255,.28) !important;
  color: #041633 !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
  outline: none;
}

/* NAVBAR principal: FONDO BLANCO (bg-light) */
header.sticky-top .navbar.header-main,
.navbar.header-main{
  background-color:#f8f9fa !important; /* bg-light */
  background:#f8f9fa !important;
  border:0 !important;
  margin:0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.04) !important;
}

/* Links menú principal: letras oscuras, sin text-shadow */
header.sticky-top .navbar.header-main .nav-link,
.navbar.header-main .nav-link{
  color:#003869 !important;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.35px;
  padding:.85rem 1rem!important;
  font-size:.95rem;
  text-shadow:none !important;
}
header.sticky-top .navbar.header-main .nav-link:hover,
.navbar.header-main .nav-link:hover{
  color:#0055a5 !important;
}

/* Dropdown del header */
header.sticky-top .navbar.header-main .dropdown-menu,
.navbar.header-main .dropdown-menu{
  background: #fff !important;
  border: 0 !important;
  border-radius: .75rem !important;
  padding: .5rem !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
}
header.sticky-top .navbar.header-main .dropdown-item,
.navbar.header-main .dropdown-item{
  font-weight: 600;
  border-radius: .5rem;
  padding:.6rem .8rem;
}
header.sticky-top .navbar.header-main .dropdown-item:hover,
.navbar.header-main .dropdown-item:hover{
  background: rgba(0,191,255,.12) !important;
  color: var(--navy) !important;
}

/* CTA derecha del header */
header.sticky-top .navbar.header-main .btn-cta,
.navbar.header-main .btn-cta{
  background: var(--cyan) !important;
  color: #003869 !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  border: 0 !important;
}
header.sticky-top .navbar.header-main .btn-cta:hover,
.navbar.header-main .btn-cta:hover{
  background: #0099d6 !important;
  color: #ffffff !important;
}

/* Buscador redondo: borde gris, icono oscuro */
header.sticky-top .navbar.header-main .header-search,
.navbar.header-main .header-search{
  width: 38px; height: 38px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid rgba(0,0,0,.18) !important;
  color: #003869 !important;
}
header.sticky-top .navbar.header-main .header-search:hover,
.navbar.header-main .header-search:hover{
  background: rgba(0,0,0,.04) !important;
}

/* Responsivo: oculta teléfono en móvil */
@media (max-width: 991.98px){
  header.sticky-top .topbar .phone{
    display: none !important;
  }
}

/* ==========================================
   SIN ESPACIOS BLANCOS BAJO EL HEADER
   ========================================== */
body, main { margin:0 !important; padding:0 !important; }
header, .topbar, .navbar.header-main { margin:0 !important; border:0 !important; }
section.container-fluid.px-3.mt-2{
  margin-top:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.col-lg-9.col-12.d-flex,
.col-lg-3.col-12.d-flex{
  margin:0 !important;
  padding:0 !important;
}

/* ===========================
   NAVBAR/ENLACES (GENÉRICOS)
   =========================== */
.navbar { flex-wrap: wrap; }
.navbar-brand strong { color: #003366; font-size: 1.3rem; }
.navbar-nav .nav-link { transition: color 0.2s ease-in-out; }

/* ... (el resto de tus estilos puede quedarse igual) ... */

.navbar-nav .nav-link:hover { color: #0055a5; }

/* ===========================
   BOTONES GENERALES
   =========================== */
.btn-primary{
  background-color: var(--navy);
  border-color: var(--navy);
}
.btn-primary:hover{
  background-color: var(--cyan-hover);
  border-color: var(--cyan-hover);
}
.btn-outline-primary{
  border-color: var(--cyan);
  color: var(--cyan);
}
.btn-outline-primary:hover{
  background-color: var(--cyan);
  color: #fff;
}

/* ===========================
   CARRUSEL INSTITUCIONAL
   =========================== */
.carrusel-wrapper { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 8px; }
#carruselInstitucional .carousel-inner { height: 100%; }
#carruselInstitucional .carousel-item img,
.carousel-item img{ height: 100%; width: 100%; object-fit: cover; border-radius: 8px; }
.col-lg-9 { display: flex; flex-direction: column; }
#carruselInstitucional { flex-grow: 1; }
#carruselInstitucional .carousel-inner { height: 300px; } /* móvil */
@media (min-width: 768px) {
  #carruselInstitucional .carousel-inner { height: 400px; } /* escritorio */
}

/* ===========================
   SECCIONES INSTITUCIONALES
   =========================== */
.bg-institucional{
  background: linear-gradient(90deg, var(--navy), var(--magenta)) !important;
  color: #fff !important;
  background-repeat: no-repeat; background-size: cover; background-position: center;
}
.portal-ciudadano-section{ background-color: #f9f9f9; padding: 40px 0; border-top: 4px solid #003366; }
.section-title{
  font-size: 2rem; font-weight: 700; position: relative; display: inline-block;
  text-align: center; margin-bottom: 30px;
}
.section-title::after{
  content: ""; display: block; width: 60px; height: 4px; background-color: var(--cyan);
  margin-top: 8px; border-radius: 2px;
}
.section-description{ font-size: 1rem; color: #333; margin-top: 10px; }

/* ===========================
   SERVICIOS (CARDS)
   =========================== */
.servicios-section{ background-color: #eef2f5; padding: 50px 0; }
.servicio-card{
  display: block; background-color: #f8f9fa; border-left: 6px solid var(--cyan);
  padding: 1rem; border-radius: 0.5rem; text-decoration: none; transition: all 0.3s ease;
}
.servicio-card:hover{ background-color: #e9f0ff; transform: translateY(-2px); }
.servicio-icon{ font-size: 2rem; color: var(--cyan); }
.servicio-title{ font-weight: 600; margin-top: 0.5rem; color: #002b5c; }
.servicio-desc{ font-size: 0.95rem; color: #555; }

/* ===========================
   CALENDARIO
   =========================== */
.calendario-section{ background-color: #fff; padding: 50px 0; border-top: 4px solid #003366; }
.evento-card{
  background: #fff; border-left: 6px solid var(--cyan); border-radius: 8px;
  padding: 1.5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease; border: 1px solid #e0e0e0;
}
.evento-card:hover{ transform: translateY(-4px); box-shadow:0 0.75rem 1.25rem rgba(0,0,0,0.08); border-color: #d0d0d0; }
.evento-fecha{ font-size: 1.1rem; color: var(--magenta); margin-bottom: 0.5rem; }
.evento-titulo{ font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.evento-desc{ font-size: 0.95rem; color: #555; }

/* ===========================
   ACCESOS RÁPIDOS (columna)
   =========================== */
.col-lg-3.col-12.d-flex > .p-4.bg-light.rounded-4.shadow-sm {
  background: linear-gradient(135deg, var(--navy), var(--cyan), var(--magenta));
  background-size: 300% 300%;
  animation: ar-gradient 10s ease infinite;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
}
.col-lg-3.col-12.d-flex > .p-4.bg-light.rounded-4.shadow-sm h5 {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.2);
  text-align: center;
}
.col-lg-3.col-12.d-flex > .p-4.bg-light.rounded-4.shadow-sm .row .btn {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.32) !important;
  font-weight: 700;
  padding: .55rem .9rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.col-lg-3.col-12.d-flex > .p-4.bg-light.rounded-4.shadow-sm .row .btn:hover{
  background: #fff !important;
  color: var(--navy) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}

@keyframes ar-gradient {
  0% { background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* ===========================
   QUICKBAR (BARRA INFERIOR)
   =========================== */
section.quickbar{
  background: linear-gradient(90deg, var(--navy), var(--magenta));
  color:#fff;
}
section.quickbar a{ color:#fff !important; }

/* ===========================
   NOTICIAS (BLOQUE INDEX)
   =========================== */
section.news-section .news-title-bar{
  background:#0a1f6e !important;
  color:#fff !important;
  padding:.65rem 1rem;
  border-radius:8px;
  text-align:center;
  font-weight:800;
  letter-spacing:.3px;
}
section.news-section .cta-tile{
  width:100%;
  border-radius:18px;
  padding:22px;
  margin-bottom:22px;
  color:#fff !important;
  text-decoration:none !important;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  gap:16px; display:flex; align-items:center;
}
section.news-section .cta-ico{ width:56px; height:56px; object-fit:contain; }
section.news-section .cta-yellow{ background:#ffd24d; color:#1b1b1b !important; }
section.news-section .cta-navy  { background:#0b1740; }
section.news-section .cta-pink  { background:#f72585; }
section.news-section .news-card{
  background:#fff; border-radius:12px;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  padding-bottom:18px; display:flex; flex-direction:column; height:100%;
}
section.news-section .news-img{ position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:12px 12px 0 0; }
section.news-section .news-img img{ width:100%; height:100%; object-fit:cover; }
section.news-section .news-meta{ padding:12px 16px 0; font-size:.9rem; color:#6b7280; font-weight:600; }
section.news-section .news-meta .sep{ margin:0 .4rem; opacity:.6; }
section.news-section .news-date{ color:var(--magenta); }
section.news-section .news-title{ padding:6px 16px 10px; font-size:1.05rem; font-weight:800; color:#0b1740; }
section.news-section .news-btn{
  align-self:center; margin-top:auto; border:2px solid #0b1740; color:#0b1740;
  padding:.55rem 1.25rem; border-radius:999px; font-weight:800; text-decoration:none;
}
section.news-section .news-btn:hover{ background:#0b1740; color:#fff; }

/* ===========================
   CARDS GENERALES
   =========================== */
.card{ display: flex; flex-direction: column; height: 100%; transition: all 0.3s ease; }
.card-body{ flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.card-img-top{ object-fit: cover; height: 250px; border-bottom: 2px solid var(--cyan); transition: filter 0.3s ease; }
.card:hover{ transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
.card:hover .card-img-top{ filter: brightness(90%); }
.card-title{ font-size: 1.2rem; font-weight: 600; }
.card-title.text-primary{ color: #003366; }

/* ====== PAGOS (estilos locales) ====== */
.pagos-page .fw-800{ font-weight:800; }
.pagos-page .text-white-80{ color: rgba(255,255,255,.9); }

.pagos-hero{
  position: relative;
  min-height: 360px;
  background: #0f2347;
  isolation: isolate;
  color:#fff;
}
.pagos-hero .hero-bg{
  position:absolute; inset:0;
  background-image: url("/secciones/img/bannerindex/bannerindex.png");
  background-size: cover; background-position: center;
}
.pagos-hero .hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(11,23,64,.9), rgba(236,0,140,.45));
}
.pagos-hero .hero-inner{ position: relative; padding: 64px 0; }
.pagos-hero .hero-logo{
  position:absolute; top:16px; left:16px; z-index:3;
  display:inline-flex; align-items:center; justify-content:center;
  width:140px; height:auto;
}
.pagos-hero .hero-logo img{ width:140px; height:auto; display:block; }

.btn-paga-aqui{
  background:#ffcc00; color:#00111a; font-weight:800; border:0;
  border-radius:999px; padding:.8rem 1.6rem;
}
.btn-paga-aqui:hover{ background:#ffd633; color:#00111a; }

.pago-pill{
  display:inline-flex; align-items:center; gap:.35rem;
  background: rgba(255,255,255,.14);
  color:#fff; padding:.7rem 1rem; border-radius:999px; font-weight:700;
  backdrop-filter: blur(4px);
}
.pago-pill .badge{ background:#00bfff; color:#00111a; border-radius:999px; padding:.2rem .55rem; }

.info-box{
  background:#fff; border:1px solid #e8e8ee; border-radius:14px;
  padding:1rem 1.1rem; box-shadow:0 6px 16px rgba(0,0,0,.05);
}
.info-box .title{ font-weight:800; color:#0b1740; }

.bg-gradient-navy{ background: linear-gradient(90deg,#0b1740,#1b2a6b); }
.bg-gradient-magenta{ background: linear-gradient(90deg,#ec008c,#b7006a); }
.list-check{ list-style:none; padding-left:0; }
.list-check li{ position:relative; padding-left:1.5rem; margin:.25rem 0; }
.list-check li::before{
  content:"✓"; position:absolute; left:0; top:0; color:#00bfff; font-weight:800;
}

@media (max-width: 991.98px){
  .pagos-hero{ min-height: 300px; }
  .pagos-hero .hero-logo img{ width:120px; }
}