:root {
  --brand:#1B396A;
  --brand-600:#274f86;
  --bg:#f4f6fb;
  --surface:#ffffff;
  --text:#111827;
  --text-muted:#6b7280;
  --border:#e5e7eb;
  --accent:#eff6ff;
  /* Nuevas semánticas para overlays */
  --dim-bg: rgba(108,117,125,.18);
  --loader-bg-light: rgba(255,255,255,.9);
  --loader-bg-dark: rgba(33,37,41,.92);
}
@media (prefers-color-scheme: dark){
  :root {
    --bg:#0b1220;
    --surface:#101a2e;
    --text:#e8eef9;
    --text-muted:#9fb3d1;
    --border:#20304d;
    --accent:#0f2647;
    --dim-bg: rgba(255,255,255,.18);
  }
}
html[data-theme="dark"] {
  --bg:#0b1220; --surface:#101a2e; --text:#e8eef9; --text-muted:#9fb3d1; --border:#20304d; --accent:#0f2647; --dim-bg: rgba(255,255,255,.18);
}
html[data-theme="light"] {
  --bg:#f4f6fb; --surface:#ffffff; --text:#111827; --text-muted:#6b7280; --border:#e5e7eb; --accent:#eff6ff; --dim-bg: rgba(108,117,125,.18);
}

body.bg-dash { background: var(--bg); color: var(--text); }

