/* =============================================
   SISTEMA DE TEMAS DE COLORES - PMG
   6 Esquemas Creativos de Colores
   ============================================= */

/* Variables CSS base para transiciones suaves */
:root {
  --transition-speed: 0.3s;
  --border-radius: 0.75rem;
  --shadow-light: 0 2px 10px rgba(0,0,0,0.05);
  --shadow-medium: 0 4px 20px rgba(0,0,0,0.1);
  --shadow-heavy: 0 8px 30px rgba(0,0,0,0.15);
}

/* =============================================
   TEMA 1: OCÉANO AZUL (Por defecto)
   Colores: Azules y turquesas suaves
   ============================================= */
[data-theme="oceano"] {
  --primary-color: #2980b9;
  --primary-gradient: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  --primary-gradient-transparent: linear-gradient(90deg, rgba(52, 152, 219, 0.8) 0%, rgba(41, 128, 185, 0.8) 100%);
  --secondary-color: #16a085;
  --secondary-gradient: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
  --accent-color: #f39c12;
  --success-color: #27ae60;
  --warning-color: #f39c12;
  --danger-color: #e74c3c;
  --info-color: #3498db;
  
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #ecf0f1;
  --bg-card: #ffffff;
  --bg-navbar: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  
  --text-primary: #2c3e50;
  --text-secondary: #7f8c8d;
  --text-muted: #95a5a6;
  --text-light: #ffffff;
  
  --border-color: #dee2e6;
  --border-light: #ecf0f1;
  --hover-bg: #f8f9ff;
  --hover-bg-light: rgba(255, 255, 255, 0.1);
}

/* =============================================
   TEMA 2: BOSQUE ESMERALDA
   Colores: Verdes naturales y tierra
   ============================================= */
[data-theme="bosque"] {
  --primary-color: #27ae60;
  --primary-gradient: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  --primary-gradient-transparent: linear-gradient(90deg, rgba(46, 204, 113, 0.8) 0%, rgba(39, 174, 96, 0.8) 100%);
  --secondary-color: #16a085;
  --secondary-gradient: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
  --accent-color: #f39c12;
  --success-color: #2ecc71;
  --warning-color: #f1c40f;
  --danger-color: #e67e22;
  --info-color: #1abc9c;
  
  --bg-primary: #ffffff;
  --bg-secondary: #f7f9f7;
  --bg-tertiary: #e8f5e8;
  --bg-card: #ffffff;
  --bg-navbar: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  
  --text-primary: #2d5a3d;
  --text-secondary: #6b8e6b;
  --text-muted: #95a5a6;
  --text-light: #ffffff;
  
  --border-color: #d5e7d5;
  --border-light: #e8f5e8;
  --hover-bg: #f0f8f0;
  --hover-bg-light: rgba(255, 255, 255, 0.1);
}

/* =============================================
   TEMA 3: ATARDECER CÁLIDO
   Colores: Naranjas, rosas y dorados
   ============================================= */
