/* Variables de colores para modo claro */
:root {
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8f9fa;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --border-color: #dddddd;
    --border-light: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --btn-primary: #007bff;
    --btn-primary-hover: #0056b3;
    --btn-success: #28a745;
    --btn-success-hover: #218838;
    --btn-danger: #dc3545;
    --btn-danger-hover: #c82333;
    --btn-warning: #ffc107;
    --btn-secondary: #6c757d;
    --table-header: #007bff;
    --table-stripe: #f8f9fa;
    --table-hover: #e9ecef;
    --input-bg: #ffffff;
    --input-border: #dddddd;
    --card-bg: #ffffff;
    --card-title: #333333;
}

/* Variables de colores para modo oscuro - Tonalidades cálidas */
[data-theme="dark"] {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #2d2d2d;
    --text-primary: #f5f5f5;
    --text-secondary: #e0e0e0;
    --text-muted: #aaaaaa;
    --border-color: #404040;
    --border-light: #333333;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --btn-primary: #5c9ce6;
    --btn-primary-hover: #4a8bd4;
    --btn-success: #4ade80;
    --btn-success-hover: #22c55e;
    --btn-danger: #f87171;
    --btn-danger-hover: #ef4444;
    --btn-warning: #fbbf24;
    --btn-secondary: #6b7280;
    --table-header: #374151;
    --table-stripe: #1a1a1a;
    --table-hover: #2a2a2a;
    --input-bg: #2d2d2d;
    --input-border: #404040;
    --card-bg: #1e1e1e;
    --card-title: #f5f5f5;
}

/* Aplicar variables a elementos comunes */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Contenedores y tarjetas */
.container, .form-container, .card, .user-card, 
.filters, .section, .header,
.lineas-container, .inventario-box,
.date-selector, .report-header {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 2px 4px var(--shadow-color) !important;
}

/* Tarjetas con colores especiales en modo oscuro */
[data-theme="dark"] .card,
[data-theme="dark"] .user-card {
    background: linear-gradient(145deg, #1e1e1e 0%, #252525 100%) !important;
    border: 1px solid #333 !important;
}

/* Summary cards - gradiente diferente */
[data-theme="dark"] .summary {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
    border: 1px solid #4b5563 !important;
}

/* Precio section - tonalidad púrpura oscuro */
[data-theme="dark"] .precio-section {
    background: linear-gradient(135deg, #312e81 0%, #4c1d95 100%) !important;
    border: 1px solid #5b21b6 !important;
}

/* Títulos - asegurar que sean visibles en modo oscuro */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #ffffff !important;
}

/* Tarjetas del dashboard - títulos claros */
[data-theme="dark"] .card h3,
[data-theme="dark"] .card h2,
[data-theme="dark"] .card-title,
[data-theme="dark"] .module-title {
    color: #ffffff !important;
}

/* Texto dentro de tarjetas */
[data-theme="dark"] .card p,
[data-theme="dark"] .card span,
[data-theme="dark"] .card-description {
    color: #d1d5db !important;
}

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

table th {
    background-color: var(--table-header) !important;
    color: white !important;
}

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

table tr:nth-child(even) td {
    background-color: var(--table-stripe) !important;
}

table tr:hover td {
    background-color: var(--table-hover) !important;
}

table tfoot td {
    background-color: var(--bg-tertiary) !important;
}

/* Inputs y selects */
input, select, textarea {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--btn-primary) !important;
    box-shadow: 0 0 0 2px rgba(92, 156, 230, 0.25) !important;
}

input::placeholder, textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Labels */
label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] label {
    color: #ffffff !important;
}

/* Links */
a {
    color: var(--btn-primary);
}

a:hover {
    color: var(--btn-primary-hover);
}

