/* Teclado numérico reutilizable. Estilos propios (ui-*) porque Tailwind no cubre el press táctil
   ni la animación de error. Modo claro y oscuro. */

.ui-keypad-key {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    border-radius: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: transform 0.08s ease, background-color 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.ui-keypad-key:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

.ui-keypad-key:active {
    transform: scale(0.94);
    background-color: #f3f4f6;
}

.ui-keypad-key-action {
    color: #6b7280;
    font-size: 1.25rem;
}

/* Dark mode */
:root.dark .ui-keypad-key {
    color: #ffffff;
    background-color: #242428;
    border-color: #374151;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

:root.dark .ui-keypad-key:hover {
    background-color: #2c2c31;
    border-color: #4b5563;
}

:root.dark .ui-keypad-key:active {
    background-color: #1f1f23;
}

:root.dark .ui-keypad-key-action {
    color: #9ca3af;
}

/* Punto de la clave: vacío (contorno) y lleno (acento) */
.ui-keypad-dot {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 9999px;
    border: 2px solid #d1d5db;
    background-color: transparent;
    transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.ui-keypad-dot.is-filled {
    background-color: #ff4500;
    border-color: #ff4500;
    transform: scale(1.12);
}

:root.dark .ui-keypad-dot {
    border-color: #4b5563;
}

:root.dark .ui-keypad-dot.is-filled {
    background-color: #ff4500;
    border-color: #ff4500;
}

/* Sacudida ante clave incorrecta */
.js-numeric-keypad-dots.is-error {
    animation: ui-keypad-shake 0.4s ease;
}

@keyframes ui-keypad-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}