[data-theme="atardecer"] {
  --primary-color: #e67e22;
  --primary-gradient: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  --primary-gradient-transparent: linear-gradient(90deg, rgba(243, 156, 18, 0.8) 0%, rgba(230, 126, 34, 0.8) 100%);
  --secondary-color: #e91e63;
  --secondary-gradient: linear-gradient(135deg, #f06292 0%, #e91e63 100%);
  --accent-color: #9b59b6;
  --success-color: #27ae60;
  --warning-color: #f39c12;
  --danger-color: #e74c3c;
  --info-color: #3498db;
  
  --bg-primary: #ffffff;
  --bg-secondary: #fdf8f3;
  --bg-tertiary: #fff3e0;
  --bg-card: #ffffff;
  --bg-navbar: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  
  --text-primary: #5d4037;
  --text-secondary: #8d6e63;
  --text-muted: #a1887f;
  --text-light: #ffffff;
  
  --border-color: #ffcc80;
  --border-light: #fff3e0;
  --hover-bg: #fff8f0;
  --hover-bg-light: rgba(255, 255, 255, 0.1);
}

/* =============================================
   TEMA 4: LAVANDA PÚRPURA
   Colores: Púrpuras, lilas y violetas
   ============================================= */
[data-theme="lavanda"] {
  --primary-color: #8e44ad;
  --primary-gradient: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  --primary-gradient-transparent: linear-gradient(90deg, rgba(155, 89, 182, 0.8) 0%, rgba(142, 68, 173, 0.8) 100%);
  --secondary-color: #3f51b5;
  --secondary-gradient: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);
  --accent-color: #e91e63;
  --success-color: #4caf50;
  --warning-color: #ff9800;
  --danger-color: #e91e63;
  --info-color: #2196f3;
  
  --bg-primary: #ffffff;
  --bg-secondary: #faf8ff;
  --bg-tertiary: #f3e5f5;
  --bg-card: #ffffff;
  --bg-navbar: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  
  --text-primary: #4a148c;
  --text-secondary: #7b1fa2;
  --text-muted: #9c27b0;
  --text-light: #ffffff;
  
  --border-color: #e1bee7;
  --border-light: #f3e5f5;
  --hover-bg: #faf5ff;
  --hover-bg-light: rgba(255, 255, 255, 0.1);
}

/* =============================================
   TEMA 5: NOCHE OSCURA (Dark Theme)
   Colores: Grises oscuros con acentos brillantes
   ============================================= */
