/* assets/custom.css — NCHS Dashboard */

/* ── Fuente global: Segoe UI (igual que Shiny) ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}

body {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
  background: #fafafa;
  color: #3a3a5c;
}

h1, h2, h3, h4, h5, h6,
p, span, div, a, li, td, th,
button, input, select, textarea, label,
.container, .container-fluid, .row, .col,
.card, .card-body, .card-header, .card-footer,
.nav, .navbar, .dropdown-menu,
pre, code, small, strong, em {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Plotly graph text is controlled via Python, not CSS */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f5f3ff; }
::-webkit-scrollbar-thumb { background: #c5b8f0; border-radius: 4px; }

.nav-link-item:hover {
  background: #2e2e4a !important;
  color: white !important;
}

.card { transition: box-shadow 0.2s ease; }
.card:hover { box-shadow: 0 6px 20px rgba(90, 79, 207, 0.10) !important; }

.form-control:focus {
  border-color: #c5b8f0 !important;
  box-shadow: 0 0 0 3px rgba(197,184,240,0.3) !important;
}

.btn-primary {
  background: #5a4fcf !important;
  border-color: #5a4fcf !important;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(90,79,207,0.35) !important;
}

#main-content > * {
  animation: fadeUp 0.22s ease forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rc-slider-track { background-color: #c5b8f0 !important; }
.rc-slider-handle { border-color: #5a4fcf !important; }
.rc-slider-dot-active { border-color: #5a4fcf !important; }

.table-hover tbody tr:hover { background-color: #f5f3ff !important; }
.badge { font-weight: 600; letter-spacing: 0.02em; }

#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-track { background: #1e1e2e; }
#sidebar::-webkit-scrollbar-thumb { background: #3a3a5c; border-radius: 4px; }

@media (max-width: 768px) {
  #sidebar { width: 180px !important; min-width: 180px !important; }
  #main-content { margin-left: 180px !important; }
}

.dash-graph { border-radius: 8px; overflow: hidden; }
.alert { border-radius: 10px !important; }
.progress { border-radius: 8px; }
.progress-bar { transition: width 0.6s ease; }

.card-header {
  background: #001f3f !important;
  color: white !important;
  border-bottom: none !important;
  padding: 12px 16px !important;
  border-radius: 12px 12px 0 0 !important;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-header p, .card-header span, .card-header small {
  color: white !important;
}

.dash-table-container .dash-spreadsheet-inner td,
.dash-table-container .dash-spreadsheet-inner th {
  font-size: 0.82rem !important;
}