/* Input de código OTP segmentado. Estilos propios (ui-*) porque Tailwind no cubre el estado
   lleno con acento ni la animación de error. Modo claro y oscuro. */

.ui-otp-cell {
    width: 3rem;
    height: 3.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: #111827;
    background-color: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 0.85rem;
    caret-color: #ff4500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

/* En pantallas muy angostas las 6 celdas caben más chicas */
@media (max-width: 360px) {
    .ui-otp-cell {
        width: 2.5rem;
        height: 3.1rem;
        font-size: 1.25rem;
    }
}

.ui-otp-cell:focus {
    outline: none;
    border-color: #ff4500;
    box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.18);
}

.ui-otp-cell.is-filled {
    border-color: #ff4500;
    background-color: rgba(255, 69, 0, 0.04);
}

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

:root.dark .ui-otp-cell:focus {
    border-color: #ff4500;
    box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.28);
}

:root.dark .ui-otp-cell.is-filled {
    border-color: #ff4500;
    background-color: rgba(255, 69, 0, 0.12);
}

/* Sacudida ante código incorrecto */
.js-otp-input.is-error {
    animation: ui-otp-shake 0.4s ease;
}

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