/* IOplat. Ventana de verificación del registro (correo y celular), marcado de
   inc/registro_verificacion.php. La enlaza registro.php con $pageStylesHref,
   después de css/style.css. Centrada en la computadora; en el celular, hoja
   que sube desde abajo. Prefijo verif-. */

/* Página de detrás: no se desplaza mientras la ventana está abierta. Safari en
   iOS no siempre respeta este overflow con el dedo; para eso el script bloquea
   el arrastre fuera de la ventana. */
html.verif-abierta{overflow:hidden;scrollbar-gutter:stable}

/* La capa ocupa la parte visible de la pantalla: --verif-vv-arriba y
   --verif-vv-alto las pone el script con visualViewport, así el teclado del
   celular no tapa el código. Cerrada queda en visibility:hidden y no en
   display:none, porque el widget de Turnstile que va dentro se resuelve al
   cargar la página y necesita tener tamaño. */
.verif-capa{position:fixed;left:0;right:0;top:var(--verif-vv-arriba,0px);height:var(--verif-vv-alto,100%);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:1rem;visibility:hidden;transition:visibility 0s linear .25s}
.verif-capa[data-abierta]{visibility:visible;transition:none}
.verif-fondo{position:absolute;inset:0;background:rgba(17,24,39,.55);opacity:0;transition:opacity .2s ease;touch-action:none}
.verif-capa[data-abierta] .verif-fondo{opacity:1}
.verif{position:relative;box-sizing:border-box;width:min(440px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:2.25rem 2rem 2rem;border-radius:var(--radius-xl);background:var(--color-white);box-shadow:0 24px 64px rgba(0,0,0,.28);text-align:center;opacity:0;transform:translateY(12px) scale(.98);transition:opacity .2s ease,transform .22s ease-out}
.verif-capa[data-abierta] .verif{opacity:1;transform:none}
.verif-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.verif-cerrar{position:absolute;top:.75rem;right:.75rem;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:var(--radius-full);background:none;color:var(--color-gray-500);cursor:pointer}
.verif-cerrar:hover{color:var(--color-secondary);background:var(--color-gray-50)}
.verif-cerrar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.verif[data-paso="listo"] .verif-cerrar{visibility:hidden}

.verif-pasitos{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:0 0 1.75rem;padding:0;list-style:none;font-size:.8rem;font-weight:600;color:var(--color-gray-400)}
.verif-pasito{display:flex;align-items:center;gap:.45rem}
.verif-pasito + .verif-pasito::before{content:"";width:2.25rem;height:2px;margin-right:.1rem;border-radius:2px;background:var(--color-gray-200);transition:background var(--transition-base)}
.verif-pasito__num{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:var(--radius-full);border:2px solid var(--color-gray-200);font-size:.75rem;color:var(--color-gray-400);transition:all var(--transition-base)}
.verif-pasito[data-estado="activo"]{color:var(--color-secondary)}
.verif-pasito[data-estado="activo"] .verif-pasito__num{border-color:var(--color-primary);color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-ghost)}
.verif-pasito[data-estado="hecho"]{color:var(--color-primary-dark)}
.verif-pasito[data-estado="hecho"] .verif-pasito__num{border-color:var(--color-primary);background:var(--color-primary);color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:62%;background-repeat:no-repeat;background-position:center}
.verif-pasito[data-estado="hecho"] + .verif-pasito::before,.verif-pasito[data-estado="activo"] + .verif-pasito::before{background:var(--color-primary-light)}

/* .verif delante: style.css da padding a todo <section> y los pasos lo son. */
.verif .verif-paso{display:none;padding:0}
.verif[data-paso="correo"] #verif-paso-correo,.verif[data-paso="telefono"] #verif-paso-tel,.verif[data-paso="listo"] #verif-paso-listo{display:block;animation:verif-entra .28s ease-out}
@keyframes verif-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.verif-titulo{margin:0 0 .5rem;font-size:1.35rem;line-height:1.25;color:var(--color-secondary);outline:none}
.verif .verif-texto{margin:0 0 1.25rem;font-size:.92rem;line-height:1.6;color:var(--color-gray-600);overflow-wrap:anywhere}
.verif-texto strong{color:var(--color-secondary);font-weight:700}
.verif-tel-destino{white-space:nowrap}
.verif-link{display:inline;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.verif-link:hover{color:var(--color-primary-dark)}
.verif-link:disabled{color:var(--color-gray-400);text-decoration:none;cursor:default}
.verif-link:focus-visible,.verif-cerrar:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-primary-ghost);border-radius:var(--radius-sm)}
.verif-cerrar:focus-visible{border-radius:var(--radius-full)}
#verif-paso-tel[data-envio="no"] .verif-despues,#verif-paso-tel[data-envio="si"] .verif-antes{display:none}
.verif-enviar{width:100%;padding:1rem;font-size:1rem;font-weight:700}
.verif-llamada{display:block;margin:1rem auto 0;font-size:.9rem}

/* Código: un solo campo de verdad (autocompletar del SMS, pegar, lectores de
   pantalla) encima de seis casillas que solo lo dibujan. */
