/* ============================================================
   VB THEME — capa estética global del Panel Integral VB.
   Se inyecta al final de <head> en todas las páginas (ver vb_theme.py),
   por eso sobrescribe los estilos propios de cada módulo sin tocar su
   HTML ni su lógica. vb-theme.js solo agrega controles de interfaz
   (menú móvil, modo oscuro); no toca los elementos de los módulos.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --vb-sidebar-w: 248px;
  --vb-rail-w: 84px;
  --vb-bg: #f4f6fa;
  --vb-surface: #ffffff;
  --vb-ink: #262b36;
  --vb-text: #3b4252;
  --vb-muted: #8f98a8;
  --vb-nav-text: #555f71;
  --vb-nav-icon: #7a8599;
  --vb-border: #eceff4;
  --vb-blue: #2a86d1;
  --vb-blue-dark: #1f6fb3;
  --vb-blue-soft: #e9f3fc;
  --vb-navy: #1f3b63;
  --vb-yellow: #f9c33c;
  --vb-yellow-dark: #e9ad1c;
  --vb-radius: 18px;
  --vb-radius-sm: 10px;
  --vb-shadow: 0 10px 30px rgba(31, 59, 99, .06);
  --vb-shadow-hover: 0 14px 34px rgba(31, 59, 99, .11);
  --vb-font: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Variables propias de los módulos: al redefinirlas aquí, cada módulo
     adopta la nueva paleta en sus propias reglas. */
  --primary-color: var(--vb-navy);
  --secondary-color: var(--vb-blue);
  --accent-color: #4aa3e6;
  --light-bg: var(--vb-bg);
  --text-primary: var(--vb-text);
  --text-secondary: #8a94a6;
  --border-color: var(--vb-border);
  --shadow-sm: var(--vb-shadow);
  --shadow-md: var(--vb-shadow-hover);
  --shadow-lg: 0 18px 40px rgba(31, 59, 99, .10);
  --shadow: var(--vb-shadow);
  --primary: var(--vb-navy);
  --secondary: var(--vb-blue);
  --border: var(--vb-border);
  --text: var(--vb-text);
  --muted: #8a94a6;
  --bg: var(--vb-bg);
  --card-bg: var(--vb-surface);
  --white: #ffffff;

  --bs-body-font-family: var(--vb-font);
  --bs-body-bg: var(--vb-bg);
  --bs-body-color: var(--vb-text);
  --bs-border-color: var(--vb-border);
  --bs-primary: var(--vb-blue);
  --bs-primary-rgb: 42, 134, 209;
  --bs-link-color: var(--vb-blue);
  --bs-link-color-rgb: 42, 134, 209;
  --bs-link-hover-color: var(--vb-blue-dark);
}

/* ── Base ──────────────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; background: var(--vb-bg); }

body {
  font-family: var(--vb-font) !important;
  background: var(--vb-bg) !important;
  color: var(--vb-text);
}

button, input, select, textarea, .btn, .form-control, .form-select, table {
  font-family: var(--vb-font);
}

/* Sin color: los títulos heredan el de su contenedor (p. ej. blanco en banners de color) */
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.2px; }
h1 { font-weight: 700; }

::selection { background: var(--vb-blue-soft); color: var(--vb-navy); }

