/* 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; }
.auth-card .btn-primary { background-image: linear-gradient(185deg, #b97df8, #a863f5); box-shadow: 0 10px 24px rgba(168,99,245,.45); }
.auth-card .card { border-color: #a863f5; }
.auth-card .form-control:focus { border-color: #a863f5; box-shadow: 0 0 0 0.25rem rgba(168,99,245,.3); }

/* --- 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; }
}

/* --- Movil: navbar colapsado, tarjetas, tablas, formularios y modales --- */
@media (max-width: 991.98px) {
  .navbar-collapse { margin-top: .6rem; padding: .75rem; border: 1px solid var(--spa-border); border-radius: var(--spa-radius); background: rgba(18, 10, 38, .96); }
  .navbar-nav { align-items: stretch !important; gap: .25rem; }
  .navbar-nav .nav-item { margin-right: 0 !important; }
  .navbar .nav-link { font-size: 1rem; padding: .7rem .75rem !important; border-radius: .6rem; }
  .navbar .nav-link:hover, .navbar .nav-link:active { background: rgba(168, 99, 245, .18); }
  .navbar-nav .btn { width: 100%; padding: .65rem .75rem; font-size: .95rem; }
  .navbar .dropdown-menu { background: transparent; border: 0; padding: 0 0 0 .75rem; }
  .navbar .dropdown-item { padding: .6rem .75rem; border-radius: .5rem; }
  .navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background: rgba(168, 99, 245, .18); }
}

@media (max-width: 576px) {
  body { font-size: .95rem; background-attachment: scroll; }
  .container, .container-fluid { padding-left: .85rem; padding-right: .85rem; }
  .navbar-brand { font-size: 1rem; }
  h1 { font-size: 1.5rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.15rem; } h4 { font-size: 1.05rem; }
  .card { border-radius: .8rem; margin-bottom: .9rem; }
  .card-body { padding: 1rem; }
  .card-header { padding: .7rem 1rem; }
  /* 16px evita el zoom automatico de iOS al enfocar campos */
  .form-control, .form-select { font-size: 16px; min-height: 46px; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .table-responsive, .card-body > .table { -webkit-overflow-scrolling: touch; }
  /* Tablas sin wrapper: scroll horizontal en el contenedor */
  .card-body { overflow-x: auto; }
  .table th, .table td { padding: .5rem .55rem; white-space: nowrap; }
  .modal-dialog { margin: .5rem; }
  .modal-dialog:not(.modal-fullscreen) { max-width: calc(100vw - 1rem); }
  .modal-body { padding: .9rem; }
  .modal-footer { flex-wrap: wrap; gap: .5rem; }
  .modal-footer .btn { flex: 1 1 100%; margin: 0; }
  .auth-wrapper { padding: 1rem; align-items: flex-start; padding-top: 8vh; }
  .auth-card { max-width: 100%; }
  .d-flex.justify-content-between.align-items-center { flex-wrap: wrap; gap: .5rem; }
}