/* 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));
    --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);
}

/* ============ 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; }
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; }
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; }
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); display: block; font-size: 12px; line-height: 1.4; margin: 6px 2px 0; }
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); 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) !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-faint); 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); color: var(--rxa-muted); font-size: 13.5px; margin: 18px 0 0; padding: 16px 0 0; text-align: center; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-pie a.rxsAuth-sec { color: var(--rxa-accent) !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) !important; font-size: 13px; font-weight: 600; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-pie + .rxsAuth-links a { color: var(--rxa-faint) !important; font-size: 12.5px; font-weight: 500; }
body:not(.rxsSinAuth) .rxsAuth .rxsAuth-pie + .rxsAuth-links a:hover { color: var(--rxa-accent) !important; }
body:not(.rxsSinAuth) .rxsAuth a.rxsAuth-volver { color: var(--rxa-accent) !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; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-lado-titulo { font-size: 20px; }
    body:not(.rxsSinAuth) .rxsAuth .rxsAuth-main { padding: 24px 20px; }
}
/* 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; }

/* ============ 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;
    --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 */
body:not(.rxs-ui-v2) .login-register .rxsAuth .rxsAuth-social .btn { color: #1f2937 !important; }
body:not(.rxs-ui-v2) .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.rxsWeb: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;
}
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .rxsAuth {
    --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);
}
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .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%;
}
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .login-box.card::before {
    background: var(--rxa-accent);
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .card-body { background: none !important; padding: 34px 32px 26px !important; }
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .form-group { margin-bottom: 14px; }
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .input-group {
    background: none !important;
    border: 0 !important;
    border-radius: 12px !important;
    display: flex;
    flex-wrap: nowrap;
    overflow: visible !important;
    position: relative;
}
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .input-group-prepend,
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .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;
}
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .input-group-prepend { left: 0; pointer-events: none; }
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .input-group-append { right: 0; }
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .input-group-text {
    background: none !important;
    border: 0 !important;
    color: var(--rxa-faint) !important;
    font-size: 13px;
    height: auto;
    padding: 0 13px;
}
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .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;
}
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .input-group .form-control { padding-left: 40px !important; }
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .input-group-append ~ .form-control,
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .input-group:has(.input-group-append) .form-control { padding-right: 40px !important; }
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .form-control::placeholder { color: var(--rxa-faint); }
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .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;
}
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .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;
}
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb a { color: var(--rxa-accent); }
body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .rxsAuth .rxsAuth-social .btn { background: var(--rxa-panel) !important; }
@media (max-width: 575px) {
    body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb { padding: 24px 12px !important; }
    body.rxsWeb:not(.rxs-ui-v2) #maincontent > .login-register.rxsAuthWeb .card-body { padding: 28px 20px 20px !important; }
}

/* ============ «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;
}
.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-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 .rxsPrefs-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rxsPrefs .rxsPrefs-sw-pista { position: relative; flex: 0 0 38px; height: 22px; border-radius: 11px; background: var(--rxa-border); transition: background .15s; }
.rxsPrefs .rxsPrefs-sw-pista::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.rxsPrefs .rxsPrefs-sw input:checked + .rxsPrefs-sw-pista { background: var(--rxa-accent); }
.rxsPrefs .rxsPrefs-sw input:checked + .rxsPrefs-sw-pista::after { transform: translateX(16px); }
.rxsPrefs .rxsPrefs-sw input:focus-visible + .rxsPrefs-sw-pista { outline: 2px solid var(--rxa-accent); outline-offset: 2px; }
.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; }
.rxsPrefs .rxsPrefs-peligro { color: #dc2626; }