* { scrollbar-width: thin; scrollbar-color: #d5dbe5 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #d5dbe5; border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Header del módulo (antes navbar azul) ─────────────────── */
nav.navbar-custom,
body > nav.navbar,
body > .dashboard-wrapper > nav.navbar {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 26px 12px 4px !important;
  min-height: 0 !important;
}

/* El nombre del panel queda como rótulo; el título de cada módulo es el principal */
nav.navbar-custom .navbar-brand,
nav.navbar-custom .brand,
body > nav.navbar .navbar-brand,
nav.navbar .navbar-brand.text-white {
  color: var(--vb-muted) !important;
  font-family: var(--vb-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .2px;
  text-decoration: none;
  white-space: normal;
  line-height: 1.3;
}

nav.navbar-custom .navbar-brand i,
body > nav.navbar .navbar-brand i { color: var(--vb-blue); }

nav.navbar-custom .nav-link,
nav.navbar-custom .text-white,
nav.navbar-custom .text-white-50,
body > nav.navbar .nav-link {
  color: var(--vb-nav-text) !important;
  font-weight: 500;
}
nav.navbar-custom .nav-link:hover,
body > nav.navbar .nav-link:hover { color: var(--vb-blue) !important; }

/* ── Sidebar: la barra de pestañas de módulos pasa al costado ─ */
:is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--vb-sidebar-w) !important;
  z-index: 1040 !important;
  margin: 0 !important;
  padding: 118px 16px 18px !important;
  background: var(--vb-surface) !important;
  border: none !important;
  border-right: 1px solid var(--vb-border) !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

:is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) > ul {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  flex: 1 0 auto;
  gap: 2px;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: visible !important;
}

:is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) > ul > li {
  width: 100%;
  margin: 0 !important;
}

/* Accesos de ícono (Ajustar metas, usuarios, salir) al fondo del sidebar */
:is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) > ul > li.ms-auto {
  margin-top: auto !important;
  padding-top: 14px;
  border-top: 1px solid var(--vb-border);
}

:is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) .nav-link {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: none !important;
  border-radius: var(--vb-radius-sm) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--vb-nav-text) !important;
  font-family: var(--vb-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

:is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) .nav-link i {
  width: 18px;
  margin: 0 !important;
  text-align: center;
  font-size: 15px;
  flex-shrink: 0;
  color: var(--vb-nav-icon);
}

/* Los accesos de solo ícono muestran su título como etiqueta
   (vb-theme.js marca con data-vb-tipped los links a los que solo agrega tooltip) */
:is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) .nav-link[title]:not([data-vb-tipped])::after {
  content: attr(title);
}

:is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) .nav-link:hover {
  background: #f3f6fb !important;
  color: var(--vb-navy) !important;
}
:is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) .nav-link:hover i { color: var(--vb-navy); }

:is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) .nav-link.active {
  background: var(--vb-blue-soft) !important;
  color: var(--vb-blue) !important;
  font-weight: 600 !important;
}
:is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) .nav-link.active i { color: var(--vb-blue); }

/* Logo VB (ya presente en el header) se posiciona en la cabecera del sidebar */
body:has(:is(ul.nav-tabs-minimal, .tabs-bar)) nav.navbar img {
  position: fixed !important;
  top: 22px !important;
  left: 26px !important;
  height: 74px !important;
  width: auto !important;
  z-index: 1041 !important;
  margin: 0 !important;
  /* Recolorea el logo (dorado en el header azul) al azul del tema sobre fondo blanco */
  filter: brightness(0) saturate(100%) invert(42%) sepia(76%) saturate(1180%) hue-rotate(185deg) brightness(92%) contrast(90%) !important;
}

/* El contenido se recorre para dejar espacio al sidebar */
body:has(:is(ul.nav-tabs-minimal, .tabs-bar)) {
  padding-left: var(--vb-sidebar-w) !important;
}

/* ── Controles agregados por vb-theme.js ───────────────────── */
/* Barra superior derecha: modo claro/oscuro y cerrar sesión (solo íconos).
   Va en posición absoluta para desplazarse con la página y no tapar contenido. */
.vb-topbar {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 1045;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--vb-border);
  border-radius: 50%;
  background: var(--vb-surface);
  color: var(--vb-nav-text);
  font-size: 16px;
  box-shadow: var(--vb-shadow);
  cursor: pointer;
  text-decoration: none;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.vb-icon-btn:hover {
  color: var(--vb-blue);
  border-color: #d6e6f5;
  background: var(--vb-blue-soft);
}
.vb-icon-btn.vb-logout:hover {
  color: #d64545;
  border-color: #f3d2d2;
  background: #fdf0f0;
}

