/* TraceForms — painel
   Tokens: canvas #F3F5F4 · superfície #FFFFFF · tinta #14231F · rota #0E7C66 · sinal #F2B33D · linha #DCE3E0
   Tipos: Bricolage Grotesque (títulos e números) · Instrument Sans (interface)
   Princípio: superfícies planas separadas por linhas finas; a única ênfase é a "rota" (navegação, progresso, funil). */
:root {
  --bulma-primary-h: 168deg; --bulma-primary-s: 80%; --bulma-primary-l: 27%;
  --bulma-link-h: 168deg; --bulma-link-s: 80%; --bulma-link-l: 27%;
  --bulma-info-h: 210deg; --bulma-info-s: 70%; --bulma-info-l: 40%;
  --bulma-success-h: 152deg; --bulma-success-s: 60%; --bulma-success-l: 32%;
  --bulma-warning-h: 40deg; --bulma-warning-s: 87%; --bulma-warning-l: 56%;
  --bulma-danger-h: 14deg; --bulma-danger-s: 70%; --bulma-danger-l: 42%;
  --bulma-family-primary: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bulma-radius: 8px; --bulma-radius-small: 6px; --bulma-radius-medium: 10px; --bulma-radius-large: 12px;
  --bulma-body-color: #2d3b37; --bulma-text-strong: #14231f; --bulma-scheme-main: #fff;
  --bulma-border: #dce3e0; --bulma-border-weak: #e8eeeb;

  --tf-canvas: #f3f5f4; --tf-surface: #ffffff; --tf-ink: #14231f; --tf-primary: #0e7c66; --tf-primary-dark: #0a5e4d;
  --tf-tint: #e3efeb; --tf-signal: #f2b33d; --tf-line: #dce3e0; --tf-muted: #5e6e69; --tf-faint: #93a19c;
  --tf-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
}
html { background: var(--tf-canvas); scroll-behavior: smooth; }
body { color: var(--bulma-body-color); -webkit-font-smoothing: antialiased; font-size: 15px; }
[x-cloak] { display: none !important; }
a { color: var(--tf-primary); }
a:hover { color: var(--tf-primary-dark); }
.has-text-muted { color: var(--tf-muted) !important; }
.has-text-primary { color: var(--tf-primary) !important; }
.is-size-8 { font-size: .74rem !important; }
.is-tabular, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .86em; }
.nowrap { white-space: nowrap; }
.is-clickable { cursor: pointer; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--tf-primary); outline-offset: 2px; }
.title, h1, h2, h3 { font-family: var(--tf-display); letter-spacing: -.015em; }

/* ---------- Estrutura ---------- */
.fp-app { display: flex; min-height: 100vh; }
.fp-sidebar { width: 248px; flex: none; background: var(--tf-surface); border-right: 1px solid var(--tf-line); display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 40; transition: transform .2s; }
.fp-main { flex: 1; margin-left: 248px; min-width: 0; display: flex; flex-direction: column; }
.fp-brand { display: flex; align-items: center; gap: .55rem; padding: 1.3rem 1.25rem 1rem; white-space: nowrap; overflow: hidden; color: var(--tf-ink); font: 650 1.2rem/1 var(--tf-display); letter-spacing: -.02em; }
.fp-brand:hover { color: var(--tf-ink); }
.fp-brand svg { flex: none; }