/* Botones - mantener colores pero ajustar en modo oscuro */
[data-theme="dark"] .btn {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .btn-warning {
    color: #1a1a1a !important;
}

/* Alertas */
[data-theme="dark"] .alert-success {
    background-color: #14532d !important;
    color: #86efac !important;
    border: 1px solid #22c55e !important;
}

[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-danger {
    background-color: #450a0a !important;
    color: #fca5a5 !important;
    border: 1px solid #ef4444 !important;
}

/* Campos calculados */
.calculated-field {
    background-color: var(--bg-terciary) !important;
}

/* Líneas de venta */
[data-theme="dark"] .linea-venta {
    background: linear-gradient(145deg, #1e1e1e 0%, #262626 100%) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .linea-subtotal {
    background-color: #1e3a5f !important;
    color: #60a5fa !important;
}

/* Total display - verde oscuro elegante */
[data-theme="dark"] .total-display {
    background: linear-gradient(135deg, #14532d 0%, #166534 100%) !important;
    border: 1px solid #22c55e !important;
}

/* Toggle button para modo oscuro */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 24px;
    z-index: 9999;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
}

/* Modo claro: botón oscuro */
.dark-mode-toggle {
    background-color: #1a1a2e;
    color: #f5f5f5;
}

/* Modo oscuro: botón claro */
[data-theme="dark"] .dark-mode-toggle {
    background-color: #f5f5f5;
    color: #1a1a2e;
}

/* Scrollbar en modo oscuro */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* User header en gestión de usuarios */
[data-theme="dark"] .user-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
}

[data-theme="dark"] .user-header .user-name,
[data-theme="dark"] .user-header .user-id {
    color: #ffffff !important;
}

/* Inventario items */
[data-theme="dark"] .inventario-item {
    background: linear-gradient(145deg, #262626 0%, #1a1a1a 100%) !important;
    border: 1px solid #404040 !important;
}

[data-theme="dark"] .inventario-item .label {
    color: #9ca3af !important;
}

[data-theme="dark"] .inventario-item .value {
    color: #60a5fa !important;
}

/* Permission items */
[data-theme="dark"] .permission-item {
    background: linear-gradient(145deg, #262626 0%, #1f1f1f 100%) !important;
    border: 1px solid #404040 !important;
}

[data-theme="dark"] .permission-item label {
    color: #ffffff !important;
}

/* Warning box */
[data-theme="dark"] .warning-box {
    background: linear-gradient(145deg, #422006 0%, #713f12 100%) !important;
    border: 2px solid #f59e0b !important;
}

[data-theme="dark"] .warning-box h3,
[data-theme="dark"] .warning-box p,
[data-theme="dark"] .warning-box li {
    color: #fde68a !important;
}

/* Filas con fondos especiales en tablas */
[data-theme="dark"] tr[style*="background: #e7f3ff"],
[data-theme="dark"] tr[style*="background: #fff3cd"],
[data-theme="dark"] tr[style*="background: #f8d7da"],
[data-theme="dark"] tr[style*="background: #d4edda"] {
    background-color: var(--bg-terciary) !important;
}

/* Totales cards - diferentes tonalidades */
[data-theme="dark"] .total-card {
    background: linear-gradient(145deg, #1e1e1e 0%, #262626 100%) !important;
    border: 1px solid #404040 !important;
}

[data-theme="dark"] .total-card h3 {
    color: #d1d5db !important;
}

[data-theme="dark"] .total-card.ventas {
    border-left: 4px solid #4ade80 !important;
    background: linear-gradient(145deg, #14532d 0%, #166534 100%) !important;
}

[data-theme="dark"] .total-card.ventas .amount {
    color: #86efac !important;
}

[data-theme="dark"] .total-card.compras {
    border-left: 4px solid #f87171 !important;
    background: linear-gradient(145deg, #450a0a 0%, #7f1d1d 100%) !important;
}

[data-theme="dark"] .total-card.compras .amount {
    color: #fca5a5 !important;
}

[data-theme="dark"] .total-card.utilidad {
    background: linear-gradient(145deg, #422006 0%, #78350f 100%) !important;
    border-left: 4px solid #fbbf24 !important;
}

[data-theme="dark"] .total-card.utilidad .amount {
    color: #fde68a !important;
}

[data-theme="dark"] .total-card .details {
    color: #d1d5db !important;
}

/* Filters section */
[data-theme="dark"] .filters {
    background: linear-gradient(145deg, #1e1e1e 0%, #252525 100%) !important;
}

[data-theme="dark"] .filters h3 {
    color: #ffffff !important;
}

[data-theme="dark"] .filters label {
    color: #ffffff !important;
}

/* Section headers */
[data-theme="dark"] .section {
    background: linear-gradient(145deg, #1e1e1e 0%, #262626 100%) !important;
}

[data-theme="dark"] .section h2 {
    color: #ffffff !important;
}

/* Report header - gradiente azul oscuro */
[data-theme="dark"] .report-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #3730a3 100%) !important;
    border: 1px solid #4f46e5 !important;
}

[data-theme="dark"] .report-header h1 {
    color: #ffffff !important;
}

/* Date selector */
[data-theme="dark"] .date-selector {
    background: linear-gradient(145deg, #1e1e1e 0%, #252525 100%) !important;
}

[data-theme="dark"] .date-selector label {
    color: #ffffff !important;
}

/* Form groups */
[data-theme="dark"] .form-group label {
    color: #ffffff !important;
}

/* Header principal */
[data-theme="dark"] .header {
    background: linear-gradient(145deg, #1e1e1e 0%, #262626 100%) !important;
    border-bottom: 1px solid #404040 !important;
}

/* Lineas container */
[data-theme="dark"] .lineas-container {
    background: linear-gradient(145deg, #1a1a1a 0%, #222222 100%) !important;
    border: 2px solid #3b82f6 !important;
}

[data-theme="dark"] .lineas-header {
    border-bottom: 2px solid #3b82f6 !important;
}

[data-theme="dark"] .lineas-header h3 {
    color: #60a5fa !important;
}

/* Table container */
[data-theme="dark"] .table-container {
    background: linear-gradient(145deg, #1e1e1e 0%, #252525 100%) !important;
    border: 1px solid #404040 !important;
}

/* Print mode - siempre modo claro */
@media print {
    body, .container, table, input, select, textarea {
        background-color: white !important;
        color: black !important;
    }
    
    .dark-mode-toggle {
        display: none !important;
    }
}