/* =============================================================================
   BA Ferial tenant theme — Identity
   -----------------------------------------------------------------------------
   Scoped to `body.tenant-baferial` so EBA + Ecoparque are never affected.

   Sources of truth (Figma):
     - Login            99:3462
     - Registro Paso 1  43:7541   (registro-empty)
     - Registro Paso 3  655:10372 (crear cuenta)
     - Error general    86:2618
     - Header (login)   191:3661  (cyan band, "Registrate" black underlined)
     - Footer           184:3357  (#05101D + cyan filete + social/legals + AFIP)

   Design tokens (from Figma library):
     Primary           #009FE3 (cyan)         Secondary-darken  #000000
     Primary-darken    #0381B7               Neutral           #0B2739
     Tertiary          #88DBFF               Neutral-darken    #05101D
     White/lighten     #F5F5F4               Gray/lighten      #CCCCCC
     White/darken      #EAEBEA               Gray/darken       #50545B
     Grays/Gray 2      #AEAEB2

   Type ramp:
     Title 1   Raleway ExtraBold 72/80         (tagline primary)
     Title 1b  Raleway Bold      64/72         (tagline secondary)
     Title 4   Montserrat Bold   32/40 / -1%   (form heading + error h1)
     Body 2    Raleway Medium    16/24         (paragraph copy)
     Button 2  Montserrat Bold   14/22         (CTA labels)
     Subtitle1 Montserrat Bold   18/22         (header links)

   Layout grid (Figma 1920 viewport):
     Container max-width 1552 (centered)
     Tagline (440w) at left=128 within container
     Form    (546w) at left=828 within container
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Raleway:wght@500;700;800&display=swap');

body.tenant-baferial {
    /* Belt-and-suspenders palette redeclaration so older Commons NuGets that
       still ship the previous black/green tokens don't bleed through. */
    --tenant-color-primary:   #009FE3;
    --tenant-color-secondary: #0B2739;
    --tenant-color-tertiary:  #88DBFF;

    --bf-bg-deep:            #05101D;
    --bf-bg-mid:             #1B3E5C;
    --bf-text-on-dark:       #F5F5F4;
    --bf-text-muted:         #B6B7B7;
    --bf-cta-hover:          #0381B7;
    --bf-input-bg:           #000000;
    --bf-input-border:       #F5F5F4;
    --bf-input-placeholder:  #CCCCCC;
    --bf-disabled-btn-bg:    #CCCCCC;
    --bf-disabled-btn-text:  #50545B;
    --bf-divider:            #EAEBEA;

    background-color: var(--tenant-color-secondary);
    color: var(--bf-text-on-dark);
    font-family: "Montserrat", "Raleway", system-ui, -apple-system, sans-serif;
}

body.tenant-baferial h1,
body.tenant-baferial h2,
body.tenant-baferial h3,
body.tenant-baferial h4 {
    font-family: "Raleway", "Montserrat", system-ui, sans-serif;
    font-weight: 700;
}

body.tenant-baferial a {
    color: var(--tenant-color-primary);
    text-decoration: none;
}

/* ---------- Header — Figma 191:3661 ----------------------------------------
   Cyan band #0381B7 ("Primary-darken"), 88px tall.
   "Registrate" / "Ingresar" link: Montserrat Bold 18/22, BLACK underline
   (Figma 191:3664 — text-black). Override the EBA white-on-cyan default. */