.fp-account { margin: 0 .85rem .5rem; }
.fp-account-btn { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 10px; background: var(--tf-canvas); border: 1px solid var(--tf-line); color: var(--tf-ink); cursor: pointer; text-align: left; font: inherit; }
.fp-account-btn:hover { border-color: #c6d2cd; }
.fp-account-btn small { display: block; color: var(--tf-muted); font-size: .74rem; }
.fp-account .dropdown, .fp-account .dropdown-trigger { width: 100%; display: block; }
.fp-account .dropdown-menu { width: 100%; }

/* Navegação: itens com ícone e rótulo; o ativo ganha fundo suave e uma barra à esquerda. */
.fp-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .35rem .75rem 1rem; display: flex; flex-direction: column; gap: 2px; }
.fp-nav-label { font-size: .76rem; color: var(--tf-faint); padding: 1.1rem .7rem .35rem; font-weight: 600; white-space: nowrap; }
.fp-nav a { position: relative; display: flex; align-items: center; gap: .75rem; height: 40px; padding: 0 .7rem; border-radius: 9px; color: var(--tf-muted); font-weight: 550; font-size: .93rem; white-space: nowrap; transition: background .12s, color .12s; }
.fp-nav a > i:first-child { width: 20px; flex: none; text-align: center; font-size: .95rem; color: var(--tf-faint); transition: color .12s; }
.fp-nav a:hover { color: var(--tf-ink); background: var(--tf-canvas); }
.fp-nav a:hover > i:first-child { color: var(--tf-ink); }
.fp-nav a.is-active { color: var(--tf-ink); font-weight: 650; background: var(--tf-tint); }
.fp-nav a.is-active::before { content: ''; position: absolute; left: -.75rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tf-primary); }
.fp-nav a.is-active > i:first-child { color: var(--tf-primary); }
.fp-nav a .ext { margin-left: auto; font-size: .68rem; color: var(--tf-faint); }
.fp-nav a.is-admin-link > i:first-child { color: #b07a10; }
.sb-top { display: flex; align-items: center; }
.sb-collapse { display: flex; align-items: center; gap: .75rem; height: 38px; margin: 0 .75rem .5rem; padding: 0 .7rem; border: 0; border-radius: 9px; background: none; color: var(--tf-faint); font: 550 .86rem/1 var(--bulma-family-primary); cursor: pointer; white-space: nowrap; }
.sb-collapse i { width: 20px; text-align: center; transition: transform .2s; }
.sb-collapse:hover { background: var(--tf-canvas); color: var(--tf-ink); }

/* Menu recolhido: só ícones (apenas em telas largas) */
@media (min-width: 1024px) {
  .fp-sidebar, .fp-main { transition: width .2s ease, margin-left .2s ease; }
  html.sb-collapsed .fp-sidebar { width: 72px; }
  html.sb-collapsed .fp-main { margin-left: 72px; }
  html.sb-collapsed .fp-sidebar .lbl { display: none !important; }
  html.sb-collapsed .fp-brand { padding: 1.3rem 0 1rem; justify-content: center; width: 100%; }
  html.sb-collapsed .fp-account { margin: 0 .75rem .5rem; }
  html.sb-collapsed .fp-account-btn { justify-content: center; padding: .45rem 0; }
  html.sb-collapsed .fp-account .dropdown-menu { width: 260px; }
  html.sb-collapsed .fp-nav { padding: .35rem .75rem 1rem; }
  html.sb-collapsed .fp-nav a { justify-content: center; padding: 0; }
  html.sb-collapsed .fp-nav-label { height: 1px; padding: 0; margin: .9rem .5rem; background: var(--tf-line); overflow: hidden; }
  html.sb-collapsed .sb-collapse { justify-content: center; padding: 0; }
  html.sb-collapsed .sb-collapse i { transform: rotate(180deg); }
  html.sb-collapsed .fp-user { justify-content: center; padding: .85rem 0; }
  /* Dica com o nome do item ao passar o mouse */
  html.sb-collapsed .fp-sidebar [data-tip]:hover::after { content: attr(data-tip); position: fixed; left: 80px; transform: translateY(0); background: var(--tf-ink); color: #fff; font: 550 .82rem/1 var(--bulma-family-primary); padding: .5rem .65rem; border-radius: 7px; white-space: nowrap; z-index: 60; pointer-events: none; box-shadow: 0 8px 24px -8px rgba(0,0,0,.35); }
  html.sb-collapsed .fp-nav a.is-active::before { left: -.75rem; }
}
html:not(.sb-collapsed) .sb-collapse[data-tip]::after { display: none; }
@media (max-width: 1023px) { .sb-collapse { display: none; } }

.fp-user { border-top: 1px solid var(--tf-line); padding: .85rem; display: flex; align-items: center; gap: .65rem; }
.fp-user .name { color: var(--tf-ink); font-weight: 600; font-size: .88rem; line-height: 1.2; }
.fp-user .role { font-size: .74rem; color: var(--tf-muted); }
.fp-user .button { background: transparent; border: 0; color: var(--tf-muted); }
.fp-user > form:last-child { margin-left: auto; }
.fp-user > a.button + form { margin-left: 0; }
.fp-user .button:hover { color: var(--tf-ink); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 650; font-size: .76rem; color: #fff; background: var(--tf-ink); flex: none; }
.avatar.is-small { width: 24px; height: 24px; font-size: .64rem; border-radius: 6px; }
.fp-account-btn .avatar { border-radius: 7px; }
.avatar.is-large { width: 48px; height: 48px; font-size: 1rem; border-radius: 12px; }
.avatar.is-xl { width: 88px; height: 88px; font-size: 1.6rem; display: grid; }
img.avatar { display: block; background: var(--tf-canvas); }
.photo-frame { flex: none; }

.fp-topbar { position: sticky; top: 0; z-index: 30; background: rgba(243, 245, 244, .88); backdrop-filter: saturate(1.3) blur(10px); border-bottom: 1px solid var(--tf-line); padding: .85rem 2.25rem; display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.fp-topbar h1 { font: 650 1.4rem/1.15 var(--tf-display); color: var(--tf-ink); letter-spacing: -.02em; }
.fp-topbar .crumb { font-size: .8rem; color: var(--tf-muted); margin-bottom: .1rem; }
.fp-topbar .crumb a { color: var(--tf-muted); }
.fp-topbar .crumb a:hover { color: var(--tf-primary); }
.fp-topbar .actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.fp-content { padding: 1.75rem 2.25rem 3.5rem; flex: 1; max-width: 1480px; width: 100%; }
.fp-burger { display: none; background: none; border: 0; font-size: 1.15rem; cursor: pointer; color: var(--tf-ink); }
.fp-overlay { display: none; }
@media (max-width: 1023px) {
  .fp-sidebar { transform: translateX(-100%); }
  .fp-app.is-open .fp-sidebar { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.15); }
  .fp-app.is-open .fp-overlay { display: block; position: fixed; inset: 0; background: rgba(20, 35, 31, .35); z-index: 35; }
  .fp-main { margin-left: 0; }
  .fp-burger { display: inline-block; }
  .fp-topbar, .fp-content { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- Superfícies ---------- */
.card, .box { background: var(--tf-surface); box-shadow: none; border: 1px solid var(--tf-line); border-radius: 12px; color: inherit; }
.box { padding: 1.3rem 1.4rem; }
.box:not(:last-child) { margin-bottom: 1.25rem; }
.card-header { box-shadow: none; border-bottom: 1px solid var(--tf-line); }
.box-title { display: flex; align-items: center; gap: .5rem; font: 600 1.02rem/1.3 var(--tf-display); color: var(--tf-ink); margin-bottom: 1rem; letter-spacing: -.01em; }
.box-title > i.fa-solid:first-child, .section-title > i.fa-solid:first-child { display: none; }
.box-title .help-icon { color: var(--tf-faint); font-size: .8rem; cursor: help; }
.box-title .right { margin-left: auto; font: 500 .82rem/1.3 var(--bulma-family-primary); letter-spacing: 0; }
.section-title { font: 650 1.2rem/1.2 var(--tf-display); margin: 2.25rem 0 1rem; color: var(--tf-ink); letter-spacing: -.015em; }

/* Faixa de indicadores: uma superfície, divisórias finas, sem ícones decorativos */
.columns:has(> .column > .kpi) { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0; margin: 0 0 1.5rem; background: var(--tf-surface); border: 1px solid var(--tf-line); border-radius: 12px; overflow: hidden; }
.columns:has(> .column > .kpi) > .column { width: auto !important; padding: 0; margin: 0 -1px -1px 0 !important; background: var(--tf-surface); box-shadow: inset -1px 0 0 var(--tf-line), inset 0 -1px 0 var(--tf-line); }
.kpi { padding: 1.1rem 1.3rem 1.15rem; height: 100%; border: 0; border-radius: 0; margin: 0 !important; }
.kpi .label { font-size: .84rem; color: var(--tf-muted); font-weight: 550; display: flex; align-items: center; gap: .4rem; }
.kpi .label .icon-wrap { display: none; }
.kpi .label .fa-circle-question { font-size: .75rem; color: var(--tf-faint); }
.kpi .value { font: 600 2rem/1.1 var(--tf-display); letter-spacing: -.03em; color: var(--tf-ink); margin-top: .35rem; font-variant-numeric: tabular-nums; }
.kpi .delta { font-size: .78rem; font-weight: 600; margin-top: .35rem; }
.delta.up { color: #12805c; } .delta.down { color: #b42318; } .delta.flat { color: var(--tf-faint); }

/* Tabelas */
.table { font-size: .9rem; background: transparent; color: inherit; }
.table thead th { font-size: .78rem; color: var(--tf-muted); font-weight: 600; border-bottom: 1px solid var(--tf-line) !important; padding-bottom: .5rem; }
.table td, .table th { vertical-align: middle; border-color: #e8eeeb; }
.table.is-hoverable tbody tr:not(.is-selected):hover { background: #f7faf9 !important; }
.table-wrap { overflow-x: auto; }
.bar-cell { position: relative; }
.bar-cell .bar { position: absolute; left: 0; top: 16%; bottom: 16%; background: var(--tf-tint); border-radius: 4px; z-index: 0; }
.bar-cell span, .bar-cell a { position: relative; z-index: 1; }
.conv-pill { display: inline-block; min-width: 54px; text-align: center; font-weight: 650; font-size: .8rem; padding: .12rem .45rem; border-radius: 6px; font-variant-numeric: tabular-nums; }
.conv-pill.has-background-success-light { background: var(--tf-tint) !important; color: var(--tf-primary-dark) !important; }
.conv-pill.has-background-warning-light { background: #fdf3dc !important; color: #7a5300 !important; }
.conv-pill.has-background-light { background: #eef1f0 !important; color: var(--tf-muted) !important; }

/* Abas do formulário */
.fp-tabs { border-bottom: 1px solid var(--tf-line); margin: -1.75rem -2.25rem 1.6rem; padding: 0 2.25rem; background: var(--tf-surface); display: flex; gap: .4rem; overflow-x: auto; }
.fp-tabs a { padding: .95rem .75rem .85rem; color: var(--tf-muted); font-weight: 600; font-size: .92rem; border-bottom: 2px solid transparent; white-space: nowrap; display: flex; gap: .45rem; align-items: center; }
.fp-tabs a i { font-size: .82rem; }
.fp-tabs a:hover { color: var(--tf-ink); }
.fp-tabs a.is-active { color: var(--tf-ink); border-bottom-color: var(--tf-primary); }
.fp-tabs a.is-active i { color: var(--tf-primary); }
@media (max-width: 1023px) { .fp-tabs { margin: -1.75rem -1rem 1.25rem; padding: 0 1rem; } }

/* Grupos de botões (abas de relatório, filtros de status) */
.buttons.has-addons .button { border-color: var(--tf-line); }
.buttons.has-addons .button.is-primary.is-selected { background: var(--tf-ink); border-color: var(--tf-ink); color: #fff; box-shadow: none; }
.tabs.is-toggle li.is-active a { background: var(--tf-ink); border-color: var(--tf-ink); }
.tabs.is-toggle a { border-color: var(--tf-line); }
.tabs a { font-weight: 600; }
.tabs li.is-active a { color: var(--tf-ink); border-bottom-color: var(--tf-primary); }

/* Filtros */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.25rem; }
.filter-bar .select select, .filter-bar .input { font-size: .86rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .35rem .22rem .7rem; border-radius: 999px; background: var(--tf-ink); color: #fff; font-size: .8rem; font-weight: 550; }
.chip a { color: inherit; opacity: .7; padding: 0 .3rem; }
.chip a:hover { opacity: 1; color: #fff; }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.tag { font-weight: 600; border-radius: 6px; }
.tag.is-success.is-light { background: var(--tf-tint); color: var(--tf-primary-dark); }

/* Lista de formulários */
.form-card { display: flex; flex-direction: column; height: 100%; transition: border-color .15s; }
.form-card:hover { border-color: #b9c8c2; }
.form-card .card-content { flex: 1; padding: 1.2rem 1.3rem; }
.form-card .title { font: 600 1.08rem/1.3 var(--tf-display); margin-bottom: .35rem !important; }
.form-card .title a { color: var(--tf-ink); }
.form-card .stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--tf-line); }
.form-card .stats > div { padding: .75rem .5rem; text-align: center; }
.form-card .stats > div + div { border-left: 1px solid var(--tf-line); }
.form-card .stats strong { display: block; font: 600 1.15rem/1.2 var(--tf-display); color: var(--tf-ink); font-variant-numeric: tabular-nums; }
.form-card .stats span { font-size: .76rem; color: var(--tf-muted); }
.form-card .card-footer { border-top: 1px solid var(--tf-line); }
.form-card .card-footer-item { font-size: .85rem; font-weight: 600; padding: .65rem; }
.form-card .card-footer-item + .card-footer-item { border-left-color: var(--tf-line); }

/* Estado vazio */
.empty { text-align: center; padding: 3.5rem 1rem; }
.empty .icon-big { width: 56px; height: 56px; margin: 0 auto 1.1rem; display: grid; place-items: center; font-size: 1.4rem; border-radius: 50%; border: 2px solid var(--tf-primary); color: var(--tf-primary); }
.empty h3 { font: 650 1.25rem/1.3 var(--tf-display); color: var(--tf-ink); }
.empty p { color: var(--tf-muted); max-width: 440px; margin: .45rem auto 1.3rem; }

/* Avisos */
.fp-toasts { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 100; display: flex; flex-direction: column; gap: .5rem; max-width: 420px; }
.fp-toast { box-shadow: 0 14px 40px -10px rgba(20, 35, 31, .35); padding: .85rem 2.5rem .85rem 1rem; border-radius: 10px; font-size: .9rem; }
.fp-toast.is-success { background: var(--tf-ink); color: #fff; }
.fp-toast.is-success i { color: var(--tf-signal); }
.notification { border-radius: 10px; }
.notification.is-light:not([class*=is-danger]):not([class*=is-warning]):not([class*=is-info]):not([class*=is-success]):not([class*=is-primary]) { background: var(--tf-canvas); }

/* Mapa de calor */
.heatmap { display: grid; grid-template-columns: 38px repeat(24, 1fr); gap: 3px; font-size: .7rem; }
.heatmap .hcell { aspect-ratio: 1; border-radius: 3px; min-height: 14px; }
.heatmap .hlabel { color: var(--tf-muted); display: flex; align-items: center; font-weight: 600; }
.heatmap .hhead { text-align: center; color: var(--tf-faint); }

/* Funil por pergunta como rota */
.funnel-row { display: grid; grid-template-columns: 34px minmax(160px, 2.2fr) 3fr 90px 90px 90px; gap: .75rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid #eef2f0; font-size: .88rem; }
.funnel-row.head { font-size: .78rem; color: var(--tf-muted); font-weight: 600; }
.funnel-row > span:first-child { color: var(--tf-faint); text-align: center; }
.funnel-track { height: 24px; background: var(--tf-canvas); border-radius: 5px; overflow: hidden; }
.funnel-fill { height: 100%; background: var(--tf-primary); border-radius: 5px; display: flex; align-items: center; justify-content: flex-end; padding-right: .5rem; color: #fff; font-weight: 650; font-size: .76rem; min-width: 36px; font-variant-numeric: tabular-nums; }
.funnel-q { font-weight: 600; color: var(--tf-ink); }
@media (max-width: 900px) { .funnel-row { grid-template-columns: 26px 1fr 1.4fr 70px; } .funnel-row > :nth-child(5), .funnel-row > :nth-child(6) { display: none; } }

.mini-bar { height: 6px; border-radius: 99px; background: #e8eeeb; overflow: hidden; }
.mini-bar > div { height: 100%; border-radius: 99px; background: var(--tf-primary); }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: .45rem; }
.chart-box { position: relative; height: 280px; }
.chart-box.is-small { height: 220px; }

/* ---------- Construtor ---------- */
.builder { display: grid; grid-template-columns: 240px minmax(0, 1fr) 340px; height: calc(100vh - 68px - 52px); }
.builder-col { overflow-y: auto; }
.builder-palette { background: var(--tf-surface); border-right: 1px solid var(--tf-line); padding: 1rem .85rem 2rem; }
.builder-canvas { padding: 1.5rem 2rem 6rem; }
.builder-props { background: var(--tf-surface); border-left: 1px solid var(--tf-line); padding: 1.1rem; }
.palette-group { font-size: .76rem; color: var(--tf-faint); font-weight: 600; margin: 1rem 0 .3rem .3rem; }
.palette-item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .42rem .5rem; border-radius: 8px; border: 0; background: none; cursor: grab; font: 500 .89rem/1.3 var(--bulma-family-primary); color: var(--bulma-body-color); text-align: left; }
.palette-item:hover { background: var(--tf-canvas); color: var(--tf-ink); }
.palette-item i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--tf-canvas); color: var(--tf-muted); font-size: .76rem; border: 1px solid var(--tf-line); }
.palette-item:hover i { color: var(--tf-primary); border-color: #b9d6cd; }
.q-card { background: var(--tf-surface); border: 1px solid var(--tf-line); border-radius: 10px; padding: .85rem 1rem; margin-bottom: .5rem; cursor: pointer; position: relative; display: flex; gap: .8rem; align-items: flex-start; transition: border-color .12s; }
.q-card:hover { border-color: #b9c8c2; }
.q-card.is-selected { border-color: var(--tf-primary); box-shadow: inset 3px 0 0 var(--tf-primary); }
.q-card .handle { cursor: grab; color: #c3cfca; padding-top: .2rem; }
.q-card .q-type { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--tf-canvas); color: var(--tf-muted); font-size: .76rem; flex: none; border: 1px solid var(--tf-line); }
.q-card.is-selected .q-type { color: var(--tf-primary); }
.q-card .q-body { flex: 1; min-width: 0; }
.q-card .q-label { font-weight: 600; color: var(--tf-ink); }
.q-card .q-meta { font-size: .78rem; color: var(--tf-muted); margin-top: .15rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.q-card .q-actions { display: flex; gap: .1rem; opacity: 0; transition: opacity .12s; }
.q-card:hover .q-actions, .q-card.is-selected .q-actions, .q-card:focus-within .q-actions { opacity: 1; }
.q-card .q-actions button { background: none; border: 0; color: var(--tf-muted); cursor: pointer; padding: .2rem .35rem; border-radius: 6px; }
.q-card .q-actions button:hover { background: var(--tf-canvas); color: var(--tf-ink); }
.q-preview { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.q-preview span { font-size: .76rem; padding: .12rem .5rem; border-radius: 5px; background: var(--tf-canvas); color: var(--tf-muted); }
.sortable-ghost { opacity: .35; }
.drop-zone { border: 1.5px dashed #b9c8c2; border-radius: 10px; padding: 1.5rem; text-align: center; color: var(--tf-muted); font-size: .9rem; }
.builder-head { background: var(--tf-surface); border: 1px solid var(--tf-line); border-radius: 12px; padding: 1.25rem 1.3rem; margin-bottom: 1.25rem; }
.builder-head input.title-input { font: 650 1.5rem/1.2 var(--tf-display); border: 0; width: 100%; outline: none; color: var(--tf-ink); letter-spacing: -.02em; background: none; }
.builder-head textarea { border: 0; width: 100%; outline: none; resize: none; color: var(--tf-muted); font: 400 .95rem/1.5 var(--bulma-family-primary); background: none; margin-top: .35rem; }
.props-title { font-size: .8rem; color: var(--tf-muted); font-weight: 650; margin: 1.15rem 0 .5rem; }
.props-title:first-child { margin-top: 0; }
.option-row { display: flex; gap: .35rem; margin-bottom: .35rem; align-items: center; }
.logic-rule { background: var(--tf-canvas); border: 1px solid var(--tf-line); border-radius: 8px; padding: .55rem; margin-bottom: .5rem; }
.save-state { font-size: .82rem; color: var(--tf-muted); display: inline-flex; align-items: center; gap: .35rem; }
.swatch { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--tf-line); padding: 0; cursor: pointer; }
@media (max-width: 1215px) { .builder { grid-template-columns: 210px minmax(0, 1fr) 300px; } }
@media (max-width: 1023px) { .builder { grid-template-columns: 1fr; height: auto; } .builder-palette { border-right: 0; border-bottom: 1px solid var(--tf-line); } .builder-col { overflow: visible; } }

/* Modelos */
.tpl { border: 1px solid var(--tf-line); border-radius: 12px; padding: 1.1rem; cursor: pointer; height: 100%; background: var(--tf-surface); transition: border-color .12s; }
.tpl:hover { border-color: #b9c8c2; }
.tpl.is-selected { border-color: var(--tf-primary); box-shadow: inset 0 0 0 1px var(--tf-primary); }
.tpl .tpl-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; margin-bottom: .8rem; }
.tpl p.has-text-weight-bold { font-family: var(--tf-display); font-weight: 600 !important; font-size: 1.02rem; }

/* Permissões */
.perm-table td { text-align: center; }
.perm-table td:first-child { text-align: left; }
.perm-table .fa-check { color: var(--tf-primary); }
.perm-table .fa-minus { color: #d3dcd8; }

/* Resposta individual */
.kv { display: grid; grid-template-columns: 140px 1fr; gap: .45rem 1rem; font-size: .88rem; }
.kv dt { color: var(--tf-muted); }
.kv dd { color: var(--tf-ink); word-break: break-word; }
.answer { padding: 1rem 0; border-bottom: 1px solid #eef2f0; }
.answer:last-child { border-bottom: 0; }
.answer .q { font-size: .84rem; color: var(--tf-muted); font-weight: 550; display: flex; gap: .45rem; align-items: center; }
.answer .q i { color: var(--tf-faint); }
.answer .a { font-size: 1.02rem; color: var(--tf-ink); margin-top: .3rem; word-break: break-word; }
.answer .a .text { white-space: pre-wrap; }
.file-grid { display: flex; flex-wrap: wrap; gap: .5rem; white-space: normal; }
.file-chip { display: flex; align-items: center; gap: .65rem; padding: .45rem .7rem .45rem .45rem; border: 1px solid var(--tf-line); border-radius: 10px; max-width: 320px; color: var(--tf-ink); background: var(--tf-canvas); }
.file-chip:hover { border-color: var(--tf-primary); color: var(--tf-ink); }
.file-chip img { width: 54px; height: 54px; object-fit: cover; border-radius: 7px; background: #fff; flex: none; }
.file-chip > i { width: 54px; height: 54px; display: grid; place-items: center; font-size: 1.3rem; color: var(--tf-primary); background: #fff; border-radius: 7px; flex: none; }
.file-chip span { min-width: 0; display: grid; }
.file-chip small { color: var(--tf-muted); font-size: .76rem; }
.file-chip.is-signature { max-width: 360px; }
.file-chip.is-signature img { width: 180px; height: 70px; object-fit: contain; }
.rank-list { margin: 0 0 0 1.2rem; white-space: normal; }
.timeline-item { display: flex; gap: .75rem; padding-bottom: 1rem; position: relative; }
.timeline-item::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--tf-line); }
.timeline-item:last-child::before { display: none; }
.timeline-dot { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; background: var(--tf-surface); border: 2px solid var(--tf-line); color: var(--tf-muted); }
.timeline-dot.is-success { border-color: var(--tf-primary); color: var(--tf-primary); }
.timeline-dot.is-current { background: var(--tf-primary); border-color: var(--tf-primary); color: #fff; }
.matrix-table td { border-color: #fff; }

/* Código */
.code-box { background: var(--tf-ink); color: #d6ebe4; border-radius: 10px; padding: 1rem 1.1rem; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; position: relative; white-space: pre-wrap; word-break: break-all; }
.code-box .copy { position: absolute; top: .5rem; right: .5rem; }

/* ---------- Autenticação ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-side { background: var(--tf-primary); color: #dff0ea; padding: 3rem clamp(2rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-side .fp-brand { color: #fff; padding: 0; }
.auth-side h2 { color: #fff; font: 600 clamp(2rem, 3.4vw, 2.8rem)/1.1 var(--tf-display); letter-spacing: -.03em; max-width: 13em; }
.auth-side ul { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 30em; }
.auth-side li { margin: .7rem 0; padding-left: 1.6rem; position: relative; }
.auth-side li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 9px; height: 9px; border-radius: 50%; background: var(--tf-signal); }
.auth-trace { position: absolute; right: -40px; top: 90px; width: 440px; opacity: .22; pointer-events: none; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--tf-surface); }
.auth-form > div { width: 100%; max-width: 400px; }
.auth-form .title { font-weight: 650; }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; } }

/* ---------- Bulma: ajustes de forma ---------- */
.input, .textarea, .select select { box-shadow: none; border-color: #ccd7d2; border-radius: 8px; }
.input:focus, .textarea:focus, .select select:focus { border-color: var(--tf-primary); box-shadow: 0 0 0 3px rgba(14, 124, 102, .16); }
.label { font-weight: 600; font-size: .88rem; color: var(--tf-ink); }
.help { font-size: .78rem; color: var(--tf-muted); }
.button { font-weight: 600; border-radius: 8px; }
.button.is-primary { background: var(--tf-primary); color: #fff; }
.button.is-primary:hover, .button.is-primary:focus { background: var(--tf-primary-dark); color: #fff; }
.button.is-primary.is-light { background: var(--tf-tint); color: var(--tf-primary-dark); }
.dropdown-content { border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(20, 35, 31, .25); border: 1px solid var(--tf-line); }
.dropdown-item { font-size: .9rem; }
.modal-card { border-radius: 14px; }
.pagination-link.is-current { background: var(--tf-ink); border-color: var(--tf-ink); }
.checkbox input, .radio input { accent-color: var(--tf-primary); }

/* Avisos de administração */
.impersonating { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .55rem 2.25rem; background: var(--tf-signal); color: #2a1f00; font-size: .88rem; }
.impersonating.is-danger { background: #b42318; color: #fff; }
.admin-flag { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 600; color: var(--tf-muted); }
.stat-line { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid #eef2f0; font-size: .9rem; }
.stat-line:last-child { border-bottom: 0; }
.stat-line strong { font-variant-numeric: tabular-nums; color: var(--tf-ink); }
.danger-zone { border-color: #f1c4bf; }

/* Seletor de formato no construtor: miniaturas desenhadas em CSS */
.layout-picker { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.layout-opt { display: grid; gap: .2rem; text-align: left; padding: .55rem; border: 1px solid var(--tf-line); border-radius: 10px; background: var(--tf-surface); cursor: pointer; font: inherit; }
.layout-opt:hover { border-color: #b9c8c2; }
.layout-opt.is-selected { border-color: var(--tf-primary); box-shadow: inset 0 0 0 1px var(--tf-primary); }
.layout-opt strong { font-size: .82rem; color: var(--tf-ink); }
.layout-opt small { font-size: .7rem; color: var(--tf-muted); line-height: 1.3; }
.layout-mini { position: relative; height: 54px; border-radius: 6px; background: var(--tf-canvas); overflow: hidden; display: block; margin-bottom: .25rem; }
.layout-mini i, .layout-mini b { position: absolute; display: block; border-radius: 2px; }
.layout-mini b { height: 5px; background: #c9d4cf; }
.layout-mini.is-classic i { left: 0; top: 0; bottom: 0; width: 38%; background: var(--tf-primary); }
.layout-mini.is-classic b:nth-of-type(1) { left: 46%; right: 8%; top: 12px; } .layout-mini.is-classic b:nth-of-type(2) { left: 46%; right: 14%; top: 25px; } .layout-mini.is-classic b:nth-of-type(3) { left: 46%; right: 8%; top: 38px; }
.layout-mini.is-card i { left: 20%; right: 20%; top: 6px; height: 4px; background: var(--tf-primary); }
.layout-mini.is-card b { left: 20%; right: 20%; height: 11px; background: #fff; border: 1px solid #d3ddd9; }
.layout-mini.is-card b:nth-of-type(1) { top: 13px; } .layout-mini.is-card b:nth-of-type(2) { top: 27px; } .layout-mini.is-card b:nth-of-type(3) { top: 41px; }
.layout-mini.is-conversational { background: var(--tf-ink); }
.layout-mini.is-conversational i { right: 0; top: 0; bottom: 0; width: 40%; background: linear-gradient(135deg, #2c4a43, #5aa889); }
.layout-mini.is-conversational b:nth-of-type(1) { left: 10%; width: 40%; top: 15px; height: 7px; background: #e6f2ee; } .layout-mini.is-conversational b:nth-of-type(2) { left: 10%; width: 30%; top: 27px; background: #93a19c; } .layout-mini.is-conversational b:nth-of-type(3) { left: 10%; width: 16%; top: 38px; height: 7px; background: var(--tf-signal); }

/* Área de administração: mesma estrutura, identidade escura para não confundir com o painel da conta */
.admin-sidebar { background: var(--tf-ink); border-right-color: #0d1714; }
.admin-sidebar .fp-brand { color: #fff; }
.admin-sidebar .fp-brand .brand-text { display: grid; line-height: 1.05; }
.admin-sidebar .fp-brand small { font: 500 .72rem/1.2 var(--bulma-family-primary); color: var(--tf-signal); letter-spacing: 0; margin-top: .2rem; }
.admin-sidebar .fp-nav-label { color: #6f8f86; }
.admin-sidebar .fp-nav a { color: #a9c3bb; }
.admin-sidebar .fp-nav a > i:first-child { color: #6f8f86; }
.admin-sidebar .fp-nav a:hover { background: #1d322d; color: #fff; }
.admin-sidebar .fp-nav a:hover > i:first-child { color: #fff; }
.admin-sidebar .fp-nav a.is-active { background: #1d322d; color: #fff; }
.admin-sidebar .fp-nav a.is-active::before { background: var(--tf-signal); }
.admin-sidebar .fp-nav a.is-active > i:first-child { color: var(--tf-signal); }
.admin-sidebar .sb-collapse { color: #6f8f86; }
.admin-sidebar .sb-collapse:hover { background: #1d322d; color: #fff; }
html.sb-collapsed .admin-sidebar .fp-nav-label { background: #2f4a43; }
.admin-exit { padding: 0 .85rem .85rem; }
.admin-exit .button { background: #1d322d; border-color: #2f4a43; color: #dfeee9; }
.admin-exit .button:hover { background: #26413a; color: #fff; }
.admin-sidebar .fp-user { border-top-color: #2f4a43; }
.admin-sidebar .fp-user .name { color: #fff; }
.admin-sidebar .fp-user .role { color: var(--tf-signal); }
.admin-sidebar .fp-user .button { color: #a9c3bb; }
.admin-sidebar .fp-user .avatar { background: #2f4a43; color: #fff; }

.layout-picker.is-wide { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.layout-picker.is-wide .layout-mini { height: 80px; }
.layout-picker.is-wide strong { font-size: .92rem; }
.layout-picker.is-wide small { font-size: .78rem; }
@media (max-width: 900px) { .layout-picker.is-wide { grid-template-columns: 1fr 1fr; } }
/* miniatura do Chat: balões alternados */
.layout-mini.is-chat i { left: 10%; top: 18%; width: 46%; height: 18%; border-radius: 6px 6px 6px 2px; background: #fff; border: 1px solid #d3ddd9; }
.layout-mini.is-chat b { border-radius: 6px 6px 2px 6px; }
.layout-mini.is-chat b:nth-of-type(1) { right: 10%; left: auto; width: 34%; top: 42%; height: 16%; background: var(--tf-primary); }
.layout-mini.is-chat b:nth-of-type(2) { left: 10%; width: 52%; top: 66%; height: 16%; background: #fff; border: 1px solid #d3ddd9; border-radius: 6px 6px 6px 2px; }
.layout-mini.is-chat b:nth-of-type(3) { display: none; }