/* pin-pad.css — el teclado de PIN (pin-pad.js). Compartido por login, «Mi perfil» y «Bienvenida».
   Aspecto del teclado de código de iOS: teclas redondas GRANDES, dígitos grandes (≈ la mitad del diámetro de la tecla) y separación
   proporcional. El tamaño de la tecla es UNA variable (--pp-tecla): todo lo demás (dígito, hueco, icono de borrar, puntos) sale de ella.
   Pantallas completas (login, bienvenida): la tecla se calcula con el alto disponible (ver --pp-reserva) para que el teclado entre
   completo sin scroll. «Mi perfil» es una página normal que scrollea: tamaño fijo.
   Pensado para el iPad viejo de la caja: sin backdrop-filter, sin sombras difusas grandes, transiciones solo de transform/opacity. */

.pp {
    --pp-alto: 100vh;
    --pp-reserva: 400px;                 /* alto que ocupa TODO lo demás de la pantalla (cabecera, puntos, mensaje, enlaces…) */
    --pp-tecla: 76px;
    --pp-hueco: calc(var(--pp-tecla) * 0.19);
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

@supports (height: 100dvh) {
    .pp { --pp-alto: 100dvh; }
}

/* Pantallas completas: tecla = (alto − reserva) / (4 filas + 3 huecos de 0,19) ≈ 4,57, entre 56 y 84 px; y nunca más ancha
   de lo que cabe (3 teclas + 2 huecos = 3,38 teclas) en un teléfono angosto. */
.ingreso-card .pp,
.bv-card .pp {
    --pp-tecla: clamp(56px, calc((var(--pp-alto) - var(--pp-reserva)) / 4.57), min(84px, calc((100vw - 110px) / 3.38)));
}

/* Los valores salen de MEDIR la pantalla real (alto de todo lo que no es el teclado + el relleno de la pantalla). */
.ingreso-card .pp { --pp-reserva: 368px; }
.bv-card .pp { --pp-reserva: 545px; }

@media (max-width: 699px) {
    .bv-card .pp { --pp-reserva: 445px; }
}

/* Teléfono bajo (iPhone con las barras de Safari): cabecera más chica. */
@media (max-width: 699px) and (max-height: 700px) {
    .ingreso-card .pp { --pp-reserva: 345px; }
    .bv-card .pp { --pp-reserva: 375px; }
}

/* Login en iPad horizontal / pantalla ancha y baja: la tarjeta va en dos columnas (ver login-perfiles.css), la cabecera no ocupa alto. */
@media (min-width: 700px) and (max-height: 860px) {
    .ingreso-card .pp { --pp-reserva: 250px; }
    .bv-card .pp { --pp-reserva: 355px; }
}

/* Teléfono muy bajo (iPhone SE con las barras de Safari): en el login se oculta la imagen para que el teclado entre sin scroll. */
@media (max-width: 699px) and (max-height: 600px) {
    .ingreso-card .pp { --pp-reserva: 285px; }
}

/* Los 4 puntos del PIN */
.pp-puntos {
    display: flex;
    justify-content: center;
    gap: 22px;
    padding: 0.4rem 0 0.2rem;
}

.pp-puntos i {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2px solid rgba(60, 60, 67, 0.34);
    background: transparent;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.pp-puntos i.on {
    background: var(--accent, #007aff);
    border-color: var(--accent, #007aff);
    transform: scale(1.08);
}

.pp-con-error .pp-puntos {
    animation: ppSacudir 380ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.pp-con-error .pp-puntos i {
    border-color: var(--danger, #ff3b30);
}

@keyframes ppSacudir {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60% { transform: translateX(7px); }
}

.pp-mensaje {
    min-height: 2.5em;               /* reserva 2 líneas: el teclado no salta al aparecer un aviso */
    margin: 0.5rem 0 0.7rem;
    text-align: center;
    font-size: 0.86rem;
    line-height: 1.25;
    color: var(--t3, #6e6e73);
}

.pp-mensaje.pp-error {
    color: var(--danger, #d70015);
    font-weight: 500;
}

/* Teclas */
.pp-teclas {
    display: grid;
    grid-template-columns: repeat(3, var(--pp-tecla));
    gap: var(--pp-hueco);
    justify-content: center;
}

.pp-tecla {
    width: var(--pp-tecla);
    height: var(--pp-tecla);
    border: 0;
    border-radius: 50%;
    background: #ececf1;
    color: var(--t1, #1d1d1f);
    font-family: var(--display, inherit);
    font-size: calc(var(--pp-tecla) * 0.5);
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: lining-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 70ms ease, background-color 70ms ease;
}

.pp-tecla:active {
    transform: scale(0.94);
    background: #d3d5de;
}

.pp-borrar {
    background: transparent;
    color: var(--t3, #6e6e73);
}

.pp-borrar svg {
    width: calc(var(--pp-tecla) * 0.4);
    height: calc(var(--pp-tecla) * 0.4);
}

.pp-borrar:active {
    background: #eceef4;
}

.pp-vacio {
    width: var(--pp-tecla);
    height: var(--pp-tecla);
}

.pp-tecla:focus-visible {
    outline: 3px solid rgba(10, 132, 255, 0.45);
    outline-offset: 2px;
}

/* Mientras viaja la petición o hay bloqueo: se ve apagado y no responde */
.pp-ocupado .pp-teclas,
.pp-bloqueado .pp-teclas {
    opacity: 0.45;
    pointer-events: none;
}

.pp-ocupado .pp-puntos i.on {
    animation: ppLatido 700ms ease-in-out infinite alternate;
}

@keyframes ppLatido {
    from { opacity: 1; }
    to { opacity: 0.45; }
}

/* Teléfono angosto (iPhone SE / mini): la tecla no pasa de lo que cabe a lo ancho. */
@media (max-width: 380px) {
    .pp { --pp-tecla: 68px; }
    .pp-puntos { gap: 20px; }
}

/* Pantallas bajas (la mitad del alto la usan las barras del navegador): menos aire entre puntos y teclas. */
@media (max-height: 700px) {
    .pp-mensaje { margin: 0.3rem 0 0.45rem; }
    .pp-puntos { padding-top: 0.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-con-error .pp-puntos,
    .pp-ocupado .pp-puntos i.on {
        animation: none;
    }

    .pp-tecla,
    .pp-puntos i {
        transition: none;
    }
}