/**
 * VE Auth - Estilos identicos al diseno de flujo-viajes-exito.
 *
 * Fuente:        Poppins (Google Fonts) - pesos 100-900, normal + italic
 * Color primario: var(--e-global-color-primary, #ff0000)
 * Color texto:    var(--e-global-color-text, #545454)
 * Color borde:    #e4e4e7  (HeroUI --heroui-default-200)
 * Placeholder:    #a9a9a9
 *
 * Equivalencias HeroUI v2.8.7:
 *   Input  variant='bordered' size='md'  -> h-10 (40px) | rounded-medium (12px) | border-medium (2px) | text-small (14px)
 *   Button color='primary'   size='md'  -> h-10 (40px) | rounded-medium (12px) | text-small (14px)
 *   Input  focus border  -> border-default-foreground (negro)
 *   Input  hover border  -> border-default-400 (~#a1a1aa)
 */

/* =========================================================================
   RESET TIPOGRÁFICO — equivalente a globals.css + antialiased de Next.js
   Aplica ANTES que cualquier otra regla del plugin.
   Los navegadores NO heredan font-family en inputs/buttons — hay que forzarlo.
   ========================================================================= */

.ve-auth-login-form,
.ve-auth-register-form,
.ve-auth-forgot-modal,
.ve-auth-user-info,
.ve-auth-button-wrapper,
.ve-auth-login-form *,
.ve-auth-register-form *,
.ve-auth-forgot-modal *,
.ve-auth-user-info *,
.ve-auth-button-wrapper * {
    font-family: "Poppins", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.2;
    box-sizing: border-box;
}

/* =========================================================================
   FORM CONTAINER
   Sin card, sin sombra, sin fondo — igual que flujo-viajes-exito
   ========================================================================= */

.ve-auth-login-form,
.ve-auth-register-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 384px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    margin: 0px auto;
}

/* =========================================================================
   TÁTULO DEL FORMULARIO
   text-xl font-semibold text-center (var(--e-global-color-text, #545454))
   ========================================================================= */

.ve-auth-form-title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: var(--e-global-color-text, #545454);
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
}

/* =========================================================================
   LABELS — visualmente ocultos, accesibles para screen readers
   El diseño de flujo-viajes-exito usa solo placeholder
   ========================================================================= */

.ve-auth-field label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   SECCIONES DEL FORMULARIO
   ========================================================================= */

