/* =========================================================================
   Tema institucional — paleta extraída del logo (azul marino + dorado)
   Sobrescribe componentes de Bootstrap 5 cargado por CDN.
   ========================================================================= */
:root{
  --brand-navy: #222955;
  --brand-navy-deep: #171B3D;
  --brand-navy-soft: #3A4270;
  --brand-gold: #B08A3F;
  --brand-gold-light: #EFE6D3;
  --brand-paper: #F7F6F3;
}
body{
  font-family:'IBM Plex Sans', sans-serif;
  background: var(--brand-paper);
}
h1,h2,h3,h4,.navbar-brand,.card-header{ font-family:'Source Serif 4', serif; }
code,.mono{ font-family:'IBM Plex Mono', monospace; }
a{ color: var(--brand-navy); }
a:hover{ color: var(--brand-navy-deep); }

/* --- Botones --- */
.btn-primary{
  --bs-btn-bg: var(--brand-navy); --bs-btn-border-color: var(--brand-navy);
  --bs-btn-hover-bg: var(--brand-navy-deep); --bs-btn-hover-border-color: var(--brand-navy-deep);
  --bs-btn-active-bg: var(--brand-navy-deep); --bs-btn-active-border-color: var(--brand-navy-deep);
  --bs-btn-focus-shadow-rgb: 34,41,85;
}
.btn-outline-primary{
  --bs-btn-color: var(--brand-navy); --bs-btn-border-color: var(--brand-navy);
  --bs-btn-hover-bg: var(--brand-navy); --bs-btn-hover-border-color: var(--brand-navy);
  --bs-btn-active-bg: var(--brand-navy); --bs-btn-active-border-color: var(--brand-navy);
}
.btn-secondary{
  --bs-btn-bg: var(--brand-gold); --bs-btn-border-color: var(--brand-gold);
  --bs-btn-hover-bg:#96742F; --bs-btn-hover-border-color:#96742F;
  --bs-btn-active-bg:#96742F; --bs-btn-active-border-color:#96742F;
}

/* --- Utilidades de color de marca --- */
.bg-primary{ background-color: var(--brand-navy) !important; }
.text-primary{ color: var(--brand-navy) !important; }
.border-primary{ border-color: var(--brand-navy) !important; }
.bg-gold{ background-color: var(--brand-gold) !important; color:#fff; }
.text-gold{ color: var(--brand-gold) !important; }
.badge.bg-primary{ background-color: var(--brand-navy) !important; }
.form-control:focus, .form-select:focus{
  border-color: var(--brand-navy); box-shadow: 0 0 0 .25rem rgba(34,41,85,.18);
}
.form-check-input:checked{ background-color: var(--brand-navy); border-color: var(--brand-navy); }
.nav-pills .nav-link.active{ background-color: var(--brand-navy); }

/* --- Layout con barra lateral --- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:250px; flex-shrink:0; background: var(--brand-navy); color:#fff;
  position:fixed; top:0; bottom:0; left:0; overflow-y:auto; z-index:1030;
  transition: transform .2s ease;
}
.sidebar .logo-box{
  background:#fff; border-radius:.6rem; padding:.6rem; margin:1rem 1rem 1.2rem;
  display:flex; align-items:center; justify-content:center;
}
.sidebar .logo-box img{ max-height:90px; max-width:100%; }
.sidebar .brand-text{ color:#fff; font-weight:700; text-align:center; margin-bottom:1rem; font-size:.95rem; }
.sidebar .nav-link{
  color: rgba(255,255,255,.78); border-radius:.4rem; padding:.5rem .9rem; font-size:.9rem;
}
.sidebar .nav-link:hover{ color:#fff; background: rgba(255,255,255,.08); }
.sidebar .nav-link.active{ color:#fff; background: rgba(255,255,255,.14); font-weight:600; }
.sidebar .section-label{
  color: var(--brand-gold); text-transform:uppercase; font-size:.68rem; letter-spacing:.07em;
  padding:.9rem 1.1rem .2rem; font-weight:600;
}
.main-content{ margin-left:250px; padding:1.6rem 1.8rem 3rem; width:100%; }

@media (max-width: 991.98px){
  .sidebar{ transform: translateX(-100%); }
  .sidebar.show{ transform: translateX(0); box-shadow: 4px 0 18px rgba(0,0,0,.25); }
  .main-content{ margin-left:0; padding:1rem 1rem 2.5rem; }
}

/* --- DataTables: alinear su apariencia con Bootstrap/tema --- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border:1px solid #ced4da; border-radius:.375rem; padding:.25rem .5rem;
}
.dataTables_wrapper .page-link{ color: var(--brand-navy); }
.dataTables_wrapper .page-item.active .page-link{
  background-color: var(--brand-navy); border-color: var(--brand-navy);
}
table.dataTable thead th{ background: var(--brand-gold-light); white-space:nowrap; }

/* --- Tarjetas de inicio de sesión / instalación --- */
.auth-card{ max-width:400px; width:100%; }
.auth-logo{ max-height:110px; margin:0 auto 1rem; display:block; }