/* ═══════════════════════════════════════════════════════════════
   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)
     · respeta --belk-float-bottom: nunca tapa 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. Abajo, sobre el pulgar, SIEMPRE por encima de
   la píldora de navegación (por eso el token, no un 18px a mano). */
.bkf--aviso{
  left:50%; bottom:calc(var(--belk-float-bottom, 16px) + 8px);
  transform:translateX(-50%) translateY(10px);
  width:min(440px, calc(100vw - 24px));
  display:flex; align-items:center; gap:11px;
  padding:13px 16px;
}
.bkf--aviso.is-open{ transform:translateX(-50%) translateY(0); }
.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%; }

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

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