/* Pie fijo de los sistemas de MSOFT (línea HIDISPA, ARQ360 y FirmAccounting), con el verde MSOFT y el azul de FINANPRO. */
.brand-foot {
    --bf-bg: #fff; --bf-line: #e2e8f0; --bf-ink: #0f172a; --bf-muted: #55657a; --bf-faint: #8a9bb0;
    --bf-green: #5a8520; --bf-green-soft: rgba(141, 198, 63, .14); --bf-msoft: #8dc63f;
    position: sticky; bottom: 0; z-index: 20; margin-top: auto; padding: 6px 14px;
    background: var(--bf-bg); border-top: 1px solid var(--bf-line); box-shadow: 0 -6px 20px rgba(11, 18, 32, .05);
    font-family: Inter, "Segoe UI", Roboto, system-ui, sans-serif; color: var(--bf-ink); line-height: 1.3;
}
.brand-foot * { box-sizing: border-box; }
.bf-in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 4px 12px; align-items: center; }
.bf-item { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.bf-item > div { min-width: 0; }
.bf-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--bf-green); background: var(--bf-green-soft); border: 1px solid rgba(141, 198, 63, .28); }
.bf-i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bf-item strong { display: block; margin-bottom: 1px; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--bf-faint); }
.bf-item p { margin: 0; font-size: 10.5px; line-height: 1.3; color: var(--bf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-marcas { display: flex; align-items: center; gap: 12px; padding-left: 12px; border-left: 1px solid var(--bf-line); }
.bf-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.bf-logo > div { display: grid; line-height: 1.2; }
.bf-logo small { font-size: 10px; color: var(--bf-muted); white-space: nowrap; }
.bf-rombo { width: 26px; height: 26px; flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; transform: rotate(45deg) scale(.86); }
.bf-rombo i { border-radius: 3px; }
.bf-rombo i:nth-child(1) { background: #8dc63f; } .bf-rombo i:nth-child(2) { background: #72a832; }
.bf-rombo i:nth-child(3) { background: #3b82f6; } .bf-rombo i:nth-child(4) { background: #1d4ed8; }
.bf-name { font-size: 14.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; color: var(--bf-ink); }
.bf-div { width: 1px; align-self: stretch; min-height: 32px; background: var(--bf-line); }
.bf-msoft img { width: 34px; height: auto; flex: none; }
.bf-msoft b { font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.bf-msoft:hover b { color: var(--bf-green); }
.bf-msoft .bf-copy { font-size: 9.5px; opacity: .85; }
.bf-contacto { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--bf-line); font-size: 11px; color: var(--bf-muted); }
.bf-contacto span, .bf-contacto a { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.bf-contacto a:hover { color: var(--bf-green); }
.bf-contacto .bf-i { width: 14px; height: 14px; color: var(--bf-green); }

/* Oscuro (tema del sistema, y el sitio que es oscuro) */
:root[data-theme="dark"] .brand-foot, .brand-foot--oscuro {
    --bf-bg: #0b1220; --bf-line: rgba(255, 255, 255, .07); --bf-ink: #e8eef6; --bf-muted: #a9b8cc; --bf-faint: #7f8fa6; --bf-green: #8dc63f;
    background: linear-gradient(180deg, #0f1a2c, #0a111d); box-shadow: 0 -6px 24px rgba(0, 0, 0, .35);
}

/* En el sistema: al final de la columna principal, pegado abajo. */
.main > .brand-foot { margin-top: auto; }
.main:has(> .brand-foot) { min-height: 100vh; }
.main:has(> .brand-foot) > .content { flex: 1 0 auto; align-content: start; }

/* En la entrada: fijo abajo; la página reserva su alto y las columnas se acortan. */
body:has(> .entrada ~ .brand-foot) { --bf-h: 62px; padding-bottom: var(--bf-h); margin: 0; }
body:has(> .entrada ~ .brand-foot--contact) { --bf-h: 90px; }
body:has(> .entrada ~ .brand-foot) .entrada { min-height: calc(100vh - var(--bf-h)); }
.entrada ~ .brand-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding-bottom: calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bf-bg) 94%, transparent); backdrop-filter: saturate(1.3) blur(12px); }

/* En el sitio: fijo abajo como en las landings de MSOFT (presentación corporativa), con el contenido a 1500 px como en
   FirmAccounting; la página reserva su alto y el botón de WhatsApp sube por encima. */
body:has(> .foot + .brand-foot) { --bf-h: 62px; padding-bottom: var(--bf-h); }
body:has(> .foot + .brand-foot .bf-contacto) { --bf-h: 82px; }
.foot + .brand-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.foot + .brand-foot .bf-in { width: min(1500px, 100%); margin: 0 auto; }
.foot + .brand-foot .bf-contacto { width: min(1500px, 100%); margin: 4px auto 0; }
body:has(> .foot + .brand-foot) .wa-float { bottom: calc(var(--bf-h) + 12px); }

@media (max-width: 1280px) {
    .bf-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bf-item:nth-child(n+4) { display: none; }
    .bf-marcas { grid-column: 1 / -1; justify-content: center; border-left: 0; padding: 4px 0 0; border-top: 1px solid var(--bf-line); }
}
@media (max-width: 1280px) {
    .foot + .brand-foot .bf-item { display: none; }
    .foot + .brand-foot .bf-in { grid-template-columns: 1fr; }
    .foot + .brand-foot .bf-marcas { border-top: 0; padding: 0; }
    body:has(> .foot + .brand-foot) { --bf-h: 58px; }
    body:has(> .foot + .brand-foot .bf-contacto) { --bf-h: 84px; }
}
@media (max-width: 1180px) {
    .entrada ~ .brand-foot .bf-item { display: none; }
    .entrada ~ .brand-foot .bf-in { grid-template-columns: 1fr; }
    .entrada ~ .brand-foot .bf-marcas { border-top: 0; padding: 0; }
    body:has(> .entrada ~ .brand-foot) { --bf-h: 58px; }
    body:has(> .entrada ~ .brand-foot--contact) { --bf-h: 84px; }
}
@media (max-width: 900px) {
    .main > .brand-foot { position: static; }
    .bf-in { grid-template-columns: 1fr; }
    .bf-item { display: none; }
    .bf-marcas { border-top: 0; padding: 0; }
}
@media (max-width: 420px) {
    .bf-logo small { display: none; }
    .bf-marcas { gap: 8px; }
    .bf-contacto span { display: none; }
}
@media print { .brand-foot { display: none; } }

/* ---- MSOFT Retail360: misma regla, con la estructura de sus páginas ----
   Logo del producto como imagen (igual que ARQ360) y la entrada (.entry), fija abajo como la .entrada de FINANPRO. */
.bf-sys img { flex: none; border-radius: 7px; }
body:has(> .entry ~ .brand-foot) { --bf-h: 62px; padding-bottom: var(--bf-h); margin: 0; }
body:has(> .entry ~ .brand-foot--contact) { --bf-h: 76px; }   /* alto real del pie con contacto en Retail360 */
body:has(> .entry ~ .brand-foot) .entry { min-height: calc(100vh - var(--bf-h)); }
.entry ~ .brand-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding-bottom: calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bf-bg) 94%, transparent); backdrop-filter: saturate(1.3) blur(12px); }
@media (max-width: 1180px) {
    .entry ~ .brand-foot .bf-item { display: none; }
    .entry ~ .brand-foot .bf-in { grid-template-columns: 1fr; }
    .entry ~ .brand-foot .bf-marcas { border-top: 0; padding: 0; }
    body:has(> .entry ~ .brand-foot) { --bf-h: 58px; }
    body:has(> .entry ~ .brand-foot--contact) { --bf-h: 84px; }
}

/* En el sistema (back office): al final de la columna principal, pegado abajo, como el .main de FINANPRO. */
.r-main:has(> .brand-foot) { display: flex; flex-direction: column; min-height: calc(100vh - var(--r360-top-h, 56px)); padding-bottom: 0; }
.r-main:has(> .brand-foot) > .r-page { flex: 1 0 auto; padding-bottom: 28px; }
.r-main > .brand-foot { margin: auto -16px 0; }
@media (max-width: 900px) { .r-main > .brand-foot { position: static; } }
@media (max-width: 560px) { .r-main > .brand-foot { margin: auto -10px 0; } }