/* ==========================================================================
   Cannis — pantallas de cuenta · COMPONENTES
   --------------------------------------------------------------------------
   Lo que usan TODAS las pantallas de cuenta —ingreso, código, recuperar, verificar, registro—:
   la cabecera, el formulario, los campos, los botones, los avisos, las tarjetas y los accesos. Todo
   sale de tokens.css. Prefijo `cu-`.

   Los campos de texto van en 16 px y a 48 px de alto: debajo de 16 px el navegador del teléfono
   acerca la pantalla al enfocarlos. Todo lo que se toca mide 44 px o más.

   Sin JavaScript todo funciona: lo que el script suma («Mostrar» la contraseña, el contador) nace
   escondido o lo crea el propio script.
   ========================================================================== */

/* ===== La cabecera de la hoja ===== */

.cu-cabeza { margin-bottom: var(--cu-s4); }

.cu-eyebrow {
    margin-bottom: var(--cu-s1);
    color: var(--cu-marca);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cu-titulo {
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--cu-tinta);
}

.cu-subtitulo {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cu-tinta);
}

.cu-bajada {
    margin-top: var(--cu-s2);
    color: var(--cu-tinta-suave);
    font-size: 1rem;
    line-height: 1.55;
}

.cu-bajada strong { color: var(--cu-tinta); }

/* ===== El formulario ===== */

.cu-form { display: flex; flex-direction: column; gap: var(--cu-s3); }
.cu-form__grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cu-s3) var(--cu-s3); }
.cu-form__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cu-s2) var(--cu-s3); }

/* El renglón de acciones de abajo de una pantalla de ingreso. */
.cu-acciones { display: flex; flex-direction: column; gap: var(--cu-s1); margin-top: var(--cu-s3); }

/* ===== Un campo ===== */

.cu-campo { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.cu-campo--ancho { grid-column: 1 / -1; }

.cu-campo__fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cu-s2); }

.cu-campo__label { font-size: 0.9rem; font-weight: 700; color: var(--cu-tinta); }
.cu-campo__ayuda { color: var(--cu-tinta-suave); font-size: 0.85rem; line-height: 1.5; }

.cu-campo :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--cu-borde-campo);
    border-radius: var(--cu-radio-md);
    background: var(--cu-campo);
    color: var(--cu-tinta);
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color var(--cu-transicion), box-shadow var(--cu-transicion);
}

.cu-campo textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }

.cu-campo :is(input, select, textarea)::placeholder { color: var(--cu-tinta-suave); opacity: 0.85; }

.cu-campo :is(input:not([type="checkbox"], [type="radio"]), select, textarea):focus-visible {
    border-color: var(--cu-marca);
    outline: 3px solid var(--cu-marca-suave);
    outline-offset: 0;
    box-shadow: 0 0 0 1px var(--cu-marca);
}

.cu-campo select:disabled { opacity: 0.55; cursor: not-allowed; }
.cu-campo select option { background: var(--cu-campo); color: var(--cu-tinta); }

/* Un campo con error: el borde y el mensaje, nunca sólo el color. */
.cu-campo--error :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { border-color: var(--cu-error); }
.cu-error { display: grid; gap: 0.15rem; color: var(--cu-error); font-size: 0.88rem; font-weight: 600; line-height: 1.45; }

.cu-req { color: var(--cu-marca); font-weight: 700; }

/* ===== La contraseña, con su «Mostrar» adentro del campo (lo crea el script) ===== */

.cu-clave { position: relative; }
.cu-clave input { padding-right: 5.5rem; }
.cu-mostrar {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    min-width: var(--cu-toque);
    min-height: var(--cu-toque);
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--cu-radio-sm);
    background: transparent;
    color: var(--cu-marca);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}
.cu-mostrar:hover { text-decoration: underline; }

/* ===== El código de 6 dígitos: UN campo, grande y con los números bien separados ===== */

.cu-campo input.cu-codigo {
    min-height: 3.75rem;
    padding: 0.6rem 0.9rem 0.6rem calc(0.9rem + 0.4em);
    font-size: 1.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.4em;
    text-align: center;
}

/* ===== Una casilla suelta ===== */

.cu-check {
    display: flex;
    align-items: flex-start;
    gap: var(--cu-s2);
    min-height: var(--cu-toque);
    padding-block: 0.4rem;
    color: var(--cu-tinta-suave);
    font-size: 0.95rem;
    line-height: 1.5;
    cursor: pointer;
}
.cu-check input[type="checkbox"],
.cu-check input[type="radio"] {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0.1rem 0 0;
    accent-color: var(--cu-marca);
    cursor: pointer;
}

