/* Estilos Base y Glossy */
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            height: 320px;
            max-height: 400px;
        }

        @media (min-width: 768px) {
            .chart-container {
                height: 384px;
            }
        }

        /* Estilo Glossy para Contenedores y Tarjetas */
        .glossy-card {
            background-color: white;
            border-radius: 0.5rem;
            /* rounded-3xl */
            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.08);
            /* Sombra suave hacia abajo */
            /*0 0 0 1px rgba(255, 255, 255, 0.5) inset;*/
            /* Borde interior de luz */
            transition: all 0.3s ease;
        }

        .glossy-card:hover {
            box-shadow:
                0 15px 40px rgba(0, 0, 0, 0.1);
            /*0 0 0 1px rgba(255, 255, 255, 0.6) inset;*/
            transform: translateY(-2px);
        }

        /* Estilo Glossy para Botones */
        .glossy-btn {
            border-radius: 0.2rem;
            /* rounded-lg */
            font-weight: 600;
            padding: 0.5rem 1rem;
            transition: all 0.2s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .glossy-btn:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }

        /* Gradientes para Botones de Navegación */
        .nav-btn {
            color: #1e293b;
            /* stone-800 */
            background-color: #f3f4f6;
            /* stone-100 */
        }

        .nav-btn.active {
            color: white;
            background: linear-gradient(145deg, #10b981, #059669);
            /* Green-Teal Gradient */
            box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4);
        }

        /* Estilos base para Modales */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 100;
            overflow-y: auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background-color: white;
            padding: 24px;
            border-radius: 0.5rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            max-width: 90%;
            width: 500px;
            margin: 20px auto;
            position: relative;
        }

        /* Estilos para el validador de contraseña */
        #password-requirements-list li {
            padding-left: 1.5rem;
            position: relative;
            transition: all 0.2s ease;
            font-weight: 500;
        }

        #password-requirements-list li.invalid {
            color: #ef4444;
            /* text-red-500 */
        }

        #password-requirements-list li.invalid::before {
            content: '\2718';
            /* 'X' (Heavy Ballot X) */
            position: absolute;
            left: 0;
            top: 0;
            color: #ef4444;
            /* text-red-500 */
        }

        #password-requirements-list li.valid {
            color: #22c55e;
            /* text-green-500 */
        }

        #password-requirements-list li.valid::before {
            content: '\2713';
            /* '✓' (Checkmark) */
            position: absolute;
            left: 0;
            top: 0;
            color: #22c55e;
            /* text-green-500 */
        }

        #sidebar-nav .nav-btn {
            width: 100%;
            text-align: left;
            justify-content: flex-start;
            /* Alinear texto a la izquierda */
            padding: 12px 16px;
            /* Más padding para una lista vertical */

            /* Reseteamos el estilo glossy-btn para que parezca más un link */
            background: none;
            border: none;
            box-shadow: none;
            color: #4B5563;
            /* text-gray-600 */
        }

        .dark #sidebar-nav .nav-btn {
            color: #D1D5DB;
            /* dark:text-gray-300 */
        }

        /* Estilo del botón activo en el sidebar */
        #sidebar-nav .nav-btn.active {
            background-color: #10B981;
            /* Verde */
            color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        /* Estilos para el Dark Mode del botón activo */
        .dark #sidebar-nav .nav-btn.active {
            background-color: #10B981;
            /* Mantener el verde */
            color: white;
        }

        /* Hover para los botones inactivos */
        #sidebar-nav .nav-btn:not(.active):hover {
            background-color: #F3F4F6;
            /* bg-gray-100 */
        }

        .dark #sidebar-nav .nav-btn:not(.active):hover {
            background-color: #374151;
            /* dark:bg-gray-700 */
        }

        /* Custom HR Styling */
        hr {
            border-color: #a99f9f;
            /* Light gray for light mode */
        }

        .dark hr {
            border-color: #303b50;
            /* A clearer blue than #1A212E for dark mode */
        }