[data-theme="nocturno"] {
  --primary-color: #bb86fc;
  --primary-gradient: linear-gradient(135deg, #bb86fc 0%, #6200ea 100%);
  --primary-gradient-transparent: linear-gradient(90deg, rgba(187, 134, 252, 0.8) 0%, rgba(98, 0, 234, 0.8) 100%);
  --secondary-color: #03dac6;
  --secondary-gradient: linear-gradient(135deg, #03dac6 0%, #018786 100%);
  --accent-color: #cf6679;
  --success-color: #4caf50;
  --warning-color: #ff9800;
  --danger-color: #f44336;
  --info-color: #2196f3;
  
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2d2d2d;
  --bg-card: #1e1e1e;
  --bg-navbar: linear-gradient(135deg, #1e1e1e 0%, #121212 100%);
  
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --text-muted: #666666;
  --text-light: #ffffff;
  
  --border-color: #333333;
  --border-light: #2d2d2d;
  --hover-bg: #2d2d2d;
  --hover-bg-light: rgba(255, 255, 255, 0.1);
}

/* =============================================
   TEMA 6: NEÓN CYBERPUNK (Dark Theme vívido)
   Colores: Magenta, cian y lima neón sobre fondo
   oscuro con patrón de cuadrícula digital
   ============================================= */
[data-theme="neon"] {
  --primary-color: #ff2e97;
  --primary-gradient: linear-gradient(135deg, #ff2e97 0%, #7b2ff7 100%);
  --primary-gradient-transparent: linear-gradient(90deg, rgba(255, 46, 151, 0.8) 0%, rgba(123, 47, 247, 0.8) 100%);
  --secondary-color: #00e5ff;
  --secondary-gradient: linear-gradient(135deg, #00e5ff 0%, #0090ff 100%);
  --accent-color: #ccff00;
  --success-color: #00ff9c;
  --warning-color: #ffea00;
  --danger-color: #ff1744;
  --info-color: #00e5ff;

  --bg-primary: #0a0e27;
  --bg-secondary: #0d1230;
  --bg-tertiary: #141a3d;
  --bg-card: #12173a;
  --bg-navbar: linear-gradient(135deg, #1a0b2e 0%, #0a0e27 100%);

  --text-primary: #f0f0ff;
  --text-secondary: #9d9dc9;
  --text-muted: #5c5c8a;
  --text-light: #ffffff;

  --border-color: #2d2d5f;
  --border-light: #1a1a40;
  --hover-bg: #1a1f4d;
  --hover-bg-light: rgba(255, 255, 255, 0.1);
}

/* =============================================
   APLICACIÓN DE VARIABLES A ELEMENTOS
   ============================================= */

/* Backgrounds principales */
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-speed) ease;
}

/* Navbar y navegación */
.navbar,
.navbar-brand {
  background: var(--bg-navbar) !important;
  color: var(--text-light) !important;
}

/* Forzar el background del navbar en todas las condiciones */
.navbar.fixed-top {
  background: var(--bg-navbar) !important;
}

.navbar[style*="background"] {
  background: var(--bg-navbar) !important;
}

/* Asegurar que el navbar mantenga el tema en scroll */
.navbar-dark {
  background: var(--bg-navbar) !important;
}

.navbar-expand-lg {
  background: var(--bg-navbar) !important;
}

/* Override cualquier clase o estilo específico de Bootstrap */
nav.navbar {
  background: var(--bg-navbar) !important;
  background-color: var(--bg-navbar) !important;
}

/* Asegurar que las transiciones mantengan el color */
.navbar.show, 
.navbar.collapsing {
  background: var(--bg-navbar) !important;
}

/* Estilos específicos para navbar */
.navbar .navbar-brand {
  color: var(--text-light) !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3) !important;
}

.navbar .navbar-nav .nav-link {
  color: var(--text-light) !important;
  font-weight: 600 !important;
  transition: all var(--transition-speed) ease !important;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
  color: #ffc107 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.5rem !important;
}

.navbar .btn-outline-light {
  border-color: var(--text-light) !important;
  color: var(--text-light) !important;
  font-weight: 600 !important;
}

.navbar .btn-outline-light:hover {
  background-color: var(--text-light) !important;
  color: var(--primary-color) !important;
}

.navbar .dropdown-toggle {
  color: var(--text-light) !important;
}

.navbar .dropdown-toggle::after {
  border-top-color: var(--text-light) !important;
}

.card {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-speed) ease;
}

.card-header {
  background: var(--primary-gradient) !important;
  color: var(--text-light) !important;
  border-color: var(--border-color) !important;
}

/* Botones principales */
.btn-primary {
  background: var(--primary-gradient) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-light) !important;
}

.btn-secondary {
  background: var(--secondary-gradient) !important;
  border-color: var(--secondary-color) !important;
  color: var(--text-light) !important;
}

.btn-success {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  /* Texto oscuro fijo: Bootstrap usa blanco por defecto en .btn-success asumiendo su propio
     verde (#198754), pero --success-color es más claro en varios temas (hasta #00ff9c en
     Neón) — con blanco el contraste cae a 1.33:1-2.87:1 según el tema. Con oscuro sube a
     5.37:1-11.59:1 en los 6 temas. Mismo criterio que .alert-warning más abajo. */
  color: #212529 !important;
}

.btn-warning {
  background-color: var(--warning-color) !important;
  border-color: var(--warning-color) !important;
}

.btn-danger {
  background-color: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
  /* Igual que .btn-success: con el blanco por defecto de Bootstrap el contraste queda entre
     2.85:1 y 4.35:1 según el tema (ninguno llega a AA 4.5:1); con oscuro sube a 3.55:1-5.42:1
     — peor único caso (Lavanda) pero mejor en 5 de los 6 temas. */
  color: #212529 !important;
}

.btn-info {
  background-color: var(--info-color) !important;
  border-color: var(--info-color) !important;
}

/* Formularios */
.form-control {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-speed) ease;
}

.form-control:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color), 0.25) !important;
}

.form-select {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Tablas */
.table {
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
}

.table th {
  background: var(--primary-gradient) !important;
  color: var(--text-light) !important;
  border-color: var(--border-color) !important;
}

.table td {
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
  border-color: var(--border-light) !important;
}

.table tbody tr {
  background-color: var(--bg-primary) !important;
}

.table-hover tbody tr:hover {
  background-color: var(--hover-bg) !important;
  color: var(--text-primary) !important;
}

/* Tablas administrativas específicas */
.table-admin {
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
}

.table-admin th {
  color: var(--text-light) !important;
}

.table-admin td {
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
}

.table-admin tbody tr:hover {
  background-color: var(--hover-bg) !important;
  color: var(--text-primary) !important;
}

/* Tabla presupuesto específica */
#tablaBancos,
#tablaTarjetasCredito,
#presupuestoMes,
#prestamos {
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
}