/* La salida se hace desde la barra superior; se oculta la del sidebar */
:is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) li:has(> a[href="/logout"]) {
  display: none !important;
}

/* El header deja libre la esquina donde está la barra superior */
html.vb-has-topbar nav.navbar-custom,
html.vb-has-topbar body > nav.navbar {
  padding-right: 128px !important;
}

.vb-nav-burger,
.vb-nav-backdrop { display: none; }

/* ── Tarjetas y contenedores ───────────────────────────────── */
.card,
.card-premium,
.metric-card,
.chart-container,
.filter-panel,
.table-container,
.hero-chart-section,
.chart-card,
.analytic-card,
.table-card,
.kpi-card,
.kpi-card-strat,
.year-card,
.summary-card,
.section-card,
.stat-card {
  background: var(--vb-surface);
  border: 1px solid var(--vb-border) !important;
  border-radius: var(--vb-radius) !important;
  box-shadow: var(--vb-shadow) !important;
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--vb-border);
  font-weight: 600;
}
.card > .card-header:first-child { border-radius: var(--vb-radius) var(--vb-radius) 0 0; }

.section-title, .table-title { font-weight: 600; }

/* Ningún contenido gráfico puede ser más ancho que su contenedor */
canvas, svg, img, video, iframe { max-width: 100%; }

/* Celdas de grids en línea: pueden encogerse en vez de empujar el contenido fuera */
[style*="display:grid"] > *,
[style*="display: grid"] > *,
[style*="grid-template-columns"] > * { min-width: 0; }

