/* Dark elegant theme with blue accents and subtle gradients */
:root {
  --bs-primary: #9b5cff; /* royal purple */
  --bs-secondary: #c7b3ff;
  --bs-success: #43d29d;
  --bs-info: #6ec7ff;
  --bs-warning: #f0b44b;
  --bs-danger: #ff6b8a;
  --bs-light: #1b1028;
  --bs-dark: #0c0816;
  --spa-bg-start: #0c071d;
  --spa-bg-end: #1a0f35;
  --spa-card: #120a26;
  --spa-border: #2e1f48;
  --spa-text: #f3edff;
  --spa-muted: #c8b8e6;
  --spa-accent: #f7d6ff; /* soft lavender accent */
  --spa-shadow: 0 14px 36px rgba(8, 2, 24, 0.55);
  --spa-radius: 0.9rem;
}

html { min-height: 100%; }

body {
  background:
    radial-gradient(900px 520px at 20% -10%, rgba(255, 120, 242, 0.32), transparent 60%),
    radial-gradient(900px 520px at 105% 5%, rgba(91, 122, 255, 0.26), transparent 60%),
    radial-gradient(720px 420px at 50% 110%, rgba(255, 93, 177, 0.24), transparent 60%),
    linear-gradient(155deg, var(--spa-bg-start), var(--spa-bg-end));
  background-attachment: fixed;
  color: var(--spa-text);
  min-height: 100vh;
  animation: spa-fade-in 0.7s ease-out both;
}

.card {
  border: 1px solid var(--spa-border);
  background: radial-gradient(900px 520px at 12% -15%, rgba(171, 126, 255, 0.18), transparent 60%),
              radial-gradient(900px 520px at 95% 0%, rgba(255, 120, 242, 0.12), transparent 55%),
              linear-gradient(185deg, #160a2d, var(--spa-card));
  border-radius: var(--spa-radius);
  box-shadow: var(--spa-shadow);
  color: var(--spa-text);
  animation: spa-rise-in 0.55s ease-out both;
}
.card .card-header { border-top-left-radius: var(--spa-radius); border-top-right-radius: var(--spa-radius); }

.table { color: var(--spa-text); }
.table th { background-color: #202736; color: var(--spa-text); }
/* Force high-contrast table headers on dark theme */
.table thead tr { background-color: #1f2633 !important; }
.table thead th, .table thead td { background-color: #1f2633 !important; color: #e6eaf1 !important; font-weight: 600; border-bottom-color: #2a3240 !important; }
.table thead { box-shadow: inset 0 -1px 0 #2a3240; }
/* Ensure body cells are readable on dark rows */
.table tbody th, .table tbody td { color: #e6eaf1 !important; }
.table tbody tr:hover { background-color: #1a2030; }

.form-control, .form-select { border-radius: 0.6rem; background-color: #1a2130; border-color: #2a3240; color: var(--spa-text); }
.form-label { color: var(--spa-text); }
.form-control::placeholder { color: var(--spa-muted); }
.form-control:focus, .form-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.25rem rgba(47,123,255,.25); }

.btn { border-radius: 0.6rem; }
.btn-primary { background-image: linear-gradient(185deg, #b57bff, #8e4bff); border: none; box-shadow: 0 10px 24px rgba(142,75,255,.45); }
.btn-outline-light { border-color: #8790a3; color: #e6eaf1; }
.btn-outline-light:hover { background-color: #2a3240; }

.alert { border-radius: 0.6rem; }
/* Improve contrast for warning alerts on dark modals */
.alert-warning { 
  background-color: #ffb74d !important; /* Amber */
  color: #0b0b0b !important; 
  border: none !important; 
}
/* Ensure all text inside the warning alert is dark enough */
.alert-warning *, .alert-warning strong, .alert-warning span { color: #0b0b0b !important; }
#total_liquidado_display { font-weight: 700; color: #000 !important; }

.navbar { box-shadow: var(--spa-shadow); background: linear-gradient(190deg, #1b0f32, #0f0920) !important; }
.navbar-brand { letter-spacing: .2px; color: var(--spa-accent) !important; }

/* Page-load animations */
@keyframes spa-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes spa-rise-in {
  from { opacity: 0; transform: translateY(12px) scale(0.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Soft stagger for groups of cards (cards already animate; delay via nth-child) */
.card:nth-of-type(1) { animation-delay: 0.05s; }
.card:nth-of-type(2) { animation-delay: 0.10s; }
.card:nth-of-type(3) { animation-delay: 0.15s; }
.card:nth-of-type(4) { animation-delay: 0.20s; }
.navbar .nav-link { color: #e6eaf1 !important; }
.navbar .nav-link:hover { color: #ffffff !important; }
.navbar .badge { background-color: var(--spa-accent); }

/* Utility spacing for containers */
.container-narrow { max-width: 720px; }

/* Page bottom breathing room */
.page-inicio { padding-bottom: 14rem; }
.page-reporte { padding-bottom: 12rem; }
@media (max-width: 576px) {
  .page-inicio { padding-bottom: 10rem; }
  .page-reporte { padding-bottom: 7rem; }
}

/* Modal polish and stacking (enforce full-screen cover) */
.modal { z-index: 2050 !important; }
.modal-backdrop { position: fixed; inset: 0; z-index: 2040 !important; }
.modal-backdrop.show { background-color: rgba(8, 2, 24, 0.55); }
.modal-content { border-radius: var(--spa-radius); box-shadow: var(--spa-shadow); background-color: var(--spa-card); color: var(--spa-text); pointer-events: auto; }

/* Headings */
h1,h2,h3,h4 { color: #e6eaf1 !important; font-weight: 600; }
.small, .text-muted { color: var(--spa-muted) !important; }
/* Boost contrast for secondary text used in section titles */
.text-secondary { color: #e6eaf1 !important; opacity: 1 !important; }

/* Links */
a { text-decoration: none; color: #b8c2d6; }
a:hover { text-decoration: underline; color: #d7e2f7; }

/* Centering helper for auth pages */
.auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-card { width: 100%; max-width: 420px; }

/* --- Responsivo general --- */
@media (max-width: 768px) {
  .table { font-size: 0.85rem; }
  .chips-list { justify-content: flex-start; }
}

@media (max-width: 576px) {
  .navbar .nav-link { font-size: 0.85rem; padding-left: 0.4rem; padding-right: 0.4rem; }
  .navbar .btn { font-size: 0.8rem; padding: 0.25rem 0.5rem; }
}