/* ========================================
   SIGN-IN VELTO ORIGINAL - GOOGLE BLANCO
   ADAPTADO AL FEEDBACK EXACTO
======================================== */
/* (1) FONDO PRINCIPAL #auth - NEGRO GRADIENTE ORIGINAL */
#auth {
    background: linear-gradient(135deg, #0A0F1C 0%, #1E2A44 100%) !important;
}
/* (2) HEADER TARJETA .card - AZUL ORIGINAL VELTO */
#auth .card {
    background: rgba(30, 42, 68, 0.3) !important; /* TU AZUL ORIGINAL */
    backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    border-radius: 25px !important;
}
/* (3) BOTÓN LOGIN - VERDE GRADIENTE ORIGINAL */
.btn-primary {
    background: linear-gradient(135deg, #25D366, #00D4FF) !important;
    color: #FFFFFF !important; /* BLANCO ORIGINAL */
    border: none !important;
    border-radius: 15px !important;
    padding: 16px !important;
    width: 100% !important;
    font-weight: bold !important;
}
/* (4) BOTÓN LOGIN HOVER - GRADIENTE INVERSO ORIGINAL */
.btn-primary:hover {
    background: linear-gradient(135deg, #00D4FF, #25D366) !important;
    transform: translateY(-2px) !important;
}
/* (5) TEXTO BOTÓN LOGIN - BLANCO ORIGINAL */
.btn-primary {
    color: #FFFFFF !important; /* BLANCO ORIGINAL - NO ROJO */
}
/* ================= GOOGLE BLANCO SÓLIDO 100% ================= */
#auth .btn-google, #auth [class*="google"], #auth .google-btn {
    background: #FFFFFF !important; /* BLANCO SÓLIDO */
    color: #4285F4 !important;
    border: 2px solid #4285F4 !important;
    border-radius: 15px !important;
    padding: 16px !important;
    width: 100% !important;
    font-weight: bold !important;
    margin: 5px 0 !important;
    opacity: 1 !important;
}
#auth .btn-google:hover {
    background: #4285F4 !important;
    color: #FFFFFF !important;
    border-color: #4285F4 !important;
}
/* HEADER LIQUID ORIGINAL */
#auth .card-header {
    background: rgba(0, 212, 255, 0.2) !important;
    color: #FFFFFF !important;
    border-radius: 20px 20px 0 0 !important;
}
/* INPUTS ORIGINALES */
#auth input, #auth .form-control {
    background: rgba(30, 42, 68, 0.4) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 15px !important;
    color: #FFFFFF !important;
    padding: 16px 16px !important;
}
#auth input:focus {
    border-color: rgba(0, 212, 255, 0.5) !important;
}
#auth input::placeholder {
    color: #9CA3AF !important;
}
/* LINKS ORIGINALES */
#auth a, #auth .forgot-password, #auth .register-link {
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-weight: bold !important;
}
#auth a:hover, #auth .forgot-password:hover {
    color: #00D4FF !important;
    text-decoration: underline !important;
}
/* TEXTOS ORIGINALES */
#auth *, #auth label, #auth p, #auth span {
    color: #FFFFFF !important;
}
#auth .form-label {
    color: #00D4FF !important;
    font-weight: bold !important;
}
/* ================= FACEBOOK AZUL OFICIAL ================= */
#auth .btn-facebook {
    background: #4267B2 !important; /* AZUL FACEBOOK OFICIAL */
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 15px !important;
    padding: 16px !important;
    width: 100% !important;
    font-weight: bold !important;
}
#auth .btn-facebook:hover {
    background: #365899 !important; /* HOVER FACEBOOK OFICIAL */
}
/* ELIMINAR FOCOS */
#auth * {
    outline: none !important;
    box-shadow: none !important;
}
/* QUITAR ICONOS DE LOS INPUTS DE USUARIO Y CONTRASEÑA */
#auth input[type="text"],
#auth input[type="password"],
#auth .form-control {
    background-image: none !important; /* Elimina cualquier imagen de fondo (iconos) */
    padding-left: 16px !important; /* Asegura que el texto no esté desplazado por iconos */
}
#auth input[type="text"]::before,
#auth input[type="password"]::before,
#auth input[type="text"]::after,
#auth input[type="password"]::after {
    content: none !important; /* Elimina cualquier pseudo-elemento que pueda contener iconos */
}
/* OCULTAR ICONOS EN LOS INPUTS */
#auth .form-control-icon {
    display: none !important;
}
/* ================= CHECKBOX TÉRMINOS Y CONDICIONES ================= */
#auth .form-check-input {
    width: 20px !important;
    height: 20px !important;
    margin: 0 8px 0 0 !important;
    background: rgba(30, 42, 68, 0.4) !important;
    border: 2px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    accent-color: #00D4FF !important; /* Color cuando está marcado */
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important; /* Asegura renderizado nativo del checkbox */
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* Estado checked */
#auth .form-check-input:checked {
    background: #00D4FF !important;
    border-color: #00D4FF !important;
    background-image: none !important; /* Evita íconos por defecto */
}
/* Hover del checkbox */
#auth .form-check-input:hover {
    border-color: #00D4FF !important;
    background: rgba(0, 212, 255, 0.1) !important;
}
/* Focus del checkbox */
#auth .form-check-input:focus {
    border-color: #00D4FF !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2) !important;
    outline: none !important;
}
/* Label del checkbox */
#auth .form-check-label,
#auth label[for="terms"] {
    color: #FFFFFF !important;
    font-size: 14px !important;
    cursor: pointer !important;
    user-select: none !important;
    margin-left: 8px !important;
}
/* Container del checkbox */
#auth .form-check {
    display: flex !important;
    align-items: center !important;
    margin: 15px 0 !important;
    padding: 10px 0 !important;
    position: relative !important;
    overflow: visible !important;
}
/* Links en el label */
#auth .form-check-label a,
#auth .terms-link {
    color: #00D4FF !important;
    text-decoration: none !important;
    font-weight: bold !important;
}
#auth .form-check-label a:hover,
#auth .terms-link:hover {
    text-decoration: underline !important;
    color: #25D366 !important;
}

/* AJUSTE OPCIONAL: Margen para botones sociales en registro (para separar del formulario) */
#auth .social-login-buttons {
    margin-top: 20px !important;
}