/*
 * Pantallas de acceso (login, registro, verificación, contraseña, 2FA).
 *
 * Hoja compartida por todas: un `<style>` suelto en cada plantilla es lo que
 * hizo que el circuito tuviera tres maquetaciones distintas. Todo lo que se
 * tematiza por proyecto sale de las variables de :root, así que un override
 * solo tiene que redefinirlas.
 */

:root {
    --uix-auth-brand: #206bc4;
    --uix-auth-ink: #333;
    --uix-auth-muted: #89879f;
    --uix-auth-bg: #f8f9fa;
    --uix-auth-line: #f1f3f5;
    --uix-auth-border: #e9ecef;
    --uix-auth-radius: 16px;
    --uix-auth-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

.uix-auth {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--uix-auth-bg);
    color: var(--uix-auth-ink);
}

/* ---------- Cabecera ---------- */
.uix-auth__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.875rem;
}

.uix-auth__logo img { display: block; max-height: 36px; width: auto; }

.uix-auth__logo-text {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--uix-auth-ink);
    text-decoration: none;
}

.uix-auth__back {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .875rem;
    color: var(--uix-auth-muted);
    text-decoration: none;
    transition: color .2s ease;
}

.uix-auth__back:hover { color: var(--uix-auth-brand); }

/* ---------- Cuerpo ---------- */
.uix-auth__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 1.25rem 2rem;
}

.uix-auth__card {
    width: 100%;
    max-width: 940px;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    background: #fff;
    border-radius: var(--uix-auth-radius);
    box-shadow: var(--uix-auth-shadow);
    overflow: hidden;
}

/* ---------- Columna de marca ---------- */
.uix-auth__brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem 2rem;
    background: var(--uix-auth-brand);
    color: #fff;
}

.uix-auth__brand-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 .5rem;
    color: #fff;
}

.uix-auth__brand-text {
    font-size: .9375rem;
    line-height: 1.5;
    margin: 0;
    color: rgba(255, 255, 255, .85);
}

.uix-auth__highlights {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

.uix-auth__highlights li {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    font-size: .875rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .95);
}

/* El icono en una caja translúcida: el pastel sobre color pleno se consigue
   con blanco al 15 %, no aclarando el color de marca (que cambia por proyecto). */
.uix-auth__highlights .icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 5px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .15);
}

.uix-auth__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .75rem;
    color: rgba(255, 255, 255, .8);
}

.uix-auth__trust span { display: inline-flex; align-items: center; gap: .3rem; }
.uix-auth__trust .icon { width: 16px; height: 16px; }

/* ---------- Columna del formulario ---------- */
.uix-auth__panel { padding: 2.5rem 2.25rem; }

.uix-auth__head { margin-bottom: 1.5rem; }

.uix-auth__heading {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0;
    color: var(--uix-auth-ink);
}

.uix-auth__lead {
    margin: .375rem 0 0;
    font-size: .875rem;
    color: var(--uix-auth-muted);
}

.uix-auth__panel-foot {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--uix-auth-line);
    text-align: center;
    font-size: .875rem;
    color: var(--uix-auth-muted);
}

/* Formularios: el color de marca manda sobre el azul de Tabler, que es lo que
   hacía que el botón principal saliera azul en todos los proyectos. */
.uix-auth .form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--uix-auth-ink);
    margin-bottom: .375rem;
}

.uix-auth .form-control,
.uix-auth .form-select {
    border-radius: 8px;
    border-color: var(--uix-auth-border);
    padding: .5625rem .75rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.uix-auth .form-control:focus,
.uix-auth .form-select:focus {
    border-color: var(--uix-auth-brand);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--uix-auth-brand) 15%, transparent);
}