/* Contenedores cuya tabla no cabe (marcados por vb-theme.js): scroll horizontal interno */
.vb-scroll-x {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── Ajustes de ancho por módulo (el sidebar reduce el espacio) ─ */
/* Seg. Irrecuperable: las tarjetas de año pasan a otra fila cuando no caben */
.years-wrapper { flex-wrap: wrap; }

/* Celdas de rejillas de módulos: pueden encogerse y dejar que su tabla haga scroll */
.cards-grid > *,
.top-dashboard > *,
.resumen-grid > *,
.grid-67-33 > *,
.grid-70-30 > *,
.grid-60-40 > * { min-width: 0; }

/* P.P.: los encabezados de columnas angostas se parten en renglones en vez de encimarse */
.mini-tbl thead th,
table.pp-table thead th {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* ── Tablas ────────────────────────────────────────────────── */
.table {
  --bs-table-border-color: var(--vb-border);
  --bs-table-hover-bg: #f7f9fc;
  --bs-table-striped-bg: #fafbfd;
}
table tbody tr { transition: background-color .12s ease; }

/* ── Pestañas internas de cada módulo ──────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--vb-border);
  gap: 4px;
}
.nav-tabs .nav-link {
  border: none !important;
  border-radius: var(--vb-radius-sm) var(--vb-radius-sm) 0 0;
  color: var(--vb-muted);
  font-weight: 500;
}
.nav-tabs .nav-link.active {
  color: var(--vb-blue);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--vb-blue);
}
.nav-pills .nav-link { border-radius: var(--vb-radius-sm); color: var(--vb-muted); font-weight: 500; }
.nav-pills .nav-link.active { background: var(--vb-blue); color: #fff; }

/* ── Botones ───────────────────────────────────────────────── */
.btn {
  border-radius: var(--vb-radius-sm);
  font-weight: 500;
  letter-spacing: .1px;
}
.btn-primary {
  --bs-btn-bg: var(--vb-blue);
  --bs-btn-border-color: var(--vb-blue);
  --bs-btn-hover-bg: var(--vb-blue-dark);
  --bs-btn-hover-border-color: var(--vb-blue-dark);
  --bs-btn-active-bg: var(--vb-blue-dark);
  --bs-btn-active-border-color: var(--vb-blue-dark);
  --bs-btn-disabled-bg: var(--vb-blue);
  --bs-btn-disabled-border-color: var(--vb-blue);
}
.btn-outline-primary {
  --bs-btn-color: var(--vb-blue);
  --bs-btn-border-color: var(--vb-blue);
  --bs-btn-hover-bg: var(--vb-blue);
  --bs-btn-hover-border-color: var(--vb-blue);
  --bs-btn-active-bg: var(--vb-blue-dark);
  --bs-btn-active-border-color: var(--vb-blue-dark);
}
.btn-secondary {
  --bs-btn-color: var(--vb-text);
  --bs-btn-bg: #eef1f6;
  --bs-btn-border-color: #eef1f6;
  --bs-btn-hover-color: var(--vb-ink);
  --bs-btn-hover-bg: #e3e8f0;
  --bs-btn-hover-border-color: #e3e8f0;
}
.btn-warning {
  --bs-btn-color: var(--vb-ink);
  --bs-btn-bg: var(--vb-yellow);
  --bs-btn-border-color: var(--vb-yellow);
  --bs-btn-hover-bg: var(--vb-yellow-dark);
  --bs-btn-hover-border-color: var(--vb-yellow-dark);
}

/* ── Formularios ───────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--vb-radius-sm);
  border-color: #e3e7ee;
}
.form-control:focus, .form-select:focus {
  border-color: var(--vb-blue);
  box-shadow: 0 0 0 3px rgba(42, 134, 209, .14);
}
.form-label { color: var(--vb-text); font-weight: 500; }

/* Inputs nativos sin clase de Bootstrap: solo borde y radio, sin cambiar su tamaño */
input:is([type="text"], [type="date"], [type="month"], [type="number"], [type="search"], [type="password"]):not([class*="form-"]),
select:not([class*="form-"]) {
  border: 1px solid #e3e7ee;
  border-radius: 8px;
  background-color: #fff;
  color: var(--vb-text);
}
input:is([type="text"], [type="date"], [type="month"], [type="number"], [type="search"], [type="password"]):not([class*="form-"]):focus,
select:not([class*="form-"]):focus {
  outline: none;
  border-color: var(--vb-blue);
  box-shadow: 0 0 0 3px rgba(42, 134, 209, .14);
}

/* ── Modales, dropdowns, badges ────────────────────────────── */
.modal-content {
  border: none;
  border-radius: var(--vb-radius);
  box-shadow: 0 24px 60px rgba(31, 59, 99, .18);
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--vb-border); }
.modal-footer { border-top: 1px solid var(--vb-border); }
.modal-title { font-weight: 600; }

.dropdown-menu {
  border: 1px solid var(--vb-border);
  border-radius: 12px;
  box-shadow: var(--vb-shadow-hover);
}

.badge { border-radius: 999px; font-weight: 600; }

/* ============================================================
   MODO OSCURO
   Invierte la luminosidad de toda la página conservando el tono de
   cada color (verde sigue verde, rojo sigue rojo), así cubre también
   los colores fijos de cada módulo. Fotos y logos se re-invierten.
   ============================================================ */
html[data-vb-theme="dark"] {
  filter: invert(.9) hue-rotate(180deg);
  background: #fff;
  --vb-shadow: 0 0 0 1px rgba(31, 59, 99, .05);
  --vb-shadow-hover: 0 0 0 1px rgba(31, 59, 99, .08);
  --shadow-lg: 0 0 0 1px rgba(31, 59, 99, .06);
}
html[data-vb-theme="dark"] :is(img, video, picture, iframe):not(nav.navbar img) {
  filter: invert(1) hue-rotate(180deg);
}
/* El fondo oscuro de los modales de Bootstrap se invertiría a blanco */
html[data-vb-theme="dark"] .modal-backdrop { background-color: #fff; }

/* ============================================================
   RESPONSIVE
   ≥1200px  sidebar completo
   768–1199 sidebar compacto de íconos (tablets, laptops chicas)
   <768     sidebar oculto que se abre con el botón de menú (teléfonos)
   ============================================================ */
@media (max-width: 1199.98px) {
  body:has(:is(ul.nav-tabs-minimal, .tabs-bar)) { padding-left: var(--vb-rail-w) !important; }

  :is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) {
    width: var(--vb-rail-w) !important;
    padding: 84px 12px 14px !important;
  }

  :is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) .nav-link {
    justify-content: center;
    padding: 12px 0 !important;
    font-size: 0 !important;
    gap: 0;
  }
  :is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) .nav-link i { font-size: 17px; }
  :is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) .nav-link[title]:not([data-vb-tipped])::after { content: none; }


  body:has(:is(ul.nav-tabs-minimal, .tabs-bar)) nav.navbar img {
    top: 20px !important;
    left: 14px !important;
    height: auto !important;
    width: 56px !important;
  }
}

