/*
 * UiMetadata.Elements — Entrada de código (_CodeInput.cshtml)
 *
 * Una casilla por carácter. Usa los mismos tokens --grid-* que el resto de inputs, con fallback
 * literal, así que funciona aunque grid.css no esté cargado.
 */

.ui-code-input {
    position: relative;
    display : flex;
    flex-wrap: wrap; /* red de seguridad: si 6 casillas no entran en una fila
                         por lo que sea, pasan a 2 filas de 3 en vez de
                         forzar overflow horizontal — ver el ancho fijo de
                         .ui-code-box (flex-basis, nunca %) más abajo. */
    gap     : 12px;
    justify-content: center;   /* centradas en su contenedor (una fila de código, como en un paso de verificación) */
    max-width: 100%;
    box-sizing: border-box;
}

/* El input real (con name/id) guarda el valor completo. Oculto a la vista pero NO con display:none:
   jQuery Validate ignora los campos "hidden", y este debe validarse. */
.ui-code-value {
    position      : absolute;
    width         : 1px;
    height        : 1px;
    padding       : 0;
    border        : 0;
    opacity       : 0;
    pointer-events: none;
}

.ui-code-box {
    box-sizing   : border-box;
    flex         : 0 1 64px;
    min-width    : 0;
    height       : 72px;
    padding      : 0;
    text-align   : center;
    font-size    : 24px;
    font-weight  : 600;
    font-variant-numeric: tabular-nums;
    color        : var(--grid-text-main, #111827);
    caret-color  : var(--grid-input-border-focus, #2563eb);
    background   : var(--grid-input-bg, #ffffff);
    border       : 1px solid var(--grid-border-input, #d1d5db);
    border-radius: var(--grid-radius-lg, 12px);
    outline      : none;
    transition   : border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.ui-code-box:hover:not(:disabled):not([readonly]) {
    border-color: var(--grid-input-border-focus, #2563eb);
}

.ui-code-box:focus {
    border-color: var(--grid-input-border-focus, #2563eb);
    box-shadow  : var(--grid-input-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .2));
    background  : var(--input-bg-focus, var(--grid-input-bg, #ffffff));
}

/* Casilla con carácter: un punto de acento en el borde para leer el progreso de un vistazo. */
.ui-code-box.is-filled {
    border-color: var(--grid-input-border-focus, #2563eb);
}

.ui-code-box:disabled { opacity: .55; cursor: not-allowed; }
.ui-code-box[readonly] { opacity: .75; cursor: default; }

/* Error de validación: jQuery Validate marca el input real; las casillas hermanas lo reflejan. */
.ui-code-value.input-validation-error ~ .ui-code-box {
    border-color: var(--grid-btn-danger-bg, #dc2626);
}

@media (max-width: 599px) {
    /* Antes solo se achicaban height/font-size — el ancho (flex-basis: 64px)
       quedaba igual, así que 6 casillas + gaps (424px) no entraban en un
       teléfono angosto: se veían recortadas/desbordadas o forzaban scroll
       horizontal. */
    .ui-code-input { gap: 6px; }
    .ui-code-box   { flex-basis: 44px; height: 52px; font-size: 18px; }
}

/* Con 6 casillas, 599px se queda corto en los teléfonos más angostos (ej.
   iPhone SE, 375px, o Android de 360px) una vez restado el padding de las
   tarjetas que envuelven el input (_SettingsCard/.profile-header-card) — a
   44px seguían sin entrar del todo cómodas. */
@media (max-width: 380px) {
    .ui-code-input { gap: 4px; }
    .ui-code-box   { flex-basis: 38px; height: 48px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-code-box { transition: none; }
}