body.tenant-baferial header,
body.tenant-baferial header.header-login {
    background-color: var(--bf-cta-hover) !important;
    border-bottom: none !important;
    color: #000 !important;
    min-height: 88px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

body.tenant-baferial header .cont-1300 {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1552px !important;
    margin: 0 auto !important;
    padding: 0 128px !important;
}

body.tenant-baferial header a:first-child {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

body.tenant-baferial header img {
    height: 41px !important;       /* Figma Top header logo = 155x41 */
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0;
    display: block;
}

/* Header CTAs — Figma 43:7541: "Crear cuenta" (white pill) + "Iniciar sesión"
   (dark pill), Montserrat Bold 14, fully rounded, side by side. */
body.tenant-baferial header .header-ctas {
    display: flex;
    align-items: center;
    gap: 12px;
}
body.tenant-baferial header .btn-registro,
body.tenant-baferial header .btn-login {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.875rem;           /* 14px Button 2 */
    line-height: 1;
    text-decoration: none !important;
    padding: 0.6875rem 1.375rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
/* "Crear cuenta" — OUTLINE pill (transparent, white border + text) per Figma 1441:26139 */
body.tenant-baferial header .btn-registro {
    background-color: transparent !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}
body.tenant-baferial header .btn-registro:hover {
    background-color: #fff !important;
    color: var(--tenant-color-secondary) !important;
}
/* "Iniciar sesión" — dark pill, white text */
body.tenant-baferial header .btn-login {
    background-color: var(--tenant-color-secondary) !important;
    color: #fff !important;
    border: 1px solid var(--tenant-color-secondary) !important;
}
body.tenant-baferial header .btn-login:hover {
    background-color: var(--bf-bg-deep) !important;
}
/* Figma header pill has no leading user icon */
body.tenant-baferial header .btn-login i { display: none !important; }

/* Registro stepper (breadcrumb) — Figma 43:7573: pill chips + chevrons,
   active chip filled cyan, completed chips cyan-outlined, upcoming muted. */
body.tenant-baferial .registro-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;                 /* Figma: the 3 chips sit on ONE line */
    margin: 0 0 1.75rem;
}
body.tenant-baferial .registro-stepper .step {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.75rem;                /* 12px — keeps all 3 chips on one 546px row */
    line-height: 1;
    padding: 0.4rem 0.625rem;
    border-radius: 999px;
    border: 1px solid rgba(245, 245, 244, 0.4);
    color: var(--bf-text-muted);
    white-space: nowrap;
}
body.tenant-baferial .registro-stepper .step.is-active {
    background-color: var(--tenant-color-primary);
    border-color: var(--tenant-color-primary);
    color: #fff;
}
body.tenant-baferial .registro-stepper .step.is-done {
    border-color: var(--tenant-color-primary);
    color: var(--tenant-color-primary);
}
body.tenant-baferial .registro-stepper .step-sep {
    color: var(--bf-text-muted);
    font-size: 0.75rem;
}
/* Legacy hardcoded .stepper (InformacionAdicional / VerificarTelefono) uses EBA's
   labels ("Otros datos"/"Identificate"). baferial renders the _RegistroBreadcrumb
   partial (.registro-stepper) with the Figma labels instead, so hide the legacy one
   for baferial only — EBA keeps it untouched. */
body.tenant-baferial .stepper { display: none !important; }

/* Field hint under Género — Figma "Igual al del documento". */
body.tenant-baferial .field-hint {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 0.8125rem;
    line-height: 1.2;
    color: var(--bf-text-muted);
    margin-top: 0.375rem;
}

/* ---------- Multi-step registro (paso 2 "Validá" / paso 3 "Creá tu cuenta") ----
   InformacionAdicional (.id-extranjero), VerificarTelefono (.page-validacion) and
   Usuario (.page-crear-cuenta) have taller forms with their own markup (.two-inputs,
   .acciones/.botonera, bare <input>, <small> labels). Scoped here so the approved
   paso-1 (.page-registro) and login (.page-login) are NOT affected. */
body.tenant-baferial .id-extranjero,
body.tenant-baferial .page-validacion,
body.tenant-baferial .page-crear-cuenta {
    align-items: flex-start !important;   /* top-align tall forms — vertical-centering was pushing everything down */
    padding-top: 3rem !important;
}
body.tenant-baferial .id-extranjero .cont-1300,
body.tenant-baferial .page-validacion .cont-1300,
body.tenant-baferial .page-crear-cuenta .cont-1300 {
    align-items: flex-start !important;
}
/* keep both columns pinned to the top at their natural height on these taller
   steps — otherwise the (short) headline column stretches to the row height and
   balloons the page, pushing the footer far below the fold. */
body.tenant-baferial .id-extranjero .box-right,
body.tenant-baferial .page-validacion .box-right,
body.tenant-baferial .page-crear-cuenta .box-right,
body.tenant-baferial .id-extranjero .box-left,
body.tenant-baferial .page-validacion .box-left,
body.tenant-baferial .page-crear-cuenta .box-left {
    align-self: flex-start !important;
    height: fit-content !important;
    min-height: 0 !important;   /* main.css puts min-height:1603px on .id-extranjero .box-left → balloons the page */
}
/* headline column keeps its fixed width (main.css makes it flex:1 in this layout) */
body.tenant-baferial .id-extranjero .box-left,
body.tenant-baferial .page-validacion .box-left,
body.tenant-baferial .page-crear-cuenta .box-left {
    flex: 0 0 440px !important;
}

/* Nombre + Apellido inline */
body.tenant-baferial .two-inputs { display: flex; gap: 1rem; }
body.tenant-baferial .two-inputs .form-box { flex: 1; }

/* (Documento + Nacionalidad are not rendered as fields for baferial on paso 2 —
   they're posted as hidden inputs from the view — so no CSS hiding is needed.) */

/* <small> field labels above bare inputs + "Datos Personales" subheading */
body.tenant-baferial .modulo-registro form small,
body.tenant-baferial .modulo-registro .form-box small {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 0.8125rem;
    color: var(--bf-text-on-dark) !important;   /* labels were dark/illegible on the navy panel */
    margin-bottom: 0.375rem;
}
body.tenant-baferial .form-box input ~ div {
    margin-top: 0.5rem;
}
body.tenant-baferial .modulo-registro h6 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--bf-text-on-dark) !important;
    margin: 0 0 1rem;
}
/* native date picker indicator visible on the black input */
body.tenant-baferial input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
}

/* Action row (Cancelar / Continuar / Volver / Enviar) */
body.tenant-baferial .acciones,
body.tenant-baferial .botonera {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}
body.tenant-baferial .acciones .btn-siguiente {
    flex: 1;
    height: 56px;
    border-radius: 999px !important;
    background-color: var(--tenant-color-primary) !important;
    color: #fff !important;
    border: none !important;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
}
body.tenant-baferial .acciones .btn-siguiente:hover { background-color: var(--bf-cta-hover) !important; }
body.tenant-baferial .acciones .btn-outline,
body.tenant-baferial .botonera .btn-outline-primary {
    flex: 1;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
    background-color: transparent !important;
    color: var(--bf-text-on-dark) !important;
    border: 1px solid var(--bf-text-on-dark) !important;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none !important;
}
/* make the outline-button LABEL legible too (main.css darkens .button-1 text) */
body.tenant-baferial .acciones .btn-outline,
body.tenant-baferial .acciones .btn-outline *,
body.tenant-baferial .botonera .btn-outline-primary,
body.tenant-baferial .botonera .btn-outline-primary * {
    color: var(--bf-text-on-dark) !important;
}

