:root {
            --bg-dark: #0a192f;
            --bg-card: #112240;
            --text-main: #e6f1ff;
            --text-dim: #8892b0;
            --accent: #64ffda;
            --blue-link: #00d2ff;
            --mp-blue: #009ee3;
        }

        body { background-color: var(--bg-dark); color: var(--text-main); font-family: 'Inter', sans-serif; }

        .navbar { background-color: #020c1b !important; border-bottom: 1px solid #112240; padding: 0.6rem 0; }
        .brand-name { color: var(--blue-link) !important; font-size: 1.5rem; font-weight: 700; text-transform: lowercase; }
        .brand-sub { color: var(--text-dim); font-size: 0.85rem; }
        .nav-link { color: var(--text-dim) !important; }

        .card { 
            background-color: var(--bg-card) !important; 
            border: 1px solid #233554 !important;
            color: var(--text-main) !important;
            border-radius: 16px;
        }

        /* ESTO ES LO ÚNICO QUE CAMBIAMOS PARA QUE SE VEA EL TEXTO DEL DASHBOARD */
        .col-md-8 .text-muted, .col-md-8 .x-small {
            color: var(--text-main) !important;
            opacity: 1 !important;
        }

        .btn-primary { background-color: var(--blue-link); border: none; color: #0a192f; font-weight: bold; }
        .btn-mp { background-color: var(--mp-blue); color: white; border: none; font-weight: 600; }
        
        .hero-section { padding: 60px 0; text-align: center; }
        .feature-icon { font-size: 2rem; color: var(--blue-link); margin-bottom: 1rem; }

        /* 1. Forzamos un color claro para todo lo que use text-muted */
    .text-muted {
        color: rgba(255, 255, 255, 0.7) !important; /* Blanco con 70% de opacidad */
    }

        /* 2. Mejoramos la visibilidad de los labels de los formularios */
    .form-label {
        color: #ffffff !important;
        font-weight: 500;
    }

    /* 3. Aseguramos que los links dentro de la card se vean celestes */
    .card a {
        color: #00d1ff !important; /* Un celeste vibrante tipo 'info' */
        transition: 0.3s;
    }

    .card a:hover {
        color: #ffffff !important;
        text-decoration: underline !important;
    }

    /* 4. Si tus inputs se ven muy oscuros, podés aclararlos un poco */
    .form-control {
        background-color: rgba(255, 255, 255, 0.9);
        border: none;
    }

    .btn-cafecito {
        background-color: #00b1ea; /* El celeste característico de Cafecito */
        color: white !important;
        border: none;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    .btn-cafecito:hover {
        background-color: #008fbc;
        transform: translateY(-2px); /* Un pequeño salto al pasar el mouse */
        box-shadow: 0 4px 15px rgba(0, 177, 234, 0.4);
    }