:root {
   --prime-dark-blue: #0F171E;      /* Fondo principal */
   --prime-blue: #00A8E1;           /* Color de acento */
   --prime-light-blue: #1A242F;     /* Elementos secundarios */
   --prime-hover-blue: #0095C8;     /* Hover estados */
   --prime-text: #FFFFFF;           /* Texto principal */
}
        
        body {
            background-color: var(--prime-dark-blue);
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .navbar {
            background-color: var(--prime-blue);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .content-wrapper {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn-prime {
            background-color: var(--prime-blue);
            color: white;
            border: none;
            padding: 8px 20px;
            margin: 10px 0;
        }
        
        .btn-prime:hover {
            background-color: #11b4ab;
            color: white;
        }

        .prime-logo {
            width: 200px;
            margin-bottom: 2rem;
        }
        
        .toggle-password {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            border: none;
            background: none;
            cursor: pointer;
            font-size: 20px;
            color: white;
        }

        .help-text {
            background-color: rgba(255,255,255,0.1);
            padding: 15px;
            border-radius: 4px;
        }
        
        footer {
            background-color: rgba(0,0,0,0.8);
            padding: 20px 0;
            margin-top: auto;
        }

        #loading {
            display: none;
        }

        .btn-wrapper {
            display: grid;
            grid-gap: 1rem;
        }

        .alertanocorreo {
            background-color: #dc3545; /* Rojo de Bootstrap */
            color: white;
            padding: 15px;
            border-radius: 5px;
            margin: 10px 0;
            text-align: center;
        }
        
        /* Si deseas una animación suave cuando aparece */
        .alertanocorreo {
            animation: fadeIn 0.3s ease-in-out;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .email-body {
            margin: 20px 0;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }

        #resultado {
            background-color: white; 
            color: black;
            margin-top: 30px;
        }
        
        #togglePassword {
        cursor: pointer;
        font-size: 1.5rem;
        color: #00a8e1; 
        }
        
        #togglePassword:focus {
            outline: none;
            box-shadow: none;
        }
        
        #togglePassword i {
            font-size: 1.5rem; /* Asegura que el ícono dentro del botón también sea más grande */
            color: #00a8e1; /* Color rojo de Netflix */
        }
        
        /* Efecto hover opcional */
        #togglePassword:hover {
            color: #ff0f1b; /* Un rojo un poco más claro al pasar el mouse */
        }