/* ============================================================
   VeriunCore — LOGIN DINÁMICO CON REGISTRO ANCHO
   ------------------------------------------------------------
   - Acceso: tarjeta compacta.
   - Registro: tarjeta ancha en dos columnas.
   - Usuario y empresa mantienen prácticamente la misma altura.
   - Ancho y alto cambian suavemente durante el giro.
   - En móvil vuelve a una columna.
   ============================================================ */

:root {
    --auth-card-speed: 720ms;
    --auth-size-speed: 390ms;

    --auth-login-width: 440px;
    --auth-register-width: 860px;

    --auth-card-width:
        var(--auth-login-width);
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    min-height: 100svh;

    overflow-x: hidden;
    overflow-y: auto !important;

    /*
     * style.css le pone 32px de relleno arriba y abajo. Como
     * .scene ya mide 100vh, esos 64px se sumaban por fuera y
     * la pagina salia siempre con 64px de scroll aunque la
     * tarjeta cupiese de sobra:
     *
     *   alto del documento 964 - viewport 900 = 64
     *
     * El aire alrededor de la tarjeta lo pone .scene con su
     * propio relleno, asi que aqui no hace falta.
     */
    padding: 0 !important;

    /*
     * El body es flex (style.css) y su unico hijo visible es
     * .scene: que ocupe todo el alto para poder centrar dentro.
     */
    align-items: stretch;
}

.scene {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    height: auto !important;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        clamp(18px, 3vh, 34px)
        18px;

    box-sizing: border-box;

    overflow: visible !important;
    perspective: 1800px;
}

.card-flip {
    position: relative;

    width:
        min(
            calc(100vw - 36px),
            var(
                --auth-card-width,
                var(--auth-login-width)
            )
        ) !important;

    height:
        var(
            --auth-card-height,
            610px
        ) !important;

    min-height: 0 !important;
    max-height: none !important;

    margin: auto;

    transform-style: preserve-3d;
    transform-origin: center center;

    transition:
        transform
            var(--auth-card-speed)
            cubic-bezier(.2, .76, .25, 1),
        height
            var(--auth-size-speed)
            cubic-bezier(.22, .8, .3, 1),
        width
            var(--auth-size-speed)
            cubic-bezier(.22, .8, .3, 1)
            !important;

    will-change:
        transform,
        height,
        width;
}

.card-flip.flipped,
.card-flip.is-flipped,
.card-flip.show-register,
body[data-auth-view="register"]
.card-flip {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;

    width: 100% !important;
    height: max-content !important;

    min-height: 0 !important;
    max-height: none !important;

    box-sizing: border-box;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transform-style: preserve-3d;
}

.card-front {
    transform: rotateY(0deg);
}

.card-back {
    transform: rotateY(180deg);

    /*
     * El registro utiliza menos separación vertical porque ahora
     * aprovecha el espacio horizontal.
     */
    padding:
        28px 36px
        26px !important;
}

/*
 * La cara oculta conserva su alto real: el registro mide bastante
 * mas que el acceso. Al estar en position:absolute no empuja el
 * alto de la tarjeta, pero si contaba para el area desplazable,
 * asi que el acceso salia con barra de scroll aunque la tarjeta
 * visible cupiese de sobra:
 *
 *   alto del body 969 - alto visible 956 = 13   <- el registro
 *   cara visible 514, tarjeta 516, cara oculta 749
 *
 * Recortarla al alto de la tarjeta quita esa barra. El JS mide
 * las caras con scrollHeight, que sigue devolviendo el alto real
 * del contenido aunque la caja este recortada, asi que el giro
 * sigue calculando bien las dos alturas.
 */
.card-face.auth-face-hidden {
    pointer-events: none;

    max-height: 100% !important;
    overflow: hidden;
}

.card-face.auth-face-active {
    pointer-events: auto;
}

body:not(.auth-card-ready)
.card-flip {
    visibility: hidden;
}

body.auth-card-ready
.card-flip {
    visibility: visible;
}


/* ============================================================
   CABECERA DEL REGISTRO
   ============================================================ */

.card-back .logo-wrap {
    margin-bottom: 12px !important;
}

.card-back .headline {
    margin:
        0 0 4px !important;
}

.card-back .subtext {
    margin:
        0 0 17px !important;
}


/* ============================================================
   FORMULARIO EN DOS COLUMNAS
   ============================================================ */

#registerForm {
    display: grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    align-items: start;

    column-gap: 20px;
    row-gap: 13px;
}

#registerForm >
input[type="hidden"] {
    display: none !important;
}

#registerForm >
.field-group,
#registerForm >
.company-fields {
    min-width: 0;
    margin: 0 !important;
}

#registerForm
.field-group {
    margin-bottom: 0 !important;
}

/*
 * Selector Usuario / Empresa: ocupa la fila completa siempre,
 * tanto en usuario como en empresa.
 */
#registerForm >
.field-group:first-of-type {
    grid-column:
        1 / -1;
}

