/* Las pantallas de ingreso por contrato (njs/g_auth.js, functions/auth_contrato.php).
 *
 * Su propio archivo y no parte de njs/ui_v2.css (salio de ahi el 2026-10-06): el render del contrato
 * se monta en cualquier sitio, tenga UI v2 o no (docs/infra/app-contrato-auth.md §7.1). Lo carga el
 * montaje (rxsAuthMontaje) y, por si la pantalla llego por la SPA, el propio g_auth.js.
 *
 * `body:not(.rxsSinAuth)` es `body.rxs-ui-v2` con el mismo peso (una clase y un tag) pero para
 * cualquier body: las reglas que venian de ui_v2.css le siguen ganando a las mismas que les ganaban.
 * Nadie pone `.rxsSinAuth`; existe solo por el peso.
 *
 * Los colores son tokens propios (--rxa-*): los de UI v2 si el sitio la tiene, si no la marca del
 * sitio (--rx-color1) y un gris neutro. Sin v2, los campos los sigue pintando el tema del sitio
 * (input-group, .form-control): aca va el resto de la pantalla y el CTA (al final). */
body:not(.rxsSinAuth) .rxsAuth {
    --rxa-accent: var(--rx-v2-accent, var(--rx-site-acc, var(--rx-color1, #4f46e5)));
    --rxa-accent-soft: var(--rx-v2-accent-soft, color-mix(in srgb, var(--rxa-accent) 12%, transparent));
    /* el acento como TEXTO (links, volver): el de la marca sobre la tarjeta no se lee (naranja sobre gris claro 2,4:1,
     * indigo sobre la tarjeta gris de una tienda 1,2:1). Va mezclado con el color del texto, que es el que se lee sobre
     * esa tarjeta: mas oscuro en una clara, mas claro en una oscura. */
    --rxa-accent-tx: color-mix(in oklab, var(--rxa-accent) 40%, var(--rxa-text));
    /* lo mismo para el gris de los textos chicos (la ayuda, el pie, el separador): el gris del tema sobre la tarjeta de vidrio
     * quedaba en 4,1:1 */
    --rxa-muted-tx: color-mix(in oklab, var(--rxa-muted) 60%, var(--rxa-text));
    --rxa-text: var(--rx-v2-text, #1f2937);
    --rxa-muted: var(--rx-v2-muted, #6b7280);
    --rxa-faint: var(--rx-v2-faint, #9ca3af);
    --rxa-border: var(--rx-v2-border, rgba(17, 24, 39, .14));
    --rxa-border-soft: var(--rx-v2-border-soft, var(--rxa-border));
    --rxa-panel: var(--rx-v2-panel, #fff);
    --rxa-hover: var(--rx-v2-hover, rgba(17, 24, 39, .05));
    --rxa-r8: var(--rx-v2-r8, 8px);
    --rxa-r12: var(--rx-v2-r12, 12px);
}
/* Donde la tarjeta es clara de seguro (UI v2 en claro, la tarjeta del sitio de filas), el acento como texto es el mismo
 * color de la marca llevado hacia el negro hasta una luminosidad que se lee (L 0,47 en oklab: 5:1 o mas sobre el vidrio
 * gris, 6,5 sobre blanco). Escalar L, a y b juntos no cambia el tono ni sale del gamut: el naranja queda naranja
 * quemado y no marron, y un acento que ya es oscuro (el azul de un consultorio) queda como es. La mezcla con el texto de
 * arriba sigue para lo que no se sabe (la tarjeta del tema, que puede ser oscura) y el oscuro. */
@supports (color: oklab(from red l a b)) {
    body.rxs-ui-v2:not(.thr-dark):not(.rxsSinAuth) .rxsAuth,
    :is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .rxsAuth {
        --rxa-accent-tx: oklab(from var(--rxa-accent) calc(l * min(1, .47 / l)) calc(a * min(1, .47 / l)) calc(b * min(1, .47 / l)));
    }
}

/* ============ pantallas de ingreso por contrato (njs/g_auth.js) ============
 * Lo que dibuja el render del contrato (functions/auth_contrato.php) sobre la tarjeta de siempre:
 * campos, CTA y secundarios ya los pintan las reglas de arriba. Aca va el orden de la pantalla:
 * una accion principal, los otros caminos en segundo plano y los links al pie. */
body:not(.rxsSinAuth) .login-register .login-box:has(> .card-body > .rxsAuth) { max-width: 420px; width: 100%; }
/* el pie de la pagina va `absolute` abajo: una tarjeta alta no se mete debajo, la pagina se estira */
body:not(.rxsSinAuth) #maincontent > .login-register:has(.rxsAuth) { padding-bottom: 64px; }
body:not(.rxsSinAuth) .rxsAuth { display: flex; flex-direction: column; }
/* la marca: el logo del sitio arriba; el negativo solo donde la tarjeta es oscura (el modal en tema oscuro) */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-marca { display: flex; justify-content: center; margin: 0 0 14px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-logo { display: block; height: auto; max-height: 52px; max-width: 180px; object-fit: contain; width: auto; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-logo-neg { display: none; }
body.thr-dark:not(.rxsSinAuth) .rxsLoginPop .rxsAuth .rxsAuth-marca:has(.rxsAuth-logo-neg) .rxsAuth-logo:not(.rxsAuth-logo-neg) { display: none; }
body.thr-dark:not(.rxsSinAuth) .rxsLoginPop .rxsAuth .rxsAuth-logo.rxsAuth-logo-neg { display: block; }
/* la cabecera: el primer texto es el titulo de la tarjeta, lo demas lo acompana */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-titulo { margin: 0 0 4px; text-align: center; }
/* el titulo de la tarjeta puede ser el h1/h2 de la pagina (g_auth.js dibujar): con el tamaño que tenia de h3 */
body:not(.rxsSinAuth) .rxsAuth :is(h1, h2).rxsAuth-titulo { font-size: var(--rxa-titulo, 1.5rem); line-height: 1.25; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-sub { color: var(--rxa-text); font-size: 17px; font-weight: 650; margin: 0 0 6px; text-align: center; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-texto,
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-paso { color: var(--rxa-muted); font-size: 14px; margin: 0 0 22px; text-align: center; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-h { color: var(--rxa-text); font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 20px; }
/* el titulo (h3.box-title) queda a 14: en ui_v2.css le ganaba `.login-register .box-title` (mismo peso, mas abajo) */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-h.box-title { margin-bottom: 14px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-h + .rxsAuth-texto,
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-h + .rxsAuth-sub { margin-top: -16px; }
/* con el titulo a 14 (la regla de arriba), -16 los encimaba: el nombre de la tienda y «Registrarme» quedaban pegados */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-h.box-title + :is(.rxsAuth-texto, .rxsAuth-sub) { margin-top: -10px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-paso { color: var(--rxa-text); font-weight: 600; }
/* la bienvenida con HTML del tenant: su formato, con el color del texto (el login viejo la pintaba con v-html) */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-html { color: var(--rxa-text); }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-html img { max-width: 100%; height: auto; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-aviso { font-size: 13px; margin: 0 0 14px; padding: 10px 12px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-aviso[hidden] { display: none; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-campo { margin-bottom: 12px; }
body:not(.rxsSinAuth) .rxsAuth .form-control { height: 46px; }
/* el icono del campo por encima del campo tambien con foco: Bootstrap 5 le da z-index 5 al campo enfocado, el mismo del
 * icono, y el campo (que va despues) lo tapaba: el candado desaparecia al tocar la clave */
body:not(.rxsSinAuth) .login-register .rxsAuth .input-group > :is(.input-group-prepend, .input-group-append) { z-index: 6; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-ojo { cursor: pointer; }
/* los controles del registro: la lista con su flecha (el bloque de arriba se la saca a todos), la
 * casilla con el texto al lado y la ayuda que el tenant declaro para el publico */
body:not(.rxsSinAuth) .login-register .rxsAuth select.form-control { -webkit-appearance: auto; appearance: auto; cursor: pointer; }
body:not(.rxsSinAuth) .rxsAuth textarea.form-control { height: auto; min-height: 84px; padding-top: 12px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-ayuda { color: var(--rxa-muted-tx); display: block; font-size: 12px; line-height: 1.4; margin: 6px 2px 0; }
/* el nombre de un campo de fecha, que no tiene placeholder que lo diga */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-etiqueta { color: var(--rxa-muted); display: block; font-size: 12.5px; font-weight: 500; line-height: 1.3; margin: 0 2px 5px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-check label { align-items: flex-start; color: var(--rxa-text); cursor: pointer; display: flex; font-size: 13.5px; font-weight: 500; gap: 10px; margin: 0; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-check input { accent-color: var(--rxa-accent); flex: 0 0 18px; height: 18px; margin: 1px 0 0; position: static; opacity: 1; width: 18px; }
/* el select con busqueda (kind lookup): la lista de resultados debajo del buscador, sin tapar el form */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lookup-lista { background: var(--rxa-panel); border: 1px solid var(--rxa-border); border-radius: var(--rxa-r8, 8px); list-style: none; margin: 4px 0 0; max-height: 220px; overflow-y: auto; padding: 4px 0; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lookup-lista[hidden] { display: none; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lookup-lista li { color: var(--rxa-text); cursor: pointer; font-size: 14px; line-height: 1.35; padding: 9px 12px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lookup-lista li[role="option"]:hover,
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lookup-lista li.activo { background: var(--rxa-hover); }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lookup-lista .rxsAuth-lookup-mas { color: var(--rxa-accent-tx); font-weight: 600; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lookup-lista .rxsAuth-lookup-nada { color: var(--rxa-muted); cursor: default; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-olvido { display: flex; justify-content: flex-end; margin: -4px 0 14px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-olvido a { color: var(--rxa-accent-tx) !important; font-size: 12.5px; font-weight: 600; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-captcha { display: flex; justify-content: center; margin: 4px 0 14px; min-height: 0; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-legal { color: var(--rxa-faint); font-size: 11px; text-align: center; }
body:not(.rxsSinAuth) .login-register .rxsAuth .rxsAuth-cta {
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--rxa-accent) 70%, transparent) !important;
    font-size: 14px !important;
    height: 46px;
    letter-spacing: .01em;
    margin-top: 4px;
    transition: filter .15s ease, transform .15s ease;
    width: 100%;
}
body:not(.rxsSinAuth) .login-register .rxsAuth .rxsAuth-cta:active { transform: translateY(1px); }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-cta:disabled { cursor: progress; filter: grayscale(.4) brightness(.9); }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-sep { align-items: center; color: var(--rxa-muted-tx); display: flex; font-size: 12px; gap: 12px; margin: 18px 0 14px; text-transform: uppercase; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-sep::before,
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-sep::after { border-top: 1px solid var(--rxa-border); content: ""; flex: 1; }
/* redes: botones del mismo ancho con el color de cada marca; hasta dos con su nombre */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-social { display: grid; gap: 10px; grid-auto-columns: 1fr; grid-auto-flow: column; margin-bottom: 12px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-social.rxsAuth-social-nombre { grid-auto-flow: row; }
body:not(.rxsSinAuth) .login-register .rxsAuth .rxsAuth-social .btn {
    align-items: center;
    background: var(--rxa-panel) !important;
    border: 1px solid var(--rxa-border) !important;
    border-radius: var(--rxa-r12) !important;
    color: var(--rxa-text) !important;
    cursor: pointer;
    display: flex;
    font-size: 13.5px;
    font-weight: 600;
    gap: 10px;
    height: 44px;
    justify-content: center;
    margin: 0;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    width: auto;
}
body:not(.rxsSinAuth) .login-register .rxsAuth .rxsAuth-social .btn:hover { border-color: color-mix(in srgb, var(--rxa-accent) 45%, var(--rxa-border)) !important; box-shadow: 0 4px 14px -6px rgba(18, 25, 33, .25); transform: translateY(-1px); }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-social .btn i { font-size: 19px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-social .btn svg { height: 19px; width: 19px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-social [data-red="facebook"] i { color: #1877f2; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-social [data-red="twitter"] i { color: #1d9bf0; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-social [data-red="discord"] i { color: #5865f2; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-social [data-red="apple"] i { color: var(--rxa-text); }
/* los otros caminos: una lista, cada uno en un renglon */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-metodos { border: 1px solid var(--rxa-border); border-radius: var(--rxa-r12); display: flex; flex-direction: column; margin-bottom: 4px; overflow: hidden; }
body:not(.rxsSinAuth) .login-register .rxsAuth .rxsAuth-metodo {
    align-items: center;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--rxa-border-soft, var(--rxa-border));
    color: var(--rxa-text) !important;
    cursor: pointer;
    display: flex;
    font-size: 13.5px;
    font-weight: 600;
    gap: 12px;
    min-height: 44px;
    padding: 6px 14px;
    text-align: left;
    text-decoration: none;
    transition: background .15s ease;
    width: 100%;
}
body:not(.rxsSinAuth) .login-register .rxsAuth .rxsAuth-metodo:first-child { border-top: 0; }
body:not(.rxsSinAuth) .login-register .rxsAuth .rxsAuth-metodo:hover { background: var(--rxa-accent-soft); }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-metodo-ic { align-items: center; background: var(--rxa-accent-soft); border-radius: 50%; color: var(--rxa-accent); display: inline-flex; flex: 0 0 28px; font-size: 13px; height: 28px; justify-content: center; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-metodo-ic svg { height: 15px; width: 15px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-metodo-tx { flex: 1; min-width: 0; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-metodo-ir { color: var(--rxa-faint); font-size: 11px; transition: transform .15s ease; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-metodo:hover .rxsAuth-metodo-ir { color: var(--rxa-accent); transform: translateX(2px); }
/* adm.css le da 13px a type=text y la clave queda en 1rem: un solo tamano para los dos. 16px en el
 * telefono, que es el minimo con el que iOS no hace zoom al enfocar el campo. */
body:not(.rxsSinAuth) .rxsAuth .form-control { font-size: 14px !important; }
@media (max-width: 767px) { body:not(.rxsSinAuth) .rxsAuth .form-control { font-size: 16px !important; } }
/* el pie: la invitacion a registrarse y, abajo y chicos, los demas links */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-pie { border-top: 1px solid var(--rxa-border); font-size: 13.5px; margin: 18px 0 0; padding: 16px 0 0; text-align: center; }
/* el gris va en la pregunta y no en el renglon: el link de al lado se mezcla con el color que hereda */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-pie > span { color: var(--rxa-muted-tx); }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-pie a.rxsAuth-sec { color: var(--rxa-accent-tx) !important; font-weight: 700; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-links { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin-top: 16px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-pie + .rxsAuth-links { margin-top: 8px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-links a { color: var(--rxa-accent-tx) !important; font-size: 13px; font-weight: 600; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-pie + .rxsAuth-links a { color: var(--rxa-muted-tx) !important; font-size: 12.5px; font-weight: 500; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-pie + .rxsAuth-links a:hover { color: var(--rxa-accent-tx) !important; }
body:not(.rxsSinAuth) .rxsAuth a.rxsAuth-volver { color: var(--rxa-accent-tx) !important; font-size: 13px; font-weight: 600; margin-top: 14px; text-align: center; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-campo[hidden] { display: none; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-check a.rxsAuth-enlace { color: var(--rxa-accent) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
body:not(.rxsSinAuth) .rxsAuth input[type=date].form-control { cursor: pointer; }
/* diseno partido (json.auth.diseno de la fila cat 6): la imagen y `lateral` a un costado; en el telefono, arriba */
body:not(.rxsSinAuth) .login-register .login-box:has(> .card-body > .rxsAuth .rxsAuth-split),
body:not(.rxsSinAuth) #maincontent > .login-register .login-box.card:has(> .card-body > .rxsAuth .rxsAuth-split) { max-width: 880px; overflow: hidden; }
body:not(.rxsSinAuth) .login-register .login-box:has(> .card-body > .rxsAuth .rxsAuth-split) > .card-body,
body:not(.rxsSinAuth) #maincontent > .login-register .login-box.card:has(> .card-body > .rxsAuth .rxsAuth-split) > .card-body { padding: 0 !important; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-split { display: flex; min-height: 520px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-split-der { flex-direction: row-reverse; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado { background: var(--rxa-accent); color: #fff; flex: 0 0 44%; overflow: hidden; position: relative; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado-img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado-cuerpo { background: linear-gradient(to top, rgba(10, 14, 20, .78), rgba(10, 14, 20, 0)); bottom: 0; left: 0; padding: 72px 28px 28px; position: absolute; right: 0; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado-solo .rxsAuth-lado-cuerpo { background: none; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado-titulo { color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 8px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado-sub { color: #fff; font-size: 16px; font-weight: 650; margin: 0 0 6px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado-texto { color: rgba(255, 255, 255, .86); font-size: 14px; line-height: 1.5; margin: 0; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-main { display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0; padding: 36px 40px; }
@media (max-width: 767px) {
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-split,
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-split-der { flex-direction: column; min-height: 0; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado { flex: 0 0 auto; min-height: 150px; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado-cuerpo { padding: 48px 20px 18px; }
    /* el h1 de la pagina (g_auth.js): no baja de la cabecera de la tarjeta (.rxsAuth-h, 22px) */
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado-titulo { font-size: 20px; }
    body:not(.rxsSinAuth) .rxsAuth h1.rxsAuth-lado-titulo { font-size: 24px; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-main { padding: 24px 20px; }
    /* una ilustracion (no una foto) no se lee debajo del texto: en la banda va a la derecha y el texto a su izquierda,
     * y la banda crece con el texto en vez de cortarlo */
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado:has(.rxsAuth-lado-cuerpo) :is(svg.rxsAuth-lado-img, img.rxsAuth-lado-img[src*="/ilus/"]) { left: auto; right: 4px; width: 40%; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado:has(svg.rxsAuth-lado-img, img.rxsAuth-lado-img[src*="/ilus/"]) .rxsAuth-lado-cuerpo { background: none; padding: 20px 42% 18px 20px; position: relative; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado:has(svg.rxsAuth-lado-img, img.rxsAuth-lado-img[src*="/ilus/"]) h1.rxsAuth-lado-titulo { font-size: 21px; }
}
/* la tarjeta no toca los bordes del telefono, sea cual sea el padding que le deja el tema (la de la tienda iba de borde a
 * borde) */
@media (max-width: 575px) {
    body:not(.rxsSinAuth) .login-register:not(.rxsLoginPop) .login-box:has(> .card-body > .rxsAuth):not(:has(.rxsAuth-heroe)) { margin-left: auto; margin-right: auto; max-width: calc(100% - 24px); }
}
/* adentro del modal (rxsLoginModal): sin centrado a pantalla completa ni caja, que ya los pone el modal */
body:not(.rxsSinAuth) .rxsLoginPop .login-register,
body:not(.rxsSinAuth) .login-register.rxsLoginPop { background: none !important; height: auto !important; padding: 0 !important; position: static !important; width: auto !important; }
body:not(.rxsSinAuth) .login-register.rxsLoginPop .login-box { background: none !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; }
body:not(.rxsSinAuth) .login-register.rxsLoginPop .card-body { background: none !important; box-shadow: none !important; padding: 0 !important; }
/* el modal en el telefono: con aire a los costados y adentro (el tema de un sitio le saca el padding al cuerpo de los
 * modales en pantallas chicas y el boton quedaba pegado al borde) */
@media (max-width: 575px) {
    #rxsLoginModal.rxsLoginPop .modal-dialog { margin: 16px auto; max-width: calc(100% - 24px); }
    #rxsLoginModal.rxsLoginPop .modal-body { padding: 4px 20px 22px !important; }
}

/* ============ sin UI v2 ============
 * La tarjeta es la del tema del sitio y puede ser oscura (bsm, eos, meli): los textos siguen su color en
 * vez de un gris pensado para fondo claro. Mismo peso que el bloque de tokens de arriba, y va despues. */
body:not(.rxs-ui-v2) .rxsAuth {
    --rxa-text: currentColor;
    /* la tarjeta del tema puede ser gris medio (la de una tienda): ahi ni el blanco pasa de 7:1, el acento va mas cerca del texto */
    --rxa-accent-tx: color-mix(in oklab, var(--rxa-accent) 20%, var(--rxa-text));
    --rxa-muted: color-mix(in srgb, currentColor 75%, transparent);
    --rxa-faint: color-mix(in srgb, currentColor 58%, transparent);
    --rxa-border: color-mix(in srgb, currentColor 20%, transparent);
    --rxa-hover: color-mix(in srgb, currentColor 7%, transparent);
}
/* ---
 * En v2 el CTA y el aviso los pinta el bloque de las pantallas publicas de ui_v2.css (pass 23b). Sin v2
 * el boton era el gris de Bootstrap: va el acento del sitio. */
body:not(.rxs-ui-v2) .login-register .rxsAuth .rxsAuth-cta {
    background: var(--rxa-accent) !important;
    border: 0 !important;
    border-radius: var(--rxa-r12) !important;
    color: #fff !important;
    font-weight: 600;
}
body:not(.rxs-ui-v2) .login-register .rxsAuth .rxsAuth-cta:hover { filter: brightness(1.06); }
body:not(.rxs-ui-v2) .rxsAuth .rxsAuth-aviso { border-radius: var(--rxa-r8); }
/* los botones de las redes son claros (--rxa-panel) aunque la tarjeta sea oscura: su texto no sigue a la tarjeta */
/* en oscuro --rxa-panel es oscuro (el modal sobre un sitio en oscuro): ahi el texto y la manzana siguen a --rxa-text */
body:not(.rxs-ui-v2):not(.thr-dark) .login-register .rxsAuth .rxsAuth-social .btn { color: #1f2937 !important; }
body:not(.rxs-ui-v2):not(.thr-dark) .rxsAuth .rxsAuth-social [data-red="apple"] i { color: #111; }

/* ============ sitio de filas sin UI v2 (body.rxsWeb): la tarjeta de v2 entre el header y el pie del sitio ============
 * El sitio publico no carga ui_v2.css, asi que la tarjeta era la del tema del sitio y cada piel la redibujaba (la de
 * la liga la dejaba pegada arriba). Aca va la de v2 (pass 23b de ui_v2.css: icono adentro del campo, hairline de
 * marca, CTA de acento) con los tokens --rxa-*. `.rxsAuthWeb` lo pone g_auth.js al montar en #maincontent de un
 * body.rxsWeb sin v2, y le escribe el min-height = el alto visible entre el header y el pie del sitio: la tarjeta
 * queda centrada ahi y el pie a la vista (el vh-100 del montaje medía la ventana entera). El id pesa contra el
 * `#maincontent .login-register` de las pieles. */
body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb {
    --rxa-accent: var(--rx-site-acc, var(--rx-color1, #4f46e5));
    --rxa-text: #1f2937;
    --rxa-muted: #6b7280;
    --rxa-faint: #9ca3af;
    --rxa-border: rgba(17, 24, 39, .12);
    --rxa-panel: #fff;
    --rxa-field: #f5f6f8;
    align-items: center !important;
    background: none !important;
    display: flex !important;
    flex-direction: column;
    height: auto !important;
    justify-content: center !important;
    min-height: 0;
    padding: 40px 16px !important;
    position: relative !important;
    width: auto !important;
}
/* el panel tambien: `body .rxsAuth` (arriba) lo vuelve a tomar de --rx-v2-panel, que en un sitio en oscuro es oscuro, y el
 * :focus del campo (fondo = panel) quedaba negro con este texto oscuro (rexshell.com/login, store, 28-10) */
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .rxsAuth {
    --rxa-panel: #fff;
    --rxa-text: #1f2937;
    --rxa-muted: #6b7280;
    --rxa-faint: #9ca3af;
    --rxa-border: rgba(17, 24, 39, .12);
    --rxa-hover: rgba(17, 24, 39, .05);
    color: var(--rxa-text);
}
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .login-box.card {
    background: var(--rxa-panel) !important;
    border: 1px solid var(--rxa-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px -28px rgba(17, 24, 39, .45), 0 2px 6px rgba(17, 24, 39, .06) !important;
    color: var(--rxa-text) !important;
    margin: 0 auto !important;
    overflow: hidden;
    position: relative;
    width: 100%;
}
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .login-box.card::before {
    background: var(--rxa-accent);
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .card-body { background: none !important; padding: 34px 32px 26px !important; }
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .form-group { margin-bottom: 14px; }
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .input-group {
    background: none !important;
    border: 0 !important;
    border-radius: 12px !important;
    display: flex;
    flex-wrap: nowrap;
    overflow: visible !important;
    position: relative;
}
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .input-group-prepend,
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .input-group-append {
    align-items: center;
    background: none !important;
    border: 0 !important;
    bottom: 0;
    display: flex;
    margin: 0;
    position: absolute;
    top: 0;
    z-index: 5;
}
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .input-group-prepend { left: 0; pointer-events: none; }
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .input-group-append { right: 0; }
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .input-group-text {
    background: none !important;
    border: 0 !important;
    color: var(--rxa-faint) !important;
    font-size: 13px;
    height: auto;
    padding: 0 13px;
}
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .form-control {
    background: var(--rxa-field) !important;
    border: 1px solid var(--rxa-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: var(--rxa-text) !important;
    flex: 1 1 auto;
    font-size: 14px;
    height: 44px !important;
    min-width: 0;
    outline: 0;
    padding: 8px 12px !important;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100% !important;
}
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .input-group .form-control { padding-left: 40px !important; }
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .input-group-append ~ .form-control,
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .input-group:has(.input-group-append) .form-control { padding-right: 40px !important; }
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .form-control::placeholder { color: var(--rxa-faint); }
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .form-control:focus {
    background: var(--rxa-panel) !important;
    border-color: var(--rxa-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rxa-accent) 18%, transparent) !important;
}
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .rxsAuth .rxsAuth-cta {
    box-shadow: 0 10px 22px -12px var(--rxa-accent) !important;
    font-family: inherit;
    font-size: 14px !important;
    height: 46px;
    letter-spacing: .02em;
    margin: 4px 0 0;
}
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) a { color: var(--rxa-accent-tx); }
:is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .rxsAuth .rxsAuth-social .btn { background: var(--rxa-panel) !important; }
@media (max-width: 575px) {
    body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb { padding: 24px 12px !important; }
    :is(body:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb, body:not(.rxs-ui-v2) .login-register.rxsAuthPagina) .card-body { padding: 28px 20px 20px !important; }
}
/* ============ montada en una pagina (`{{rxs.ingreso}}`, rxsAuthPieza) ============
 * La tarjeta va donde la puso la plantilla (la columna de un hero): sin el alto de pantalla, sin el centrado ni el
 * padding de la pantalla de ingreso, y del ancho de su columna. El resto (campos, CTA) es el de la tarjeta web. */
body:not(.rxsSinAuth) .login-register.rxsAuthPagina {
    --rxa-accent: var(--rx-v2-accent, var(--rx-site-acc, var(--rx-color1, #4f46e5)));
    --rxa-text: #1f2937;
    --rxa-muted: #6b7280;
    --rxa-faint: #9ca3af;
    --rxa-border: rgba(17, 24, 39, .12);
    --rxa-panel: #fff;
    --rxa-field: #f5f6f8;
    color: var(--rxa-text);
}
body:not(.rxsSinAuth) .login-register.rxsAuthPagina { background: none !important; display: block !important; height: auto !important; min-height: 0 !important; padding: 0 !important; position: relative !important; width: 100% !important; }
body:not(.rxsSinAuth) .login-register.rxsAuthPagina .login-box { margin: 0 auto !important; max-width: 460px; width: 100%; }
/* las redes primero (`diseno.social = arriba`): una por renglon, grandes, con su nombre */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-social.rxsAuth-social-arriba { grid-auto-flow: row; margin: 4px 0 10px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-social.rxsAuth-social-fila { margin: 0; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-social-arriba + .rxsAuth-social-fila .btn { font-size: 13px; }
body:not(.rxsSinAuth) .login-register .rxsAuth .rxsAuth-social.rxsAuth-social-arriba .btn { font-size: 14.5px; font-weight: 600; height: 48px; justify-content: center; }
/* la lista del costado (`lateral` kind items) */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado-items { list-style: none; margin: 14px 0 0; padding: 0; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado-items li { align-items: flex-start; color: rgba(255, 255, 255, .92); display: flex; font-size: 14px; gap: 10px; line-height: 1.45; margin: 0 0 8px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado-items li i { background: rgba(255, 255, 255, .18); border-radius: 50%; flex: 0 0 20px; font-size: 10px; height: 20px; line-height: 20px; margin-top: 1px; text-align: center; }


/* ============ «Mis preferencias» por contrato (rxsPrefsMount) ============
 * Va adentro del panel (no es una tarjeta de ingreso): secciones con su leyenda, switches, el picker de
 * acento y, debajo del guardado, las acciones (huella, doble factor, TV) cada una en su renglon. */
body:not(.rxsSinAuth) .rxsPrefs {
    --rxa-accent: var(--rx-v2-accent, var(--rx-site-acc, var(--rx-color1, #4f46e5)));
    --rxa-text: var(--rx-v2-text, currentColor);
    --rxa-muted: var(--rx-v2-muted, color-mix(in srgb, currentColor 70%, transparent));
    --rxa-border: var(--rx-v2-border, color-mix(in srgb, currentColor 16%, transparent));
    --rxa-r8: var(--rx-v2-r8, 8px);
    --rxa-r12: var(--rx-v2-r12, 12px);
    max-width: 720px;
}
/* En un escritorio la caja del panel mide el ancho del contenido: el formulario en una columna de lectura
 * y las acciones (huella, doble factor, otro dispositivo, privacidad, baja) en la de la derecha, en vez
 * de dejar media caja vacia. */
@media (min-width: 992px) {
    body:not(.rxsSinAuth) .rxsPrefs { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); column-gap: 48px; align-items: start; }
    body:not(.rxsSinAuth) .rxsPrefs > :not(.rxsPrefs-form):not(.rxsPrefs-acciones) { grid-column: 1 / -1; }
    body:not(.rxsSinAuth) .rxsPrefs > .rxsPrefs-form { max-width: 720px; }
    body:not(.rxsSinAuth) .rxsPrefs > .rxsPrefs-acciones { grid-column: 2; margin-top: 0; }
}
.rxsPrefs .rxsPrefs-titulo { margin: 0 0 16px; font-size: 22px; font-weight: 600; }
.rxsPrefs .rxsPrefs-sec { border: 0; border-top: 1px solid var(--rxa-border); margin: 0 0 8px; padding: 14px 0 4px; }
.rxsPrefs .rxsPrefs-acciones-titulo,
.rxsPrefs .rxsPrefs-sec legend { float: none; width: auto; margin: 0 0 10px; padding: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--rxa-muted); }
.rxsPrefs .rxsPrefs-label { display: block; margin-bottom: 4px; font-weight: 500; }
.rxsPrefs .rxsPrefs-switch { margin: 0 0 10px; }
.rxsPrefs .rxsPrefs-switch .rxsAuth-ayuda { display: block; margin-left: 50px; }
.rxsPrefs .rxsPrefs-sw { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; font-weight: 400; }
.rxsPrefs .rxsAuth-ayuda { color: var(--rxa-muted); font-size: 12.5px; }
.rxsPrefs .rxsPrefs-muestras { display: flex; flex-wrap: wrap; gap: 10px; }
.rxsPrefs .rxsPrefs-muestra { position: relative; margin: 0; cursor: pointer; }
.rxsPrefs .rxsPrefs-muestra input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rxsPrefs .rxsPrefs-muestra span:not(.sr-only) { display: block; width: 44px; height: 24px; border-radius: 12px; border: 1px solid var(--rxa-border); }
.rxsPrefs .rxsPrefs-muestra input:checked + span { outline: 2px solid var(--rxa-accent); outline-offset: 2px; }
.rxsPrefs .rxsPrefs-muestra input:focus-visible + span { outline: 2px dashed var(--rxa-accent); outline-offset: 2px; }
.rxsPrefs .rxsPrefs-guardar { display: block; width: 100%; margin: 14px 0 24px; background: var(--rxa-accent) !important; border: 0 !important; border-radius: var(--rxa-r12) !important; color: #fff !important; font-weight: 600; }
.rxsPrefs .rxsPrefs-guardar:disabled { cursor: progress; filter: grayscale(.4) brightness(.9); }
.rxsPrefs .rxsPrefs-acciones { border-top: 1px solid var(--rxa-border); }
.rxsPrefs .rxsPrefs-accion { padding: 14px 0; border-bottom: 1px solid var(--rxa-border); }
.rxsPrefs .rxsPrefs-accion:empty { display: none; }
.rxsPrefs .rxsPrefs-accion-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rxsPrefs .rxsPrefs-accion-cab .rxsAuth-metodo-ic svg { width: 18px; height: 18px; }
.rxsPrefs .rxsPrefs-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rxsPrefs .rxsPrefs-fila .form-control { flex: 1 1 140px; max-width: 220px; }
.rxsPrefs .rxsPrefs-ok { margin: 0 0 8px; color: var(--rxa-text); }
.rxsPrefs .rxsPrefs-ok .fa { color: #16a34a; }
.rxsPrefs .rxsPrefs-qr { display: block; width: 180px; height: 180px; margin: 8px 0; background: #fff; padding: 6px; border-radius: var(--rxa-r8); }
.rxsPrefs .rxsPrefs-accion-msg { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--rxa-r8); }
.rxsPrefs .rxsPrefs-link { padding: 0; }
/* Los textos de las acciones (navegador · IP · desde, «Cerrar la sesión de … (último uso …)») son largos: el .btn los
   deja en una línea (white-space: nowrap) y en un teléfono se cortaban contra el borde. Que bajen de renglón. */
.rxsPrefs .rxsPrefs-accion .btn { white-space: normal; max-width: 100%; text-align: left; overflow-wrap: anywhere; }
.rxsPrefs .rxsPrefs-accion { min-width: 0; overflow-wrap: anywhere; }
/* Las huellas de a una: el ícono es un SVG sin tamaño propio y sin esto ocupaba todo el ancho. Nombre y detalle a la
   izquierda, «Quitar» a la derecha. */
.rxsPrefs .rxsPrefs-huellas { margin: 10px 0 0; padding: 0; }
.rxsPrefs .rxsPrefs-huellas li { flex-wrap: nowrap; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--rxa-border); }
.rxsPrefs .rxsPrefs-huellas li > span { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.rxsPrefs .rxsPrefs-huellas svg, .rxsPrefs .rxsPrefs-huellas .fa { width: 18px; height: 18px; flex: none; color: var(--rxa-muted, #6b7280); }
.rxsPrefs .rxsPrefs-huellas small { flex-basis: 100%; padding-left: 26px; }
.rxsPrefs .rxsPrefs-huellas .btn { flex: none; }
.rxsPrefs .rxsPrefs-ok, .rxsPrefs .rxsPrefs-accion-cab { min-width: 0; overflow-wrap: anywhere; }
.rxsPrefs .rxsPrefs-peligro { color: #dc2626; }

/* ============ los sitios propios del 1693 (body.rxsPub: rexshell.com, ahoramiturno.com) ============
 * Sus themes por capas (themes/mosto, revision 1693) declaran la banda del sitio (--rv-band) y el alto del header que flota
 * arriba (--rv-solapa-*): la pantalla de ingreso va sobre esa banda, como el encabezado de sus paginas internas, y no sobre el
 * gris de la pagina con el header encima de la tarjeta. Va al final: le gana a la caja de .rxsAuthWeb (mismo peso). */
body.rxsPub #maincontent > .login-register.login-register:not(.rxsLoginPop):has(.rxsAuth) {
    background: var(--rv-band, radial-gradient(760px 420px at 85% 0%, var(--rv-glow, transparent), transparent 70%), linear-gradient(var(--rv-deep, #14172b), var(--rv-deep, #14172b))) !important;
    height: auto !important;
    min-height: 100vh;
    padding: calc(var(--rv-solapa-lg, 110px) + 32px) 16px 72px !important;
}
@media (max-width: 1199px) { body.rxsPub #maincontent > .login-register.login-register:not(.rxsLoginPop):has(.rxsAuth) { padding-top: calc(var(--rv-solapa-md, 110px) + 32px) !important; } }
@media (max-width: 991px) { body.rxsPub #maincontent > .login-register.login-register:not(.rxsLoginPop):has(.rxsAuth) { margin-top: calc(-1 * var(--rv-subir-sm, 0px)) !important; padding: calc(var(--rv-solapa-sm, 75px) + 24px) 12px 48px !important; } }
/* el costado del diseno partido sin imagen: la banda del sitio y no el acento plano */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado.rxsAuth-lado-solo { background: var(--rv-band, var(--rxa-accent)); }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado-solo .rxsAuth-lado-cuerpo { bottom: auto; padding: 44px 32px; position: relative; }
/* `{{rxs.ingreso primero=mail}}` (rxsAuthPiezaPasos): el e-mail y el boton en una fila, como el alta de Tiendanube; en el
   telefono, uno abajo del otro como el resto del formulario. */
@media (min-width: 576px) {
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-form.rxsAuth-primero { align-items: stretch; display: flex; flex-wrap: wrap; gap: 8px; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-primero > .rxsAuth-campo { flex: 1 1 200px; margin-bottom: 0 !important; min-width: 0; }
    body:not(.rxsSinAuth) .login-register .rxsAuth .rxsAuth-primero > .rxsAuth-cta { align-self: stretch; flex: 0 0 auto; height: auto !important; margin: 0 !important; min-height: 0 !important; padding: 0 22px !important; width: auto; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-primero > .rxsAuth-captcha { flex-basis: 100%; order: 3; }
}

/* El interruptor de dos formas de identificarse (documento o e-mail) */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-alterna { background: var(--rxa-hover); border-radius: 999px; display: flex; gap: 2px; margin-bottom: 8px; padding: 3px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-alterna button { background: none; border: 0; border-radius: 999px; color: var(--rxa-muted); cursor: pointer; flex: 1; font-size: 13px; font-weight: 600; padding: 6px 10px; transition: background .15s, color .15s; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-alterna button.activo { background: var(--rxa-panel); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); color: var(--rxa-text); }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-alterna button:focus-visible { outline: 2px solid var(--rxa-accent); outline-offset: 1px; }
/* un metodo declarado para el pie: se lee como el link de al lado */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-pie button.rxsAuth-sec { background: none; border: 0; color: var(--rxa-accent-tx); cursor: pointer; font: inherit; font-weight: 600; padding: 0; }

/* El formulario por pasos: las barras, el titulo del paso y un solo paso a la vista */
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-etapas { display: flex; gap: 8px; margin: 0 0 18px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-etapas span { background: var(--rxa-border); border-radius: 4px; flex: 1; height: 4px; transition: background .25s; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-etapas span.hecha { background: var(--rxa-accent); }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-etapa-t { color: var(--rxa-text); font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 14px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-fuera { display: none !important; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-atras { background: none; border: 0; color: var(--rxa-muted); cursor: pointer; display: block; font-size: 14px; margin: 10px auto 0; padding: 4px 10px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-atras[hidden] { display: none; }
body:not(.rxsSinAuth) .rxsAuth.rxsAuth-enEtapa .rxsAuth-sep,
body:not(.rxsSinAuth) .rxsAuth.rxsAuth-enEtapa .rxsAuth-social,
body:not(.rxsSinAuth) .rxsAuth.rxsAuth-enEtapa .rxsAuth-metodos,
body:not(.rxsSinAuth) .rxsAuth.rxsAuth-enEtapa .rxsAuth-texto,
body:not(.rxsSinAuth) .rxsAuth.rxsAuth-enEtapa .rxsAuth-h { display: none; }
@media (min-width: 576px) {
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-grilla { column-gap: 12px; display: grid; grid-template-columns: 1fr 1fr; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-grilla > * { grid-column: 1 / -1; min-width: 0; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-grilla > .rxsAuth-campo:not(.rxsAuth-check):has(input[type=text], input[type=number], select) { grid-column: auto; }
}

/* El heroe: la foto a pantalla completa, por encima del tema, con la tarjeta de vidrio. La foto puede ser clara u oscura:
   el velo garantiza el contraste y la tarjeta es siempre oscura, con sus tokens. */
body:not(.rxsSinAuth) .login-register:has(.rxsAuth-heroe),
body:not(.rxsSinAuth) .login-register .login-box:has(.rxsAuth-heroe),
body:not(.rxsSinAuth) .login-register .login-box:has(.rxsAuth-heroe) > .card-body { backdrop-filter: none !important; background: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe {
    --rxa-text: #fff; --rxa-muted: rgba(255, 255, 255, .72); --rxa-faint: rgba(255, 255, 255, .55); --rxa-border: rgba(255, 255, 255, .22);
    --rxa-border-soft: rgba(255, 255, 255, .14); --rxa-panel: rgba(255, 255, 255, .16); --rxa-hover: rgba(255, 255, 255, .1);
    background: linear-gradient(135deg, var(--rx-color1, #1f2937), var(--rx-color2, #111827));
    color: #fff; display: flex; flex-direction: column; inset: 0; overflow-y: auto; position: fixed; z-index: 1050;
}
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-img { height: 100%; inset: 0; object-fit: cover; position: fixed; width: 100%; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-velo { background: linear-gradient(90deg, rgba(8, 12, 18, .74), rgba(8, 12, 18, .46)); inset: 0; position: fixed; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-cuerpo { align-items: center; display: flex; flex: 1 0 auto; gap: 48px; justify-content: space-between; margin: 0 auto; max-width: 1200px; padding: 40px 48px; position: relative; width: 100%; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-izq .rxsAuth-heroe-cuerpo { flex-direction: row-reverse; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-lado { flex: 1 1 auto; min-width: 0; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-logo { display: inline-block; margin-bottom: 24px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-logo img { display: block; max-height: 72px; max-width: 220px; width: auto; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-lado .rxsAuth-lado-titulo { color: #fff; font-size: clamp(32px, 4.2vw, 56px); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin: 0 0 16px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-lado .rxsAuth-lado-sub { color: rgba(255, 255, 255, .86); font-size: 18px; font-weight: 500; margin: 0 0 12px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-lado .rxsAuth-lado-texto { color: rgba(255, 255, 255, .7); font-size: 14px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-tarjeta { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(22, 26, 32, .58); border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); flex: 0 0 448px; max-width: 100%; padding: 36px 40px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-tarjeta :is(.rxsAuth-h, .rxsAuth-titulo, .rxsAuth-sub, .box-title, .rxsAuth-check label) { color: #fff !important; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-tarjeta :is(.rxsAuth-texto, .rxsAuth-paso, .rxsAuth-ayuda, .rxsAuth-pie span, .rxsAuth-sep) { color: var(--rxa-muted) !important; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-tarjeta :is(a, .rxsAuth-pie button.rxsAuth-sec, .rxsAuth-volver) { color: #fff !important; }
body:not(.rxsSinAuth) :is(#maincontent, .login-register) .rxsAuth .rxsAuth-heroe-tarjeta .input-group .form-control { background: rgba(255, 255, 255, .1) !important; border-color: var(--rxa-border) !important; color: #fff !important; }
body:not(.rxsSinAuth) :is(#maincontent, .login-register) .rxsAuth .rxsAuth-heroe-tarjeta .input-group .form-control::placeholder { color: rgba(255, 255, 255, .6) !important; opacity: 1; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-tarjeta select.form-control option { color: #111; }
body:not(.rxsSinAuth) :is(#maincontent, .login-register) .rxsAuth .rxsAuth-heroe-tarjeta .input-group .input-group-text { background: transparent !important; border-color: transparent !important; color: rgba(255, 255, 255, .78) !important; }
body:not(.rxsSinAuth) :is(#maincontent, .login-register) .rxsAuth .rxsAuth-heroe-tarjeta .input-group .input-group-text * { color: inherit !important; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-tarjeta .rxsAuth-metodo-ic { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-tarjeta .rxsAuth-metodo-ic * { color: inherit !important; fill: currentColor; }
html:has(.rxsAuth-heroe), body:has(.rxsAuth-heroe) { overflow: hidden !important; scrollbar-gutter: auto !important; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-tarjeta input[type=date] { color-scheme: dark; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-pie { align-items: center; background: rgba(0, 0, 0, .35); color: rgba(255, 255, 255, .7); display: flex; flex: 0 0 auto; font-size: 13px; justify-content: space-between; padding: 14px 48px; position: relative; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-redes { display: flex; gap: 16px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-redes a { color: #fff; display: block; height: 20px; width: 20px; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-redes svg { display: block; height: 100%; width: 100%; }
@media (max-width: 899px) {
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-cuerpo,
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-izq .rxsAuth-heroe-cuerpo { align-items: stretch; flex-direction: column; gap: 20px; justify-content: center; padding: 28px 16px; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-lado { flex: 0 0 auto; text-align: center; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-logo { margin-bottom: 12px; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-logo img { margin: 0 auto; max-height: 52px; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-lado .rxsAuth-lado-titulo { font-size: 26px; margin-bottom: 4px; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-lado .rxsAuth-lado-sub,
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-lado .rxsAuth-lado-texto { display: none; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-tarjeta { flex: 0 0 auto; padding: 24px 20px; width: 100%; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-heroe-pie { padding: 12px 16px; }
}