.ve-auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ve-auth-field {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* =========================================================================
   INPUTS
   height 40px | border 2px #e4e4e7 | border-radius 12px | Poppins 14px
   Coincide con HeroUI Input variant="bordered" size="md":
     h-10 (40px) | rounded-medium (12px) | border-medium (2px) | text-small (14px)
   ========================================================================= */

.ve-auth-field input[type="email"],
.ve-auth-field input[type="password"],
.ve-auth-field input[type="text"] {
    width: 100%;
    height: 40px;
    padding: 0 16px;
    border: 2px solid #e4e4e7;
    border-radius: 12px !important;
    background-color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: var(--e-global-color-text, #545454);
    outline: none;
    transition: border-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.ve-auth-field input::placeholder {
    color: #a9a9a9;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
}

.ve-auth-field input:hover {
    border-color: #a1a1aa;
}

.ve-auth-field input:focus {
    border-color: #18181b;
}

/* Input con icono al final (password toggle) */
.ve-auth-password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.ve-auth-password-wrapper input {
    padding-right: 48px;
}

/* =========================================================================
   TOGGLE DE CONTRASEÑA
   ========================================================================= */

.ve-auth-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #a9a9a9;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.15s;
}

.ve-auth-toggle-password:hover {
    color: var(--e-global-color-text, #545454);
}

.ve-icon-eye,
.ve-icon-eye-off {
    display: block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* Eye open — filled style, identico a EyeFilledIcon de HeroUI PasswordInput.jsx */
.ve-icon-eye {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M21.25 9.14969C18.94 5.51969 15.56 3.42969 12 3.42969C10.22 3.42969 8.49 3.94969 6.91 4.91969C5.33 5.89969 3.91 7.32969 2.75 9.14969C1.75 10.7197 1.75 13.2697 2.75 14.8397C5.06 18.4797 8.44 20.5597 12 20.5597C13.78 20.5597 15.51 20.0397 17.09 19.0697C18.67 18.0897 20.09 16.6597 21.25 14.8397C22.25 13.2797 22.25 10.7197 21.25 9.14969ZM12 16.0397C9.76 16.0397 7.96 14.2297 7.96 11.9997C7.96 9.76969 9.76 7.95969 12 7.95969C14.24 7.95969 16.04 9.76969 16.04 11.9997C16.04 14.2297 14.24 16.0397 12 16.0397Z' fill='%23a9a9a9'/%3E%3Cpath d='M11.9984 9.14062C10.4284 9.14062 9.14844 10.4206 9.14844 12.0006C9.14844 13.5706 10.4284 14.8506 11.9984 14.8506C13.5684 14.8506 14.8584 13.5706 14.8584 12.0006C14.8584 10.4306 13.5684 9.14062 11.9984 9.14062Z' fill='%23a9a9a9'/%3E%3C/svg%3E");
}

/* Eye slash (password visible) — filled style, identico a EyeSlashFilledIcon de HeroUI PasswordInput.jsx */
.ve-icon-eye-off {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M21.2714 9.17834C20.9814 8.71834 20.6714 8.28834 20.3514 7.88834C19.9814 7.41834 19.2814 7.37834 18.8614 7.79834L15.8614 10.7983C16.0814 11.4583 16.1214 12.2183 15.9214 13.0083C15.5714 14.4183 14.4314 15.5583 13.0214 15.9083C12.2314 16.1083 11.4714 16.0683 10.8114 15.8483C10.8114 15.8483 9.38141 17.2783 8.35141 18.3083C7.85141 18.8083 8.01141 19.6883 8.68141 19.9483C9.75141 20.3583 10.8614 20.5683 12.0014 20.5683C13.7814 20.5683 15.5114 20.0483 17.0914 19.0783C18.7014 18.0783 20.1514 16.6083 21.3214 14.7383C22.2714 13.2283 22.2214 10.6883 21.2714 9.17834Z' fill='%23a9a9a9'/%3E%3Cpath d='M14.0206 9.98062L9.98062 14.0206C9.47062 13.5006 9.14062 12.7806 9.14062 12.0006C9.14062 10.4306 10.4206 9.14062 12.0006 9.14062C12.7806 9.14062 13.5006 9.47062 14.0206 9.98062Z' fill='%23a9a9a9'/%3E%3Cpath d='M18.25 5.74969L14.86 9.13969C14.13 8.39969 13.12 7.95969 12 7.95969C9.76 7.95969 7.96 9.76969 7.96 11.9997C7.96 13.1197 8.41 14.1297 9.14 14.8597L5.76 18.2497H5.75C4.64 17.3497 3.62 16.1997 2.75 14.8397C1.75 13.2697 1.75 10.7197 2.75 9.14969C3.91 7.32969 5.33 5.89969 6.91 4.91969C8.49 3.95969 10.22 3.42969 12 3.42969C14.23 3.42969 16.39 4.24969 18.25 5.74969Z' fill='%23a9a9a9'/%3E%3Cpath d='M14.8581 11.9981C14.8581 13.5681 13.5781 14.8581 11.9981 14.8581C11.9381 14.8581 11.8881 14.8581 11.8281 14.8381L14.8381 11.8281C14.8581 11.8881 14.8581 11.9381 14.8581 11.9981Z' fill='%23a9a9a9'/%3E%3Cpath d='M21.7689 2.22891C21.4689 1.92891 20.9789 1.92891 20.6789 2.22891L2.22891 20.6889C1.92891 20.9889 1.92891 21.4789 2.22891 21.7789C2.37891 21.9189 2.56891 21.9989 2.76891 21.9989C2.96891 21.9989 3.15891 21.9189 3.30891 21.7689L21.7689 3.30891C22.0789 3.00891 22.0789 2.52891 21.7689 2.22891Z' fill='%23a9a9a9'/%3E%3C/svg%3E");
}

/* =========================================================================
   HINT TEXT
   ========================================================================= */

.ve-auth-hint {
    font-size: 12px;
    color: #a9a9a9;
    margin-top: 4px;
    font-family: "Poppins", sans-serif;
}

/* =========================================================================
   ERRORES
   color var(--e-global-color-primary, #ff0000), font-size 12px — sin caja, igual que flujo-viajes-exito
   ========================================================================= */

.ve-auth-error {
    font-size: 12px;
    color: var(--e-global-color-primary, #ff0000);
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    display: block;
}

/* =========================================================================
   ÉXITO
   ========================================================================= */

.ve-auth-success {
    font-size: 14px;
    color: #16a34a;
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    text-align: center;
}

/* =========================================================================
   BOTÓN PRINCIPAL (Ingresar / Crear cuenta)
   bg var(--e-global-color-primary, #ff0000) | white | height 40px | border-radius 12px | Poppins 14px 500
   Coincide con HeroUI Button color="primary" size="md":
     h-10 (40px) | rounded-medium (12px) | text-small (14px)
   ========================================================================= */

.ve-auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 16px;
    background-color: var(--e-global-color-primary, #ff0000);
    color: #ffffff;
    border: none;
    border-radius: 12px !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 14px;
    font-weight: 500 !important;       /* Elementor fuerza 700 en botones */
    text-transform: none !important;   /* Elementor fuerza uppercase */
    letter-spacing: 0 !important;      /* Elementor fuerza 1.5px */
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    text-align: center;
}

/* OAuth buttons: mismo reset anti-Elementor */
.ve-auth-oauth-btn {
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-family: "Poppins", sans-serif !important;
}

/* Toggle password: también es un <button> */
.ve-auth-toggle-password {
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.ve-auth-submit:hover {
    background-color: var(--e-global-color-primary, #ff0000);
}

.ve-auth-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Spinner dentro del botón — estilo HeroUI Spinner (circle + stroke-dasharray)
   Replica el <Spinner size="sm" color="white" /> de HeroUI v2.8.7.
   HeroUI usa dos circulos: uno de fondo (opacity 0.25) y uno animado (stroke-dasharray). */
.ve-auth-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    position: relative;
    animation: ve-spin 0.8s linear infinite;
}

.ve-auth-spinner::before,
.ve-auth-spinner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
}

/* Anillo de fondo (opaco) */
.ve-auth-spinner::before {
    border-color: rgba(255, 255, 255, 0.25);
}

/* Anillo animado (arco parcial) — replica stroke-dasharray de HeroUI */
.ve-auth-spinner::after {
    border-top-color: #ffffff;
    border-right-color: #ffffff;
    animation: ve-spin-arc 0.8s ease-in-out infinite;
}

@keyframes ve-spin {
    to { transform: rotate(360deg); }
}

@keyframes ve-spin-arc {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================================================
   DIVIDER  ("o continua con")
   flex + hr lines + texto 12px #a9a9a9
   ========================================================================= */

.ve-auth-divider {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ve-auth-divider::before,
.ve-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #e4e4e7;
}

.ve-auth-divider span {
    font-size: 12px;
    color: #a9a9a9;
    font-family: "Poppins", sans-serif;
    white-space: nowrap;
}

/* =========================================================================
   BOTONES OAUTH
   ========================================================================= */

.ve-auth-oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ve-auth-oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 16px;
    border-radius: 12px !important;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
    position: relative;
}

.ve-auth-oauth-btn:disabled,
.ve-auth-oauth-btn.ve-auth-loading {
    opacity: 0.5;
    cursor: not-allowed;
}

.ve-auth-oauth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ve-user-popover .ve-auth-oauth-btn span.ve-auth-oauth-label {
    width: auto;
    flex: 0 0 auto;
    display: flex;
}

.ve-auth-oauth-icon svg {
    width: 18px;
    height: 18px;
}

.ve-auth-oauth-label {
    flex: none;
    text-align: center;
}

/* Google — bordered (HeroUI variant="bordered": 2px border default-200) */
.ve-auth-oauth-google {
    background-color: #ffffff;
    border: 2px solid #e4e4e7;
    color: var(--e-global-color-text, #545454);
}
.ve-auth-oauth-google:hover:not(:disabled) {
    background-color: #f9f9f9;
}

/* Facebook — azul */
.ve-auth-oauth-facebook {
    background-color: #1877F2;
    border: none;
    color: #ffffff;
}
.ve-auth-oauth-facebook:hover:not(:disabled) {
    background-color: #1465d0;
}

/* Apple — negro */
.ve-auth-oauth-apple {
    background-color: #000000;
    border: none;
    color: #ffffff;
}
.ve-auth-oauth-apple:hover:not(:disabled) {
    background-color: #222222;
}

/* Microsoft — bordered (HeroUI variant="bordered": 2px border default-200) */
.ve-auth-oauth-microsoft {
    background-color: #ffffff;
    border: 2px solid #e4e4e7;
    color: var(--e-global-color-text, #545454);
}
.ve-auth-oauth-microsoft:hover:not(:disabled) {
    background-color: #f9f9f9;
}

/* =========================================================================
   LINKS DE NAVEGACIÓN
   text-xs var(--e-global-color-text, #545454) | link rojo subrayado
   ========================================================================= */

.ve-auth-links {
    display: flex;
    justify-content: flex-end;
}

.ve-auth-forgot-password {
    font-size: 12px;
    color: var(--e-global-color-text, #545454);
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    display: block;
    text-align: right;
    width: 100%;
    transition: color 0.15s;
}

.ve-auth-forgot-password:hover {
    color: var(--e-global-color-primary, #ff0000);
}

.ve-auth-register-link,
.ve-auth-login-link {
    font-size: 12px;
    text-align: center;
    color: var(--e-global-color-text, #545454);
    font-family: "Poppins", sans-serif;
    margin-bottom: 0px;
}

.ve-auth-register-link a,
.ve-auth-login-link a {
    color: var(--e-global-color-primary, #ff0000);
    text-decoration: underline !important;
    transition: color 0.15s;
}

.ve-auth-register-link a:hover,
.ve-auth-login-link a:hover {
    color: var(--e-global-color-primary, #ff0000);
}

/* =========================================================================
   MODAL DE RECUPERACIÓN (inline, sin página separada)
   ========================================================================= */

.ve-auth-forgot-modal {
    display: none;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.ve-auth-forgot-modal h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--e-global-color-text, #545454);
    margin: 0;
    text-align: center;
    font-family: "Poppins", sans-serif;
}

.ve-auth-back-to-login {
    font-size: 14px;
    color: var(--e-global-color-text, #545454);
    text-decoration: underline;
    text-align: center;
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    transition: color 0.15s;
}

.ve-auth-back-to-login:hover {
    color: var(--e-global-color-primary, #ff0000);
}

/* =========================================================================
   USUARIO INFO PANEL
   ========================================================================= */

.ve-auth-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: "Poppins", sans-serif;
}

.ve-auth-user-avatar img {
    width: 48px;
    height: 48px !important;
    border-radius: 12px !important;
    object-fit: cover;
}

.ve-auth-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--e-global-color-text, #545454);
}

.ve-auth-user-email {
    font-size: 12px;
    color: #a9a9a9;
}

.ve-auth-role-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 500;
    background: #f5f5f5;
    color: var(--e-global-color-text, #545454);
    font-family: "Poppins", sans-serif;
}

.ve-auth-role-badge.ve-auth-role-asesor        { background: #fff3cd; color: #856404; }
.ve-auth-role-badge.ve-auth-role-administrador { background: #ffe0e0; color: var(--e-global-color-primary, #ff0000); }

/* =========================================================================
   BOTÓN LOGIN / CUENTA (widget header)
   bg var(--e-global-color-primary, #ff0000) igual que botones de acción
   ========================================================================= */

.ve-auth-button-wrapper {
    position: relative;
    display: inline-block;
    font-family: "Poppins", sans-serif;
}

.ve-auth-login-btn,
.ve-auth-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    background-color: var(--e-global-color-primary, #ff0000);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}

.ve-auth-login-btn:hover,
.ve-auth-account-btn:hover {
    background-color: var(--e-global-color-primary, #ff0000);
    color: #ffffff;
    text-decoration: none;
}

/* Dropdown de usuario autenticado */
.ve-auth-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 12px;
    z-index: 9999;
}

/* Logout dentro del dropdown */
.ve-auth-logout-btn {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    background: #f5f5f5;
    border: none;
    border-radius: 8px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: var(--e-global-color-text, #545454);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.ve-auth-logout-btn:hover {
    background: var(--e-global-color-primary, #ff0000);
    color: #ffffff;
}

/* =========================================================================
   VISIBILIDAD CONDICIONAL
   ========================================================================= */

.ve-auth-hidden {
    display: none !important;
}

.ve-auth-already-logged {
    font-size: 14px;
    color: var(--e-global-color-text, #545454);
    text-align: center;
    padding: 16px;
    font-family: "Poppins", sans-serif;
}

/* =========================================================================
   ACCESO DENEGADO (post access control)
   Minimal — sin card llamativa, solo texto centrado
   ========================================================================= */

.ve-auth-access-denied {
    max-width: 384px;
    margin: 64px auto;
    padding: 24px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: var(--e-global-color-text, #545454);
    text-align: center;
}

.ve-auth-access-denied p {
    margin: 0;
}

/* =========================================================================
   ACCESIBILIDAD — label visualmente oculto (screen-reader only)
   Equivalente a sr-only de Tailwind
   ========================================================================= */

.ve-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   SEPARADOR HORIZONTAL
   <hr> simple entre bloque OAuth y formulario (LoginForm.jsx)
   ========================================================================= */

.ve-auth-separator {
    border: none;
    border-top: 1px solid #e4e4e7;
    margin: 0;
}

/* =========================================================================
   DESCRIPCION DEL FORMULARIO
   Texto pequeño de apoyo debajo del título (ForgotPasswordForm.jsx)
   ========================================================================= */

.ve-auth-form-description {
    font-size: 13px;
    color: #a9a9a9;
    text-align: center;
    font-family: "Poppins", sans-serif;
    margin: 0;
}

/* =========================================================================
   ENLACE DE ASESOR
   Mismo tamaño que register-link pero color texto, no rojo
   ========================================================================= */

.ve-auth-asesor-link {
    color: var(--e-global-color-text, #545454) !important;
    text-decoration: underline;
    transition: color 0.15s;
}

.ve-auth-asesor-link:hover {
    color: #333333 !important;
}

/* =========================================================================
   CHECKBOX MARKETING
   Identico al checkbox de RegisterForm.jsx
   ========================================================================= */

.ve-auth-marketing-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-family: "Poppins", sans-serif;
}

.ve-auth-marketing-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--e-global-color-primary, #ff0000);
    cursor: pointer;
}

.ve-auth-marketing-label span {
    font-size: 12px;
    color: var(--e-global-color-text, #545454);
    line-height: 1.4;
}

/* =========================================================================
   ICONO "ENVIADO" (ForgotPasswordForm — estado success)
   ========================================================================= */

.ve-auth-forgot-sent-icon {
    font-size: 40px;
    text-align: center;
    margin-bottom: 8px;
    line-height: 1;
}

/* =========================================================================
   USER POPOVER — botón de avatar con dos estados (guest / authenticated)
   ========================================================================= */

/* Wrapper */
.ve-user-popover {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: "Poppins", sans-serif !important;
    /* width: 38.8px; */
    /* height: 38.8px; */
    /* border: 2px solid #d4d4d8; */
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ve-user-popover.ve-user-popover--guest {
    width: 38.8px;
    height: 38.8px;
    border: 2px solid #d4d4d8;
}

/* Trigger button */
.ve-user-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent !important;
    border: 0px;
    border-radius: 0px;
    cursor: pointer;
    color: var(--e-global-color-text, #545454);
    transition: border-color 0.15s ease, background 0.15s ease;
    font-weight: inherit !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}
.ve-user-trigger:hover {
    /* border-color: var(--e-global-color-text, #545454) !important; */
    /* background: #f9fafb !important; */
}

/* Estado guest: solo muestra icono persona */
.ve-user-trigger__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    width: 24px;
}

/* Estado auth: avatar con iniciales + chevron (pill, no círculo) */
.ve-user-trigger__avatar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0px;
}

.ve-user-trigger__initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38.8px;
    height: 38.8px;
    border-radius: 12px;
    background: var(--e-global-color-text, #545454);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600 !important;
    line-height: 1;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    flex-shrink: 0;
}

.ve-user-trigger__photo {
    width: 40px;
    height: auto !important;
    border-radius: 12px !important;
    object-fit: cover;
    flex-shrink: 0;
}

.ve-user-trigger__chevron {
    flex-shrink: 0;
    color: var(--e-global-color-text, #545454);
    transition: transform 0.18s ease;
}

/* Cuando el trigger está expandido, girar el chevron */
.ve-user-trigger[aria-expanded="true"] .ve-user-trigger__chevron {
    transform: rotate(180deg);
}

/* Cuando el trigger está en estado auth, ampliar ligeramente el botón */
.ve-user-popover[data-ve-auth="authenticated"] .ve-user-trigger {
    /* padding: 0 10px !important; */
}

/* Visibilidad por estado (CSS controla qué mitad está visible) */
.ve-user-popover[data-ve-auth="guest"] .ve-user-trigger__avatar { display: none !important; }
.ve-user-popover[data-ve-auth="authenticated"] .ve-user-trigger__icon { display: none !important; }

.ve-user-popover[data-ve-auth="guest"] .ve-popover-panel__auth { display: none !important; }
.ve-user-popover[data-ve-auth="authenticated"] .ve-popover-panel__guest { display: none !important; }

/* Panel contenedor */
.ve-user-popover .ve-popover-panel {
    position: absolute;
    z-index: 9999;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    font-family: "Poppins", sans-serif !important;
    /* animación de entrada */
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    padding: 16px;
}


.ve-user-popover.ve-user-popover--authenticated div.ve-popover-panel {
    padding: 8px;
    min-width: 230px;
}

/* Panel visible = quitar hidden */
.ve-user-popover .ve-popover-panel:not([hidden]) {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Placement overrides */
.ve-user-popover[data-placement="bottom-start"] .ve-popover-panel { right: auto; left: 0; }
.ve-user-popover[data-placement="bottom"] .ve-popover-panel {
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-6px) scale(0.98);
}
.ve-user-popover[data-placement="bottom"] .ve-popover-panel:not([hidden]) {
    transform: translateX(-50%) translateY(0) scale(1);
}
.ve-user-popover[data-placement^="top"] .ve-popover-panel { top: auto; bottom: calc(100% + 8px); }
.ve-user-popover[data-placement="top-end"] .ve-popover-panel { right: 0; left: auto; }
.ve-user-popover[data-placement="top-start"] .ve-popover-panel { right: auto; left: 0; }
.ve-user-popover[data-placement="top"] .ve-popover-panel {
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(6px) scale(0.98);
}
.ve-user-popover[data-placement="top"] .ve-popover-panel:not([hidden]) {
    transform: translateX(-50%) translateY(0) scale(1);
}

/* Inner */
.ve-user-popover.ve-user-popover--guest .ve-popover-panel__inner {
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    min-width: 320px;
}
.ve-popover-panel__auth hr.ve-popover-panel__divider{
    display: none;
}

/* Panel guest */
.ve-popover-panel__title {
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--e-global-color-text, #545454) !important;
    margin: 0 0 4px !important;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 10px !important;
}

.ve-popover-oauth-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Asegurar que los botones OAuth en el popover tengan el estilo correcto */
.ve-user-popover .ve-auth-oauth-btn {
    width: auto;
    justify-content: center;
    font-size: 14px !important;
}

.ve-popover-panel__email-link {
    display: block;
    text-align: center;
    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--e-global-color-text, #545454) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--e-global-color-text, #545454);
    cursor: pointer;
    transition: color 0.15s;
    padding: 10px 0px;
    letter-spacing: 0px;
}
.ve-popover-panel__email-link:hover {
    color: var(--e-global-color-text, #545454) !important;
    text-decoration-color: var(--e-global-color-text, #545454);
}

.ve-popover-panel__register-text {
    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
    color: var(--e-global-color-text, #545454) !important;
    text-align: center;
    margin: 0;
}
.ve-popover-panel__register-link {
    color: var(--e-global-color-primary, #ff0000) !important;
    font-weight: 400 !important;
    text-decoration: none;
    font-family: "Poppins", sans-serif !important;
    text-decoration: underline !important;
    font-size: 12px;
}
.ve-popover-panel__register-link:hover {
    text-decoration: underline;
}

.ve-popover-panel__divider {
    border: none;
    border-top: 1px solid #f3f4f6;
    margin: 12px 0 !important;
    /* display: none; */
}

.ve-popover-panel__advisor-link {
    display: block;
    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
    color: var(--e-global-color-text, #545454) !important;
    text-align: center;
    text-decoration: none;
    transition: color 0.15s;
}
.ve-popover-panel__advisor-link:hover {
    color: var(--e-global-color-text, #545454) !important;
}

/* Panel autenticado */
.ve-popover-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 4px;
    padding: 8px;
}

.ve-popover-user-name {
    display: block;
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--e-global-color-text, #545454) !important;
    line-height: 1.3;
    text-align: left;
}

.ve-popover-user-email {
    display: block;
    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    color: var(--e-global-color-text, #545454) !important;
    line-height: 1.3;
    text-align: left;
}

.ve-popover-user-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

.ve-popover-user-menu__item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--e-global-color-text, #545454) !important;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
    border: none !important;
    background: transparent !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}
.ve-popover-user-menu__item:hover,
.ve-popover-user-menu__item:focus {
    background: #f3f4f6 !important;
    color: var(--e-global-color-text, #545454) !important;
    outline: none;
}

.ve-popover-user-menu__item--btn {
    color: var(--e-global-color-primary, #ff0000) !important;
}
.ve-popover-user-menu__item--btn:hover {
    background: var(--e-global-color-primary) !important;
    color: white !important;
}

/* =========================================================================
   FORMULARIO DE REGISTRO DE ASESOR (multi-paso)
   Identico a AsesorRegisterForm.jsx de flujo-viajes-exito
   ========================================================================= */

/* Caja de advertencia — paso 3 (email ya existe) */
.ve-auth-warning-box {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.ve-auth-warning-title {
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 4px;
}

.ve-auth-warning-message {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    color: #92400e;
    margin: 0;
    line-height: 1.5;
}

/* Mensaje de estado durante carga */
.ve-auth-loading-msg {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    color: #a9a9a9;
    text-align: center;
    margin: 4px 0;
}

/* Botón de volver (estilo enlace) */
.ve-auth-link-btn {
    display: block;
    width: 100%;
    padding: 8px;
    background: none !important;
    border: none !important;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: var(--e-global-color-text, #545454) !important;
    text-align: center;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.15s;
}

.ve-auth-link-btn:hover {
    color: #333 !important;
}

/* =========================================================================
   PORTAL DE ASESORES — contenedor con tabs pill
   ========================================================================= */

.ve-auth-asesor-portal {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.ve-auth-asesor-portal,
.ve-auth-asesor-portal * {
    font-family: "Poppins", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

.ve-auth-portal-title {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: var(--e-global-color-text, #545454);
    line-height: 1.3;
}

/* Pill tab wrapper */
.ve-auth-portal-tabs {
    display: flex;
    background: #f4f4f5;
    border-radius: 9999px;
    padding: 4px;
    gap: 4px;
    border-radius: 12px !important;
}

.ve-auth-portal-tab {
    flex: 1;
    padding: 9px 16px;
    border: none;
    border-radius: 9999px;
    font-family: inherit !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: #71717a;
    transition: background 0.2s, color 0.15s;
    line-height: 1;
    border-radius: 12px !important;
}

.ve-auth-portal-tab--active {
    background: var(--e-global-color-primary, #ff0000);
    color: #fff !important;
}

.ve-auth-portal-tab:not(.ve-auth-portal-tab--active):hover {
    background: #e4e4e7;
}

.ve-auth-portal-panel {
    width: 100%;
}

/* Dentro del portal: suprimir titulos de sub-formularios y enlace redundante "¿Eres asesor?" */
.ve-auth-asesor-portal .ve-auth-login-form .ve-auth-form-title,
.ve-auth-asesor-portal .ve-auth-asesor-register-form .ve-auth-form-title {
    display: none;
}

.ve-auth-asesor-portal p:has(.ve-auth-asesor-link) {
    display: none;
}

/* Titulo reducido dentro del modal de recuperar contraseña */
.ve-auth-form-title--modal {
    font-size: 18px;
}

/* =========================================================================
   DASHBOARD
   ========================================================================= */

.ve-auth-dashboard {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px;
}

.ve-auth-dashboard .ve-auth-user-info {
    margin-top: 16px;
}

.ve-auth-user-provider {
    margin-top: 8px;
}

.ve-auth-provider-label {
    font-size: 12px;
    color: #a9a9a9;
}

.ve-auth-netsuite-status {
    margin-top: 4px;
    font-size: 12px;
}

.ve-auth-netsuite-status--ok {
    color: #16a34a;
}

.ve-auth-netsuite-status--missing {
    color: #dc3232;
}

.ve-auth-logout-wrap {
    margin-top: 16px;
}



/* =========================================================================
   VE NetSuite Status Widget
   ========================================================================= */

.ve-netsuite-status {
    font-family: 'Poppins', sans-serif;
}

/* Card de estado */
.ve-netsuite-card {
    width: 100%;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 8px;
    transition: background 0.15s;
    flex-direction: column;
}

.ve-netsuite-card--ok {
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.25);
}

.ve-netsuite-card--error {
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
}

/* Lado izquierdo */
.ve-netsuite-card__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Punto indicador */
.ve-netsuite-dot-wrap {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ve-netsuite-dot-ping {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #dc2626;
    opacity: 0.35;
    animation: ve-netsuite-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ve-netsuite-ping {
    75%, 100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.ve-netsuite-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ve-netsuite-dot--ok    { background: #16a34a; }
.ve-netsuite-dot--error { background: #dc2626; }

/* Textos */
.ve-netsuite-card__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ve-netsuite-card__title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.ve-netsuite-card__title--ok    { color: #15803d; }
.ve-netsuite-card__title--error { color: #dc2626; }

.ve-netsuite-card__sub {
    font-size: 10px;
    color: rgba(84, 84, 84, 0.5);
    line-height: 1.2;
}

/* Boton accion */
.ve-netsuite-action-btn {
    flex-shrink: 0;
    height: 28px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    border: none;
    font-family: 'Poppins', sans-serif;
    transition: opacity 0.15s;
}

.ve-netsuite-action-btn:hover {
    opacity: 0.85;
}

.ve-netsuite-action-btn--error {
    background: #dc2626;
    color: #fff;
}

/* Modal overlay */
.ve-netsuite-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ve-netsuite-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.ve-netsuite-modal__content {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.ve-netsuite-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    padding: 4px;
    border-radius: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ve-netsuite-modal__close:hover {
    color: #111827;
    background: #f3f4f6;
}

/* Success message */
.ve-auth-success {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 12px;
}

/* =========================================================================
   VE NetSuite Required Gate (bloqueo inline en dashboard)
   ========================================================================= */

.ve-netsuite-gate {
    max-width: 420px;
    margin: 0px auto;
    padding: 40px 32px;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 16px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.ve-netsuite-gate__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fee2e2;
    color: #dc2626;
    margin-bottom: 20px;
}

.ve-netsuite-gate__title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px;
}

.ve-netsuite-gate__desc {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px;
    line-height: 1.5;
}

.ve-netsuite-gate__form {
    text-align: left;
    display: flex;
    gap: 10px;
    flex-direction: column;
}

/* =========================================================================
   SESSION EXPIRED NOTICE
   Notificacion flotante cuando la sesion del usuario expira.
   ========================================================================= */

.ve-auth-notice {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999;
    max-width: 400px;
    padding: 16px 20px;
    border-radius: 12px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.ve-auth-notice--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ve-auth-notice--warning {
    background: #fffbeb;
    border: 1px solid #f59e0b;
    color: #92400e;
}

.ve-auth-notice__content {
    flex: 1;
}

.ve-auth-notice__content strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    color: #78350f;
}

.ve-auth-notice__content p {
    margin: 0;
    font-size: 13px;
    color: #92400e;
}

.ve-auth-notice__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #b45309;
    padding: 0;
    flex-shrink: 0;
}

.ve-auth-notice__close:hover {
    color: #78350f;
}