body {
}

/* ============================================================
   OTP Pages — Solicitar correo y Verificar código
   ============================================================ */

.otp-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-fondo);
    padding: 20px;
}

.otp-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    padding: 48px 40px;
    max-width: 440px;
    width: 100%;
    text-align: center;
}

/* Logo en card OTP */
.otp-logo {
    max-height: 80px;
    max-width: 200px;
    object-fit: contain;
    margin-bottom: 24px;
}

/* Logo combinado (lockup horizontal) en la card de éxito */
.otp-card-exito .otp-logo {
    max-width: 280px;
}

/* Card de éxito: el fondo celeste (otp-card-wave) cubre desde debajo del
   logo hasta el fondo de la card; el contenido va montado encima (z-index). */
.otp-card-exito {
    position: relative;
    overflow: hidden;
    padding-bottom: 64px;
    max-width: 380px;
}

.otp-card-wave {
    position: absolute;
    left: 0;
    right: 0;
    top: 120px;
    bottom: 0;
    background-image: url('/img/decoracion/curvas-exito.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 0;
}

.otp-card-exito .otp-logo,
.otp-card-exito .icono-exito,
.otp-card-exito .otp-titulo,
.otp-card-exito .otp-subtitulo {
    position: relative;
    z-index: 1;
}

/* Título en la card de éxito */
.otp-titulo.otp-titulo--exito {
    color: var(--color-primario);
}

/* ============================================================
   Card "Ya te registraste" — pantalla de reenvío de confirmación
   ============================================================ */
.otp-card-yareg {
    position: relative;
    overflow: hidden;
    padding-top: 28px;
    padding-bottom: 0;
    max-width: 380px;
}

.otp-card-arc-top {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 0;
    display: block;
}

.otp-card-yareg .otp-logo,
.otp-card-yareg .yareg-titulo,
.otp-card-yareg .otp-subtitulo {
    position: relative;
    z-index: 1;
}

.otp-card-yareg .otp-logo {
    max-width: 300px;
    max-height: 120px;
}

.otp-titulo.yareg-titulo {
    font-size: 46px;
    line-height: 1.15;
}

.otp-subtitulo.yareg-subtitulo {
    font-size: 18px;
}

.yareg-panel {
    background: #f2f2f2;
    margin: 32px -40px 0;
    padding: 28px 40px 36px;
    text-align: center;
}

.yareg-panel-texto {
    color: var(--color-texto);
    font-size: 12px;
    line-height: 1.6;
    margin: 0 0 20px;
}

.yareg-btn {
    display: block;
    width: 100%;
    background: var(--color-primario);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--fuente-principal);
    cursor: pointer;
    transition: all 0.2s ease;
}

.yareg-btn:hover:not(:disabled) {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

.yareg-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.yareg-feedback {
    margin: 14px 0 0;
    font-size: 13px;
    min-height: 16px;
    color: var(--color-texto-secundario);
}

.yareg-feedback-ok {
    color: var(--color-exito);
}

.yareg-feedback-error {
    color: var(--color-error);
}

/* Icono circular */
.otp-icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 32px;
    color: white;
}

.otp-icon-codigo {
    background: linear-gradient(135deg, var(--color-verde) 0%, #116b36 100%);
}

/* Títulos */
.otp-titulo {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-texto);
    margin-bottom: 8px;
    font-family: var(--fuente-principal);
}

.otp-subtitulo {
    font-size: 12px;
    color: var(--color-texto-secundario);
    margin-bottom: 32px;
    line-height: 1.5;
}

/* Input email */
.otp-campo-grupo {
    text-align: left;
    margin-bottom: 24px;
}

.otp-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.otp-input-wrapper {
    position: relative;
}

.otp-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gris);
    font-size: 18px;
    pointer-events: none;
}

.otp-input-email {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border: 2px solid var(--color-borde);
    border-radius: 12px;
    font-size: 16px;
    font-family: var(--fuente-principal);
    transition: all 0.2s ease;
    background: #fafbfc;
}

.otp-input-email:focus {
    outline: none;
    border-color: var(--color-primario);
    background: white;
    box-shadow: 0 0 0 4px rgba(var(--color-primario-rgb), 0.1);
}

.otp-input-texto {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--color-borde);
    border-radius: 12px;
    font-size: 16px;
    font-family: var(--fuente-principal);
    transition: all 0.2s ease;
    background: #fafbfc;
}

.otp-input-texto:focus {
    outline: none;
    border-color: var(--color-primario);
    background: white;
    box-shadow: 0 0 0 4px rgba(var(--color-primario-rgb), 0.1);
}

/* ============================================================
   Inputs OTP (6 dígitos)
   ============================================================ */
.otp-digits-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
}

.otp-digit {
    width: 52px;
    height: 62px;
    border: 2px solid var(--color-borde);
    border-radius: 12px;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    color: var(--color-texto);
    background: #fafbfc;
    transition: all 0.15s ease;
    caret-color: var(--color-primario);
}