#tablaBancos tbody tr,
#tablaTarjetasCredito tbody tr,
#presupuestoMes tbody tr,
#prestamos tbody tr {
  background-color: var(--bg-primary) !important;
}

#tablaBancos td,
#tablaTarjetasCredito td,
#presupuestoMes td,
#prestamos td {
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
}

#tablaBancos th,
#tablaTarjetasCredito th,
#presupuestoMes th,
#prestamos th {
  color: var(--text-light) !important;
}

/* Celdas con fondo especial - mantener su contraste */
.td-disponible-negativo {
  background: linear-gradient(90deg, #dc3545 0%, #c82333 100%) !important;
  color: #fff !important;
}

.td-disponible-positivo {
  background: linear-gradient(90deg, #198754 0%, #146c43 100%) !important;
  color: #fff !important;
}

/* Tarjetas de usuario (adminUsuarios) */
.user-card {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

.user-info-label {
  color: var(--text-secondary) !important;
}

.user-info-value {
  color: var(--text-primary) !important;
}

/* Acordeones móviles */
.accordion-item {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

.accordion-button {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.accordion-body {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

.acordeon-titulo-nombre {
  color: var(--primary-color) !important;
}

.acordeon-titulo-valor {
  color: var(--success-color) !important;
}

.acordeon-titulo-valor-negativo {
  color: var(--danger-color) !important;
}

/* Bloques móviles específicos */
.banco-block,
.banco-block-tc {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.banco-nombre {
  color: var(--success-color) !important;
}

.campo-row label {
  color: var(--primary-color) !important;
}

.campo-row div,
.campo-row span {
  color: var(--text-primary) !important;
}

/* Modales */
.modal-content {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.modal-header {
  background: var(--primary-gradient) !important;
  color: var(--text-light) !important;
  border-color: var(--border-color) !important;
}

.modal-footer {
  border-color: var(--border-color) !important;
}

/* Alerts */
.alert-success {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  color: var(--text-light) !important;
}

.alert-warning {
  background-color: var(--warning-color) !important;
  border-color: var(--warning-color) !important;
  /* Texto oscuro fijo (no var(--text-light)): --warning-color es amarillo/naranja en los 6
     temas, así que el texto claro nunca da suficiente contraste (WCAG ~1.2:1 a 2.2:1 según el
     tema, peor en Neón). El texto oscuro sí funciona en los 6 temas (~7:1 a 12.5:1). */
  color: #212529 !important;
}

.alert-danger {
  background-color: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
  color: var(--text-light) !important;
}

.alert-info {
  background-color: var(--info-color) !important;
  border-color: var(--info-color) !important;
  color: var(--text-light) !important;
}

/* Badges */
.badge {
  transition: all var(--transition-speed) ease;
}

.badge-primary {
  background: var(--primary-gradient) !important;
}

.badge-secondary {
  background: var(--secondary-gradient) !important;
}

/* Elementos específicos */
.text-primary {
  color: var(--primary-color) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

.bg-light {
  background-color: var(--bg-secondary) !important;
}

.border {
  border-color: var(--border-color) !important;
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

.dropdown-item {
  color: var(--text-primary) !important;
}

.dropdown-item:hover {
  background-color: var(--hover-bg) !important;
  color: var(--text-primary) !important;
}

.dropdown-divider {
  border-color: var(--border-light) !important;
}

/* Navbar específico */
.navbar {
  background: var(--primary-gradient) !important;
}

.navbar.scrolled {
  background: var(--primary-gradient-transparent) !important;
}

.navbar-brand {
  color: var(--text-light) !important;
}

.navbar-nav .nav-link {
  color: var(--text-light) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--accent-color) !important;
  background-color: var(--hover-bg-light) !important;
}

.navbar-toggler {
  border-color: var(--text-light) !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Dropdown menú */
.dropdown-menu {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

.custom-dropdown {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

.dropdown-item {
  color: var(--text-primary) !important;
  background-color: transparent !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--hover-bg) !important;
  color: var(--primary-color) !important;
}

.dropdown-header {
  color: var(--text-secondary) !important;
}

.dropdown-divider {
  border-color: var(--border-light) !important;
}

/* Opciones especiales del dropdown */
.admin-option {
  background: var(--hover-bg-light) !important;
}

.admin-option:hover {
  background: var(--hover-bg) !important;
  color: var(--primary-color) !important;
}

/* Botón de salir */
.btn-outline-light {
  border-color: var(--text-light) !important;
  color: var(--text-light) !important;
}

.btn-outline-light:hover {
  background-color: var(--text-light) !important;
  color: var(--primary-color) !important;
  border-color: var(--text-light) !important;
}

/* Elementos de loading */
.spinner-border {
  border-top-color: var(--primary-color) !important;
}

.loading-spinner {
  border-top-color: var(--primary-color) !important;
}

/* Elementos custom de la aplicación */
.btn-admin {
  background: var(--primary-gradient) !important;
  border: none !important;
  color: var(--text-light) !important;
}

.btn-admin:hover {
  filter: brightness(1.1) !important;
  color: var(--text-light) !important;
}

.user-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.user-card .card-header {
  background: var(--primary-gradient) !important;
  color: var(--text-light) !important;
}

.user-info-label {
  color: var(--text-secondary) !important;
}

.user-info-value {
  color: var(--text-primary) !important;
}

/* Transiciones globales */
* {
  transition: background-color var(--transition-speed) ease,
              color var(--transition-speed) ease,
              border-color var(--transition-speed) ease,
              box-shadow var(--transition-speed) ease !important;
}

/* Efectos especiales para tema nocturno */
[data-theme="nocturno"] .card {
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

[data-theme="nocturno"] .btn {
  box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
}

[data-theme="nocturno"] .modal-content {
  box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
}

/* Scrollbars para tema nocturno */
[data-theme="nocturno"] ::-webkit-scrollbar {
  width: 8px;
  background-color: var(--bg-secondary);
}

[data-theme="nocturno"] ::-webkit-scrollbar-thumb {
  background-color: var(--text-muted);
  border-radius: 4px;
}

[data-theme="nocturno"] ::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-secondary);
}

/* =============================================
   Efectos especiales para tema Neón Cyberpunk
   ============================================= */

/* Patrón de fondo: cuadrícula digital + resplandores neón (sin imágenes externas) */
[data-theme="neon"] body {
  background-image:
    linear-gradient(rgba(255, 46, 151, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 15% 10%, rgba(255, 46, 151, 0.20), transparent 35%),
    radial-gradient(circle at 85% 90%, rgba(0, 229, 255, 0.18), transparent 35%),
    radial-gradient(circle at 90% 10%, rgba(204, 255, 0, 0.10), transparent 30%);
  background-size: 42px 42px, 42px 42px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

[data-theme="neon"] .card {
  box-shadow: 0 0 20px rgba(255, 46, 151, 0.15), 0 4px 20px rgba(0,0,0,0.4) !important;
}

[data-theme="neon"] .btn {
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.25) !important;
}

[data-theme="neon"] .modal-content {
  box-shadow: 0 0 30px rgba(255, 46, 151, 0.2), 0 10px 40px rgba(0,0,0,0.5) !important;
}

[data-theme="neon"] .navbar {
  box-shadow: 0 2px 20px rgba(255, 46, 151, 0.25) !important;
}

/* Scrollbars con acento neón */
[data-theme="neon"] ::-webkit-scrollbar {
  width: 8px;
  background-color: var(--bg-secondary);
}

[data-theme="neon"] ::-webkit-scrollbar-thumb {
  background: var(--primary-gradient);
  border-radius: 4px;
}

[data-theme="neon"] ::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-gradient);
}