body.tenant-baferial .mainLayout .box-right .modulo-registro form .acciones .btn-outline,
body.tenant-baferial .mainLayout .box-right .modulo-registro form .acciones .btn-outline * {
    color: var(--bf-text-on-dark) !important;
    border-color: var(--bf-text-on-dark) !important;
}

/* ---------- Paso 3 (Creá tu cuenta) extras — Figma 655:10372 ---------------- */
/* T&C + newsletter copy legible on the dark band */
body.tenant-baferial .tyc span,
body.tenant-baferial .tyc .body-2,
/* "Mantener sesión iniciada" label — same dark-panel legibility as .tyc span
   (main.css darkens the checkbox label span; .recordarme was missing here). */
body.tenant-baferial .recordarme span,
body.tenant-baferial .recordarme label {
    color: var(--bf-text-on-dark) !important;
}
body.tenant-baferial .newsletter-opt { margin-top: 0.75rem; }
/* divider between the email block and the password block */
body.tenant-baferial .form-divider {
    border: none;
    border-top: 1px solid rgba(245, 245, 244, 0.2);
    width: 100%;
    margin: 0.25rem 0 1.75rem;
}
/* stacked actions: "Crear cuenta" full-width + "Cancelar" text link below */
body.tenant-baferial .botonera-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}
body.tenant-baferial .botonera-stacked .btn-primary { width: 100%; }
body.tenant-baferial .btn-cancelar-link {
    color: var(--tenant-color-primary) !important;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
}

/* ---------- Main layout backdrop ------------------------------------------ */
body.tenant-baferial .mainLayout {
    background-color: var(--tenant-color-secondary);
    min-height: calc(100vh - 88px - 220px);   /* match the .page height so no navy gap appears below the hero, and the footer sits at the fold */
}

/* Concert-crowd photo with dark navy overlay — Figma 99:3463 "331 1" on top
   of the Rectangle 2 (cyan #009FE3) band. We approximate with a gradient
   tint layered over the bitmap, since the bitmap already has the cyan
   gradient mostly baked in. */
body.tenant-baferial .page-login,
body.tenant-baferial .page-registro,
body.tenant-baferial .page-identificacion,
body.tenant-baferial .page-crear-cuenta,
body.tenant-baferial .page-forgot-password,
body.tenant-baferial .page-reset-password {
    /* BAFCS-54: antes había una banda oscura por porcentaje (48%→86%) que hacía de fondo del
       form; era frágil (no coincidía con el form del Login → inputs afuera del oscuro) y ahora
       el fondo del form lo da su propio panel .box-right. Dejamos un oscurecido navy PAREJO
       sobre la foto, sin banda. */
    background-image:
        linear-gradient(rgba(5,16,29,0.55), rgba(5,16,29,0.55)),
        url('/images/baferial/bg-registro.png') !important;                         /* Figma "331 1": the crowd photo */
    background-color: var(--tenant-color-secondary) !important;  /* navy fallback so a slow/missing hero bitmap never flashes the main.css white */
    background-size: cover, cover, cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--bf-text-on-dark);
    min-height: calc(100vh - 88px - 220px);   /* header 88 + this + footer 220 = 100vh, so the footer shows without scrolling */
    display: flex;
    align-items: center;
    padding: 4rem 0;
    position: relative;
}

/* main.css (EBA base) paints .box-right (and the left hero column) solid white
   with its own hero bitmap. That white box is the "card" that swallows the
   white heading. The form must sit directly on the dark page; the left column
   is text-only over the page's crowd photo. */
body.tenant-baferial .box-left {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* BAFCS-54: el fondo oscuro del form venía SOLO de la banda de porcentaje del .page-*
   (48%→86% del viewport). Esa banda no coincide con el ancho/posición real del form del
   Login (más angosto/otra posición que el de registro), así que los inputs sobresalían a la
   derecha, fuera del oscuro. Le damos a .box-right su PROPIO panel oscuro con padding, así el
   form siempre se apoya sobre fondo oscuro parejo, sin depender de la matemática de la banda. */
body.tenant-baferial .box-right {
    background-color: rgba(5, 16, 29, 0.92) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    /* BAFCS-54: más aire arriba/abajo para que el panel oscuro no quede "corto" en la parte
       superior respecto de la banda full-height anterior (mobile lo baja en el @media 600px). */
    padding: 3.5rem 2.5rem !important;
    box-sizing: border-box !important;
}

/* main.css paints an EBA hero bitmap (images/bg-registro.png — the obelisco
   band) via .box-left::after. baferial's left column is text-only over the
   page's crowd photo, so kill the pseudo-element. */
body.tenant-baferial .box-left::before,
body.tenant-baferial .box-left::after {
    content: none !important;
    background: none !important;
    display: none !important;
}

/* Grid: 440px tagline | gap | 546px form, centered in a 1552px shell. */
body.tenant-baferial .page-login .cont-1300,
body.tenant-baferial .page-registro .cont-1300,
body.tenant-baferial .page-identificacion .cont-1300,
body.tenant-baferial .page-crear-cuenta .cont-1300,
body.tenant-baferial .page-forgot-password .cont-1300,
body.tenant-baferial .page-reset-password .cont-1300 {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
    max-width: 1552px !important;
    margin: 0 auto !important;
    padding: 0 128px !important;
    width: 100% !important;
}

/* ---------- Left tagline (frase-registro 99:3468 / 43:7545) ---------------- */
body.tenant-baferial .box-left {
    flex: 0 0 440px;
    max-width: 440px;
    color: var(--bf-text-on-dark);
    display: flex !important;            /* main.css makes .page-login .box-left a row → h1/h2 sit side by side; force a column so the tagline lines always stack (login + registro alike) */
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-top: 0 !important;
}

body.tenant-baferial .box-left h1,
body.tenant-baferial .box-left h2,
body.tenant-baferial .box-left p {
    font-family: "Raleway", sans-serif !important;
    letter-spacing: 0;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--bf-text-on-dark) !important;
    text-align: left !important;
    display: block !important;
}

