/* Título principal igual a Gestionar Usuarios */
.header-login h2.card-title-icon {
    color: #fff !important;
    text-align: center;
    font-weight: 900;
    margin-bottom: 1rem;
    text-shadow: 0 4px 12px rgba(0,0,0,.65);
    font-size: 2rem;
    letter-spacing: 1px;
    position: relative;
}
.header-login h2.card-title-icon::after {
    content: "";
    width: 120px;
    height: 4px;
    background: var(--color-primary-light, #00bcd4);
    margin: 10px auto 0;
    display: block;
    border-radius: 5px;
}
.header-login p.text-muted {
    color: #e0e0e0 !important;
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 0.5rem;
    opacity: 0.85;
}
body {
            background-image: url('../img/3.png');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-color: #1a1a1a;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        body::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 0;
        }
        .header-login {
            margin-top: 3rem;
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
            /* Fondo semitransparente también en escritorio */
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            padding: 16px 24px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.12);
        }
        .header-login h1 {
            color: #ffffff !important;
            text-shadow: 0 2px 6px rgba(0,0,0,0.5);
        }
        .form-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(15px);
            border-radius: 1.5rem;
            box-shadow: 0 8px 32px rgba(0, 77, 64, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.5);
            padding: 2.5rem 2rem;
            max-width: 420px;
            width: 100%;
            position: relative;
            z-index: 1;
        }
        .form-group label {
            font-weight: 600;
            color: #004d40;
        }
        .form-control {
            border-radius: 0.75rem;
            border: 2px solid #00bcd4;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }
        .form-control:focus {
            border-color: #00897b;
            box-shadow: 0 0 0 0.2rem rgba(0, 137, 123, 0.25);
        }
        .btn-primary {
            background: linear-gradient(45deg, #004d40, #00897b);
            border: none;
            font-weight: bold;
            box-shadow: 0 4px 15px rgba(0, 77, 64, 0.4);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            background: linear-gradient(45deg, #00897b, #00bcd4);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 77, 64, 0.6);
        }
        .extra-options {
            font-size: 1rem;
        }
        .extra-options a {
            color: #00897b;
            font-weight: 600;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .extra-options a:hover {
            color: #ffb300;
            text-decoration: underline;
        }

        /* Mejoras para el campo de contraseña y botón de ojito (como en Mi Perfil) */
        .password-field {
            position: relative;
        }
        .password-field .form-control {
            padding-right: 45px; /* espacio para el ojito */
            margin-bottom: 0;
        }
        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #6c757d;
            transition: color 0.3s ease;
            z-index: 10;
            background: transparent;
            border: none;
            line-height: 1;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .password-toggle:hover {
            color: #667eea; /* consistente con Mi Perfil */
        }
        .password-toggle:focus-visible {
            outline: none;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
            border-radius: 999px;
        }

        /* Compatibilidad si aún se usan clases antiguas */
        .password-wrapper { position: relative; }
        .password-wrapper .form-control { padding-right: 2.75rem; margin-bottom: 0; }
        .password-wrapper .toggle-pass {
            position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
            background: transparent; border: none; color: #666; padding: 0.375rem; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
        }
        .password-wrapper .toggle-pass:hover { color: #333; }
        .password-wrapper .toggle-pass:focus-visible { outline: none; box-shadow: 0 0 0 0.25rem rgba(206, 48, 153, 0.25); border-radius: 999px; }

/* ======================================================= */
/* ===  LOGIN MÓVIL: DISEÑO "DARK GLASS" (MODO OSCURO) === */
/* ======================================================= */

@media screen and (max-width: 768px) {

    /* 1. OSCURECER EL FONDO DE LA PÁGINA */
    body {
        justify-content: center !important;
        padding: 20px !important;
        background-attachment: fixed !important;
        /* Capa negra al 70% sobre tu imagen de fondo */
        background-color: rgba(0, 0, 0, 0.7) !important; 
        background-blend-mode: darken !important;
    }

    /* 2. ENCABEZADO (MÁS TRANSPARENTE AÚN) */
    .header-login {
        /* Fondo negro muy transparente (0.4) y difuminado */
        background: rgba(0, 0, 0, 0.4) !important; 
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        
        padding: 15px 20px !important;
        border-radius: 20px !important;
        margin-top: 0 !important;
        margin-bottom: 30px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borde sutil */
    }

    .header-login h1 {
        font-size: 1.6rem !important;
        color: #ffffff !important;
        margin-bottom: 5px !important;
        font-weight: 800 !important;
        text-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
    }

    .header-login p {
        font-size: 0.9rem !important;
        color: #b0bec5 !important; /* Gris claro azulado */
        margin: 0 !important;
        font-weight: 400 !important;
    }

    /* 3. TARJETA DEL FORMULARIO (CRISTAL OSCURO) */
    .form-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 35px 25px !important;
        border-radius: 30px !important;
        
        /* Fondo Negro/Gris profundo semitransparente */
        background: rgba(30, 30, 30, 0.85) !important;
        backdrop-filter: blur(15px) !important;
        
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6) !important;
        animation: slideUpFade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    
    .form-card h2 {
        text-align: center;
        font-size: 1.6rem !important;
        margin-bottom: 2rem !important;
        color: #ffffff !important; /* Título en blanco puro */
        font-weight: 900;
    }

    /* 4. INPUTS "DARK MODE" */
    .form-group label {
        margin-left: 15px !important;
        font-size: 0.85rem !important;
        color: #80cbc4 !important; /* Texto Teal claro para las etiquetas */
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px !important;
        display: block !important;
    }

    .form-control {
        height: 55px !important;
        border-radius: 50px !important;
        
        /* Fondo casi negro para los inputs */
        background-color: #121212 !important; 
        
        border: 1px solid #333 !important;
        padding-left: 25px !important;
        font-size: 1rem !important;
        color: #fff !important; /* Texto blanco al escribir */
        box-shadow: inset 0 2px 5px rgba(0,0,0,0.5) !important;
        transition: all 0.3s ease !important;
    }

    /* Placeholder gris suave */
    .form-control::placeholder {
        color: #666 !important;
    }

    /* Al tocar, borde brillante */
    .form-control:focus {
        background-color: #000 !important;
        border-color: #00bcd4 !important; /* Borde Cian Brillante */
        box-shadow: 0 0 15px rgba(0, 188, 212, 0.3) !important;
        transform: translateY(-2px);
    }

    /* 5. OJITO Y ENLACES */
    .password-toggle {
        right: 20px !important; width: 30px !important; height: 30px !important; background: transparent !important;
    }
    .password-toggle i { font-size: 1.1rem !important; color: #80cbc4 !important; } /* Icono claro */
    .password-field .form-control { padding-right: 55px !important; }

    .form-group .text-end a {
        margin-right: 15px !important; 
        color: #4dd0e1 !important; /* Enlace Cian claro */
        font-weight: 500; font-size: 0.85rem !important;
    }

    /* 6. BOTÓN PRINCIPAL (NEÓN) */
    .btn-primary {
        width: 100% !important;
        height: 55px !important;
        border-radius: 50px !important;
        /* Degradado Teal Brillante */
        background: linear-gradient(135deg, #009688 0%, #00bcd4 100%) !important;
        border: none !important;
        font-size: 1.1rem !important;
        color: #ffffff !important;
        font-weight: 800 !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: 0 0 20px rgba(0, 188, 212, 0.4) !important; /* Resplandor */
        margin-top: 15px !important;
    }
    .btn-primary:active { transform: scale(0.98); }

    /* 7. ENLACE REGISTRO */
    .extra-options { margin-top: 30px !important; font-size: 0.95rem !important; color: #b0bec5; }
    .extra-options a { color: #4dd0e1 !important; font-weight: 700 !important; text-decoration: none !important; }
}

/* ANIMACIÓN */
@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}