/* ============================================================
   DANGOFE OS · CONFIGURACIÓN → PORTAL DE AGENDA · «BENEFICIOS POR FORMA DE PAGO» (S43 parte 2, prefijo bcf-) · 2026-10-21 · chat de Diseño
   Va dentro de una card de Configuración (.cfgx-card) con beneficios-config.js. Usa los tokens del sistema (--text-primary, --text-secondary,
   --text-muted, --border-soft, --accent-rgb, --glass-rgb, --bg-input, --radius-md, --space-*) y respeta el tema claro/oscuro de Configuración.
   «Así lo ve el cliente» va siempre con los colores del portal (blanco, azul DANGOFE), como un teléfono. Sin sombras; íconos de línea;
   nada se anima sin parar (los puntos y el ícono de la IA, 6 vueltas).
   Versiones (data-v): A · Tres columnas · B · Pestañas y vista previa · C · Paso a paso.
   ============================================================ */
.bcf { --bcf-tinta: var(--text-primary, #23252c); --bcf-tenue: var(--text-secondary, #565a64); --bcf-suave: var(--text-muted, #7d7871); --bcf-linea: var(--border-soft, rgba(35, 40, 55, .09));
  --bcf-azul: rgb(var(--accent-rgb, 56, 132, 222)); --bcf-azul-suave: rgba(var(--accent-rgb, 56, 132, 222), .14); --bcf-azul-borde: rgba(var(--accent-rgb, 56, 132, 222), .4); --bcf-sobre-azul: #fff;
  --bcf-ok: #1d9a5b; --bcf-ok-suave: rgba(29, 154, 91, .14); --bcf-amb: #c27500; --bcf-amb-suave: rgba(194, 117, 0, .14); --bcf-mal: #c0392b; --bcf-mal-suave: rgba(192, 57, 43, .12);
  --bcf-campo: var(--bg-input, rgba(30, 32, 40, .05)); --bcf-hundido: rgba(var(--glass-rgb, 255, 255, 255), .45); --bcf-r: var(--radius-md, 14px);
  display: flex; flex-direction: column; gap: 14px; color: var(--bcf-tinta); font-size: 14px; line-height: 1.35; }
[data-theme='dark'] .bcf { --bcf-ok: #3ecf6a; --bcf-ok-suave: rgba(62, 207, 106, .16); --bcf-amb: #e8a020; --bcf-amb-suave: rgba(232, 160, 32, .16); --bcf-mal: #ff6b6b; --bcf-mal-suave: rgba(255, 107, 107, .14); --bcf-hundido: rgba(255, 255, 255, .05); --bcf-azul: #8fb4ff; --bcf-azul-suave: rgba(143, 180, 255, .18); --bcf-azul-borde: rgba(143, 180, 255, .5); --bcf-sobre-azul: #0a1633; }
.bcf *, .bcf *::before, .bcf *::after { box-sizing: border-box; }
.bcf button { font: inherit; color: inherit; cursor: pointer; }
.bcf button:disabled { cursor: default; opacity: .45; }
.bcf svg { width: 16px; height: 16px; flex: none; }
.bcf b, .bcf strong { font-weight: 700; }
/* ---------- categorías ---------- */
.bcf-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.bcf-cat { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid var(--bcf-linea); background: var(--bcf-hundido); font-weight: 700; font-size: 13.5px; }
.bcf-cat em { font-style: normal; font-size: 11.5px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--bcf-azul-suave); color: var(--bcf-azul); }
.bcf-cat.is-on { background: var(--bcf-azul); border-color: var(--bcf-azul); color: var(--bcf-sobre-azul); }
.bcf-cat.is-on em { background: rgba(255, 255, 255, .22); color: var(--bcf-sobre-azul); }
.bcf-cat i { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--bcf-amb); border: 2px solid var(--bcf-hundido); }
/* ---------- bloques por forma de pago ---------- */
.bcf-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.bcf-modo { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; border: 1px solid var(--bcf-linea); background: var(--bcf-hundido); min-width: 0; }
.bcf-modo__cab b { display: block; font-size: 15px; font-weight: 800; line-height: 1.2; }
.bcf-modo__cab span { display: block; font-size: 12.5px; color: var(--bcf-tenue); margin-top: 2px; }
.bcf-vacio { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--bcf-linea); font-size: 12.5px; color: var(--bcf-tenue); line-height: 1.4; }
.bcf-fila { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; border: 1px solid var(--bcf-linea); background: rgba(var(--glass-rgb, 255, 255, 255), .35); min-width: 0; }
[data-theme='dark'] .bcf-fila { background: rgba(255, 255, 255, .04); }
.bcf-fila__ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--bcf-ok-suave); color: var(--bcf-ok); }
.bcf-fila__ico svg { width: 18px; height: 18px; }
.bcf-fila--descuento .bcf-fila__ico, .bcf-fila--texto .bcf-fila__ico { background: var(--bcf-azul-suave); color: var(--bcf-azul); }
.bcf-fila--visita .bcf-fila__ico { background: var(--bcf-amb-suave); color: var(--bcf-amb); }
.bcf-fila__txt { flex: 1; min-width: 0; }
.bcf-fila__txt b { display: block; font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; }
.bcf-fila__txt span { display: block; font-size: 12px; color: var(--bcf-tenue); margin-top: 1px; overflow-wrap: anywhere; }
.bcf-fila__acc { display: flex; gap: 4px; flex: none; }
.bcf-fila.is-aceptada { opacity: .65; }
.bcf-fila.is-aceptada .bcf-fila__ico { background: var(--bcf-ok-suave); color: var(--bcf-ok); }
.bcf-mini { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--bcf-linea); background: transparent; font-size: 12px; font-weight: 700; color: var(--bcf-tenue); }
.bcf-mini svg { width: 14px; height: 14px; }
.bcf-mini--mal { color: var(--bcf-mal); }
.bcf-mini--ok { color: var(--bcf-ok); border-color: var(--bcf-ok-suave); background: var(--bcf-ok-suave); }
.bcf-agregar { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1.5px dashed var(--bcf-azul-borde); background: transparent; color: var(--bcf-azul); font-weight: 800; font-size: 13px; }
/* ---------- formulario de un beneficio ---------- */
.bcf-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; border: 1.5px solid var(--bcf-azul-borde); background: rgba(var(--glass-rgb, 255, 255, 255), .5); }
[data-theme='dark'] .bcf-form { background: rgba(255, 255, 255, .05); }
.bcf-form__t { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13.5px; font-weight: 800; }
.bcf-form__t svg { color: var(--bcf-azul); }
.bcf-form__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.bcf-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bcf-campo__l { font-size: 12.5px; font-weight: 700; }
.bcf-campo small { font-size: 11.5px; color: var(--bcf-tenue); line-height: 1.35; }
.bcf-in { width: 100%; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--bcf-linea); background: var(--bcf-campo); color: var(--bcf-tinta); font: inherit; font-size: 14px; outline: none; }
.bcf-in:focus-visible { border-color: var(--bcf-azul); outline: 3px solid var(--bcf-azul-suave); outline-offset: 0; }
.bcf-in--num { width: 110px; text-align: right; }
.bcf-in--sel { min-height: 34px; width: auto; max-width: 100%; font-size: 12.5px; }
.bcf-pct { display: inline-flex; align-items: center; gap: 6px; }
.bcf-pct b { font-size: 13px; color: var(--bcf-tenue); }
.bcf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bcf-chips--pct { align-self: end; padding-bottom: 2px; }
.bcf-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--bcf-linea); background: var(--bcf-hundido); font-size: 12.5px; font-weight: 700; color: var(--bcf-tenue); }
.bcf-chip svg { width: 13px; height: 13px; }
.bcf-chip.is-on { background: var(--bcf-azul); border-color: var(--bcf-azul); color: var(--bcf-sobre-azul); }
.bcf-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.bcf-tipo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--bcf-linea); background: var(--bcf-hundido); text-align: left; min-height: 84px; }
.bcf-tipo svg { width: 20px; height: 20px; color: var(--bcf-azul); }
.bcf-tipo b { font-size: 13.5px; }
.bcf-tipo span { font-size: 11.5px; color: var(--bcf-tenue); line-height: 1.35; }
.bcf-form__err { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--bcf-mal); }
.bcf-form__err[hidden] { display: none; }
.bcf-form__pie { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.bcf-enlace { appearance: none; border: 0; background: transparent; padding: 0; color: var(--bcf-azul); font-weight: 700; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* ---------- botones ---------- */
.bcf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--bcf-linea); background: var(--bcf-hundido); font-weight: 800; font-size: 13px; color: var(--bcf-tinta); }
.bcf-btn--pri { background: var(--bcf-azul); border-color: var(--bcf-azul); color: var(--bcf-sobre-azul); }
.bcf-btn--pri svg { color: var(--bcf-sobre-azul); }
.bcf-btn--ia { border-color: var(--bcf-azul-borde); color: var(--bcf-azul); background: var(--bcf-azul-suave); }
.bcf-btn:focus-visible, .bcf-mini:focus-visible, .bcf-chip:focus-visible, .bcf-cat:focus-visible, .bcf-tipo:focus-visible, .bcf-agregar:focus-visible, .bcf-tab:focus-visible, .bcf-paso:focus-visible, .bcf-op:focus-visible { outline: 3px solid var(--bcf-azul-suave); outline-offset: 1px; }
/* ---------- la IA ---------- */
.bcf-ia { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--bcf-azul-borde); background: rgba(var(--accent-rgb, 56, 132, 222), .06); }
.bcf-ia__cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bcf-ia__cab > div { flex: 1; min-width: 200px; }
.bcf-ia__cab b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.2; }
.bcf-ia__cab span { display: block; font-size: 12.5px; color: var(--bcf-tenue); margin-top: 2px; line-height: 1.4; }
.bcf-ia__ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--bcf-azul); color: var(--bcf-sobre-azul); }
.bcf-ia__ico svg { width: 22px; height: 22px; }
.bcf-ia__ico.is-mal { background: var(--bcf-mal-suave); color: var(--bcf-mal); }
.bcf-ia__ico.is-pensando svg { animation: bcf-gira 1.6s linear 6; }
.bcf-ia__modo { display: flex; flex-direction: column; gap: 6px; }
.bcf-ia__modo > b { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bcf-tenue); }
.bcf-ia__pie { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.bcf-ia__nota { font-size: 12.5px; color: var(--bcf-tenue); }
.bcf-ia--chica { padding: 10px 12px; }
.bcf-puntos { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.bcf-puntos i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; animation: bcf-punto 1.2s ease-in-out 6; }
.bcf-puntos i:nth-child(2) { animation-delay: .2s; }
.bcf-puntos i:nth-child(3) { animation-delay: .4s; }
@keyframes bcf-punto { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes bcf-gira { to { transform: rotate(360deg); } }
/* ---------- pie: guardar ---------- */
.bcf-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--bcf-linea); }
.bcf-pie__acc { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bcf-est { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--bcf-tenue); }
.bcf-est.is-ok { color: var(--bcf-ok); }
.bcf-est.is-mal { color: var(--bcf-mal); }
.bcf-est.is-sucio { color: var(--bcf-amb); }
/* ---------- B · pestañas y vista previa ---------- */
.bcf-dos { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.bcf-dos__izq { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bcf-dos__der { position: sticky; top: 12px; min-width: 0; }
.bcf-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--bcf-linea); background: var(--bcf-hundido); }
.bcf-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: 13px; color: var(--bcf-tenue); white-space: nowrap; }
.bcf-tab em { font-style: normal; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--bcf-azul-suave); color: var(--bcf-azul); }
.bcf-tab.is-on { background: var(--bcf-azul); color: var(--bcf-sobre-azul); }
.bcf-tab.is-on em { background: rgba(255, 255, 255, .22); color: var(--bcf-sobre-azul); }
.bcf-lema { margin: 0; font-size: 12.5px; color: var(--bcf-tenue); }
/* ---------- C · paso a paso ---------- */
.bcf-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bcf-paso { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; border-radius: 14px; border: 1px solid var(--bcf-linea); background: var(--bcf-hundido); text-align: left; min-width: 0; }
.bcf-paso i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 800; background: var(--bcf-azul-suave); color: var(--bcf-azul); }
.bcf-paso i svg { width: 14px; height: 14px; }
.bcf-paso b { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcf-paso em { font-style: normal; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--bcf-azul-suave); color: var(--bcf-azul); }
.bcf-paso.is-on { border-color: var(--bcf-azul); background: var(--bcf-azul-suave); }
.bcf-paso.is-on i { background: var(--bcf-azul); color: var(--bcf-sobre-azul); }
.bcf-paso.is-hecho i { background: var(--bcf-ok-suave); color: var(--bcf-ok); }
.bcf-paso__cuerpo { display: flex; flex-direction: column; gap: 10px; }
.bcf-nav { display: flex; justify-content: space-between; gap: 8px; }
/* ---------- «Así lo ve el cliente» (colores del portal, como un teléfono) ---------- */
.bcf-prev { display: flex; flex-direction: column; gap: 10px; }
.bcf-prev__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bcf-prev__cab > b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; }
.bcf-prev__cab > b svg { color: var(--bcf-azul); }
.bcf-prev__serv { font-size: 12.5px; color: var(--bcf-tenue); font-weight: 700; }
.bcf-prev__pie { margin: 0; font-size: 12px; color: var(--bcf-tenue); line-height: 1.4; }
.bcf-tel { --p-azul: #03269b; --p-tinta: #0a1633; --p-tenue: #5b6880; --p-ok: #1d9a5b; --p-amb: #c27500; --p-linea: rgba(10, 22, 51, .08);
  width: 100%; max-width: 400px; margin: 0 auto; padding: 16px 14px 14px; border-radius: 26px; background: #fff; border: 1px solid rgba(10, 22, 51, .1); color: var(--p-tinta); display: flex; flex-direction: column; gap: 10px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.bcf-prev--compacta .bcf-tel { max-width: none; font-size: 13px; }
.bcf-tel__ojal { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--p-azul); }
.bcf-cmp { padding: 10px 12px 4px; border-radius: 18px; background: rgba(10, 22, 51, .035); }
.bcf-cmp__f { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--p-linea); font-size: 12.5px; line-height: 1.3; }
.bcf-cmp__f > span:first-child { font-weight: 700; }
.bcf-cmp__f > span:first-child small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--p-azul); }
.bcf-cmp__cab { border-top: 0; padding-top: 2px; }
.bcf-cmp__col { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--p-tenue); text-align: center; }
.bcf-cmp__col.is-ok { color: var(--p-ok); }
.bcf-sello { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: rgba(29, 154, 91, .14); color: var(--p-ok); }
.bcf-sello svg { width: 12px; height: 12px; }
.bcf-cmp__v { display: flex; align-items: flex-start; gap: 5px; font-size: 12px; min-width: 0; }
.bcf-cmp__v > span { min-width: 0; overflow-wrap: break-word; }
.bcf-cmp__v svg { flex: none; width: 15px; height: 15px; padding: 2px; border-radius: 50%; background: rgba(29, 154, 91, .14); color: var(--p-ok); margin-top: 1px; }
.bcf-cmp__v small { display: block; font-size: 10.5px; font-weight: 600; color: var(--p-tenue); }
.bcf-cmp__v.is-no { color: var(--p-tenue); }
.bcf-cmp__v.is-no svg { background: rgba(10, 22, 51, .06); color: var(--p-tenue); }
.bcf-cmp__v.is-extra { color: var(--p-azul); font-weight: 700; }
.bcf-cmp__v.is-extra svg { background: rgba(3, 38, 155, .1); color: var(--p-azul); }
.bcf-ops { display: flex; flex-direction: column; gap: 8px; }
.bcf-op { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 18px; border: 1.5px solid rgba(10, 22, 51, .1); background: #fff; text-align: left; color: var(--p-tinta); }
.bcf-op.is-on { border-color: var(--p-azul); }
.bcf-op__ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(3, 38, 155, .08); color: var(--p-azul); }
.bcf-op__ico svg { width: 18px; height: 18px; }
.bcf-op.is-on .bcf-op__ico { background: var(--p-azul); color: #fff; }
.bcf-op__txt { flex: 1; min-width: 0; }
.bcf-op__txt > b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.2; }
.bcf-op__txt > b s { font-weight: 600; font-size: 12px; color: var(--p-tenue); margin-left: 5px; }
.bcf-op__txt > span { display: block; font-size: 12px; color: var(--p-tenue); margin-top: 2px; }
.bcf-etqs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.bcf-etq { display: inline-flex; align-items: center; gap: 4px; min-height: 21px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; font-style: normal; line-height: 1; background: rgba(29, 154, 91, .14); color: var(--p-ok); white-space: nowrap; }
.bcf-etq svg { width: 11px; height: 11px; }
.bcf-etq.is-azul { background: rgba(3, 38, 155, .1); color: var(--p-azul); }
.bcf-etq.is-top { background: var(--p-azul); color: #fff; }
.bcf-premio { padding: 12px; border-radius: 18px; border: 1.5px solid rgba(3, 38, 155, .35); background: #fff; display: flex; flex-direction: column; gap: 8px; }
.bcf-premio__cab { display: flex; align-items: center; gap: 10px; }
.bcf-premio__cab > span { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--p-azul); color: #fff; }
.bcf-premio__cab > span svg { width: 20px; height: 20px; }
.bcf-premio__cab b { display: block; font-size: 14px; font-weight: 800; }
.bcf-premio__cab small { display: block; font-size: 11.5px; color: var(--p-tenue); }
.bcf-premio ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.bcf-premio li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bcf-premio li > svg { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: rgba(29, 154, 91, .14); color: var(--p-ok); }
.bcf-premio li.is-desc > svg, .bcf-premio li.is-texto > svg { background: rgba(3, 38, 155, .1); color: var(--p-azul); }
.bcf-premio li > span { flex: 1; min-width: 0; }
.bcf-premio li > span b { display: block; font-weight: 800; line-height: 1.2; }
.bcf-premio li.is-texto > span b { font-weight: 600; }
.bcf-premio li > span small { display: block; font-size: 11px; color: var(--p-tenue); }
.bcf-premio li > strong { flex: none; font-size: 13px; font-weight: 800; color: var(--p-ok); }
.bcf-premio li.is-desc > strong { color: var(--p-azul); }
.bcf-premio__total { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--p-linea); }
.bcf-premio__total span, .bcf-premio__total small { font-size: 12px; color: var(--p-tenue); font-weight: 600; }
.bcf-premio__total b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--p-azul); line-height: 1; }
.bcf-nudge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 16px; background: rgba(10, 22, 51, .035); }
.bcf-nudge > svg { color: var(--p-azul); }
.bcf-nudge p { flex: 1; min-width: 150px; margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.bcf-nudge__btn { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1.5px solid var(--p-azul); color: var(--p-azul); font-weight: 800; font-size: 12px; }
.bcf-nota { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 16px; background: rgba(10, 22, 51, .035); }
.bcf-nota > span { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(194, 117, 0, .14); color: var(--p-amb); }
.bcf-nota > span svg { width: 20px; height: 20px; }
.bcf-nota b { display: block; font-size: 14px; font-weight: 800; }
.bcf-nota p { margin: 3px 0 0; font-size: 12.5px; color: var(--p-tenue); line-height: 1.4; }
/* ---------- pantallas estrechas ---------- */
@media (max-width: 900px) {
  .bcf-cols { grid-template-columns: 1fr; }
  .bcf-dos { grid-template-columns: 1fr; }
  .bcf-dos__der { position: static; }
  .bcf-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .bcf-mini span { display: none; }
  .bcf-mini { padding: 0 8px; }
  .bcf-in--num { width: 92px; }
  .bcf-tab { font-size: 12px; padding: 0 6px; }
  .bcf-pie__acc { width: 100%; }
  .bcf-pie__acc .bcf-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .bcf-puntos i, .bcf-ia__ico.is-pensando svg { animation: none; } }
/* columnas estrechas (A · Tres columnas): los botones de cada fila se quedan solo con el icono */
.bcf-modo { container-type: inline-size; }
@container (max-width: 430px) { .bcf-modo .bcf-mini span { display: none; } .bcf-modo .bcf-mini { padding: 0 8px; } }
/* el selector del servicio de ejemplo no ocupa todo el ancho (la card de Configuración pone width:100% a los select) */
.bcf .bcf-in--sel, .cfgx-card .bcf-in--sel { width: auto; max-width: 100%; }
@media (max-width: 520px) { .bcf .bcf-in--sel, .cfgx-card .bcf-in--sel { width: 100%; } }
/* la vista del cliente: una columna por forma de pago */
.bcf-cmp--3 .bcf-cmp__f { grid-template-columns: minmax(0, .85fr) repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 12px; }
.bcf-cmp--2 .bcf-cmp__f { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1fr)); }
.bcf-cmp--3 .bcf-cmp__v { font-size: 11.5px; gap: 4px; }
.bcf-cmp--3 .bcf-cmp__v svg { width: 14px; height: 14px; }
.bcf-cmp__f.is-sello { border-top: 0; padding: 2px 0 0; }
.bcf-cmp__f.is-enc { border-top: 0; padding-top: 4px; align-items: end; }
.bcf-cmp__enc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; min-width: 0; }
.bcf-cmp__enc b { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--p-tenue); }
.bcf-cmp__enc b.is-ok { color: var(--p-ok); }
.bcf-cmp__enc strong { font-size: 13px; font-weight: 800; color: var(--p-tinta); }
.bcf-cmp__enc small { font-size: 10px; color: var(--p-tenue); line-height: 1.2; }
.bcf-cmp__enc s { font-weight: 600; }