/* Primary line — 72/80 ExtraBold, primary cyan. line-height tight so it
   sits flush against the secondary h2 — Figma 99:3468 has 0 gap between
   the two lines (the leading IS the gap). */
body.tenant-baferial .box-left h1 {
    font-size: 4.5rem !important;        /* 72px */
    line-height: 1.111 !important;       /* 80/72 */
    font-weight: 800 !important;
    color: var(--tenant-color-primary) !important;
}

/* Secondary line — 64/72 Bold, white. Only rendered when tagline-secondary is set. */
body.tenant-baferial .box-left h2 {
    font-size: 4rem !important;          /* 64px */
    font-weight: 700 !important;
    line-height: 1.125 !important;       /* 72/64 */
    color: var(--bf-text-on-dark) !important;
}

/* ---------- Right form column ---------------------------------------------- */
body.tenant-baferial .box-right {
    flex: 0 0 546px;
    max-width: 546px;
    display: flex !important;
    justify-content: center;
    /* BAFCS-54: esta regla venía DESPUÉS del panel oscuro y con `padding-top:0` le anulaba el
       aire superior → el panel quedaba pegado al stepper. Respetamos el padding del panel. */
    padding-top: 3.5rem !important;
}

body.tenant-baferial .box-login,
body.tenant-baferial .box-registro,
body.tenant-baferial .modulo-registro,
body.tenant-baferial .box-forgot-password,
body.tenant-baferial .box-reset-password {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;               /* the .box-right dark panel provides the padding now */
    width: 100% !important;
    max-width: 546px !important;
    color: var(--bf-text-on-dark) !important;
}

/* Form heading — Title 4 / 32px Montserrat Bold, -1% letter-spacing */
body.tenant-baferial .box-login h1,
body.tenant-baferial .box-login h2,
body.tenant-baferial .box-registro h1,
body.tenant-baferial .box-registro h2,
body.tenant-baferial .modulo-registro h1,
body.tenant-baferial .modulo-registro h2 {
    color: var(--tenant-color-primary) !important;   /* Figma: form headings are cyan (#009FE3) */
    font-family: "Montserrat", sans-serif !important;
    font-size: 2rem !important;          /* 32px */
    font-weight: 700 !important;
    line-height: 1.25;                   /* 40/32 */
    letter-spacing: -0.01em;
    margin: 0 0 1rem !important;
    text-align: left !important;
}

/* Subheader copy under the heading (Para empezar… / Para finalizar…) */
body.tenant-baferial .modulo-registro p,
body.tenant-baferial .box-registro > p,
body.tenant-baferial .box-login > p {
    font-family: "Raleway", sans-serif !important;
    font-weight: 500 !important;
    font-size: 1rem !important;          /* 16px Body 2 */
    line-height: 1.5;                    /* 24/16 */
    color: var(--bf-text-on-dark) !important;
    margin: 0 0 2rem !important;
}

/* Input row spacing */
body.tenant-baferial .form-box {
    margin-bottom: 1.5rem !important;
    position: relative;
}

/* Registro paso 1 field grid — Figma 43:7541: "Número de documento" full width
   on top, then "Nacionalidad" + "Género" side-by-side. Pure CSS reflow (order +
   flex-wrap) so the shared markup is untouched; other tenants keep the stacked
   layout because this is scoped to body.tenant-baferial + #form-documento. */
body.tenant-baferial #form-documento {
    display: flex !important;
    flex-wrap: wrap;
    column-gap: 1rem;
    align-items: flex-start;
}
body.tenant-baferial #form-documento > * { width: 100%; }
body.tenant-baferial #form-documento .form-box:has(#inputDocumento) { order: 1; }
body.tenant-baferial #form-documento .form-box:has(#nacionalidad)   { order: 2; width: calc(50% - 0.5rem); }
body.tenant-baferial #form-documento .form-box:has(#Input_Sexo)     { order: 3; width: calc(50% - 0.5rem); }
body.tenant-baferial #form-documento .cf-turnstile { order: 4; margin-bottom: 1.5rem; }
body.tenant-baferial #form-documento #SubmitButton  { order: 5; }

body.tenant-baferial .form-label,
body.tenant-baferial .form-label-container label {
    display: none !important;            /* Figma uses placeholder-only inputs */
}

