/* ========================================
   Dark Mode Automático - QRyoung
   Detecta y adapta al tema del dispositivo
   ======================================== */

/* Dark Mode cuando el sistema usa tema oscuro */
@media (prefers-color-scheme: dark) {
    :root {
        --glass-bg: rgba(30, 30, 40, 0.85);
        --glass-border: rgba(255, 255, 255, 0.1);
        --text-primary: #f4f4f5;
        --text-secondary: #d4d4d8;
    }

    body {
        background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
        color: var(--text-primary);
    }

    /* Glass Cards */
    .glass-card {
        background: rgba(30, 30, 40, 0.7);
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
    }

    /* Main Content */
    .main-content {
        background: rgba(30, 30, 40, 0.7);
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
    }

    /* Sidebar */
    .sidebar {
        background: rgba(30, 30, 40, 0.85);
        border-color: rgba(255, 255, 255, 0.1);
    }

    /* Títulos */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--text-primary);
    }

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

    .section-title {
        color: var(--text-primary);
    }

    /* Inputs */
    .qr-input,
    .password-input {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
    }

    .qr-input::placeholder,
    .password-input::placeholder {
        color: rgba(255, 255, 255, 0.4);
    }

    .qr-input:focus,
    .password-input:focus {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--primary-400);
    }

    /* Labels */
    .input-label,
    .color-picker label,
    .slider-control label,
    .accordion-header {
        color: var(--text-primary);
    }

    /* Preview Container */
    .qr-preview-container {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Frame Options */
    .frame-option,
    .shape-option {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
    }

    .frame-option:hover,
    .shape-option:hover {
        background: rgba(168, 85, 247, 0.1);
        border-color: var(--primary-400);
    }

    .frame-option svg,
    .shape-option svg {
        color: rgba(255, 255, 255, 0.6);
    }

    .frame-option.active,
    .shape-option.active {
        background: rgba(168, 85, 247, 0.2);
        border-color: var(--primary-500);
    }

    /* Color Inputs */
    .color-input-wrapper {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
    }

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

    /* Sliders */
    .slider-value {
        color: var(--text-primary);
    }

    /* Accordion */
    .accordion {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    /* Plans */
    .plan-card {
        background: rgba(30, 30, 40, 0.8);
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
    }

    .plan-card.featured {
        border-color: var(--primary-500);
        box-shadow: 0 0 50px rgba(168, 85, 247, 0.3);
    }

    .plan-name {
        color: var(--text-primary);
    }

    .plan-period {
        color: var(--text-secondary);
    }

    .plan-features li {
        color: var(--text-secondary);
        border-bottom-color: rgba(255, 255, 255, 0.05);
    }

    .plan-features li.disabled {
        color: rgba(255, 255, 255, 0.3);
    }

    /* Usage Stats */
    .usage-stats {
        background: rgba(168, 85, 247, 0.15);
        border-color: var(--primary-500);
    }

    .usage-stats h4 {
        color: var(--text-primary);
    }

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

    .usage-bar {
        background: rgba(255, 255, 255, 0.1);
    }

    /* Scan Limit Info */
    .scan-limit-info {
        background: rgba(168, 85, 247, 0.15);
        border-color: var(--primary-500);
    }

    .scan-limit-info p {
        color: var(--text-primary);
    }

    /* History */
    .empty-state {
        color: var(--text-secondary);
    }

    .empty-state h3 {
        color: var(--text-primary);
    }

    .empty-state svg {
        color: rgba(255, 255, 255, 0.3);
    }

    /* Scan Section */
    .scan-drop-zone {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
    }

    .scan-drop-zone h3 {
        color: var(--text-primary);
    }

    .scan-drop-zone p {
        color: var(--text-secondary);
    }

    .scan-result {
        background: rgba(30, 30, 40, 0.7);
        color: var(--text-primary);
    }

    .result-text {
        color: var(--text-primary);
    }

    /* Nav Items */
    .nav-item {
        color: rgba(255, 255, 255, 0.7);
    }

    .nav-item:hover {
        color: rgba(255, 255, 255, 0.9);
    }

    .nav-item.active {
        color: white;
    }

    /* Botones secundarios */
    .btn-secondary {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.2);
        color: var(--text-primary);
    }

    .btn-secondary:hover {
        background: rgba(168, 85, 247, 0.2);
        border-color: var(--primary-400);
    }

    /* Toggle Switch */
    .toggle-slider {
        background-color: rgba(255, 255, 255, 0.2);
    }

    /* Password Input Group */
    .password-input-group label {
        color: var(--text-primary);
    }

    /* Preview Header */
    .preview-header h3 {
        color: var(--text-primary);
    }

    .btn-icon {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .btn-icon svg {
        color: rgba(255, 255, 255, 0.7);
    }

    .btn-icon:hover {
        background: var(--primary-500);
    }

    .btn-icon:hover svg {
        color: white;
    }

    /* Customization Card */
    .customization-card h3 {
        color: var(--text-primary);
    }

    /* Toast */
    .toast {
        background: rgba(30, 30, 40, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
    }

    /* Modal */
    .modal-content {
        background: rgba(30, 30, 40, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .modal-content h3 {
        color: var(--text-primary);
    }

    .modal-content p {
        color: var(--text-secondary);
    }
}

/* Forzar dark mode siempre (opcional - comentado por defecto) */
/*
body.force-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    color: #f4f4f5;
}
*/