/* ==========================================================================
   PALETA DE COLORES PERSONALIZADA - TECNIDIABETES / ATTD
   ========================================================================== */

:root {
    --verde-corporativo: #065A38;
    --azul-medico: #1E4BB0;
    --verde-brillante: #00B050;
    --amarillo-oro: #F2B705;
    --naranja-terracota: #C85A17;
    --blanco: #FFFFFF;
    --oscuro: #1A1A1A;
}

/* 1. Fondo de la página de Login */
body.login-page {
    background-color: var(--verde-corporativo) !important;
}

/* 2. Tarjeta contenedora del Login */
.login-box .card {
    border-top: 3px solid var(--azul-medico);
    background-color: var(--blanco);
    color: var(--oscuro);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Titulares y texto de cabecera */
.login-box .card-header, 
.login-box .login-card-body .login-box-msg {
    color: var(--oscuro);
    font-weight: bold;
}

/* 3. Inputs y Foco (Efecto Azul Médico / Verde Brillante) */
.login-box .form-control:focus {
    border-color: var(--azul-medico);
    box-shadow: 0 0 5px rgba(30, 75, 176, 0.5);
}

.login-box .input-group-text {
    background-color: #f4f6f9;
    color: var(--verde-corporativo);
}

/* Icono de ojo para la contraseña */
.login-box .fa-eye-slash, 
.login-box .fa-eye {
    color: var(--azul-medico);
    cursor: pointer;
}

/* 4. Botones */
/* Botón Principal de Ingreso (Azul con Hover Verde Brillante) */
.login-box .btn-primary,
.login-box .btn-flat.btn-primary {
    background-color: var(--azul-medico) !important;
    border-color: var(--azul-medico) !important;
    color: var(--blanco) !important;
    transition: background-color 0.3s ease;
}

.login-box .btn-primary:hover,
.login-box .btn-flat.btn-primary:hover {
    background-color: var(--verde-brillante) !important;
    border-color: var(--verde-brillante) !important;
}

/* Botón Regresar (Naranja Terracota con Hover Amarillo Oro) - FORZADO */
.login-box .card .btn-reply-all-custom,
.login-box .card a.btn-reply-all-custom {
    background-color: #C85A17 !important;
    border-color: #C85A17 !important;
    color: #FFFFFF !important;
    display: inline-block; /* Asegura que tome propiedades de bloque */
}

.login-box .card .btn-reply-all-custom:hover,
.login-box .card a.btn-reply-all-custom:hover {
    background-color: #F2B705 !important;
    border-color: #F2B705 !important;
    color: #1A1A1A !important; /* Texto oscuro sobre fondo amarillo para que se lea bien */
}
/* Botón de Versión en el Footer */
.login-box .btn-white {
    color: var(--amarillo-oro) !important;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 5. Links del Footer (Recuperar clave, etc.) */
.login-box .card-footer a {
    color: var(--azul-medico);
    font-weight: 600;
}

.login-box .card-footer a:hover {
    color: var(--verde-brillante);
    text-decoration: underline;
}

/* 6. Estilos del Modal (Sesión activa) */
#cerrarSesion .modal-header {
    background-color: var(--naranja-terracota);
    color: var(--blanco);
}

#cerrarSesion .modal-title b {
    color: var(--blanco);
}

#cerrarSesion .modal-body h4 b {
    color: var(--oscuro);
}

#cerrarSesion .modal-body h5 b {
    color: var(--azul-medico);
}