/* bFlow DS — componentes. Só tokens, nenhum hexadecimal aqui. */
.bf{font-family:var(--font-sans);color:var(--texto-corpo);background:var(--bg);font-size:14px;line-height:21px;-webkit-font-smoothing:antialiased}
.bf *{box-sizing:border-box}
.bf-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.bf-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.bf-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.bf-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.bf-h3{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:26px;letter-spacing:-.01em;color:var(--texto);margin:0}
.bf-muted{color:var(--texto-suave)}
.bf-label{font:600 12px/16px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--texto-suave)}
.bf-mono{font-family:var(--font-mono);font-size:13px}

/* Logo */
.bf-logo{display:inline-flex;align-items:center;gap:.22em;color:var(--logo-ink);line-height:1}
.bf-logo svg{width:1em;height:1em;flex:none}
.bf-logo .ink{stroke:var(--logo-ink)}
.bf-logo .acc{stroke:var(--logo-acento)}
.bf-logo .name{font-family:var(--font-display);font-weight:700;font-size:.86em;letter-spacing:-.05em;color:var(--logo-ink)}
.bf-logo--onbrand,.bf-logo--onbrand .name{color:var(--branco)}
.bf-logo--onbrand .ink{stroke:var(--branco)}
.bf-logo--onbrand .acc{stroke:var(--lima-400)}
.bf-tile{display:inline-grid;place-items:center;background:var(--azul-500);border-radius:22.5%;width:64px;height:64px}
.bf-tile svg{width:78%;height:78%}
.bf-tile .ink{stroke:var(--branco)}.bf-tile .acc{stroke:var(--lima-400)}
.bf-tile--noite{background:var(--noite-700)}

/* Button */
.bf-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:40px;padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;font:600 15px/20px var(--font-sans);cursor:pointer;transition:background var(--duracao-rapida) var(--easing-saida),color var(--duracao-rapida),border-color var(--duracao-rapida);white-space:nowrap}
.bf-btn:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.bf-btn--primary{background:var(--marca);color:var(--sobre-marca)}
.bf-btn--primary:hover{background:var(--marca-hover)}
.bf-btn--secondary{background:var(--bg-elevado);color:var(--texto);border-color:var(--borda-forte)}
.bf-btn--secondary:hover{background:var(--bg-sutil)}
.bf-btn--ghost{background:transparent;color:var(--link)}
.bf-btn--ghost:hover{background:var(--bg-sutil)}
.bf-btn--danger{background:var(--erro);color:#fff}
.bf-btn--sm{height:32px;padding:0 var(--space-3);font-size:13px;line-height:18px}
.bf-btn[disabled],.bf-btn--disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.bf-btn .spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:bfspin .8s linear infinite}
@keyframes bfspin{to{transform:rotate(360deg)}}
.bf-btn--ai{background:var(--acento-fundo);color:var(--acento-texto)}

/* Input */
.bf-field{display:flex;flex-direction:column;gap:var(--space-2)}
.bf-field label{font:600 12px/16px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--texto-suave)}
.bf-input,.bf-select,.bf-textarea{width:100%;height:40px;padding:0 var(--space-3);border:1px solid var(--borda);border-radius:var(--radius-md);background:var(--bg-elevado);color:var(--texto);font:400 14px/20px var(--font-sans);transition:border-color var(--duracao-rapida)}
.bf-textarea{height:auto;min-height:88px;padding:var(--space-3);resize:vertical}
.bf-input:hover,.bf-select:hover,.bf-textarea:hover{border-color:var(--borda-forte)}
.bf-input:focus,.bf-select:focus,.bf-textarea:focus{outline:2px solid var(--foco);outline-offset:1px;border-color:var(--marca)}
.bf-input::placeholder{color:var(--texto-suave)}
.bf-input--error{border-color:var(--erro)}
.bf-help{font:400 12px/16px var(--font-sans);color:var(--texto-suave)}
.bf-help--error{color:var(--erro)}
.bf-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--texto-suave) 50%),linear-gradient(135deg,var(--texto-suave) 50%,transparent 50%);background-position:calc(100% - 18px) 17px,calc(100% - 13px) 17px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.bf-check{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--texto-corpo);cursor:pointer}
.bf-check input{appearance:none;width:18px;height:18px;border:1.5px solid var(--borda-forte);border-radius:var(--radius-sm);background:var(--bg-elevado);display:grid;place-items:center;margin:0}
.bf-check input:checked{background:var(--marca);border-color:var(--marca)}
.bf-check input:checked::after{content:"";width:10px;height:6px;border:2px solid var(--sobre-marca);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.bf-switch{position:relative;width:40px;height:22px;border-radius:var(--radius-pill);background:var(--borda-forte);border:0;cursor:pointer;transition:background var(--duracao-rapida)}
.bf-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--duracao-rapida) var(--easing-saida)}
.bf-switch[aria-checked="true"]{background:var(--marca)}
.bf-switch[aria-checked="true"]::after{transform:translateX(18px)}