.uix-auth .btn-primary {
    --tblr-btn-bg: var(--uix-auth-brand);
    --tblr-btn-border-color: var(--uix-auth-brand);
    --tblr-btn-hover-bg: color-mix(in srgb, var(--uix-auth-brand) 88%, #000);
    --tblr-btn-hover-border-color: color-mix(in srgb, var(--uix-auth-brand) 88%, #000);
    --tblr-btn-active-bg: color-mix(in srgb, var(--uix-auth-brand) 80%, #000);
    /* El estado deshabilitado también: sin esto, un botón que espera a que
       completes el campo (el código de 2FA) se quedaba azul de Tabler. */
    --tblr-btn-disabled-bg: color-mix(in srgb, var(--uix-auth-brand) 45%, #fff);
    --tblr-btn-disabled-border-color: color-mix(in srgb, var(--uix-auth-brand) 45%, #fff);
    border-radius: 8px;
    font-weight: 600;
    padding: .625rem 1rem;
}

.uix-auth a { color: var(--uix-auth-brand); }

.uix-auth .form-check-input:checked {
    background-color: var(--uix-auth-brand);
    border-color: var(--uix-auth-brand);
}

/* Separador "o" entre el acceso social y el formulario */
.uix-auth__divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.125rem 0;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--uix-auth-muted);
}

.uix-auth__divider::before,
.uix-auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--uix-auth-line);
}

/* Pasos numerados (verificación de email) */
.uix-auth__steps { list-style: none; margin: 0; padding: 0; }

.uix-auth__steps li {
    display: flex;
    gap: .75rem;
    padding: .625rem 0;
    border-bottom: 1px solid var(--uix-auth-line);
    font-size: .875rem;
}

.uix-auth__steps li:last-child { border-bottom: 0; }

.uix-auth__steps b {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .75rem;
    background: color-mix(in srgb, var(--uix-auth-brand) 12%, transparent);
    color: var(--uix-auth-brand);
}

/* Dirección de correo destacada */
.uix-auth__mail {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .875rem;
    border-radius: 8px;
    font-weight: 600;
    word-break: break-all;
    background: color-mix(in srgb, var(--uix-auth-brand) 8%, transparent);
    color: var(--uix-auth-brand);
}

/* ---------- Pie ---------- */
.uix-auth__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    font-size: .8125rem;
    color: var(--uix-auth-muted);
}

.uix-auth__foot a { color: var(--uix-auth-muted); text-decoration: none; }
.uix-auth__foot a:hover { color: var(--uix-auth-brand); }

/* ---------- Móvil ----------
   La columna de marca no se esconde: se convierte en una franja compacta. Quitarla
   deja un formulario huérfano sin decir de qué producto es. Lo que sí se va son
   los argumentos, que en 390 px empujan el formulario fuera de la pantalla. */
@media (max-width: 991.98px) {
    .uix-auth__card { grid-template-columns: minmax(0, 1fr); max-width: 520px; }

    .uix-auth__brand { padding: 1.5rem 1.5rem 1.25rem; gap: 1rem; }
    .uix-auth__brand-title { font-size: 1.25rem; }
    .uix-auth__highlights,
    .uix-auth__trust { display: none; }

    .uix-auth__panel { padding: 1.75rem 1.5rem; }
    .uix-auth__top { padding: 1rem 1.25rem; }
    .uix-auth__back span { display: none; }
}

/* Elección expandida (tipo de cuenta): son radios, no un desplegable. Sin esto
   Tabler los apila sin separación y parecen una sola etiqueta. */
.uix-auth__choice > div { display: flex; gap: 1.25rem; flex-wrap: wrap; }

.uix-auth__choice .form-check {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: 0;
    min-height: auto;
}

.uix-auth__choice .form-check-input { margin: 0; float: none; }

/* Elección como tarjetas: dos opciones excluyentes con consecuencias distintas
   se eligen mejor sobre una superficie que se pueda pulsar entera que sobre un
   punto de 16 px. El radio sigue ahí (lectores de pantalla y teclado); lo que
   cambia es qué se ve. */
.uix-auth__choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .625rem;
}

.uix-auth__choice-card {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .75rem .875rem;
    border: 1.5px solid var(--uix-auth-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.uix-auth__choice-card:hover { border-color: color-mix(in srgb, var(--uix-auth-brand) 45%, transparent); }

.uix-auth__choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.uix-auth__choice-title {
    font-size: .875rem;
    font-weight: 600;
    color: var(--uix-auth-ink);
}

.uix-auth__choice-hint {
    font-size: .75rem;
    line-height: 1.35;
    color: var(--uix-auth-muted);
}

.uix-auth__choice-card:has(input:checked) {
    border-color: var(--uix-auth-brand);
    background: color-mix(in srgb, var(--uix-auth-brand) 6%, transparent);
}

/* El foco tiene que verse: sin el radio a la vista, es la única pista de dónde
   está el teclado. */
.uix-auth__choice-card:has(input:focus-visible) {
    outline: 2px solid var(--uix-auth-brand);
    outline-offset: 2px;
}

/* Ojo de "ver contraseña". El botón va dentro del campo, no al lado: al lado
   empuja el input y descuadra la rejilla del formulario. */
.uix-auth__reveal { position: relative; display: block; }

.uix-auth__reveal input { padding-right: 2.5rem; width: 100%; }

.uix-auth__reveal-btn {
    position: absolute;
    top: 50%;
    right: .25rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--uix-auth-muted);
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}

.uix-auth__reveal-btn:hover { color: var(--uix-auth-brand); }

.uix-auth__reveal-btn:focus-visible {
    outline: 2px solid var(--uix-auth-brand);
    outline-offset: 1px;
    color: var(--uix-auth-brand);
}