/*
    main.css
    Versión 2.2: Corregida la especificidad del menú móvil y visibilidad de botones de tema.
    Fecha: 2025-09-01
    Descripción: Se aumenta la especificidad de la regla .sidebar-mobile-open para asegurar que anule
                 las utilidades de Tailwind. Se elimina la regla .theme-toggle que ocultaba los botones de tema.
*/

/* Estilos base */
body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- TEMA CLARO (Light Mode) --- */
:root {
    /* 60% - Fondo Principal */
    --color-background: #f8f9fa; /* Un gris muy claro, casi blanco */
    /* 30% - Fondos Secundarios (Tarjetas, etc.) */
    --color-secondary: #ffffff;
    /* 10% - Acentos y Elementos Interactivos */
    --color-accent: #007bff; /* Azul vibrante y profesional */
    --color-accent-secondary: #6f42c1; /* Púrpura para acentos secundarios */
    
    /* Colores de Texto */
    --color-text-primary: #212529; /* Negro suave */
    --color-text-secondary: #6c757d; /* Gris para texto secundario */

    /* Otros */
    --color-border: #dee2e6;
    --color-input-bg: #f1f3f5;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-highlight-border: #007bff; /* Borde para la cartera destacada */
}

/* --- TEMA OSCURO (Dark Mode) --- */
.dark {
    /* 60% - Fondo Principal */
    --color-background: #1a202c; /* Azul marino muy oscuro */
    /* 30% - Fondos Secundarios (Tarjetas, etc.) */
    --color-secondary: #2d3748; /* Gris azulado oscuro */
    /* 10% - Acentos y Elementos Interactivos */
    --color-accent: #63b3ed; /* Cian claro y legible */
    --color-accent-secondary: #9f7aea; /* Lavanda suave */

    /* Colores de Texto */
    --color-text-primary: #ffffff; /* Blanco */
    --color-text-secondary: #a0aec0; /* Gris claro */

    /* Otros */
    --color-border: #4a5568;
    --color-input-bg: #4a5568;
    --color-success: #48bb78;
    --color-danger: #f56565;
    --color-highlight-border: #63b3ed;
}

/* Aplicación de las variables de color */
.bg-primary { background-color: var(--color-background); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-card {
    background-color: var(--color-secondary);
    box-shadow: 0 4px 8px -2px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.04);
    transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
}
.bg-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 20px -4px rgba(0,0,0,0.1), 0 8px 8px -4px rgba(0,0,0,0.05);
}
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.border-custom { border-color: var(--color-border); }
.input-field { background-color: var(--color-input-bg); border-color: var(--color-border); color: var(--color-text-primary); }
.accent-blue { color: var(--color-accent); }
.accent-purple { color: var(--color-accent-secondary); }
.bg-accent-blue { background-color: var(--color-accent); }
.bg-accent-purple { background-color: var(--color-accent-secondary); }

/* Estilo para el módulo de precios (ligero) */
.current-prices-module {
    border-left: 3px solid var(--color-border);
    padding-left: 1.5rem;
}

/* Estilos para la cartera destacada */
.highlight-wallet-border {
    border: 2px solid var(--color-highlight-border);
    box-shadow: 0 0 15px -2px var(--color-highlight-border);
}

/* Estilos de la barra lateral */
.sidebar-link.active { background-color: var(--color-accent); color: white; }
.sidebar-link:not(.active):hover { background-color: rgba(0, 123, 255, 0.1); }
.dark .sidebar-link { color: var(--color-text-primary); }
.dark .sidebar-link:not(.active):hover { background-color: rgba(99, 179, 237, 0.1); }
.mobile-nav-link.active { color: var(--color-accent); }

/* Spinner */
.spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid var(--color-accent-secondary);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    margin-bottom: 1rem;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Modal */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.7); align-items: center; justify-content: center; }
.modal-content { background-color: var(--color-secondary); margin: auto; padding: 2rem; border-radius: 1rem; width: 90%; max-width: 600px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); position: relative; }
.close-button { color: var(--color-text-secondary); position: absolute; top: 1rem; right: 1rem; font-size: 1.5rem; font-weight: bold; cursor: pointer; }
.close-button:hover, .close-button:focus { color: var(--color-accent-secondary); }

/* Clases de resaltado para navegación */
.wallet-highlight, .pool-highlight {
    border: 2px solid var(--color-accent-secondary);
    box-shadow: 0 0 15px rgba(159, 122, 234, 0.5);
    transition: all 0.3s ease-in-out;
}

.wallet-card-new {
    background: linear-gradient(145deg, var(--color-secondary), var(--color-background));
    border: 1px solid var(--color-border);
    border-radius: 0.75rem; /* 12px */
    padding: 1.5rem; /* 24px */
    box-shadow: 0 8px 16px -4px rgba(0,0,0,0.08), 0 4px 8px -4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.wallet-card-new:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px -6px rgba(0,0,0,0.12), 0 10px 10px -6px rgba(0,0,0,0.08);
}

/* Estilos para la barra lateral móvil */
#desktop-sidebar {
    transition: transform 0.3s ease-in-out;
    z-index: 1010;
}

/* *** INICIO DE LA CORRECCIÓN CLAVE *** */
/* Se utiliza un selector más específico (#id.clase) para garantizar que esta regla anule a Tailwind */
#desktop-sidebar.sidebar-mobile-open {
    transform: translateX(0);
}
/* *** FIN DE LA CORRECCIÓN CLAVE *** */


.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}

.sidebar-overlay.active {
    display: block;
}

.dark #portfolio-gain-loss p {
    color: white;
}

/* *** CORRECCIÓN 2 ***
   Se elimina la regla .theme-toggle { display: none; } que ocultaba permanentemente
   los botones de tema, impidiendo que el JavaScript los mostrara.
*/

@media (max-width: 1023px) {
    main {
        padding-top: 4rem;
    }
}