/*
 * RUC: cae en la primera casilla libre, o sea justo debajo de los
 * dos botones. Antes se le forzaba la columna 2 y compartia fila
 * con el selector, asi que se leia como un campo suelto a la
 * derecha, sin relacion visible con el boton de Empresa que lo
 * activa.
 *
 * Dejarlo en el flujo normal de la rejilla tiene otra ventaja: el
 * registro de empresa ocupa las mismas filas que el de usuario,
 * asi que no crece de alto.
 */
#registerForm >
.company-fields {
    overflow: visible !important;

    margin: 0 !important;
    padding: 0 !important;
}

#registerForm >
.company-fields:not(.show) {
    display: none !important;
}

#registerForm >
.company-fields.show {
    display: block !important;

    max-height: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
}

#registerForm >
.company-fields
.field-group {
    margin: 0 !important;
}


/*
 * Botón Crear cuenta.
 */
#registerForm >
.btn {
    grid-column:
        1 / -1;

    margin-top: 3px;
}


/* ============================================================
   COMPACTAR ELEMENTOS DEL REGISTRO
   ============================================================ */

.card-back
.field-group label {
    margin-bottom: 6px !important;
}

.card-back
.input-wrap {
    min-height: 43px;
}

.card-back
.input-wrap input {
    min-height: 43px;
}

.card-back
.account-type-selector {
    gap: 10px;
}

.card-back
.account-type-option {
    min-height: 58px;

    padding:
        9px 12px !important;
}

.card-back
.account-type-content small {
    line-height: 1.15;
}

.card-back
.auth-field-help {
    margin-top: 5px !important;

    font-size: .69rem;
    line-height: 1.25;
}

/*
 * Aqui habia reglas para .auth-form + .divider. El separador se
 * retiro de las dos caras al cambiarlo por la linea de "cambio
 * de vista", y esta hoja solo la carga login.php, asi que no
 * quedaba nada a lo que aplicarse.
 */

.card-back >
.btn {
    min-height: 43px;
}

.card-back
.footer {
    margin-top: 15px !important;
    padding-top: 13px !important;
}


/* Teléfono internacional */
.iti {
    width: 100%;
}


/* ============================================================
   CENTRADO EN ESCRITORIO
   ============================================================ */

@media
(min-width: 721px)
and
(min-height: 700px) {

    body[data-auth-view="register"]
    .scene {
        align-items: center;
    }
}


/* Pantallas de escritorio bajas: reduce un poco más. */
@media
(min-width: 721px)
and
(max-height: 760px) {

    .scene {
        align-items: flex-start;

        padding-top: 12px;
        padding-bottom: 12px;
    }

    .card-back {
        padding:
            20px 30px
            18px !important;
    }

    .card-back .logo-wrap {
        margin-bottom: 7px !important;
    }

    .card-back .subtext {
        margin-bottom: 11px !important;
    }

    #registerForm {
        row-gap: 9px;
    }

    .card-back
    .footer {
        margin-top: 10px !important;
        padding-top: 9px !important;
    }
}


/* ============================================================
   TABLET Y MÓVIL
   ============================================================ */

@media (max-width: 900px) {

    :root {
        --auth-register-width: 760px;
    }

    .card-back {
        padding:
            26px 28px
            24px !important;
    }
}

@media (max-width: 720px) {

    :root {
        --auth-login-width: 100%;
        --auth-register-width: 100%;
    }

    .scene {
        align-items: flex-start;

        padding:
            14px 10px
            28px;
    }

    .card-flip {
        width: 100% !important;
    }

    .card-back {
        padding:
            24px 20px
            22px !important;
    }

    #registerForm {
        grid-template-columns: 1fr;

        column-gap: 0;
        row-gap: 13px;
    }

    #registerForm >
    .field-group:first-of-type,
    #registerForm >
    .company-fields,
    #registerForm >
    .btn {
        grid-column: 1;
    }
}

@media (max-width: 420px) {

    .card-back {
        padding:
            22px 16px
            20px !important;
    }

    .card-back
    .account-type-selector {
        grid-template-columns: 1fr;
    }
}


/* Movimiento reducido */
@media
(prefers-reduced-motion: reduce) {

    .card-flip {
        transition:
            transform 1ms linear,
            height 1ms linear,
            width 1ms linear
            !important;
    }
}


/* ============================================================
   CAMBIO DE VISTA Y COMPACTACION
   ------------------------------------------------------------
   Antes cada cara terminaba con un separador y un boton a todo
   lo ancho (~90px) que competia visualmente con el boton
   principal. Ahora es una linea de texto con un enlace: la
   accion secundaria se lee como secundaria y la tarjeta entra
   en pantalla sin scroll.
   ============================================================ */

.auth-switch {
    margin: 15px 0 0;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;

    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

.auth-switch-link {
    padding: 2px 2px 3px;

    color: var(--accent2);
    background: none;
    border: 0;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    border-bottom: 1px solid transparent;

    transition:
        color .18s,
        border-color .18s;
}

.auth-switch-link:hover {
    color: #fff;
    border-bottom-color: var(--accent2);
}

.auth-switch-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}


