/**
 * rsv_dark_mode.css
 * Estilos para modo oscuro
 * Se aplican cuando data-theme="dark" está en el elemento HTML
 */

[data-theme="dark"] {
    /* Colores de fondo */
    --bg-body: #0f0f1e;
    --bg-card: #1a1a2e;
    --bg-header: rgba(26, 26, 46, 0.95);

    /* Colores de texto */
    --text-primary: #e2e8f0;
    --text-secondary: #a0aec0;
    --text-muted: #718096;

    /* Sombras ajustadas para modo oscuro */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Ajustes específicos para modo oscuro */
[data-theme="dark"] body {
    color: var(--text-primary);
}

[data-theme="dark"] .logo {
    color: #ffffff;
    /* Logo en blanco para mejor contraste en modo oscuro */
}

[data-theme="dark"] .dropzone-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .card-overlay {
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
}

[data-theme="dark"] .language-toggle,
[data-theme="dark"] .language-dropdown,
[data-theme="dark"] #dark-mode-toggle {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

[data-theme="dark"] .language-dropdown button {
    color: var(--text-primary);
}

[data-theme="dark"] .language-dropdown button:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .language-dropdown button.active {
    color: #ffffff;
}

[data-theme="dark"] .btn-reserve {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Ajustar brillos para que no sea demasiado brillante en modo oscuro */
[data-theme="dark"] .card-description {
    color: var(--text-secondary);
}

/* Transición suave al cambiar de tema */
body,
header,
.dropzone-card,
.language-toggle,
.language-dropdown,
#dark-mode-toggle,
.btn-reserve {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}