/* ═══════════════════════════════════════════════════════════════
   belk-flot.css — UNA familia para todo lo que flota sobre el trabajo
   ───────────────────────────────────────────────────────────────
   Reemplaza: .notif · .notif-bar · .toast · .bk-hint · .bchat-tip
              · .bk-wa-tip  (5 implementaciones → 1)

   Tres papeles, y solo tres:
     .bkf--aviso   confirma algo que YA pasó. Se va solo.
     .bkf--globo   enseña algo, anclado a un elemento. Se cierra tocando.
     .bkf--tarjeta pide una decisión. Con telón. No se va sola.

   Reglas que se cumplen aquí y no en el código actual:
     · una sola escala tipográfica (17 / 15 / 12)
     · cuerpo de 15px: hoy va de 11,5 a 13,8 y en taller no se lee
     · font-family:inherit — nada de stacks propios por módulo
     · cerrar = 44×44 de área táctil (hoy: 24 y 11,7)
     · el aviso va ARRIBA bajo la barra (12-oct); globo y tarjeta respetan
       --belk-float-bottom: nunca tapan la píldora de navegación
     · sin naranja ni verde: el sello es marino/papel/acero/celeste/crema
     · iconos del sprite, nunca emoji
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Tiempos. Entrar rápido, irse rápido, quedarse lo justo. */
  --bkf-in:   140ms;   /* hoy: 250–300 ms, se siente pastoso */
  --bkf-out:  100ms;
  --bkf-ease: cubic-bezier(.2,.9,.3,1);

  /* Escala. Un solo juego para los tres papeles. */
  --bkf-ti:   17px;    /* título   */
  --bkf-tx:   15px;    /* cuerpo   */
  --bkf-lb:   12px;    /* etiqueta */

  /* Color. El fondo va LITERAL, no por token: --belk-level-0 cambia de
     claro a oscuro segun la zona, y un flotante que se aclara sobre el
     documento pierde el contraste con el papel. El sello ya lo dice para
     el header y el drawer: en taller son marino fijo. */
  --bkf-ground: #0D1B2A;
  --bkf-ink:    #F7F3E9;
  --bkf-muted:  #C4D0DF;
  --bkf-line:   rgba(197,212,232,.20);
  --bkf-accent: var(--belk-accent-celeste, #51C7F5);
}

/* ── Base común ────────────────────────────────────────────── */
.bkf{
  position: fixed;
  z-index: 9600;                       /* sobre el contenido, bajo los gates */
  box-sizing: border-box;
  font-family: inherit;                /* ← el módulo NO trae su propia fuente */
  color: var(--bkf-muted);
  background: var(--bkf-ground);
  border: 1px solid var(--bkf-line);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(13,27,42,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bkf-out) var(--bkf-ease),
              transform var(--bkf-out) var(--bkf-ease);
}
.bkf.is-open{
  opacity: 1;
  pointer-events: auto;
  transition-duration: var(--bkf-in);
}
@media (prefers-reduced-motion: reduce){
  .bkf{ transition-duration: 1ms !important; }
}

/* El pintado se declara en el HOST, no se hereda del <symbol>: en un <use> a
   un sprite EXTERNO el fill/stroke del símbolo no viaja de forma fiable entre
   navegadores. Es la misma solución que .belk-ic en css/index.css. El sprite
   mezcla iconos de relleno (ico-cerrar) y de trazo (ico-visto, ico-candado…). */
.bkf-ic   { width:20px; height:20px; flex:0 0 auto; color:var(--bkf-accent);
            fill:currentColor; }
.bkf-ic--trazo{ fill:none; stroke:currentColor; stroke-width:2;
                stroke-linecap:round; stroke-linejoin:round; }
.bkf-ti   { font-size:var(--bkf-ti); font-weight:700; line-height:1.25; color:var(--bkf-ink); }
.bkf-tx   { font-size:var(--bkf-tx); font-weight:400; line-height:1.45; color:var(--bkf-muted); }
.bkf-lb   { font-size:var(--bkf-lb); font-weight:700; letter-spacing:.04em;
            text-transform:uppercase; color:var(--bkf-accent); }

