body {
            /* 1. Agregamos la imagen de fondo */
            background-image: url('../iconos/lrfondo.jpeg'); /* Reemplaza esto con la ruta de tu imagen */
            background-size: cover; /* Hace que la imagen cubra toda la pantalla */
            background-position: center; /* Centra la imagen */
            background-repeat: no-repeat; /* Evita que la imagen se repita */
            background-attachment: fixed; /* Mantiene el fondo fijo al hacer scroll */
            
            color: #0b1c2d; 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* TARJETA PRINCIPAL (Más compacta y semitransparente) */
        .login-card {
            /* 2. Cambiamos el fondo blanco sólido por uno semitransparente usando RGBA */
            background-color: rgba(255, 255, 255, 0.80); /* El 0.80 es la opacidad (80%) */
            
            /* 3. Agregamos un efecto de desenfoque (blur) al fondo para que el texto sea legible */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px); /* Para compatibilidad con Safari */
            
            /* El resto se mantiene igual */
            max-width: 380px; 
            width: 100%; 
            padding: 35px 30px; 
            border-radius: 16px;
            /* Hacemos la sombra un poquito más oscura para que resalte sobre la imagen */
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); 
        }

        /* LOGO Y TÍTULO */
        .logoimg {
            display: block;
            margin: 0 auto 20px auto;
            max-width: 120px; /* Reducido de 150px a 120px */
        }

        .login-title {
            font-size: 1.6rem; /* Reducido para verse más fino */
            font-weight: 700;
            color: #0b1c2d;
            text-align: center;
            margin-bottom: 25px;
        }

        /* FORMULARIO */
        .form-label { 
            font-weight: 600; 
            font-size: 0.85rem; /* Letra un poco más pequeña */
            color: #0b1c2d; 
            margin-bottom: 6px; 
        }
        
        .form-control, .input-group-text { 
            padding: 10px 12px; /* Campos más delgados */
            font-size: 0.9rem;
        }

        .form-control { 
            border-radius: 0 8px 8px 0; 
            border: 1px solid #e0e6ed;
            border-left: none;
            background-color: #f8fafc;
        }
        
        .form-control:focus {
            box-shadow: none;
            border-color: #c9a05f;
            background-color: #ffffff;
        }
        
        .input-group-text { 
            border-radius: 8px 0 0 8px; 
            background-color: #f8fafc;
            border: 1px solid #e0e6ed;
            border-right: none;
            color: #0b1c2d;
        }

        .input-group:focus-within .input-group-text,
        .input-group:focus-within .form-control {
            border-color: #c9a05f;
            background-color: #ffffff;
        }

        /* CONTRASEÑA Y ENLACES */
        .password-container { position: relative; }
        
        .eye-icon-btn {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #a0aec0;
            z-index: 10;
        }
        .eye-icon-btn:hover { color: #0b1c2d; }

        .forgot-link, .text-gold { color: #c9a05f; font-weight: 600; }
        .forgot-link { text-decoration: none; transition: color 0.3s; font-size: 0.8rem; }
        .forgot-link:hover { color: #0b1c2d; text-decoration: underline; }

        /* BOTÓN DE ENTRADA */
        .boton_entrar {
            background-color: #0b1c2d; 
            color: #c9a05f; 
            border: none;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s;
            padding: 12px; /* Reducido */
            border-radius: 8px;
            width: 100%;
            margin-top: 10px;
            font-size: 0.9rem;
        }
        .boton_entrar:hover {
            background-color: #163250;
            color: #e3b873;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(11, 28, 45, 0.2);
        }

        /* ALERTAS PERSONALIZADAS */
        .alerta-personalizada-error, .alerta-personalizada-warning {
            border-radius: 8px;
            padding: 10px 12px;
            display: flex;
            align-items: center;
            margin-top: 15px;
            animation: fadeIn 0.4s ease-in-out;
        }

        .alerta-personalizada-error {
            background-color: #fdf2f2; 
            border-left: 4px solid #e74c3c; 
            color: #0b1c2d; 
            box-shadow: 0 4px 10px rgba(231, 76, 60, 0.1);
        }

        .alerta-personalizada-warning {
            background-color: #fcfaf5; 
            border-left: 4px solid #c9a05f; 
            color: #0b1c2d;
            box-shadow: 0 4px 10px rgba(201, 160, 95, 0.1);
        }

        .alerta-icono-error { color: #e74c3c; font-size: 1.1rem; margin-right: 10px; }
        .alerta-icono-warning { color: #c9a05f; font-size: 1.1rem; margin-right: 10px; }
        
        .alerta-texto { font-size: 0.85rem; font-weight: 500; margin: 0; line-height: 1.3;}

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* =========================================
           DISEÑO RESPONSIVE (Para Celulares)
           ========================================= */
       /* =========================================
           DISEÑO RESPONSIVE (Para Celulares)
           ========================================= */
        @media (max-width: 480px) {
            body {
                /* Desactiva el 'fixed' en celulares para evitar el bug del zoom gigante en iOS/Android */
                background-attachment: scroll; 
                /* Mantiene la imagen centrada y recorta los lados sin deformarla */
                background-position: center center;
            }

            .login-card {
                width: 90%; /* Ocupa el 90% del ancho del celular */
                padding: 25px 20px; /* Menos espacio interior en celulares */
                margin: 20px auto;
            }
            .logoimg {
                max-width: 100px; /* Logo más pequeño en cel */
                margin-bottom: 15px;
            }
            .login-title {
                font-size: 1.4rem; /* Título más pequeño */
                margin-bottom: 20px;
            }
            .boton_entrar {
                padding: 10px;
                font-size: 0.85rem;
            }
            .alerta-texto {
                font-size: 0.8rem;
            }
        }