.otp-digit:focus {
    outline: none;
    border-color: var(--color-primario);
    background: white;
    box-shadow: 0 0 0 4px rgba(var(--color-primario-rgb), 0.12);
    transform: scale(1.05);
}

.otp-digit.filled {
    border-color: var(--color-primario);
    background: #eff6ff;
}

.otp-digit.error {
    border-color: var(--color-error);
    background: #fef2f2;
    animation: otp-shake 0.4s ease;
}

.otp-digit-separator {
    font-size: 24px;
    font-weight: 300;
    color: #cbd5e1;
    margin: 0 4px;
    user-select: none;
}

@keyframes otp-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Botón principal */
.otp-btn-primary {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--fuente-principal);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.otp-btn-primary:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--color-primario-rgb), 0.3);
}

.otp-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Acciones secundarias */
.otp-acciones-secundarias {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.otp-link {
    font-size: 14px;
    color: var(--color-primario);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.otp-link:hover {
    color: var(--color-primario-oscuro);
    text-decoration: underline;
}

.otp-link-sep {
    color: #cbd5e1;
    font-size: 14px;
}

/* Footer */
.otp-footer-text {
    margin-top: 32px;
    font-size: 13px;
    color: var(--color-gris);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Responsive */
@media (max-width: 480px) {
    .otp-card {
        padding: 32px 24px;
        border-radius: 12px;
    }

    .otp-digit {
        width: 44px;
        height: 54px;
        font-size: 22px;
        border-radius: 10px;
    }

    .otp-digits-container {
        gap: 6px;
    }

    .otp-icon-circle {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }

    /* El panel de "Ya te registraste" debe seguir llegando hasta el borde
       inferior de la card; la regla .otp-card de arriba no debe pisar esto. */
    .otp-card-yareg {
        padding-bottom: 0;
    }
}

/* ============================================================
   Pantalla de acceso — rediseño (Previa.cshtml)

   Todo va acotado a .otp-card-acceso a propósito. Las clases .otp-titulo,
   .otp-subtitulo, .otp-label y .otp-btn-primary las comparten «Éxito», «Ya te
   registraste» y la verificación por código, que conservan su diseño y no entran
   en este cambio: tocarlas sueltas les cambiaría el aspecto sin querer.

   La escala de letra sale de medir el mock contra el ancho de su tarjeta: el
   cuerpo está 1,28 veces por encima de lo que había y el título 1,55. El diseño
   no escala todo por igual —el título manda— y esa jerarquía es justo lo que
   hacía ver la pantalla plana cuando se dejaron los tamaños de antes.

   El ancho y el radio de la tarjeta no cambian.
   ============================================================ */

/* El título toma el color del formulario (--color-primario lo pisa la vista).
   34px y no los 37 que da la medición: a 37 «Turismo In Summit 2026» empieza a
   rozar los bordes de la tarjeta de 440px. */
.otp-card-acceso .otp-titulo {
    color: var(--color-primario);
    font-size: 34px;
    line-height: 1.15;
    margin-bottom: 16px;
}

/* El subtítulo es el parrafo de entrada, no letra pequena: medido contra el mock
   sale en 21px, casi el doble de los 12px que tenia. Es el segundo elemento en
   peso despues del titulo. */
.otp-card-acceso .otp-subtitulo {
    font-size: 21px;
    line-height: 1.45;
    margin-bottom: 28px;
}

.otp-card-acceso .otp-subtitulo strong {
    display: block;
    color: var(--color-texto);
}

.otp-card-acceso .otp-label {
    font-size: 18px;
}

.otp-card-acceso .otp-input-email,
.otp-card-acceso .otp-input-texto {
    font-size: 17px;
}

.otp-card-acceso .otp-footer-text {
    font-size: 14px;
}

/* Botón en píldora y de color plano. El degradado anterior mezclaba el color del
   formulario con el azul oscuro fijo, así que con un color propio se ensuciaba. */
.otp-card-acceso .otp-btn-primary {
    background: var(--color-primario);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 17px;
}

.otp-card-acceso .otp-btn-primary:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* ---- Estado «enlace enviado» ---- */

/* No lleva formulario: solo el mensaje y el botón que devuelve a pedirlo de nuevo.
   Por eso el botón es un <a> y no un <button>: navega, no envía nada.

   En el mock este titular mide casi lo mismo que el título (0,97), pero allí los
   separa un ícono que aquí no va. Se deja algo por debajo para que el título del
   formulario siga mandando y los dos bloques no compitan. */
.otp-enviado-titular {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-texto);
    line-height: 1.2;
    margin: 0 0 20px;
}

.otp-enviado-texto {
    font-size: 17px;
    color: var(--color-texto-secundario);
    line-height: 1.6;
    margin: 0 0 20px;
}

.otp-enviado-texto strong {
    display: block;
    color: var(--color-texto);
}

.otp-enviado-texto:last-of-type {
    margin-bottom: 32px;
}

/* Mismo aspecto que el botón, pero es un enlace. */
.otp-card-acceso a.otp-btn-primary {
    text-decoration: none;
    box-sizing: border-box;
}