/* ===== Botones ===== */

.cu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.7rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--cu-radio-md);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--cu-transicion), filter var(--cu-transicion), border-color var(--cu-transicion), background var(--cu-transicion);
}

.cu-btn:focus-visible { outline: 3px solid var(--cu-marca); outline-offset: 3px; }

/* El primario va en el color del botón del producto, con la tinta que el producto eligió: igual en los dos temas. */
.cu-btn--primario {
    background: var(--cu-boton);
    color: var(--cu-sobre-boton);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset;
}
.cu-btn--primario:hover { filter: brightness(1.07); transform: translateY(-1px); }

.cu-btn--secundario {
    background: transparent;
    border-color: var(--cu-borde-campo);
    color: var(--cu-tinta);
}
.cu-btn--secundario:hover { border-color: var(--cu-marca); color: var(--cu-marca); }

.cu-btn--fantasma {
    background: transparent;
    border-color: var(--cu-marca);
    color: var(--cu-marca);
}
.cu-btn--fantasma:hover { background: var(--cu-marca-suave); }

.cu-btn--texto {
    min-height: var(--cu-toque);
    padding-inline: 0.6rem;
    background: transparent;
    color: var(--cu-marca);
}
.cu-btn--texto:hover { text-decoration: underline; }

.cu-btn--chico { min-height: var(--cu-toque); padding: 0.5rem 1rem; font-size: 0.92rem; }
.cu-btn--grande { min-height: 3.4rem; padding: 0.9rem 1.75rem; font-size: 1.05rem; }
.cu-btn--bloque { width: 100%; }

.cu-btn:disabled,
.cu-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; filter: none; }

/* Un formulario ya enviado: el doble clic no manda dos veces (lo marca el script). */
[aria-busy="true"] .cu-btn { opacity: 0.55; pointer-events: none; }

/* Un enlace chico, suelto, que se toca: 44 px de alto. */
.cu-enlace {
    display: inline-flex;
    align-items: center;
    min-height: var(--cu-toque);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cu-enlace--chico { min-height: var(--cu-toque); }

/* ===== Avisos ===== */

.cu-aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--cu-s2);
    margin-bottom: var(--cu-s3);
    padding: 0.9rem 1rem;
    border: 1px solid var(--cu-aviso-color, var(--cu-linea));
    border-radius: var(--cu-radio-md);
    background: var(--cu-aviso-fondo, var(--cu-info-fondo));
    color: var(--cu-tinta);
    font-size: 0.95rem;
    line-height: 1.5;
}
.cu-aviso > div { min-width: 0; }
.cu-aviso p { margin: 0; }
.cu-aviso p + p { margin-top: 0.35rem; }
.cu-aviso .cu-ico { margin-top: 0.15rem; color: var(--cu-aviso-icono, var(--cu-marca)); }
.cu-aviso ul { display: grid; gap: 0.3rem; margin-top: var(--cu-s1); }
.cu-aviso li { font-size: 0.92rem; }
.cu-aviso a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* El aviso que se enfoca solo (un error al volver): un anillo fino, no el de 3 px de un campo. */
.cu-aviso[tabindex="-1"]:focus-visible { outline-width: 2px; outline-offset: 2px; }

.cu-aviso--error { --cu-aviso-color: var(--cu-error); --cu-aviso-fondo: var(--cu-error-fondo); --cu-aviso-icono: var(--cu-error); }
.cu-aviso--ok { --cu-aviso-color: var(--cu-ok); --cu-aviso-fondo: var(--cu-ok-fondo); --cu-aviso-icono: var(--cu-ok); }
.cu-aviso:last-child { margin-bottom: 0; }

/* Una nota al pie de un formulario: lo que conviene saber antes de enviar. */
.cu-nota {
    display: flex;
    align-items: flex-start;
    gap: var(--cu-s2);
    margin-top: var(--cu-s3);
    padding: 0.9rem 1rem;
    border-radius: var(--cu-radio-md);
    background: var(--cu-marca-suave);
    color: var(--cu-tinta-suave);
    font-size: 0.93rem;
    line-height: 1.5;
}
.cu-nota .cu-ico { margin-top: 0.15rem; color: var(--cu-marca); }
.cu-nota p { margin: 0; }

/* ===== El pie de una pantalla de ingreso: lo que no es el botón principal ===== */