@media (max-width: 767.98px) {
  body:has(:is(ul.nav-tabs-minimal, .tabs-bar)) { padding-left: 0 !important; }

  :is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) {
    width: min(280px, 82vw) !important;
    padding: 76px 16px 18px !important;
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index: 1052 !important;
    box-shadow: 0 0 40px rgba(31, 59, 99, .18) !important;
  }
  html.vb-nav-open :is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) { transform: none; }

  :is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) .nav-link {
    justify-content: flex-start;
    padding: 11px 14px !important;
    font-size: 14px !important;
    gap: 12px;
  }
  :is(.tabs-container-modules, .tabs-bar, div:has(> ul.nav-tabs-minimal)) .nav-link[title]:not([data-vb-tipped])::after { content: attr(title); }

  /* Logo vuelve al header, a la derecha, junto al botón de menú */
  body:has(:is(ul.nav-tabs-minimal, .tabs-bar)) nav.navbar img {
    position: static !important;
    width: auto !important;
    height: 40px !important;
  }

  nav.navbar-custom,
  body > nav.navbar {
    padding: 14px 14px 4px 64px !important;
    flex-wrap: nowrap !important;
  }
  nav.navbar-custom .navbar-brand,
  nav.navbar-custom .brand,
  body > nav.navbar .navbar-brand { font-size: 12px !important; }

  .vb-nav-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1053;
    width: 42px;
    height: 42px;
    border: 1px solid var(--vb-border);
    border-radius: 12px;
    background: var(--vb-surface);
    color: var(--vb-ink);
    font-size: 18px;
    box-shadow: var(--vb-shadow);
    cursor: pointer;
  }
  .vb-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1051;
    background: rgba(20, 28, 42, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  html.vb-nav-open .vb-nav-backdrop { opacity: 1; pointer-events: auto; }
  html[data-vb-theme="dark"] .vb-nav-backdrop { background: rgba(235, 227, 213, .35); }

  .vb-topbar { top: 12px; right: 12px; gap: 8px; }
  html.vb-has-topbar nav.navbar-custom,
  html.vb-has-topbar body > nav.navbar { padding-right: 112px !important; }


  /* Filas de botones y filtros se acomodan en renglones en vez de salirse */
  .d-flex:not(.flex-column):not(.flex-nowrap) { flex-wrap: wrap; }
  .btn-group { flex-wrap: wrap; max-width: 100%; }
  .date-filter-bar,
  .cal-nav { flex-wrap: wrap !important; }
  .cal-nav .mes { min-width: 0 !important; }

  /* Rejillas de dos columnas pasan a una */
  .top-dashboard,
  .resumen-grid,
  .cards-grid { grid-template-columns: 1fr !important; }

  /* Pestañas internas que no caben: se desplazan horizontalmente */
  .tabs-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .tabs-nav > * { flex-shrink: 0; }
}