/* DARK inputs — Figma "Text field-dark" (98:2731 / 98:2733).
   56px tall, 4px radius, white border 1px, black bg, white text. */
body.tenant-baferial .form-control,
body.tenant-baferial input[type="email"],
body.tenant-baferial input[type="password"],
body.tenant-baferial input[type="text"],
body.tenant-baferial input[type="tel"],
body.tenant-baferial input[type="date"],
body.tenant-baferial input[type="number"],
body.tenant-baferial select.form-control,
body.tenant-baferial select.form-select {
    width: 100% !important;
    height: 56px !important;
    padding: 0 1rem !important;
    border: 1px solid var(--bf-input-border) !important;
    border-radius: 4px !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 1rem !important;
    color: var(--bf-text-on-dark) !important;
    background-color: var(--bf-input-bg) !important;
    transition: border-color 0.15s ease;
}

body.tenant-baferial .form-control::placeholder,
body.tenant-baferial input::placeholder {
    color: var(--bf-input-placeholder);
    font-family: "Montserrat", sans-serif;
}

body.tenant-baferial select.form-control,
body.tenant-baferial select.form-select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #CCC 50%),
        linear-gradient(135deg, #CCC 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.5rem !important;
}

body.tenant-baferial .form-control:focus,
body.tenant-baferial input:focus,
body.tenant-baferial select:focus {
    outline: none !important;
    border-color: var(--tenant-color-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.25) !important;
}

/* Leading icon on email/password inputs — rendered as the input's bg-image. */
body.tenant-baferial input[type="email"] {
    background-image: var(--tenant-asset-icon-mail) !important;
    background-repeat: no-repeat;
    background-position: 1rem center;
    background-size: 20px 20px;
    padding-left: 3rem !important;
    background-color: var(--bf-input-bg) !important;
}

body.tenant-baferial input[type="password"] {
    background-image: var(--tenant-asset-icon-key) !important;
    background-repeat: no-repeat;
    background-position: 1rem center;
    /* BAFCS-54: el key.svg trae `preserveAspectRatio="none"` + width/height 100%, así que se
       ESTIRA a cualquier caja e ignora su proporción (viewBox 24x14). Con `auto` el alto queda
       indefinido y se deforma. Fijamos ancho y alto explícitos en el ratio correcto 24:14
       (20 x 11.67px) para que llene la caja sin distorsión. */
    background-size: 20px 11.67px !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
    background-color: var(--bf-input-bg) !important;
}

/* Eye-toggle */
body.tenant-baferial #btn-eye,
body.tenant-baferial #btn-eye-conf {
    position: absolute !important;
    right: 1rem !important;
    top: 28px !important;
    transform: translateY(-50%) !important;
    color: var(--bf-input-placeholder) !important;
    font-size: 1.25rem !important;
    cursor: pointer;
    opacity: 1 !important;
    z-index: 2;
}

body.tenant-baferial .iti__country-list {
    background-color: #FFFFFF !important;
    color: #1B1B1B !important;
}
body.tenant-baferial .iti__country,
body.tenant-baferial .iti__country-name {
    color: #1B1B1B !important;
}
body.tenant-baferial .iti__dial-code {
    color: #6B6B6B !important;
}
body.tenant-baferial .iti__country.iti__highlight,
body.tenant-baferial .iti__country:hover {
    background-color: #E9EAE8 !important;
}
/* Contenedor/scroll de la lista + fallback por si el plugin usa .iti__dropdown-content. */
body.tenant-baferial .iti__dropdown-content,
body.tenant-baferial .iti__country-list * {
    background-color: transparent;
    color: #1B1B1B !important;
}
body.tenant-baferial .iti__dropdown-content { background-color: #FFFFFF !important; }

/* BAFCS-54: el número de teléfono quedaba TAPADO por la bandera + código de país.
   El input tel tiene `padding: 0 1rem !important` (16px), pero intl-tel-input con
   separateDialCode necesita dejar libre el ancho de la bandera+código a la izquierda. */
body.tenant-baferial .iti input[type="tel"],
body.tenant-baferial .iti input#celular {
    padding-left: 88px !important;
}

/* BAFCS-54: opciones de los <select> nativos (Nacionalidad/Género) salían oscuras sobre
   fondo oscuro. Forzamos el popup a fondo blanco + texto legible (la resaltada la pinta el SO). */
body.tenant-baferial select.form-control option,
body.tenant-baferial select.form-select option {
    background-color: #FFFFFF !important;
    color: #1B1B1B !important;
}

/* "Olvidé mi contraseña" — Figma 98:2734, primary text-only link */
body.tenant-baferial .recupero {
    text-align: left !important;
    margin: 0.5rem 0 1.5rem !important;
}

body.tenant-baferial .recupero a {
    color: var(--tenant-color-primary) !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;      /* 14px Button 2 */
    line-height: 1.428;                  /* 20/14 */
    text-decoration: none !important;
}

body.tenant-baferial .recupero a:hover {
    color: var(--tenant-color-tertiary) !important;
    text-decoration: underline !important;
}