/* ------------------------------------------------------------
   Aire recortado en las dos caras

   El objetivo es que ninguna pantalla de escritorio necesite
   scroll. Se aplica siempre, no solo en pantallas bajas: lo
   que sobraba era aire, no contenido.
   ------------------------------------------------------------ */

.card-face .logo-wrap {
    margin-bottom: 14px !important;
}

.card-face .headline {
    font-size: clamp(22px, 3.2vw, 28px);
    margin-bottom: 5px;
}

.card-face .subtext {
    margin-bottom: 16px;
    font-size: 14px;
}

.card-face .footer {
    margin-top: 12px !important;
    padding-top: 10px !important;
}

.card-front {
    padding:
        30px 38px
        26px !important;
}


/* ------------------------------------------------------------
   Registro: ajuste fino para que entre en portatiles

   Con 768px de alto solo hay ~714px utiles despues del relleno
   de .scene. Estos valores se midieron con el navegador, no a
   ojo: cada uno recorta lo que sobraba de aire.
   ------------------------------------------------------------ */

.card-back {
    padding:
        22px 32px
        20px !important;
}

.card-back .logo-wrap {
    margin-bottom: 10px !important;
}

/*
 * El subtitulo del registro ("Completa los campos para
 * registrarte") no aporta nada que no diga ya el titular con
 * los campos a la vista, y costaba unos 32px.
 */
.card-back .subtext {
    display: none !important;
}

.card-back .field-group label {
    margin-bottom: 4px !important;
}

.card-back .input-wrap,
.card-back .input-wrap input {
    min-height: 40px;
}

.card-back .input-wrap input,
.card-back .tel-wrap .iti input.bbx {
    padding-top: 9px;
    padding-bottom: 9px;
}

.card-back .account-type-option {
    min-height: 50px;
    padding: 7px 11px !important;
}

#registerForm {
    row-gap: 10px;
}

#registerForm > .btn {
    margin-top: 1px;
}

.card-back .auth-switch {
    margin-top: 12px;
}

.card-back .footer {
    margin-top: 10px !important;
    padding-top: 9px !important;
}


/* ------------------------------------------------------------
   Escritorio bajo (altura <= 780px)

   Va al final del archivo a proposito: las reglas compactas de
   arriba tambien llevan !important, y en CSS gana la ultima
   cuando la especificidad empata. Una media query no suma
   especificidad, asi que si este bloque fuese antes quedaria
   anulado por ellas.
   ------------------------------------------------------------ */

@media
(min-width: 721px)
and
(max-height: 780px) {

    .scene {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .card-back {
        padding:
            16px 28px
            14px !important;
    }

    .card-back .logo-wrap {
        margin-bottom: 6px !important;
    }

    .card-face .headline {
        font-size: 22px;
        margin-bottom: 3px;
    }

    #registerForm {
        row-gap: 8px;
    }

    .card-back .auth-switch {
        margin-top: 9px;
    }

    .card-back .footer {
        margin-top: 7px !important;
        padding-top: 7px !important;
    }
}


/* ------------------------------------------------------------
   Ventana muy baja (altura <= 700px)

   Es el caso de una pantalla de 768px con la barra del navegador
   encima: quedan unos 650px utiles y el registro se pasaba por
   28px. Va despues del tramo anterior por la misma razon que aquel
   va despues de las reglas compactas: una media query no suma
   especificidad y gana la ultima.
   ------------------------------------------------------------ */

@media
(min-width: 721px)
and
(max-height: 700px) {

    .scene {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .card-back {
        padding:
            12px 26px
            12px !important;
    }

    .card-back .input-wrap,
    .card-back .input-wrap input {
        min-height: 38px;
    }

    #registerForm {
        row-gap: 6px;
    }

    .card-back .auth-switch {
        margin-top: 7px;
    }

    .card-back .footer {
        margin-top: 5px !important;
        padding-top: 5px !important;
    }
}


/* ------------------------------------------------------------
   Detalles finales
   ------------------------------------------------------------ */

/* Campo que ocupa las dos columnas (telefono) */
#registerForm > .field-wide {
    grid-column: 1 / -1;
}

/*
 * En empresa el RUC ocupa una casilla mas, asi que el telefono ya
 * encuentra pareja y no necesita la fila entera. De paso el
 * registro de empresa queda con las mismas filas que el de
 * usuario.
 */
#registerForm.is-company > .field-wide {
    grid-column: auto;
}

/*
 * El logotipo es una imagen con su propio fondo. La caja
 * .logo-icon traia un degradado y una sombra pensados para el
 * glifo que habia antes, y se veian como un recuadro detras.
 */
img.logo-icon {
    width: 38px;
    height: 38px;

    object-fit: contain;
    object-position: center;

    background: none;
    box-shadow: none;
    border-radius: 9px;
}