.verif-otp{position:relative;max-width:22rem;margin-inline:auto;scroll-margin:1.5rem}
.verif-otp__casillas{display:grid;grid-template-columns:repeat(3,minmax(0,3rem)) .25rem repeat(3,minmax(0,3rem));justify-content:center;gap:.4rem}
.verif-otp__casillas span{display:flex;align-items:center;justify-content:center;height:3.4rem;border:1.5px solid var(--color-gray-300);border-radius:var(--radius-lg);background:var(--color-white);font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-secondary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast)}
.verif-otp__casillas span:nth-child(4){grid-column:5}
.verif-otp__casillas span.is-llena{border-color:var(--color-gray-400)}
.verif-otp__casillas span.is-activa{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-ghost)}
.verif-otp__casillas span.is-activa:empty::after{content:"";width:2px;height:1.5rem;background:var(--color-primary);animation:verif-cursor 1s steps(2) infinite}
@keyframes verif-cursor{50%{opacity:0}}
.verif-otp__input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px;letter-spacing:2.6rem;outline:none;opacity:.01;cursor:text}
.verif-otp.is-error .verif-otp__casillas span{border-color:#dc3545;background:#fff7f7;animation:verif-sacude .32s ease-in-out}
.verif-otp.is-ok .verif-otp__casillas span{border-color:var(--color-primary);background:var(--color-primary-subtle);color:var(--color-primary-dark)}
.verif-paso[data-ocupado] .verif-otp__casillas{opacity:.55}
@keyframes verif-sacude{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.verif .verif-err{min-height:1.25rem;margin:.6rem 0 0;font-size:.82rem;font-weight:600;line-height:1.45;color:#721c24}
.verif .verif-err:empty{min-height:0;margin:0}
.verif .verif-reenvio{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1.1rem;margin:1rem 0 0;font-size:.88rem;color:var(--color-gray-500)}
.verif-cuenta{font-variant-numeric:tabular-nums}
.verif-cuenta:empty{display:none}
/* El código parece no llegar: qué hacer, debajo de los reenvíos. */
.verif .verif-ayuda{margin:1.1rem 0 0;padding:.85rem 1rem;border-radius:var(--radius-lg);background:var(--color-gray-50);font-size:.88rem;line-height:1.5;color:var(--color-gray-600);text-align:center}
.verif .verif-ayuda[hidden],.verif-ayuda__texto[hidden],.verif-ayuda .btn[hidden]{display:none}
.verif .verif-ayuda__texto{margin:0}
.verif-ayuda .verif-enviar{margin-top:.75rem}
.verif .verif-ayuda[data-modo="ofrecer"]{padding:0;background:none}
.verif-ayuda__texto[hidden] + .verif-enviar{margin-top:0}
#verif-paso-tel[data-sin-sms] #verif-tel-enviar,#verif-paso-tel[data-sin-sms] .verif-llamada,#verif-paso-tel[data-sin-sms] [data-verif-reenviar="sms"]{display:none}
/* El texto de antes de enviar dice por dónde llega el código. */
.verif-via-llamada,#verif-paso-tel[data-sin-sms] .verif-via-sms{display:none}
#verif-paso-tel[data-sin-sms] .verif-via-llamada{display:inline}
.verif-listo{padding:1rem 0 .5rem}
.verif-listo__icono{display:inline-flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;margin-bottom:1rem;border-radius:var(--radius-full);background:var(--color-primary-subtle);animation:verif-pop .4s cubic-bezier(.34,1.56,.64,1)}
.verif-listo__icono svg{width:1.8rem;height:1.8rem;fill:none;stroke:var(--color-primary);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes verif-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.verif .verif-listo .verif-texto{margin:0}
.verif-wa{width:100%;margin-top:1.25rem;padding:1rem;font-size:1rem;font-weight:700;background:#25D366;color:#fff;border-color:#25D366}
.verif-wa[hidden]{display:none}
.btn[aria-busy="true"]{pointer-events:none;opacity:.75}
.btn[aria-busy="true"]::before{content:"";width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:verif-gira .7s linear infinite}
@keyframes verif-gira{to{transform:rotate(360deg)}}
.verif-turnstile{display:flex;justify-content:center}
.verif-turnstile:not(:empty){margin-top:1rem}

/* Celular: hoja pegada abajo, como mucho el 92 % de lo visible, con su propio
   desplazamiento y el margen de la barra de inicio del teléfono. */
@media (max-width:640px){
  .verif-capa{align-items:flex-end;padding:0}
  .verif{width:100%;max-height:calc(var(--verif-vv-alto,100dvh) * .92);padding:2.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;opacity:1;transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
  .verif-capa[data-abierta] .verif{transform:none}
}

@media (prefers-reduced-motion: reduce){
  .verif-capa,.verif-fondo,.verif{transition:none}
  .verif .verif-paso,.verif-listo__icono,.verif-otp.is-error .verif-otp__casillas span,.btn[aria-busy="true"]::before,.verif-otp__casillas span.is-activa:empty::after{animation:none !important}
}