.cu-ayuda {
    margin-top: var(--cu-s3);
    padding-top: var(--cu-s3);
    border-top: 1px solid var(--cu-linea);
    color: var(--cu-tinta-suave);
    font-size: 0.93rem;
    line-height: 1.55;
}
.cu-ayuda a { font-weight: 700; }
/* Un botón de texto solo en su renglón (Cerrar sesión): su relleno de 0,6 rem no tiene que correr el texto respecto del resto. */
.cu-ayuda > .cu-btn--texto:only-child { margin-left: -0.6rem; }

.cu-separador {
    display: flex;
    align-items: center;
    gap: var(--cu-s2);
    color: var(--cu-tinta-suave);
    font-size: 0.85rem;
}
.cu-separador::before,
.cu-separador::after { content: ''; flex: 1; height: 1px; background: var(--cu-linea); }

/* El renglón de «Reenviar» con su cuenta de lo que queda. */
.cu-reenvio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cu-s1) var(--cu-s2); color: var(--cu-tinta-suave); font-size: 0.92rem; }

/* ===== Tarjetas (el selector de perfiles) ===== */

.cu-tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cu-s2); }

.cu-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--cu-linea);
    border-radius: var(--cu-radio-md);
    background: var(--cu-superficie);
    color: var(--cu-tinta);
    text-decoration: none;
    transition: border-color var(--cu-transicion), background var(--cu-transicion);
}
.cu-tarjeta:hover { border-color: var(--cu-marca); }
.cu-tarjeta:focus-visible { outline-offset: 3px; }

.cu-tarjeta__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: var(--cu-marca-suave);
    color: var(--cu-marca);
}
.cu-tarjeta__ico .cu-ico { width: 1.35em; height: 1.35em; }
.cu-tarjeta__titulo { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.cu-tarjeta__texto { color: var(--cu-tinta-suave); font-size: 0.93rem; line-height: 1.5; }
.cu-tarjeta__ir {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.4rem;
    color: var(--cu-marca);
    font-size: 0.92rem;
    font-weight: 700;
}
.cu-tarjeta__ir .cu-ico { transition: transform var(--cu-transicion); }
.cu-tarjeta:hover .cu-tarjeta__ir .cu-ico { transform: translateX(4px); }

/* ===== Accesos: un renglón por producto al que se entra ===== */

.cu-accesos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cu-s2); }

.cu-acceso {
    display: flex;
    align-items: center;
    gap: var(--cu-s2);
    min-width: 0;
    min-height: 4rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--cu-linea);
    border-radius: var(--cu-radio-md);
    background: var(--cu-superficie);
    color: var(--cu-tinta);
    text-decoration: none;
    transition: border-color var(--cu-transicion);
}
.cu-acceso:hover { border-color: var(--cu-marca); }
.cu-acceso__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    background: var(--cu-marca-suave);
    color: var(--cu-marca);
}
.cu-acceso__ico .cu-ico { width: 1.3em; height: 1.3em; }
.cu-acceso__datos { display: block; min-width: 0; flex: 1; }
.cu-acceso__titulo { display: block; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.cu-acceso__texto { display: block; color: var(--cu-tinta-suave); font-size: 0.86rem; line-height: 1.45; }
.cu-acceso__motivo { display: block; margin-top: 0.2rem; color: var(--cu-marca); font-size: 0.82rem; font-weight: 600; line-height: 1.4; }
.cu-acceso__flecha { margin-left: auto; color: var(--cu-tinta-suave); transition: transform var(--cu-transicion), color var(--cu-transicion); }
.cu-acceso:hover .cu-acceso__flecha { transform: translateX(4px); color: var(--cu-marca); }

/* ===== Angostos ===== */

@media (max-width: 640px) {
    .cu-form__grilla { grid-template-columns: minmax(0, 1fr); }
    .cu-tarjetas,
    .cu-accesos { grid-template-columns: minmax(0, 1fr); }

    .cu-form__pie > .cu-btn--primario { flex: 1 1 100%; }

    .cu-campo input.cu-codigo { font-size: 1.6rem; letter-spacing: 0.3em; padding-left: calc(0.9rem + 0.3em); }
}

@media (prefers-reduced-motion: reduce) {
    .cu-btn,
    .cu-tarjeta,
    .cu-acceso,
    .cu-campo :is(input, select, textarea),
    .cu-acceso__flecha,
    .cu-tarjeta__ir .cu-ico { transition: none; }
    .cu-btn--primario:hover { transform: none; }
}