/* ==========================================================================
   Pasos de acceso de clientes (teléfono, nombre y código OTP): Components/Login/*.razor.
   Son estilos globales, y no aislados, para que los pasos se puedan usar en cualquier página: basta con envolverlos en un
   contenedor con la clase "login-theme". Toda la paleta sale de dos variables del negocio: --custom-primary-color y
   --custom-secundary-color; la página puede fijar además --on-brand y --hover-tone según la luminancia del primario.
   Móvil primero: campos y botón de 48 px y letra de 16 px en los campos (con menos de 16 px, iOS hace zoom al enfocar).
   ========================================================================== */

.login-theme {
    --brand: var(--custom-primary-color, #40b49f);
    --paper: var(--custom-secundary-color, #fff);
    --tint: color-mix(in srgb, var(--brand) 12%, var(--paper));
    --line: color-mix(in srgb, var(--brand) 28%, var(--paper));
    --ink: color-mix(in srgb, var(--brand) 22%, #000);
    --muted: color-mix(in srgb, var(--brand) 45%, #000);
    --deep: color-mix(in srgb, var(--brand) 50%, #000);
    /* Borde de los campos: WCAG 1.4.11 pide 3:1 contra el fondo, y --line (decorativo) no llega. */
    --field-line: color-mix(in srgb, var(--brand) 60%, #000);
    /* Texto sobre el primario y hacia dónde se mueve el color al pasar el cursor. La página los reemplaza según la
       luminancia del primario (blanco si es oscuro, negro si es claro); estos valores son los del verde por defecto. */
    --on-brand: #000;
    --lc-accent: var(--brand);
    --lc-on-accent: var(--on-brand);
    --hover-tone: #fff;
}

.login-theme .login-title {
    margin: 0 0 6px;
    font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--ink);
}

.login-theme .login-sub {
    margin: 0 0 18px;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--muted);
}

.login-theme .login-sub strong {
    color: var(--ink);
    white-space: nowrap;
}

.login-theme .login-label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}

.login-theme .login-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--field-line);
    border-radius: 10px;
}

/* Código de 6 dígitos: una caja por cifra. Las cajas se reparten el ancho para que las seis quepan en un móvil de 320 px. */
.login-theme .login-code {
    display: flex;
    gap: 8px;
}

.login-theme .login-digit {
    flex: 1 1 0;
    min-width: 0;
    max-width: 52px;
    height: 48px;
    padding: 0;
    font: inherit;
    font-size: 1.375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    text-align: center;
    background: #fff;
    border: 1.5px solid var(--field-line);
    border-radius: 10px;
}

.login-theme .login-digit:focus-visible {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
}

.login-theme .login-digit[aria-invalid="true"] {
    border-color: var(--ink);
}

/* Código equivocado: las cajas tiemblan una vez, además del aviso de arriba. */
.login-theme .login-code-wrong {
    animation: login-shake 0.4s ease-in-out;
}

@keyframes login-shake {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* El nombre se muestra en mayúsculas al escribir; el placeholder conserva su forma original. */
.login-theme .login-input-upper:not(:placeholder-shown) {
    text-transform: uppercase;
}

.login-theme .login-input::placeholder {
    color: var(--muted);
    opacity: 1;
}

.login-theme .login-input:focus-visible {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
}

.login-theme .login-input[aria-invalid="true"] {
    border-color: var(--ink);
}

.login-theme .login-hint {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin: 8px 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--muted);
}

.login-theme .login-hint svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.login-theme .login-hint-error {
    font-weight: 600;
    color: var(--ink);
}

.login-theme .login-cta {
    display: inline-flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--on-brand);
    background: var(--brand);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.login-theme .login-cta:hover:not(:disabled) {
    background: color-mix(in srgb, var(--brand) 88%, var(--hover-tone));
}

.login-theme .login-cta:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.login-theme .login-cta:disabled {
    cursor: progress;
    opacity: 0.85;
}

.login-theme .login-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid color-mix(in srgb, var(--on-brand) 40%, transparent);
    border-top-color: var(--on-brand);
    border-radius: 50%;
    animation: login-spin 0.7s linear infinite;
}

@keyframes login-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .login-theme .login-spinner { animation-duration: 2.4s; }
    .login-theme .login-code-wrong { animation: none; }
}

@media (min-width: 768px) {
    .login-theme .login-title {
        font-size: 2rem;
    }
}