.brand-circle{ width:36px; height:36px; border-radius:50%; background:#fff; color:var(--brand); display:flex; align-items:center; justify-content:center; font-weight:800; }
.brand-sm{ width:32px; height:32px; font-size:.9rem; }

/* Sidebar */
.dash-sidebar{
  position: fixed; top:0; left:0; bottom:0; width: 240px;
  background: linear-gradient(180deg, var(--brand), #0e2548);
  box-shadow: 0 8px 30px rgba(0,0,0,.25); z-index: 1030;
}
.dash-main{ margin-left: 0; }
@media(min-width:992px){ .dash-main{ margin-left: 240px; } }

.divider-soft{ border-color: rgba(255,255,255,.2); }
.dash-link{
  color:#e9f0ff; border-radius:.6rem; padding:.45rem .6rem; cursor:pointer;
}
.dash-link:hover{ background: rgba(255,255,255,.12); color:#fff; }
.dash-link.active{ background:#ffffff; color: var(--brand); font-weight:600; }
/* Accesibilidad de foco */
.dash-link:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.dash-link.active:focus-visible{ outline-color: var(--brand); }

/* Hero */
.dash-hero{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 60%, #0e2548 100%);
  color:#fff; padding: 18px clamp(16px,2vw,28px);
  position: sticky; top:0; z-index:1020;
  box-shadow: 0 6px 22px rgba(0,0,0,.15);
}

/* Cards / tablas */
.card { border-radius: 14px; background: var(--surface); border:1px solid var(--border); color: var(--text); }
.table-hover tbody tr:hover { background: var(--accent); }
.table thead th{ color: var(--text); font-weight:600; border-bottom: 1px solid var(--border); }
/* Ajuste: tfoot usa td en el HTML */
.table tfoot td { border-top:1px solid var(--border); font-weight:600; }

/* KPIs */
.kpi{ min-height:88px; border-left: 4px solid var(--brand); border-radius:14px; }
.kpi .small{ color:var(--text-muted); }
.kpi .h5{ color:var(--text); }

/* Chart */
.chart-wrap{
  min-height: 360px;
  position: relative; /* necesario para overlays */
}

/* Loader de fondo tipo “tela” (existente) */
.loader{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: repeating-linear-gradient(-45deg, rgba(0,0,0,.02), rgba(0,0,0,.02) 6px, rgba(0,0,0,.04) 6px, rgba(0,0,0,.04) 12px);
  border-radius: 12px; visibility:hidden; opacity:0; transition: .2s ease;
  color: var(--text);
}
html[data-theme="dark"] .loader{
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 6px, rgba(255,255,255,.05) 6px, rgba(255,255,255,.05) 12px);
}
.loader.show{ visibility:visible; opacity:1; }

/* =================== NUEVO: Dim y overlay de carga =================== */

/* “Apagar” secciones (gris con leve blur) sin bloquear clics */
.loading-dim { position: relative; }
.loading-dim::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--dim-bg);
  backdrop-filter: blur(1px);
  pointer-events: none;
  border-radius: 12px;
  z-index: 2;
}

/* Overlay centrado (usa barra de progreso) */
.loader-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3; /* sobre el dim */
  pointer-events: none; /* no bloquea */
}
.loader-box {
  min-width: 260px;
  max-width: 90%;
  background: var(--loader-bg-light);
  padding: .75rem .875rem;
  border-radius: .5rem;
  box-shadow: 0 6px 30px rgba(0,0,0,.1);
  text-align: center;
}
html[data-theme="dark"] .loader-box { background: var(--loader-bg-dark); color: #e9ecef; }

/* Barra de progreso compacta */
.progress-thin { height: 6px; margin-top: .5rem; }

/* Skeletons */
.skeleton{ height:88px; border-radius:14px; position:relative; overflow:hidden; background:#eef2f8; border:1px solid var(--border); }
html[data-theme="dark"] .skeleton{ background:#13223c; }
.skeleton::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-100%); animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ to{ transform: translateX(100%);} }

/* Botones */
.btn-outline-secondary { color: var(--text); border-color: var(--border); }
.btn-outline-secondary:hover { background: var(--accent); }
.btn-outline-secondary:disabled { opacity:.6; color: var(--text-muted); }
.btn-outline-secondary:focus-visible { outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }

/* Paginador responsivo */
#tblPager { flex-wrap: wrap; gap: .5rem; }
#tblPager .pagination { margin-top: .25rem; }

/* Estado sin datos opcional para chart (se activa si agregas .empty por JS) */
.chart-wrap.empty::before{
  content:"Sin datos para los filtros seleccionados";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color: var(--text-muted);
}

/* Reduce motion: accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
  .loading-dim::after { backdrop-filter: none; }
}

/* Impresión básica */
@media print {
  .dash-sidebar, .dash-hero, #tblPager, .btn, .offcanvas { display:none !important; }
  .card { box-shadow:none; border-color:#ccc; }
  body { background:#fff; color:#000; }
}





/* ===== Preloader Cubo OLAP ===== */
:root{
  --cube-size: 72px;
  --cube-bg: #0d6efd;         /* Bootstrap primary */
  --cube-fg: #ffffff;
  --cube-edge: rgba(255,255,255,.35);
  --overlay-bg: #0b132433;    /* sutil */
}

.preloader{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--overlay-bg);
  backdrop-filter: blur(2px);
  z-index: 1080; /* por encima del modal bootstrap (1055) */
}

.cube{
  width: var(--cube-size);
  height: var(--cube-size);
  position: relative;
  transform-style: preserve-3d;
  animation: spin 2600ms linear infinite;
  will-change: transform;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
}

.cube .face{
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  background: var(--cube-bg);
  color: var(--cube-fg);
  font: 700 14px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  border: 1px solid var(--cube-edge);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
  backface-visibility: hidden;
}

/* Posicionamiento 3D (Z = mitad del tamaño) */
:root{ --hz: calc(var(--cube-size) / 2); }
.cube .f1{ transform: translateZ(var(--hz)); }                /* Frente   */
.cube .f2{ transform: rotateY(90deg)  translateZ(var(--hz)); }/* Derecha  */
.cube .f3{ transform: rotateY(180deg) translateZ(var(--hz)); }/* Fondo    */
.cube .f4{ transform: rotateY(-90deg) translateZ(var(--hz)); }/* Izquierda*/
.cube .f5{ transform: rotateX(90deg)  translateZ(var(--hz)); }/* Arriba   */
.cube .f6{ transform: rotateX(-90deg) translateZ(var(--hz)); }/* Abajo    */

/* Animación */
@keyframes spin{
  0%   { transform: rotateX(-20deg) rotateY(0deg); }
  50%  { transform: rotateX(-20deg) rotateY(180deg); }
  100% { transform: rotateX(-20deg) rotateY(360deg); }
}

/* Modo oscuro — opcional */
@media (prefers-color-scheme: dark){
  :root{
    --overlay-bg: #0b132466;
    --cube-bg: #6ea8fe; /* primary-300 */
    --cube-fg: #0b1324;
    --cube-edge: rgba(0,0,0,.25);
  }
}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .cube{ animation: none; }
}

/* Ocultar preloader cuando tenga la clase .hide */
.preloader.hide{
  animation: fadeOut .35s ease forwards;
}
@keyframes fadeOut{
  to{ opacity: 0; visibility: hidden; }
}