/* =============================================================================
   PMO SUITE PMI — capa de estilos propia (sobre css/base.css)
   Para re-brandear un cliente basta con cambiar los tokens de :root de abajo.
============================================================================= */

:root {
  /* --- TOKENS DE MARCA DEL CLIENTE (white-label) --- */
  --brand:       #004aad;
  --brand-dark:  #003580;
  --brand-light: #1a6bd6;
  --accent:      #C9A84C;
}

/* --- Navegación: muchos módulos ⇒ scroll propio y densidad menor --- */
.sidebar-nav {
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 12px;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
.nav-item { padding: 8px 14px; font-size: 12.5px; }
.nav-item .nav-icon { font-size: 12px; }
.nav-section-title { margin-top: 12px; }

/* --- Tablas: densas, legibles y con scroll horizontal contenido --- */
.data-table { font-size: 12.5px; }
.data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}
.data-table td { vertical-align: top; line-height: 1.5; }
.card-body.no-padding .data-table { min-width: 100%; }

/* --- Grids responsivos --- */
@media (max-width: 1280px) {
  .grid-2, .grid-2-1, .grid-1-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sidebar { position: fixed; left: -100%; z-index: 200; transition: left .25s ease; height: 100vh; }
  .sidebar.open { left: 0; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* --- KPI: valores largos (montos) no deben desbordar --- */
.kpi-card .kpi-value { font-size: 22px; word-break: break-word; }
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* --- Impresión: la vista actual sale limpia en papel --- */
@media print {
  .sidebar, .top-bar, .header-actions, .btn { display: none !important; }
  .main-content { margin: 0 !important; }
  .page-content { padding: 0 !important; }
  .card { break-inside: avoid; border-color: #ccc; }
  body { background: #fff; }
}