/* ============================================================================
   CERVERUS V2 — CAPA DE REFINAMIENTO VISUAL (Fase 4)
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de bootstrap y de css/app.css desde base.html.
   100% aditiva: no requiere cambiar ni un ID, clase o estructura DOM.
   Respeta los tokens existentes de base.html (--accent, --radius, --ui-*).
   Colores de estado del proyecto: verde=presente/ok, rojo=ausente/error,
   azul=justificado/info, naranja=tarde/aviso.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1) TIPOGRAFÍA — Inter variable, servida en local (sin CDN externos)
   --------------------------------------------------------------------------*/
@font-face{
  font-family:"InterVariable";
  src:url("../vendor/inter/InterVariable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"InterVariable";
  src:url("../vendor/inter/InterVariable-Italic.woff2") format("woff2");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

body{
  font-family:"InterVariable", system-ui, -apple-system, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Números tabulares en tablas y KPIs: las cifras quedan alineadas en columna */
.table, .stat-number, .tracking-kpi-value, .badge{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  letter-spacing:-.015em;
}

/* ----------------------------------------------------------------------------
   2) MODALES — pulido global (antes solo existía estilo inline en uno)
   --------------------------------------------------------------------------*/
.modal-backdrop.show{
  opacity:.45;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.modal-content{
  border:1px solid rgba(15,23,42,.08);
  border-radius:var(--radius, 18px);
  box-shadow:0 24px 70px rgba(2,6,23,.28);
  overflow:hidden; /* respeta el radius en header/footer sin estilos inline */
}

.modal-header{
  background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.85));
  border-bottom:1px solid rgba(15,23,42,.07);
  padding:.95rem 1.15rem;
}
.modal-header .modal-title{
  font-weight:750;
  letter-spacing:-.01em;
  font-size:1.02rem;
}
.modal-header .btn-close{
  border-radius:999px;
  padding:.55rem;
  transition:background-color .15s ease, transform .15s ease;
}
.modal-header .btn-close:hover{
  background-color:rgba(15,23,42,.06);
  transform:rotate(90deg);
}

.modal-body{ padding:1.1rem 1.15rem; }

.modal-footer{
  border-top:1px solid rgba(15,23,42,.07);
  background:rgba(248,250,252,.7);
  padding:.8rem 1.15rem;
}

/* Animación: leve escala + desvanecido (en vez del desplazamiento por defecto) */
.modal.fade .modal-dialog{
  transform:translateY(14px) scale(.985);
  transition:transform .18s ease-out, opacity .18s ease-out;
}
.modal.show .modal-dialog{
  transform:translateY(0) scale(1);
}

/* ----------------------------------------------------------------------------
   3) FORMULARIOS — inputs, selects, checks
   --------------------------------------------------------------------------*/
.form-control, .form-select{
  border-radius:12px;
  border-color:rgba(15,23,42,.14);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:hover, .form-select:hover{
  border-color:rgba(15,23,42,.24);
}
.form-control:focus, .form-select:focus{
  border-color:var(--accent, #3b82f6);
  box-shadow:0 0 0 .22rem rgba(59,130,246,.14);
}
.form-control-sm, .form-select-sm{ border-radius:10px; }

.form-check-input{ border-color:rgba(15,23,42,.28); }
.form-check-input:checked{
  background-color:var(--accent, #3b82f6);
  border-color:var(--accent, #3b82f6);
}
.form-check-input:focus{
  box-shadow:0 0 0 .2rem rgba(59,130,246,.14);
}

.form-label{
  font-size:.82rem;
  font-weight:650;
  color:rgba(15,23,42,.72);
  margin-bottom:.3rem;
}

::placeholder{ color:rgba(15,23,42,.38) !important; }

/* ----------------------------------------------------------------------------
   4) DROPDOWNS, TOOLTIPS, TOASTS, OFFCANVAS
   --------------------------------------------------------------------------*/
.dropdown-menu{
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(2,6,23,.16);
  padding:.4rem;
}
.dropdown-item{
  border-radius:9px;
  padding:.45rem .7rem;
  font-weight:550;
}
.dropdown-item:hover{ background:rgba(59,130,246,.08); }
.dropdown-item.active, .dropdown-item:active{
  background:var(--accent, #3b82f6);
}
.dropdown-divider{ opacity:.5; margin:.35rem .2rem; }

.tooltip .tooltip-inner{
  border-radius:9px;
  font-weight:600;
  padding:.4rem .6rem;
}

.toast{
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(2,6,23,.18);
}

.offcanvas{
  border-left:1px solid rgba(15,23,42,.08);
  box-shadow:-18px 0 60px rgba(2,6,23,.18);
}

/* ----------------------------------------------------------------------------
   5) TABLAS Y DATATABLES
   --------------------------------------------------------------------------*/
.table > :not(caption) > * > *{
  padding-top:.55rem;
  padding-bottom:.55rem;
}
.table tbody td{ vertical-align:middle; }

/* Paginación (DataTables usa .pagination de Bootstrap) */
.pagination .page-link{
  border-radius:10px;
  margin:0 2px;
  border-color:rgba(15,23,42,.10);
  font-weight:600;
}
.pagination .page-item.active .page-link{
  background:var(--accent, #3b82f6);
  border-color:var(--accent, #3b82f6);
  box-shadow:0 8px 18px rgba(59,130,246,.25);
}

/* Utilidad OPT-IN para cabeceras pegajosas (no cambia nada si no se usa):
   <table class="table table-sticky"> */
.table-sticky thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(248,250,252,.97);
  box-shadow:0 1px 0 rgba(15,23,42,.10);
}

/* ----------------------------------------------------------------------------
   6) BOTONES — micro-interacciones
   --------------------------------------------------------------------------*/
.btn{
  transition:transform .12s ease, box-shadow .15s ease,
             background-color .15s ease, border-color .15s ease;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 .22rem rgba(59,130,246,.22);
}
.btn-group-sm > .btn, .btn-sm{ border-radius:10px; }

/* ----------------------------------------------------------------------------
   7) ALERTS Y BADGES — coherencia con los colores de estado del proyecto
   --------------------------------------------------------------------------*/
.alert{
  border-radius:14px;
  border-width:1px;
}
.alert-success{ border-color:rgba(34,197,94,.35); }
.alert-danger{  border-color:rgba(239,68,68,.35); }
.alert-info{    border-color:rgba(59,130,246,.30); }
.alert-warning{ border-color:rgba(245,158,11,.35); }

.badge.bg-success{ background:linear-gradient(180deg,#22c55e,#16a34a)!important; }
.badge.bg-danger{  background:linear-gradient(180deg,#ef4444,#dc2626)!important; }
.badge.bg-info{    background:linear-gradient(180deg,#3b82f6,#2563eb)!important; }
.badge.bg-warning{ background:linear-gradient(180deg,#f59e0b,#d97706)!important; color:#fff!important; }

/* ----------------------------------------------------------------------------
   8) SCROLLBARS GLOBALES (webkit) — discretas, coherentes con la sidebar
   --------------------------------------------------------------------------*/
.main-content ::-webkit-scrollbar{ width:10px; height:10px; }
.main-content ::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.18);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:content-box;
}
.main-content ::-webkit-scrollbar-thumb:hover{ background-color:rgba(15,23,42,.30); }
.main-content ::-webkit-scrollbar-track{ background:transparent; }

/* ----------------------------------------------------------------------------
   9) IMPRESIÓN — listados limpios desde el navegador
   --------------------------------------------------------------------------*/
@media print{
  .sidebar, .navbar-custom, .navbar-sticker, .sidebar-cta, .btn, .modal-backdrop{
    display:none !important;
  }
  .main-content{ margin-left:0 !important; }
  body{ background:#fff !important; }
  .card{ box-shadow:none !important; border-color:#ddd !important; }
}

/* ----------------------------------------------------------------------------
   10) ACCESIBILIDAD — respetar reducción de movimiento
   --------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce){
  .btn, .modal.fade .modal-dialog, .modal-header .btn-close{
    transition:none !important;
  }
}

/* ============================================================================
   11) MODO OSCURO (Fase 4B) — activado con html[data-theme="dark"]
   ----------------------------------------------------------------------------
   Bootstrap 5.3 hace el grueso vía data-bs-theme="dark" (tablas, cards,
   dropdowns, modales, inputs). Aquí se sobreescriben SOLO los estilos propios
   de CERVERUS que llevan colores claros fijos. La sidebar y la topbar ya son
   oscuras de serie y no se tocan.
   ============================================================================ */

html[data-theme="dark"] body{
  background:
    radial-gradient(1200px 620px at 15% -10%, rgba(59,130,246,.14), transparent 60%),
    radial-gradient(1000px 560px at 100% 5%, rgba(37,99,235,.10), transparent 58%),
    linear-gradient(180deg, #0b1220 0%, #0d1526 55%, #0a101d 100%);
  color:#dbe3ef;
}

/* Superficies propias con blancos fijos */
html[data-theme="dark"] .card{
  background:rgba(17,25,42,.92);
  border-color:rgba(148,163,184,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
html[data-theme="dark"] .card-header{
  background:rgba(13,20,35,.75);
  border-bottom-color:rgba(148,163,184,.12);
}
html[data-theme="dark"] .stat-card{
  background:rgba(17,25,42,.92);
  border-color:rgba(148,163,184,.14);
}

/* Tablas: cabecera clara fija de base.html */
html[data-theme="dark"] .table thead th{
  background:rgba(13,20,35,.9);
  color:rgba(203,213,225,.72);
  border-bottom-color:rgba(148,163,184,.16) !important;
}
html[data-theme="dark"] .table-hover tbody tr:hover{
  background:rgba(59,130,246,.10);
}
html[data-theme="dark"] .table-sticky thead th{
  background:rgba(13,20,35,.97);
  box-shadow:0 1px 0 rgba(148,163,184,.16);
}

/* Modales, dropdowns, toasts (mis estilos de la sección 2 y 4) */
html[data-theme="dark"] .modal-content{
  border-color:rgba(148,163,184,.14);
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
html[data-theme="dark"] .modal-header{
  background:linear-gradient(180deg, rgba(13,20,35,.95), rgba(17,25,42,.85));
  border-bottom-color:rgba(148,163,184,.12);
}
html[data-theme="dark"] .modal-footer{
  background:rgba(13,20,35,.7);
  border-top-color:rgba(148,163,184,.12);
}
html[data-theme="dark"] .modal-header .btn-close:hover{
  background-color:rgba(148,163,184,.14);
}
html[data-theme="dark"] .dropdown-menu{
  border-color:rgba(148,163,184,.14);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
html[data-theme="dark"] .dropdown-item:hover{
  background:rgba(59,130,246,.14);
}
html[data-theme="dark"] .toast{
  border-color:rgba(148,163,184,.14);
}

/* Formularios */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{
  border-color:rgba(148,163,184,.22);
}
html[data-theme="dark"] .form-control:hover,
html[data-theme="dark"] .form-select:hover{
  border-color:rgba(148,163,184,.34);
}
html[data-theme="dark"] .form-label{
  color:rgba(203,213,225,.78);
}
html[data-theme="dark"] ::placeholder{
  color:rgba(203,213,225,.40) !important;
}

/* Alerts con bordes suaves sobre fondo oscuro */
html[data-theme="dark"] .alert-success{ border-color:rgba(34,197,94,.45); }
html[data-theme="dark"] .alert-danger{  border-color:rgba(239,68,68,.45); }
html[data-theme="dark"] .alert-info{    border-color:rgba(59,130,246,.40); }
html[data-theme="dark"] .alert-warning{ border-color:rgba(245,158,11,.45); }

/* Scrollbars del contenido */
html[data-theme="dark"] .main-content ::-webkit-scrollbar-thumb{
  background-color:rgba(148,163,184,.30);
}
html[data-theme="dark"] .main-content ::-webkit-scrollbar-thumb:hover{
  background-color:rgba(148,163,184,.45);
}