/* Remember-me / Terms checkboxes */
body.tenant-baferial .recordarme,
body.tenant-baferial .tyc {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem;
    margin: 1.5rem 0;
    color: var(--bf-text-on-dark) !important;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

body.tenant-baferial .recordarme label,
body.tenant-baferial .tyc label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

/* Bootstrap's `.custom-control-input` ships with `position:absolute; clip:rect(0,0,0,0); opacity:0`
   so the visible UI lives on a sibling `.custom-control-label::before` pseudo. Our markup uses
   the input directly, so we have to undo the Bootstrap invisibility and re-style the native checkbox. */
body.tenant-baferial .recordarme input[type="checkbox"],
body.tenant-baferial .tyc input[type="checkbox"],
body.tenant-baferial .recordarme .custom-control-input,
body.tenant-baferial .tyc .custom-control-input {
    appearance: none !important;
    position: static !important;
    clip: auto !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    border: 1px solid var(--bf-divider) !important;
    border-radius: 2px !important;
    background-color: transparent !important;
    cursor: pointer;
    margin: 0 !important;
    flex-shrink: 0;
    display: inline-block !important;
    vertical-align: middle;
}

body.tenant-baferial .recordarme input[type="checkbox"]:checked::after,
body.tenant-baferial .tyc input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin: 1px 0 0 5px;
}

body.tenant-baferial .recordarme input[type="checkbox"]:checked,
body.tenant-baferial .tyc input[type="checkbox"]:checked {
    background-color: var(--tenant-color-primary) !important;
    border-color: var(--tenant-color-primary) !important;
}

body.tenant-baferial .check-simulado {
    display: none !important;
}

/* Submit button — Master/button/M (Figma 185:4831). 46px tall, 24px radius. */
body.tenant-baferial .btn-primary,
body.tenant-baferial .btn.btn-block,
body.tenant-baferial button[type="submit"].btn-primary {
    background-color: var(--tenant-color-primary) !important;
    color: var(--bf-text-on-dark) !important;
    border: none !important;
    padding: 0.75rem 1rem !important;
    border-radius: 24px !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    line-height: 1.571;                  /* 22/14 */
    width: 100% !important;
    height: 46px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    margin-top: 0.5rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

body.tenant-baferial .btn-primary:hover,
body.tenant-baferial .btn.btn-block:hover {
    background-color: var(--bf-cta-hover) !important;
}

body.tenant-baferial .btn-primary:disabled {
    background-color: var(--bf-disabled-btn-bg) !important;
    color: var(--bf-disabled-btn-text) !important;
    cursor: not-allowed;
}

/* Outline / secondary button (Registro Volver) */
body.tenant-baferial .btn-outline-primary {
    background-color: transparent !important;
    color: var(--tenant-color-primary) !important;
    border: 1px solid var(--tenant-color-primary) !important;
    border-radius: 24px !important;
    height: 46px;
    padding: 0.75rem 1rem !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
}

/* Botonera row — Volver + Registrarme side-by-side */
body.tenant-baferial .botonera {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

body.tenant-baferial .botonera .btn {
    flex: 1;
}

/* Helper "¿No tenés cuenta? Registrate" / TYC links */
body.tenant-baferial .text-center,
body.tenant-baferial .registrarme {
    color: var(--bf-text-on-dark) !important;
    text-align: center;
    margin-top: 1.5rem;
}

body.tenant-baferial .tyc a {
    color: var(--tenant-color-primary) !important;
    font-weight: 600;
}

body.tenant-baferial .text-danger,
body.tenant-baferial .field-validation-error {
    color: #FF6B6B !important;
    font-size: 0.85rem !important;
    margin-top: 0.25rem !important;
    display: block;
}

/* ---------- FooterBaFerial dispatched partial ------------------------------
   Figma 184:3357 lays out the 220px footer as 3 stacked bands:
     1. social-icons row (right-aligned)
     2. cyan filete divider, 1px tall, full-width minus 184px gutters
     3. legals + AFIP row, justify-between
   We model that with three sibling block-level children, no absolute pseudos. */
body.tenant-baferial .FooterBaFerial {
    background-color: var(--bf-bg-deep) !important;
    color: var(--bf-text-muted);
    padding: 0;
    font-size: 0.875rem;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

body.tenant-baferial .FooterBaFerial .footer-top {
    display: flex;
    /* BAFCS-54: sin la fila de redes, "Me arrepentí" va a la IZQUIERDA. */
    justify-content: flex-start;
    align-items: center;
    padding: 1.5rem 184px 1rem;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    box-sizing: border-box;
}

body.tenant-baferial .FooterBaFerial .footer-social {
    display: flex;
    gap: 1.5rem;
}

body.tenant-baferial .FooterBaFerial .footer-social a {
    color: var(--bf-text-on-dark);
    font-size: 1.5rem;
}

/* "Me arrepentí de mi compra" — Figma botón de arrepentimiento, outline pill. */
body.tenant-baferial .FooterBaFerial .footer-arrepenti {
    display: inline-flex;
    align-items: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--bf-text-on-dark) !important;
    text-decoration: none !important;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--tenant-color-primary);
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
body.tenant-baferial .FooterBaFerial .footer-arrepenti:hover {
    background-color: var(--tenant-color-primary);
    color: #fff !important;
}

/* Cyan filete — its own flex child between the social row and the legal row. */
body.tenant-baferial .FooterBaFerial .footer-filete {
    height: 1px;
    background-color: var(--tenant-color-primary);
    margin: 0 184px;
}

body.tenant-baferial .FooterBaFerial .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding: 1.25rem 184px 1.5rem;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    box-sizing: border-box;
}

body.tenant-baferial .FooterBaFerial .footer-legal {
    color: var(--bf-text-on-dark);
    font-family: "Raleway", sans-serif;
}

/* Figma 184:3384: address is Body 2 (Raleway Medium 16/24), copyright drops to
   13/20. Override main.css's default p sizing (which inherits a larger size in
   Identity than Portal). */
body.tenant-baferial .FooterBaFerial .footer-legal p {
    margin: 0 0 0.25rem !important;
    font-family: "Raleway", sans-serif !important;
    font-weight: 500 !important;
    font-size: 1rem !important;          /* 16px */
    line-height: 1.5 !important;          /* 24/16 */
    color: var(--bf-text-on-dark) !important;
}

body.tenant-baferial .FooterBaFerial .footer-legal p + p {
    font-size: 0.8125rem !important;      /* 13px copyright line */
    line-height: 1.538 !important;        /* 20/13 */
}

body.tenant-baferial .FooterBaFerial .footer-legal-links {
    margin-top: 0.5rem !important;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.875rem !important;       /* 14px */
}

body.tenant-baferial .FooterBaFerial .footer-legal a {
    color: var(--tenant-color-primary);
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.875rem;                  /* 14px Button 2 */
    line-height: 1.571;                   /* 22/14 */
}

body.tenant-baferial .FooterBaFerial .footer-legal-links span {
    color: var(--bf-text-muted);
    font-weight: 600;
}

body.tenant-baferial .FooterBaFerial .footer-company {
    display: flex;
    gap: 1rem;
    align-items: center;
    text-align: right;
    color: var(--bf-text-on-dark);
    font-family: "Raleway", sans-serif;
    font-size: 1rem;                      /* 16px Body 2 */
    line-height: 1.5;                     /* 24/16 */
}

body.tenant-baferial .FooterBaFerial .footer-afip {
    height: 68px;
    width: auto;
    display: block;
}

/* ---------- Error pages — Figma 86:2618 / 96:2823 / 96:2920 ----------------
   Centered "mensaje" block at viewport center, 546px wide. Same bg image
   layer as the login flow so the visual treatment is consistent. */
body.tenant-baferial .page-error,
body.tenant-baferial .registro-mensajes {
    background-image:
        linear-gradient(to right, rgba(0,0,0,0) 48%, rgba(0,0,0,0.42) 48%, rgba(0,0,0,0.42) 86%, rgba(0,0,0,0) 86%),  /* dark form band 48%→86%, photo strip on the far right (Figma) */
        linear-gradient(rgba(5,16,29,0.42), rgba(5,16,29,0.42)),                    /* global navy darken — lighter so the crowd photo stays vivid */
        url('/images/baferial/bg-registro.png') !important;                         /* Figma "331 1": the crowd photo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: calc(100vh - 88px - 220px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem;
}

body.tenant-baferial .page-error .cont-580,
body.tenant-baferial .page-error .cont-680,
body.tenant-baferial .registro-mensajes .cont-580,
body.tenant-baferial .registro-mensajes .cont-680 {
    max-width: 546px !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

body.tenant-baferial .error-illustration,
body.tenant-baferial .page-error img,
body.tenant-baferial .registro-mensajes img {
    max-width: 120px;
    height: auto;
    margin-bottom: 1.5rem;
}

body.tenant-baferial .page-error h1,
body.tenant-baferial .registro-mensajes h1 {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    font-size: 2rem !important;          /* 32px Title 4 */
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--bf-text-on-dark) !important;
    margin: 0;
}

