/* =========================================================
= 1) PRINCIPAL (variables + bases)
========================================================= */
:root{
  --brand-900:#0c2e63;
  --brand-800:#123b7d;
  --brand-700:#184892;
  --brand-200:#e8eef9;
  --brand:#1b4f91;
  --accent:#0ea5e9;
  --radius-lg:16px;
  --ring:0 0 0 .2rem rgba(14,165,233,.18);
}

html, body{ height:100% }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  background:#f6f8fc;
}

main { flex: 1 0 auto; }
/* =========================================================
= 2) ENCABEZADO INSTITUCIONAL
========================================================= */
.govbar{
  background:linear-gradient(180deg,var(--brand-900),var(--brand-800));
  color:#fff;
  padding:.65rem 0;
}

.govchip{
  background:#fff;
  border-radius:9999px;
  padding:.35rem .6rem;
  display:inline-flex;
  align-items:center;
  box-shadow:0 10px 28px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.35) inset;
  border:1px solid rgba(255,255,255,.25);
}
.govchip img{ height:44px; width:auto; display:block }

@media (max-width:576px){
  .govchip img{ height:38px }
}

.govbar .nav-link{ color:#cfe0ff; font-weight:500 }
.govbar .nav-link:hover{ color:#fff; text-decoration:underline }


/* =========================================================
= 3) HEADER: NAVBAR
========================================================= */
.navbar{ backdrop-filter:saturate(1.5) blur(8px) }
.navbar.sticky-shadow{ box-shadow:0 10px 28px rgba(13,59,114,.08) }


.navbar-brand{ padding:0 }
.brand-logo{ display:block; height:50px; width:auto }
@media (max-width:576px){ .brand-logo{ height:45px } }
@media (min-width:992px){ .brand-logo{ height:50px } }


.avatar{
  width:36px; height:36px; border-radius:50%; object-fit:cover;
}

/* =========================================================
= 4) COMPONENTES GENERALES
========================================================= */
.card{ border-radius:var(--radius-lg); border:1px solid #e8ecf4 }
.pill{ border-radius:999px }
.badge-soft{ background:var(--brand-200); color:var(--brand-900); font-weight:600 }


/* =========================================================
= 5) NAVEGACIÓN SECUNDARIA (Tabs)
========================================================= */
.tabs-scroll{ overflow:auto; -webkit-overflow-scrolling:touch }
.tabs-scroll::-webkit-scrollbar{ height:6px }
.tabs-scroll::-webkit-scrollbar-thumb{ background:#d9e3f6; border-radius:999px }

.tabs-line{ border-bottom:1px solid #e2e9f7 }
.tabs-line .nav-link{
  border:0; border-radius:0; color:#27406f; font-weight:600;
  padding:.6rem .9rem; position:relative; background:transparent; white-space:nowrap;
}
.tabs-line .nav-link:hover{ color:#0c2e63 }
.tabs-line .nav-link.active{ color:#0c2e63 }
.tabs-line .nav-link.active::after{
  content:""; position:absolute; left:.4rem; right:.4rem; bottom:-1px; height:3px;
  border-radius:10px; background:linear-gradient(90deg,var(--brand-700),var(--brand-900));
  box-shadow:0 4px 14px rgba(27,79,145,.3);
}


/* =========================================================
= 6) TABLAS
========================================================= */
.table thead th{
  background:#f1f5ff !important; color:#1b2b52;
  border-bottom-color:#e1e8fb !important; font-weight:600;
}
.table tbody tr:hover{ background:#fafcff }


/* =========================================================
= 7) FORMULARIOS / CAMPOS
========================================================= */
.field{ position:relative }
.field .icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:#6a7fb0; pointer-events:none;
}
.field input{
  height:2.75rem; padding:.6rem .9rem .6rem 38px;
  border-radius:12px; border:1px solid #d9e3f6; background:#fff; color:#0d2c60;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus{ border-color:#b7d9ff; box-shadow:var(--ring) }


/* =========================================================
= 8) BOTONES COMPLEMENTARIOS
========================================================= */
.btn-outline-secondary{ border-color:#d9e3f6; color:#173b7a }
.btn-outline-secondary:hover{ background:#eaf0ff; border-color:#cbd9fb; color:#0c2e63 }
.btn-light{ border-color:#e6ecfb }


/* =========================================================
= 9) OVERLAYS / LOADER
========================================================= */
.overlay{
  position:fixed; inset:0; background:rgba(255,255,255,.65);
  backdrop-filter:blur(4px); display:none; place-items:center; z-index:1050;
}
.loader-ring{
  width:64px; height:64px; border:4px solid rgba(27,79,145,.18);
  border-top-color:var(--brand); border-radius:50%; animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }


/* =========================================================
= 10) UTILIDADES / ANIMACIONES
========================================================= */
.fade-up{ animation:fadeUp .45s ease-out both }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(8px) }
  to{ opacity:1; transform:none }
}


/* =========================================================
= 11) FOOTER
========================================================= */
.site-footer{
  margin-top: auto; 
  flex-shrink: 0;
  background:linear-gradient(180deg,var(--brand-800),var(--brand-900));
  color:#eaf0ff;
  border-top:1px solid rgba(255,255,255,.18);
}
.site-footer hr{ opacity:.25; border-color:#6f8ac7 }

.footer-logos .footer-logo{
  height:34px; width:auto; display:block;
}
.footer-logo-ecom{ height:26px }
.text-footer-subtle{ color:#cfe0ff }

/* Responsivo footer */
@media (max-width:576px){
  .footer-logos{ justify-content:center }
  .footer-logos .footer-logo{ height:28px }
  .footer-logo-ecom{ height:22px }
}
@media (min-width:992px){
  .footer-logos .footer-logo{ height:36px }
}