/* Cerrar: 44×44 reales. El glifo mide 20; el resto es área táctil. */
.bkf-x{
  position:absolute; top:4px; right:4px;
  width:44px; height:44px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
  color:var(--bkf-muted); border-radius:12px;
}
.bkf-x:hover  { background:rgba(255,255,255,.10); color:var(--bkf-ink); }
.bkf-x:focus-visible{ outline:2px solid var(--bkf-accent); outline-offset:-2px; }
.bkf-x svg{ width:20px; height:20px; }

/* Acción dentro del flotante: celeste de relleno, tinta marino encima. */
.bkf-btn{
  font:inherit; font-size:var(--bkf-tx); font-weight:700;
  min-height:44px; padding:0 16px; border:0; border-radius:10px;
  background:var(--bkf-accent); color:#0D1B2A; cursor:pointer;
}
.bkf-btn--ghost{ background:transparent; color:var(--bkf-accent);
                 border:1px solid var(--bkf-line); }

/* ── 1. AVISO ──────────────────────────────────────────────────
   Confirma lo hecho. ARRIBA, bajo la barra marina (dueño, 2026-10-12):
   abajo tapaba la cámara, el micrófono de Adam y la cápsula de pasos en
   el teléfono. Arriba no hay nada que tocar. Traslúcido, para que se vea
   lo que hay debajo, y deja pasar los toques si no trae botón. */