/* Navigation */
.bf-sidebar{width:232px;background:var(--nav-bg);border-right:1px solid var(--borda);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);border-radius:var(--radius-xl)}
.bf-sidebar .bf-logo{font-size:24px;margin:var(--space-1) var(--space-2) var(--space-4)}
.bf-sidebar .bf-logo,.bf-sidebar .bf-logo .name,.bf-topbar .bf-logo,.bf-topbar .bf-logo .name{color:var(--logo-ink-nav)}
.bf-sidebar .bf-logo .ink,.bf-topbar .bf-logo .ink{stroke:var(--logo-ink-nav)}
.bf-sidebar .bf-logo .acc,.bf-topbar .bf-logo .acc{stroke:var(--logo-acento-nav)}
.bf-nav-item{display:flex;align-items:center;gap:var(--space-2);height:36px;padding:0 var(--space-3);border-radius:var(--radius-md);color:var(--nav-texto);font:500 14px/20px var(--font-sans);text-decoration:none;cursor:pointer}
.bf-nav-item:hover{background:var(--bg-sutil)}
.bf-nav-item.is-active{background:var(--nav-ativo-bg);color:var(--nav-ativo-texto);font-weight:600}
.bf-nav-item svg{width:18px;height:18px;flex:none}
.bf-nav-group{font:600 11px/16px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--texto-suave);padding:var(--space-3) var(--space-3) var(--space-1)}
.bf-tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--borda)}
.bf-tab{padding:var(--space-2) var(--space-3);font:500 14px/20px var(--font-sans);color:var(--texto-suave);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;background:none;border-top:0;border-left:0;border-right:0}
.bf-tab.is-active{color:var(--texto);border-bottom-color:var(--marca);font-weight:600}
.bf-crumb{display:flex;gap:var(--space-2);align-items:center;font:600 12px/16px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--texto-suave)}
.bf-crumb b{color:var(--marca)}
.bf-topbar{display:flex;align-items:center;gap:var(--space-3);height:52px;padding:0 var(--space-4);background:var(--nav-bg);border-bottom:1px solid var(--borda);border-radius:var(--radius-lg)}

/* Card */
.bf-card{background:var(--bg-elevado);border:1px solid var(--borda);border-radius:var(--radius-xl);padding:var(--space-5)}
.bf-card__title{font:700 14px/21px var(--font-sans);color:var(--texto);margin:0 0 var(--space-1)}
.bf-kpi{display:flex;flex-direction:column;gap:var(--space-1)}
.bf-kpi__value{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:800;font-size:32px;line-height:36px;letter-spacing:-.03em;color:var(--texto);font-variant-numeric:tabular-nums}
.bf-result::before{content:"";display:inline-block;width:22px;height:7px;border-radius:4px;background:var(--acento)}
.bf-kpi__delta{font:500 13px/18px var(--font-sans);color:var(--texto-suave)}
.bf-kpi__delta.up{color:var(--sucesso)}
.bf-card--dark{background:var(--noite-700);border-color:var(--borda-forte);color:var(--noite-300)}
.bf-card--dark .bf-kpi__value{color:var(--branco)}
.bf-card--dark .bf-result::before{background:var(--lima-400)}
.bf-card--dark .bf-label{color:var(--lima-400)}
.bf-ai{display:flex;align-items:flex-start;gap:var(--space-2);background:var(--acento-fundo);color:var(--acento-texto);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);font:400 14px/21px var(--font-sans)}
.bf-ai b{font-weight:600}
.bf-ai .body{color:var(--texto-corpo)}
.bf-progress{height:6px;border-radius:var(--radius-pill);background:var(--bg-sutil);overflow:hidden}
.bf-progress i{display:block;height:100%;background:var(--marca);border-radius:inherit}