body.tenant-baferial .page-error h2,
body.tenant-baferial .registro-mensajes h2 {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;      /* 18px Subtitle 1 */
    color: var(--bf-text-on-dark) !important;
    margin-top: 1rem;
}

body.tenant-baferial .page-error p,
body.tenant-baferial .registro-mensajes p {
    font-family: "Raleway", sans-serif !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    line-height: 1.5;
    color: var(--bf-text-on-dark) !important;
    max-width: 540px;
    margin: 0;
}

body.tenant-baferial .page-error ul,
body.tenant-baferial .registro-mensajes ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 1rem 0;
}

body.tenant-baferial .page-error ul li,
body.tenant-baferial .registro-mensajes ul li {
    color: var(--bf-text-on-dark);
    padding: 0.5rem 0;
}

body.tenant-baferial .page-error ul li i,
body.tenant-baferial .registro-mensajes ul li i {
    color: var(--tenant-color-primary);
    margin-right: 0.5rem;
}

body.tenant-baferial .page-error .btn,
body.tenant-baferial .registro-mensajes .btn,
body.tenant-baferial .page-error .btn-fill,
body.tenant-baferial .registro-mensajes .btn-fill {
    margin-top: 1.5rem;
    min-width: 256px;
}

body.tenant-baferial .btn-text,
body.tenant-baferial .registro-mensajes .btn-text {
    background: transparent !important;
    color: var(--tenant-color-primary) !important;
    border: none !important;
    margin-top: 0.5rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

/* ---------- Responsive fallback (mobile designs still pending) ------------- */
@media (max-width: 1199px) {
    body.tenant-baferial .page-login .cont-1300,
    body.tenant-baferial .page-registro .cont-1300,
    body.tenant-baferial .page-identificacion .cont-1300,
    body.tenant-baferial .page-crear-cuenta .cont-1300 {
        padding: 0 2rem !important;
    }
    body.tenant-baferial header .cont-1300 {
        padding: 0 2rem !important;
    }
    body.tenant-baferial .FooterBaFerial .footer-top,
    body.tenant-baferial .FooterBaFerial .footer-bottom { padding-left: 2rem; padding-right: 2rem; }
    body.tenant-baferial .FooterBaFerial::after { left: 2rem; right: 2rem; }
}

@media (max-width: 991px) {
    body.tenant-baferial .page-login .cont-1300,
    body.tenant-baferial .page-registro .cont-1300,
    body.tenant-baferial .page-identificacion .cont-1300,
    body.tenant-baferial .page-crear-cuenta .cont-1300,
    body.tenant-baferial .page-forgot-password .cont-1300,
    body.tenant-baferial .page-reset-password .cont-1300 {
        flex-direction: column !important;
        gap: 2rem !important;
        align-items: stretch !important;
    }
    /* BAFCS-54: en columna, flex-basis es la ALTURA. `1 1 100%` hacía que cada columna quisiera
       ocupar el 100% del alto de la página → espacio vacío entre el tagline y el form. Usamos
       `0 0 auto` para que cada una mida lo que ocupa su contenido. */
    body.tenant-baferial .box-left,
    body.tenant-baferial .box-right {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100%;
    }
    /* BAFCS-54: en desktop `.id-extranjero .box-left { flex: 0 0 440px !important }` fija el ANCHO
       de la columna del tagline. Al stackear (flex-direction: column) ese basis pasa a ser la
       ALTURA → 440px de alto vacío entre el tagline y el formulario. Lo forzamos a auto (misma
       especificidad + !important para ganarle a la regla de desktop). */
    body.tenant-baferial .id-extranjero .box-left,
    body.tenant-baferial .page-validacion .box-left,
    body.tenant-baferial .page-crear-cuenta .box-left,
    body.tenant-baferial .page-login .box-left,
    body.tenant-baferial .page-registro .box-left {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body.tenant-baferial .box-left h1 { font-size: 3rem !important; }
    body.tenant-baferial .box-left h2 { font-size: 2.5rem !important; }

    /* BAFCS-54: en desktop el fondo pinta una banda oscura SOLO en la mitad derecha
       (linear-gradient to right 48%→86%) detrás del form. Al stackear en mobile, el form
       full-width caía mitad sobre esa banda y mitad sobre la foto → todo desacomodado.
       Acá reemplazamos por un oscurecido navy FULL-WIDTH sobre la foto, así el form
       (y el texto) se apoyan siempre sobre fondo oscuro parejo. */
    body.tenant-baferial .page-login,
    body.tenant-baferial .page-registro,
    body.tenant-baferial .page-identificacion,
    body.tenant-baferial .page-crear-cuenta,
    body.tenant-baferial .page-forgot-password,
    body.tenant-baferial .page-reset-password {
        background-image:
            linear-gradient(rgba(5,16,29,0.86), rgba(5,16,29,0.86)),
            url('/images/baferial/bg-registro.png') !important;
        background-size: cover, cover;
        padding: 2rem 0 !important;
        align-items: flex-start !important;
    }
}

/* ---------- Teléfono / mobile chico (BAFCS-54) ---------------------------- */
@media (max-width: 600px) {
    body.tenant-baferial .page-login .cont-1300,
    body.tenant-baferial .page-registro .cont-1300,
    body.tenant-baferial .page-identificacion .cont-1300,
    body.tenant-baferial .page-crear-cuenta .cont-1300,
    body.tenant-baferial .page-forgot-password .cont-1300,
    body.tenant-baferial .page-reset-password .cont-1300,
    body.tenant-baferial header .cont-1300 {
        padding: 0 1rem !important;
    }
    /* El panel oscuro del form con menos padding interno en teléfono. */
    body.tenant-baferial .box-right { padding: 1.25rem !important; }
    /* Guarda: el dropdown de países no debe exceder el viewport (nombres largos wrapean). */
    body.tenant-baferial .iti__country-list { max-width: calc(100vw - 2.5rem) !important; }
    body.tenant-baferial .iti__country { white-space: normal !important; }
    /* Nombre/Apellido y el grid Documento (Nacionalidad/Género) apilados en una columna. */
    body.tenant-baferial .two-inputs { flex-direction: column !important; gap: 0 !important; }
    body.tenant-baferial #form-documento .form-box:has(#nacionalidad),
    body.tenant-baferial #form-documento .form-box:has(#Input_Sexo) { width: 100% !important; }
    /* Tagline más chico para no empujar el form fuera de pantalla. */
    body.tenant-baferial .box-left h1 { font-size: 2.25rem !important; }
    body.tenant-baferial .box-left h2 { font-size: 1.5rem !important; }
    /* Botonera (Cancelar/Continuar) apilada para que no se apriete. */
    body.tenant-baferial .acciones { flex-direction: column !important; gap: 0.75rem !important; }
    body.tenant-baferial .acciones .btn-outline,
    body.tenant-baferial .acciones .btn-siguiente { width: 100% !important; }
    /* Header: CTAs sin apretarse en pantallas chicas. */
    body.tenant-baferial header .header-ctas { gap: 8px; }
    body.tenant-baferial header .btn-registro,
    body.tenant-baferial header .btn-login { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
}