.bkf--aviso{
  left:50%; top:calc(52px + 10px + env(safe-area-inset-top, 0px));
  transform:translateX(-50%) translateY(-10px);
  width:min(440px, calc(100vw - 24px));
  display:flex; align-items:center; gap:11px;
  padding:13px 16px;
  background:rgba(13,27,42,.86);               /* --bkf-ground con aire */
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.bkf--aviso.is-open{ transform:translateX(-50%) translateY(0); pointer-events:none; }
.bkf--aviso.is-open:has(.bkf-btn){ pointer-events:auto; }
.bkf--aviso .bkf-tx{ flex:1; color:var(--bkf-ink); }
.bkf--aviso .bkf-btn{ min-height:36px; padding:0 12px; font-size:14px; }
/* Error: se marca con el borde, no repintando la caja. */
.bkf--aviso.is-err{ border-color:var(--belk-err, #8E3B31); }
.bkf--aviso.is-err .bkf-ic{ color:var(--belk-err, #8E3B31); }

/* ── 2. GLOBO ──────────────────────────────────────────────────
   Enseña algo de UN elemento. Con flecha, o no es un globo. */
.bkf--globo{
  width:min(320px, calc(100vw - 24px));
  padding:14px 52px 14px 16px;
  transform:translateY(-6px);
}
.bkf--globo.is-open{ transform:translateY(0); }
.bkf--globo .bkf-tx{ margin-top:5px; }
.bkf-flecha{
  position:absolute; width:14px; height:14px;
  background:var(--bkf-ground);
  border-left:1px solid var(--bkf-line); border-top:1px solid var(--bkf-line);
  transform:rotate(45deg); top:-8px; left:24px;
}

/* ── 3. TARJETA ────────────────────────────────────────────────
   Una decisión. Telón propio; no se va sola. */
.bkf-telon{
  position:fixed; inset:0; z-index:9590;
  background:rgba(8,15,26,.72);
  opacity:0; pointer-events:none;
  transition:opacity var(--bkf-out) var(--bkf-ease);
}
.bkf-telon.is-open{ opacity:1; pointer-events:auto; transition-duration:var(--bkf-in); }
.bkf--tarjeta{
  left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.97);
  width:min(390px, calc(100vw - 32px));
  padding:24px 22px 20px;
  border-radius:18px;
  text-align:center;
}
.bkf--tarjeta.is-open{ transform:translate(-50%,-50%) scale(1); }
.bkf--tarjeta .bkf-ic{ width:30px; height:30px; margin:0 auto 10px; }
.bkf--tarjeta .bkf-tx{ margin:8px 0 20px; }
.bkf--tarjeta .bkf-btn{ width:100%; }
/* Campo de la tarjeta que pide un nombre (reemplaza al prompt() nativo). */
.bkf-in{
  display:block; width:100%; box-sizing:border-box; margin:0 0 16px;
  min-height:44px; padding:0 12px; border-radius:10px;
  font:inherit; font-size:16px; text-align:left;
  background:rgba(255,255,255,.08); color:var(--bkf-ink);
  border:1px solid var(--bkf-line);
}
.bkf-in:focus{ outline:2px solid var(--bkf-accent); outline-offset:1px; }
.bkf--tarjeta .bkf-tx:has(+ .bkf-in){ margin-bottom:12px; }

/* En teléfono la tarjeta se apoya abajo: llega el pulgar, no la frente. */
@media (max-width:520px){
  .bkf--tarjeta{
    top:auto; bottom:0; transform:translate(-50%, 10px);
    width:100%; border-radius:20px 20px 0 0; padding-bottom:28px;
  }
  .bkf--tarjeta.is-open{ transform:translate(-50%, 0); }
}

/* ── 3 bis. HOJA (embudo, 2026-10-15) ─────────────────────────
   La tarjeta sin telón: llega cuando el usuario YA terminó algo (descargó
   la cotización) y no debe tapar el botón que tocó ni bloquear la página.
   Va arriba, bajo la barra marina, como el aviso; a la derecha en
   escritorio. Se cierra con su ✕ o con Esc. */
.bkf--tarjeta.bkf--hoja{
  left:auto; right:16px; top:calc(52px + 10px + env(safe-area-inset-top, 0px));
  transform:translateY(-10px);
  width:min(400px, calc(100vw - 24px));
  max-height:calc(100vh - 52px - 20px - var(--belk-float-bottom, 16px));
  overflow:auto;
  text-align:left;
  padding:20px 20px 18px;
}
.bkf--tarjeta.bkf--hoja.is-open{ transform:translateY(0); }
.bkf--tarjeta.bkf--hoja .bkf-ti{ padding-right:36px; }
.bkf--tarjeta.bkf--hoja .bkf-tx{ margin:6px 0 12px; }
.bkf--tarjeta .bkf-lb{ margin-bottom:6px; padding-right:36px; }
@media (max-width:520px){
  .bkf--tarjeta.bkf--hoja{
    top:calc(52px + 8px + env(safe-area-inset-top, 0px)); bottom:auto;
    left:12px; right:12px; width:auto;
    transform:translateY(-10px); border-radius:18px; padding-bottom:18px;
  }
  .bkf--tarjeta.bkf--hoja.is-open{ transform:translateY(0); }
}
/* Lo que se hizo, con su ✓ celeste. Cuerpo de 15 px como todo el flotante. */
.bkf-lista{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; }
.bkf-lista li{ display:flex; align-items:flex-start; gap:10px;
               font-size:var(--bkf-tx); line-height:1.4; color:var(--bkf-ink); }
.bkf-lista .bkf-ic{ width:18px; height:18px; margin:2px 0 0; }
.bkf-pie{ margin:-4px 0 16px; font-size:var(--bkf-tx); line-height:1.4; color:var(--bkf-muted);
          padding:10px 12px; border:1px solid var(--bkf-line); border-radius:10px; }

/* ── 4. INVITACIÓN (embudo, 2026-10-15) ───────────────────────
   El globo que lleva al siguiente paso. Uno por página, abajo a la derecha
   sobre --belk-float-bottom; belk-flot.js lo SUBE midiendo lo que flota
   abajo (cápsula, cámara, Adam, «Calcular»), así nunca tapa un botón. Todo
   el cuerpo es el toque; la ✕ (44×44) lo cierra por la sesión. */
.bkf--invita{
  right:var(--belk-float-right, 16px); bottom:var(--belk-float-bottom, 16px);
  width:min(340px, calc(100vw - 32px));
  padding:0; border-color:rgba(81,199,245,.45);
  transform:translateY(10px);
}
.bkf--invita.is-open{ transform:translateY(0); }
.bkf--invita.bkf--sin-sitio{ display:none; }
.bkf-inv{
  display:flex; align-items:flex-start; gap:12px; width:100%; box-sizing:border-box;
  padding:14px 50px 14px 16px; margin:0; border:0; border-radius:14px;
  background:none; color:inherit; font:inherit; text-align:left; text-decoration:none; cursor:pointer;
}
.bkf-inv:hover{ background:rgba(255,255,255,.04); }
.bkf-inv:focus-visible{ outline:2px solid var(--bkf-accent); outline-offset:-2px; }
.bkf-inv .bkf-ic{ width:24px; height:24px; margin-top:1px; }
.bkf-inv-tx{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.bkf-inv-acc{ margin-top:4px; font-size:var(--bkf-tx); font-weight:700; color:var(--bkf-accent); }
/* Con el menú ☰ abierto se aparta (igual que el globo del concurso). */
body:has(.nav-menu.open) .bkf--invita{ display:none; }
/* Teléfono: franja de una línea arriba bajo la barra, translúcida (como el
   aviso). Solo título + acción; el texto largo se omite. */
.bkf--invita.bkf--invita-arriba{
  left:50%; right:auto; bottom:auto;
  top:calc(52px + 8px + env(safe-area-inset-top, 0px));
  width:min(440px, calc(100vw - 24px));
  background:rgba(13,27,42,.86);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transform:translateX(-50%) translateY(-10px);
}
.bkf--invita.bkf--invita-arriba.is-open{ transform:translateX(-50%) translateY(0); }
.bkf--invita-arriba .bkf-inv{ align-items:center; padding:9px 46px 9px 12px; gap:10px; }
.bkf--invita-arriba .bkf-inv .bkf-ic{ width:20px; height:20px; margin-top:0; }
.bkf--invita-arriba .bkf-inv-tx{ flex-direction:row; align-items:center; min-width:0; flex:1; }
.bkf--invita-arriba .bkf-ti{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bkf--invita-arriba .bkf-ti::after{ content:" ›"; color:var(--bkf-accent); }
.bkf--invita-arriba .bkf-tx,
.bkf--invita-arriba .bkf-inv-acc{ display:none; }
.bkf--invita-arriba .bkf-x{ width:40px; height:40px; top:50%; transform:translateY(-50%); }

/* ── La cinta del pase de visita (embudo, 2026-10-15) ─────────
   NO flota: vive en el header (.hdr-right), así no tapa nada. Discreta:
   contorno celeste sobre el marino, sin relleno. En el teléfono, corta. */
.bkf-cinta{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  height:30px; padding:0 11px; margin-right:6px; border-radius:999px;
  font:inherit; font-size:12px; font-weight:700; white-space:nowrap; text-decoration:none;
  color:var(--bkf-ink); border:1px solid rgba(81,199,245,.55); background:transparent;
}
.bkf-cinta:hover{ background:rgba(81,199,245,.12); }
.bkf-cinta:focus-visible{ outline:2px solid var(--bkf-accent); outline-offset:2px; }
.bkf-cinta b{ color:var(--bkf-accent); font-weight:800; }
.bkf-cinta .bkf-cinta-corta{ display:none; }
@media (max-width:640px){
  .bkf-cinta{ padding:0 9px; margin-right:4px; }
  .bkf-cinta .bkf-cinta-larga{ display:none; }
  .bkf-cinta .bkf-cinta-corta{ display:inline; }
}

@media print{ .bkf, .bkf-telon, .bkf-cinta{ display:none !important; } }

/* ── Infraestructura: la pantalla de carga previa al contenido ────
   No es uno de los tres papeles — nadie la abre con Belk.*. Vive en el
   HTML desde el primer pintado, antes de que corra un solo script, y
   cada página la oculta sola al resolver su sesión.
   Va con los MISMOS tokens literales que el resto de la familia: es
   la razón por la que hacían falta. Sin esto, cotizacion.html pintaba
   el anillo con --belk-link (#8FDCFA), presupuesto.html con
   --belk-brand de la zona taller (#415A77) y suscripcion.html con
   --belk-brand de la zona documento (#7FA0D4) — tres colores para el
   mismo texto "Verificando sesión…". */
.bkf-carga{
  position:fixed; inset:0; z-index:999;
  background:var(--bkf-ground);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:14px;
}
.bkf-carga-ring{
  width:32px; height:32px; border-radius:50%;
  border:3px solid var(--bkf-line);
  border-top-color:var(--bkf-accent);
  animation:bkfCargaGiro .8s linear infinite;
}
.bkf-carga-tx{ font-size:var(--bkf-tx); color:var(--bkf-muted); }
@keyframes bkfCargaGiro{ to{ transform:rotate(360deg); } }
@media print{ .bkf-carga{ display:none !important; } }