/* Badge */
.bf-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-sm);font:600 12px/16px var(--font-sans);background:var(--bg-sutil);color:var(--texto-corpo);border:1px solid transparent}
.bf-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.bf-badge--neutral::before{display:none}
.bf-badge--success{color:var(--sucesso)}
.bf-badge--warning{color:var(--atencao)}
.bf-badge--danger{color:var(--erro)}
.bf-badge--brand{color:var(--link)}
.bf-badge--ai{background:var(--acento-fundo);color:var(--acento-texto)}
.bf-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--borda);background:var(--bg-elevado);color:var(--texto-corpo);font:500 13px/18px var(--font-sans);cursor:pointer}
.bf-chip.is-on{background:var(--nav-ativo-bg);color:var(--nav-ativo-texto);border-color:transparent}

/* Table */
.bf-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg-elevado);border:1px solid var(--borda);border-radius:var(--radius-xl);overflow:hidden;font:400 14px/20px var(--font-sans)}
.bf-table th{text-align:left;font:600 12px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-suave);padding:12px 16px;border-bottom:1px solid var(--borda);background:var(--bg-sutil)}
.bf-table td{padding:12px 16px;border-bottom:1px solid var(--borda);color:var(--texto-corpo);vertical-align:middle}
.bf-table tr:last-child td{border-bottom:0}
.bf-table tbody tr:hover td{background:var(--bg-sutil)}
.bf-table .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--texto)}
.bf-table .name{font-weight:600;color:var(--texto)}

/* Profile */
.bf-avatar{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-pill);background:var(--azul-100);color:var(--azul-700);font:600 14px/1 var(--font-sans);overflow:hidden}
.bf-avatar--sm{width:28px;height:28px;font-size:11px}
.bf-avatar--lg{width:64px;height:64px;font-size:22px}
.bf-avatar--company{border-radius:var(--radius-md);background:var(--bg-sutil);color:var(--texto)}
.bf-avatar--bflow{background:var(--azul-500)}
.bf-avatar--bflow svg{width:70%;height:70%}
.bf-avatar--bflow .ink{stroke:var(--branco)}.bf-avatar--bflow .acc{stroke:var(--lima-400)}
.bf-person{display:flex;align-items:center;gap:var(--space-3)}
.bf-person .n{font:600 14px/20px var(--font-sans);color:var(--texto)}
.bf-person .r{font:400 12px/16px var(--font-sans);color:var(--texto-suave)}
.bf-status-dot{position:relative}
.bf-status-dot::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--sucesso);border:2px solid var(--bg-elevado)}

/* Modal, drawer, toast */
.bf-overlay{background:var(--overlay);padding:var(--space-8);border-radius:var(--radius-xl);display:grid;place-items:center}
.bf-modal{width:440px;max-width:100%;background:var(--bg-elevado);border-radius:var(--radius-xl);box-shadow:var(--sombra-modal);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.bf-modal__title{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:26px;letter-spacing:-.01em;color:var(--texto);margin:0}
.bf-modal__actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-2)}
.bf-toast{display:flex;align-items:center;gap:var(--space-3);background:var(--noite-700);color:var(--branco);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);box-shadow:var(--sombra-flutuante);font:500 14px/20px var(--font-sans);max-width:420px}
.bf-toast .dot{width:8px;height:8px;border-radius:50%;background:var(--lima-400);flex:none}
.bf-toast .act{margin-left:auto;color:var(--azul-300);font-weight:600;cursor:pointer}
.bf-drawer{width:360px;background:var(--bg-elevado);border-left:1px solid var(--borda);border-radius:var(--radius-xl) 0 0 var(--radius-xl);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);box-shadow:var(--sombra-modal)}