/* Colores CEFI */
:root{
  --cefi-blue: #004b87;  /* azul corporativo */
  --cefi-yellow: #f2c200;/* amarillo acento  */
}

/* ===== NAVBAR ===== */
.bg-cefi{ background-color: var(--cefi-blue) !important; }
.brand-logo{ height: 34px; }                 /* logo más pequeño */
.brand-title{ font-size: 1.05rem; }          /* título compacto */

/* separador para navbar fija (altura menor) */
.nav-spacer{ height:56px; } 
@media (max-width: 991.98px){ .nav-spacer{ height:80px; } } /* bajamos más */

/* En escritorio, compacta padding vertical */
@media (min-width: 768px){
  .navbar{ padding-top: .25rem !important; padding-bottom: .25rem !important; }
}

/* ===== FOOTER DELGADO ===== */
.footer-thin{ border-top: 1px solid #e9ecef; background: #f8f9fb; }
.footer-logo{ height: 28px; }
.footer-social{ flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 575.98px){
  .footer-thin .row > [class*="col-"]{ margin-bottom: 6px; }
}

/* ===== COMPONENTES ===== */
.btn-cefi{ background-color: var(--cefi-blue); color:#fff; border:none; }
.btn-cefi:hover{ filter: brightness(0.95); color:#fff; }
.btn-accent{ background-color: var(--cefi-yellow); color:#000; border:none; }
.btn-accent:hover{ filter: brightness(0.95); color:#000; }

.table-cefi thead th { background: var(--cefi-blue); color: #fff; }
.progress-bar-cefi{ background-color: var(--cefi-blue) !important; }

/* Evitar conflicto de iconos cuando alguien usa <i> para texto */
i:not(.bi){ font-family: inherit !important; font-style: italic; }


/* Botones y links propios */
.btn-cefi{ background-color: var(--cefi-blue); color:#fff; border:none; }
.btn-cefi:hover{ filter: brightness(0.95); color:#fff; }

.btn-accent{ background-color: var(--cefi-yellow); color:#000; border:none; }
.btn-accent:hover{ filter: brightness(0.95); color:#000; }

/* Links */
a { color: var(--cefi-blue); }
a:hover { color: #003764; }

/* Tarjetas */
.card-cefi{ border:1px solid #e9ecef; border-radius: 14px; }
.card-cefi .card-header{ background: #f7f9fc; }

/* Separación base por navbar fija (si hace falta en páginas sueltas) */
body{ background:#f6f7fb; }

/* Tablas más limpias */
.table-cefi thead th { background: var(--cefi-blue); color: #fff; }
.table-cefi tbody tr + tr { border-top: 1px solid #eef2f6; }

.text-cefi{ color: var(--cefi-blue) !important; }
.progress-bar-cefi{ background-color: var(--cefi-blue) !important; }
.badge-cefi{ background-color: var(--cefi-blue); color:#fff; }
.badge-accent{ background-color: var(--cefi-yellow); color:#000; }

/* Altura del espaciador bajo navbar fija */
.nav-spacer{ height:72px; }
@media (max-width: 991.98px){ /* móviles/tablet vertical */
  .nav-spacer{ height:128px; } /* sube si aún tapa algo (120/128) */
}

/* Opcional: margen superior extra solo en la portada */
.home-hero { margin-top: .25rem; }
@media (max-width: 991.98px){
  .home-hero { margin-top: .75rem; }
}

/* Footer ultra compacto */
.footer-thin{ background: var(--cefi-yellow); }
.footer-logo{ height: 20px; } /* más pequeño */
.footer-social a{ font-size: 1rem; } /* íconos más chicos */
.footer-thin .xsmall{ font-size: .75rem; } /* texto aún más reducido */


/* Footer redes: layout amigable en móvil */
.footer-social{
  flex-wrap: wrap;
  row-gap: 8px;
}
@media (max-width: 575.98px){
  .footer-social{ justify-content:center; }
  footer .row > [class*="col-"]{
    /* separa columnas para que no se pisen */
    margin-bottom: 12px;
  }
}

/* Los <i> normales deben ser texto, no iconos */
i:not(.bi){
  font-family: inherit !important;
  font-style: italic;
}

/* Espaciador por navbar fija (más compacto) */
.nav-spacer{ height:56px; }                           /* antes 64 */
@media (max-width: 991.98px){ .nav-spacer{ height:86px; } } /* antes 90 */

/* Portada: acercar el héroe a la navbar */
.home-hero{ margin-top: 0; }  /* si aún quieres más arriba, usa -4px o -6px */

/* Compactar navbar en escritorio */

@media (min-width: 768px){
  .navbar { padding-top: .25rem !important; padding-bottom: .25rem !important; }
}
.navbar .navbar-brand img{ height:36px; }    /* iguala el inline style por si lo cambias */

/* Mejoras de footer en móvil (que no se amontone) */
.footer-social{ flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 575.98px){
  footer .row > [class*="col-"]{ margin-bottom: 12px; }
}

/* Evitar que <i> con texto use la fuente de iconos */
i:not(.bi){ font-family: inherit !important; font-style: italic; }

/* Footer amarillo y legible */
.footer-thin{ background: var(--cefi-yellow); }
.footer-logo{ height: 28px; }
.footer-social{ flex-wrap: wrap; row-gap: 6px; }
.footer-thin .link-dark{ text-decoration: none; }
.footer-thin .link-dark:hover{ text-decoration: underline; }

/* Línea gris sutil arriba del footer */
.footer-thin{
  background: var(--cefi-yellow);
  border-top: 1px solid #dcdcdc; /* gris claro */
}
/* Navbar azul más gruesa y menú alineado */
.navbar.bg-cefi{
  padding-top: .6rem !important;
  padding-bottom: .6rem !important;
}
.brand-logo{ height: 38px; }
.brand-title{ font-size: 1.15rem; }

/* Asegura que en desktop el menú quede en la misma línea */
@media (min-width: 768px){
  .navbar .container{ flex-wrap: nowrap !important; gap: 12px; }
  #mainNav{ display:flex !important; align-items:center; }
}

/* Footer compacto y elegante */
.footer-thin{
  background: var(--cefi-yellow);
  border-top: 1px solid #dcdcdc; /* línea gris sutil arriba */
}
.footer-logo{ height: 20px; }
.footer-social a{ font-size: 1rem; }
.footer-thin .xsmall{ font-size: .75rem; }

/* En móvil, columnas con espacio */
.footer-thin .row > [class*="col-"]{ margin-bottom: 4px; }
/* Evitar que el header haga wrap en móvil y alinear todo en una línea */
.navbar .container{ flex-wrap: nowrap !important; gap: 8px; }
.brand-logo{ height: 34px; }                 /* tamaño cómodo en móvil */
.brand-title{ font-size: 1.05rem; max-width: 62vw; white-space: nowrap; } /* elipsis si falta ancho */
@media (min-width: 768px){
  .brand-logo{ height: 38px; }
  .brand-title{ font-size: 1.15rem; max-width: none; }
}

/* --- Títulos y secciones --- */
.section-title{ display:flex; align-items:center; gap:.5rem; margin-bottom: .75rem; }
.section-title .bi{ opacity:.85; }

/* --- Cards del dashboard --- */
.card-quick{ border:1px solid #e9ecef; border-radius: 14px; transition: transform .08s ease; }
.card-quick:hover{ transform: translateY(-2px); }
.card-quick .icon{ font-size:1.6rem; opacity:.8; }

/* --- Tablas del dashboard --- */
.table-cefi thead th { background: var(--cefi-blue); color: #fff; }
.table-light-head thead th{ background:#f7f9fc; color:#222; }

/* --- Badges y barras --- */
.badge-accent{ background: var(--cefi-yellow); color:#000; }
.progress-bar-cefi{ background-color: var(--cefi-blue) !important; }

/* --- Botones --- */
.btn-cefi{ background-color: var(--cefi-blue); color:#fff; border:none; }
.btn-cefi:hover{ filter: brightness(0.95); color:#fff; }
.btn-accent{ background-color: var(--cefi-yellow); color:#000; border:none; }
.btn-accent:hover{ filter: brightness(0.95); color:#000; }

/* --- Responsivo --- */
@media (max-width: 575.98px){
  .card-quick .icon{ font-size:1.4rem; }
}

/* Línea decorativa bajo títulos */
.decor-line{ width:60px; height:4px; border-radius:4px;
  background: linear-gradient(90deg, var(--cefi-blue), var(--cefi-yellow)); }

/* Botones institucionales */
.btn-cefi{ background: var(--cefi-blue); color:#fff; border:none; }
.btn-cefi:hover{ filter:brightness(.95); color:#fff; }
.badge-accent{ background: var(--cefi-yellow); color:#000; }
.text-cefi{ color: var(--cefi-blue); }