/* ===========================================================================
   Trial funnel — páginas públicas standalone /trial/* (Layout=null).
   Cableado al UI kit: usa los tokens --lexa-* de theme.css (mismo morado
   primario del producto + magenta de conversión de la landing). Se carga solo
   en estas páginas, por eso los selectores de elemento (body, .form-control)
   no afectan al resto de la plataforma.
   =========================================================================== */

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    margin: 0;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--lexa-primary-50) 0%, var(--lexa-primary-100) 100%);
    padding: 1.5rem;
}

.trial-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(109, 40, 217, 0.12);
    width: 100%;
    max-width: 520px;
    padding: 2.25rem;
}

.trial-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--lexa-gray-900);
    margin-bottom: 1.25rem;
}

.trial-logo svg { display: block; }

.trial-title { font-size: 1.5rem; font-weight: 800; color: var(--lexa-gray-900); margin: 0 0 .25rem; }
.trial-sub { color: var(--lexa-gray-500); margin: 0 0 1.5rem; }

/* Íconos de estado (envelope/exclamation) — antes inline en cada vista. */
.trial-icon { font-size: 3rem; color: var(--lexa-primary); }
.trial-icon-danger { color: var(--lexa-danger); }

.form-label { font-weight: 600; font-size: .875rem; }

/* Touch targets ≥44px (móvil) sin depender de btn-lg en cada vista. */
.form-control, .form-select { min-height: 44px; }

.btn-trial {
    background: var(--lexa-accent-cta);
    border: none;
    color: #fff;
    font-weight: 600;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.btn-trial:hover, .btn-trial:focus { background: var(--lexa-accent-cta-hover); color: #fff; }
.btn-trial:focus-visible { outline: 3px solid var(--lexa-accent-soft); outline-offset: 2px; }
.btn-trial:disabled { opacity: .65; }

/* Link de reenvío en cooldown: no clickeable hasta que termine el contador. */
.trial-resend-disabled { pointer-events: none; opacity: .5; text-decoration: none; cursor: default; }

/* Multi-select de especialidad como píldoras toggleables (checkbox oculto detrás). */
.trial-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.trial-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .45rem .85rem;
    margin: 0;
    border: 1px solid var(--lexa-gray-300);
    border-radius: 999px;
    background: #fff;
    color: var(--lexa-gray-700);
    font-size: .9rem;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
.trial-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.trial-pill:hover { border-color: var(--lexa-primary); }
.trial-pill.is-selected {
    background: var(--lexa-primary);
    border-color: var(--lexa-primary);
    color: #fff;
}
.trial-pill:focus-within { outline: 3px solid var(--lexa-accent-soft); outline-offset: 2px; }

/* Lexi coach — tira con mascota + globo de mensaje motivador rotativo sobre el form. */
.trial-coach {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: .7rem .85rem;
    background: var(--lexa-primary-50);
    border: 1px solid var(--lexa-primary-100);
    border-radius: 14px;
}

.trial-coach-avatar { flex: 0 0 auto; }
.trial-lexi { display: block; width: 64px; height: 64px; overflow: visible; }

.trial-coach-bubble { flex: 1 1 auto; min-width: 0; }
.trial-coach-name {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--lexa-primary);
}
/* Los mensajes rotativos comparten una sola celda de grid: el contenedor toma el alto
   del mensaje más largo, el alto del coach queda fijo y el formulario no salta al
   cambiar de mensaje (evita layout shift / CLS). */
.trial-coach-msgs { display: grid; }
.trial-coach-msg {
    grid-area: 1 / 1;
    margin-top: .1rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--lexa-gray-800);
    opacity: 0;
    transition: opacity .35s ease;
}
.trial-coach-msg.is-active { opacity: 1; }

/* Variante centrada de Lexi para páginas de estado del funnel (CheckEmail/Verify/reenvío enviado):
   Lexi más grande centrado + nota de ánimo en globo bajo el subtítulo. */
.trial-lexi-hero .trial-lexi { width: 96px; height: 96px; margin: 0 auto; }
.trial-lexi-note {
    display: inline-block;
    margin: .9rem auto 0;
    padding: .6rem .9rem;
    max-width: 360px;
    background: var(--lexa-primary-50);
    border: 1px solid var(--lexa-primary-100);
    border-radius: 12px;
    color: var(--lexa-gray-800);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.4;
}

/* Vida de Lexi: flotación suave, halo girando y núcleo latiendo (igual que el empty-state). */
.trial-lexi-float { animation: trial-lexi-float 6s ease-in-out infinite; transform-origin: center; }
.trial-lexi-halo { animation: trial-lexi-halo 18s linear infinite; transform-origin: 110px 99px; }
.trial-lexi-core { animation: trial-lexi-core 3.6s ease-in-out infinite; }

@keyframes trial-lexi-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes trial-lexi-halo { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes trial-lexi-core {
    0%, 100% { opacity: .78; transform: scale(.96); }
    50% { opacity: 1; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .trial-lexi-float, .trial-lexi-halo, .trial-lexi-core { animation: none; }
    .trial-coach-msg { transition: none; }
}

@media (max-width: 575.98px) {
    body { padding: 1rem; }
    .trial-card { padding: 1.5rem; border-radius: 14px; }
    .trial-coach { gap: .6rem; padding: .6rem .7rem; }
    .trial-lexi { width: 52px; height: 52px; }
    .trial-coach-msg { font-size: .9rem; }
    .trial-lexi-hero .trial-lexi { width: 80px; height: 80px; }
}