:root {
  /* Paleta de datos (dataviz skill) - solo modo claro, este panel no tiene tema oscuro */
  --viz-surface: #fcfcfb;
  --viz-page: #f5f6f8;
  --viz-ink: #0b0b0b;
  --viz-ink-secondary: #52514e;
  --viz-ink-muted: #898781;
  --viz-border: rgba(11,11,11,0.10);
  --viz-sequential: #2a78d6;      /* azul, magnitud */
  --viz-sequential-light: #b7d3f6;
  --viz-good: #0ca30c;
  --viz-warning: #d98a00;         /* paso mas oscuro que el warning base, para icono legible */
  --viz-critical: #d03b3b;
}
body { background-color: var(--viz-page); }
main { min-height: 80vh; }
.table-actions a, .table-actions button { margin-right: .25rem; }
.card-stat .display-6 { font-weight: 600; }

/* ---- Panel principal (dashboard) ---- */
.dash-hero {
  background: linear-gradient(135deg, #1e2530 0%, #2a3546 100%);
  color: #fff;
  border-radius: .75rem;
}
.dash-hero .text-white-50 a { color: #fff; text-decoration: underline; }

.stat-tile { border: 1px solid var(--viz-border); border-radius: .75rem; transition: transform .15s ease, box-shadow .15s ease; }
.stat-tile:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08); }
.stat-tile .stat-icon {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; flex-shrink: 0;
}
.stat-tile .stat-value { font-size: 2rem; font-weight: 600; color: var(--viz-ink); line-height: 1.1; }
.stat-tile .stat-label { color: var(--viz-ink-secondary); font-size: .85rem; }
.stat-icon-blue     { background: rgba(42,120,214,.12); color: var(--viz-sequential); }
.stat-icon-good     { background: rgba(12,163,12,.12); color: var(--viz-good); }
.stat-icon-warning  { background: rgba(217,138,0,.14); color: var(--viz-warning); }

/* Meter: track = mismo tono claro, relleno = color de severidad */
.meter-track { height: .5rem; border-radius: 1rem; background: var(--viz-sequential-light); overflow: hidden; }
.meter-track.is-warning { background: rgba(217,138,0,.20); }
.meter-track.is-critical { background: rgba(208,59,59,.20); }
.meter-fill { height: 100%; border-radius: 1rem; background: var(--viz-sequential); }
.meter-fill.is-warning { background: var(--viz-warning); }
.meter-fill.is-critical { background: var(--viz-critical); }

.quick-action { border: 1px solid var(--viz-border); border-radius: .6rem; text-decoration: none; color: var(--viz-ink); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.quick-action:hover { transform: translateY(-2px); box-shadow: 0 .4rem .8rem rgba(0,0,0,.07); border-color: var(--viz-sequential); color: var(--viz-ink); }
.quick-action .bi { color: var(--viz-sequential); }

.activity-list .activity-item { border-left: 2px solid var(--viz-border); padding: .1rem 0 .1rem .9rem; margin-left: .4rem; position: relative; }
.activity-list .activity-item::before {
  content: ''; position: absolute; left: -5px; top: .35rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--viz-sequential);
}
.activity-list .activity-item:last-child { padding-bottom: 0; }
.badge-estado-ACTIVO, .badge-estado-VIGENTE, .badge-estado-APROBADO, .badge-estado-APROBADA, .badge-estado-CALCULADO, .badge-estado-CALCULADA, .badge-estado-CERRADO, .badge-estado-ACTIVA, .badge-estado-ENVIADO, .badge-estado-PAGADO, .badge-estado-PAGADA { background-color: #198754; }
.badge-estado-CESADO, .badge-estado-RECHAZADO, .badge-estado-SUSPENDIDO, .badge-estado-CANCELADA { background-color: #6c757d; }
.badge-estado-PENDIENTE, .badge-estado-ABIERTO, .badge-estado-EN_PRUEBA { background-color: #fd7e14; }
.badge-estado-VENCIDA, .badge-estado-FALLIDO { background-color: #dc3545; }

/* Layout general: sidebar + contenido */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; }
.app-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* Sidebar (offcanvas-lg: barra fija en escritorio, panel deslizante en movil) */
#sidebar {
  --bs-offcanvas-width: 280px;
  background-color: #1e2530;
}
@media (min-width: 992px) {
  /* Bootstrap fuerza background-color:transparent!important en .offcanvas-lg a partir
     de este breakpoint (para que se comporte como panel estatico); sin este override
     el sidebar queda transparente en escritorio y se mezcla con el fondo de la pagina.
     Tambien fijamos explicitamente position/transform/visibility/ancho: Bootstrap no
     los toca en este breakpoint (asume que ya quedaron en su valor inicial), pero si
     algo los deja en el estado "drawer movil" (position:fixed, transform:translateX)
     el sidebar termina flotando encima del contenido en vez de al costado.        */
  #sidebar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    inset-inline-start: auto !important;
    transform: none !important;
    visibility: visible !important;
    flex: 0 0 280px;
   
    height: 100vh;
    background-color: #1e2530 !important;
    box-shadow: 1px 0 0 rgba(255,255,255,.06);
  }
}
#sidebar .offcanvas-body { background-color: #1e2530 !important; }
#sidebar .accordion,
#sidebar .accordion-item {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: #cfd3d8;
  --bs-accordion-border-color: rgba(255,255,255,.08);
  --bs-accordion-btn-color: #cfd3d8;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: #fff;
  --bs-accordion-active-bg: rgba(255,255,255,.06);
  --bs-accordion-btn-focus-box-shadow: none;
}
#sidebar .accordion-button { font-size: .9rem; padding: .6rem .75rem; }
#sidebar .accordion-button::after { filter: invert(1) grayscale(100%) brightness(1.8); }
#sidebar .accordion-body { scrollbar-width: thin; }
#sidebar .nav-link-sidebar {
  display: block;
  color: #b6bcc4;
  text-decoration: none;
  padding: .4rem .5rem .4rem 2.25rem;
  border-radius: .25rem;
  font-size: .85rem;
  transition: background-color .15s ease, color .15s ease;
}
#sidebar .nav-link-sidebar:hover { background: rgba(255,255,255,.06); color: #fff; }
#sidebar .nav-link-sidebar.active { background: rgba(13,110,253,.35); color: #fff; font-weight: 600; }
#sidebar .dropdown-toggle::after { display: none; }

/* Scrollbar del menu de modulos, a juego con el sidebar oscuro */
#sidebar .accordion-flush.overflow-y-auto::-webkit-scrollbar { width: 8px; }
#sidebar .accordion-flush.overflow-y-auto::-webkit-scrollbar-track { background: transparent; }
#sidebar .accordion-flush.overflow-y-auto::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.15); border-radius: 4px; }
#sidebar .accordion-flush.overflow-y-auto::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.28); }

@media print {
  nav, footer, .no-print, #sidebar { display: none !important; }
}