/* Crown Digital · sistema visual grafite + laranja da marca (verde fica só para "ok"/positivo) */
:root {
  color-scheme: dark;
  --bg: #0c0e12;
  --side: #101216;
  --sf: #14171c;
  --sf2: #1a1e25;
  --sf3: #222730;
  --bd: #272c35;
  --bd2: #363d49;
  --tx: #f1f3f5;
  --mt: #a0a8b5;
  --mt2: #7f8999;
  --ac: #FF6A00;
  --ac-h: #FF8126;
  --ac2: #FF9A4D;
  --acb: rgba(255, 106, 0, .09);
  --acbd: rgba(255, 138, 51, .28);
  --ok: #10b981;
  --ok2: #59dfb0;
  --okb: rgba(16, 185, 129, .09);
  --okbd: rgba(52, 211, 153, .24);
  --marca-grad: linear-gradient(120deg, #FF9A00, #FF6A00 55%, #FF3300);
  --al: #efbf69;
  --alb: rgba(239, 191, 105, .09);
  --albd: rgba(239, 191, 105, .23);
  --er: #fb9299;
  --erb: rgba(251, 146, 153, .08);
  --erbd: rgba(251, 146, 153, .23);
  --info: #8ab5f8;
  --infob: rgba(138, 181, 248, .09);
  --infobd: rgba(138, 181, 248, .23);
  --pu: #b6a1f7;
  --pub: rgba(182, 161, 247, .1);
  --r: 16px;
  --side-w: 232px;
  --shadow: 0 4px 16px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .025);
  --surface: linear-gradient(155deg, rgba(255, 255, 255, .018), transparent 48%), var(--sf);
  --ease: 160ms ease;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Base, tipografia e acesso por teclado */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-padding-top: 24px; scrollbar-gutter: stable; }
body { color: var(--tx); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; text-align: inherit; touch-action: manipulation; }
button, a, summary, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a, summary { transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease), transform 120ms ease; }
:where(button, a, summary, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--ac2); outline-offset: 4px; }
::selection { background: rgba(255, 138, 51, .25); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--bd2) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 20px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.muted { color: var(--mt); }
.sm { font-size: 12px; }
h1 { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.2; font-weight: 700; letter-spacing: -.045em; text-wrap: balance; }
h2 { font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: -.025em; }
.eyebrow, .nav-label { color: var(--mt2); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { display: block; margin-bottom: 10px; color: var(--ac2); }
.amber-t { color: var(--al) !important; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--sf3); border: 1px solid var(--bd); padding: 2px 5px; border-radius: 5px; overflow-wrap: anywhere; }
:where(.kpi, .pf, .cli-num, .eq-num, .ind, .tabela, .valor, .rk-top, .etapa, .mrr, .op-stats) { font-variant-numeric: tabular-nums lining-nums; }
:where(.txt, .nm, .fc-txt, .corpo, .msg, .t, .alerta, .nota, .tk, .pill) { overflow-wrap: anywhere; }

/* Marca e entrada */
.brand { display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 600; letter-spacing: -.035em; }
.brand-name { display: flex; flex-direction: column; gap: 1px; }
.brand-name small { color: var(--mt2); font-size: 11px; font-weight: 400; letter-spacing: 0; }
.logo { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid rgba(255, 154, 77, .4); border-radius: 11px; background: linear-gradient(145deg, #FF9A00, #FF3300); color: #1A0800; font-size: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 14px rgba(255, 106, 0, .1); }
.login { min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 50% 15%, rgba(255, 106, 0, .07), transparent 60%); }
.login-card { width: 100%; max-width: 408px; display: flex; flex-direction: column; gap: 18px; padding: 36px; background: var(--surface); border: 1px solid var(--bd); border-radius: 22px; box-shadow: 0 24px 80px rgba(0, 0, 0, .25); }
.login-card .brand { margin-bottom: 12px; }
.login-card h1 { font-size: 25px; }
.login-copy { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.login-card label { display: flex; flex-direction: column; gap: 8px; color: var(--mt); font-size: 12px; font-weight: 500; }

/* Campos */
input, textarea, .campo { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--bd2); border-radius: 10px; padding: 11px 13px; background: #111419; color: var(--tx); transition: border-color var(--ease), box-shadow var(--ease); }
input::placeholder, textarea::placeholder { color: var(--mt2); opacity: 1; }
input:focus, textarea:focus, .campo:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--acb); }
textarea { resize: vertical; line-height: 1.6; }
select.campo { appearance: none; cursor: pointer; padding-right: 36px; max-width: 100%; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca6b4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 10 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.sel-sm { width: auto; font-size: 12px; padding: 10px 34px 10px 12px; }
input[type='file'][hidden] { display: none; }

/* Ações: geometria consistente em todo o painel */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 10px 16px; border: 1px solid var(--bd2); border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; }
.btn i { flex: none; font-size: 18px; }
.btn.primary, .send { background: var(--ac); border-color: #FF8A33; color: #1A0800; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 5px rgba(0, 0, 0, .12); }
.btn.ghost { background: rgba(255, 255, 255, .025); }
.btn.warn { background: var(--alb); border-color: var(--albd); color: var(--al); }
.btn.danger { background: var(--erb); border-color: var(--erbd); color: var(--er); }
.btn.ok { background: var(--okb); border-color: var(--okbd); color: var(--ok2); }
.btn.sm { font-size: 13px; padding: 9px 12px; }
.btn.xs { font-size: 12px; padding: 8px 10px; border-radius: 8px; }
.btn.full { width: 100%; }
.menu-mais .btn { justify-content: flex-start; }
button:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled { pointer-events: none; }
:where(.btn, .chip, .send, .icon-btn, .fab-mestre):active:not(:disabled) { transform: translateY(1px); }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--mt); font-size: 20px; flex: none; }
.icon-btn.box { border: 1px solid var(--bd2); }
.link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; color: var(--ac2); font-size: 12px; font-weight: 500; border-radius: 6px; }
.link i { font-size: 16px; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; max-width: 100%; padding: 9px 14px; border: 1px solid var(--bd); border-radius: 9px; color: var(--mt); font-size: 12px; font-weight: 500; background: var(--sf); }
.chip i { font-size: 17px; flex: none; }
.chip.on { color: var(--ac2); background: var(--acb); border-color: var(--acbd); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtros.sm .chip { font-size: 11px; padding: 8px 11px; }

/* Etiquetas de estado */
.pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px; border: 1px solid transparent; border-radius: 6px; font-size: 11px; font-weight: 500; line-height: 1.5; }
.pill i { font-size: 13px; flex: none; }
.dot, .pill .dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--okb); border-color: var(--okbd); color: var(--ok2); }
.pill.warn { background: var(--alb); border-color: var(--albd); color: var(--al); }
.pill.err { background: var(--erb); border-color: var(--erbd); color: var(--er); }
.pill.info { background: var(--infob); border-color: var(--infobd); color: var(--info); }
.pill.neutral { background: rgba(255, 255, 255, .035); border-color: var(--bd); color: #b5bdc9; }
.pill.status { padding: 6px 10px; font-size: 11px; border-radius: 7px; }
.pill.status.warn .dot { animation: pulso 1.4s ease-in-out infinite; }
.badge { margin-left: auto; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border: 1px solid var(--albd); border-radius: 6px; background: var(--alb); color: var(--al); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.badge.err { background: var(--erb); border-color: var(--erbd); color: var(--er); }

/* Navegação e área de trabalho */
.app { min-height: 100dvh; }
.side { position: fixed; inset: 0 auto 0 0; z-index: 5; width: var(--side-w); display: flex; flex-direction: column; gap: 18px; padding: 26px 14px 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .012), transparent 35%), var(--side); border-right: 1px solid var(--bd); overflow-y: auto; }
.side-brand { padding: 2px 8px 12px; }
.nav { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.nav-label { padding: 7px 12px 5px; }
.nav-label.gestao { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--bd); }
.nav button { position: relative; display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 10px 12px; border: 1px solid transparent; border-radius: 9px; color: var(--mt); font-size: 13px; font-weight: 500; }
.nav button i { flex: none; font-size: 20px; color: var(--mt2); }
.nav button.on { background: linear-gradient(90deg, rgba(255, 106, 0, .12), rgba(255, 106, 0, .045)); border-color: var(--acbd); color: #FFF1E6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
.nav button.on i { color: var(--ac2); }
.nav button.on::after { content: ''; position: absolute; left: -15px; top: 13px; bottom: 13px; width: 3px; background: var(--ac2); border-radius: 0 4px 4px 0; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 14px 4px 0 8px; border-top: 1px solid var(--bd); }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--acbd); border-radius: 11px; background: linear-gradient(140deg, rgba(255, 138, 51, .15), rgba(255, 106, 0, .05)); color: #FFB27A; font-size: 12px; font-weight: 600; letter-spacing: -.02em; }
.side-user .u { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.side-user .u b { font-weight: 500; }
.side-user small { color: var(--mt2); font-size: 10px; }
main { margin-left: var(--side-w); width: calc(100% - var(--side-w)); max-width: 1920px; padding: 36px 32px 56px; }
.tab { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 4px; }
.page-head > *, .head-acts > * { min-width: 0; }
.page-head p { margin-top: 8px; color: var(--mt); font-size: 13px; }
.head-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bottom-nav { display: none; }

/* Superfícies */
.card { min-width: 0; padding: 24px; background: var(--surface); border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--shadow); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.card-head > div { min-width: 0; }
.card-head p { margin-top: 5px; max-width: 56ch; line-height: 1.6; }
.card-head > .link { flex: none; margin: -10px -2px -6px 0; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.duo-main { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.duo-um { grid-template-columns: minmax(0, 1fr); }

/* Métricas: leitura antes da decoração */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpis.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; background: var(--surface); border: 1px solid var(--bd); border-radius: var(--r); text-align: left; box-shadow: var(--shadow); }
.kpi > .kpi-ic { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 9px; font-size: 18px; background: rgba(255, 255, 255, .025); border-color: transparent; }
.kpi-ic { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 1px solid var(--acbd); border-radius: 13px; background: var(--acb); color: var(--ac2); font-size: 24px; }
.kpi-ic.sm { width: 40px; height: 40px; border-radius: 11px; font-size: 20px; }
.kpi-ic.amber, .c-amber { background: var(--alb); border-color: var(--albd); color: var(--al); }
.kpi-ic.purple, .c-purple { background: var(--pub); border-color: rgba(182, 161, 247, .24); color: var(--pu); }
.kpi-ic.gray, .c-gray { background: var(--sf3); border-color: var(--bd2); color: #bec7d4; }
.kpi-ic.blue, .c-blue { background: var(--infob); border-color: var(--infobd); color: var(--info); }
.kpi-ic.red, .c-red { background: var(--erb); border-color: var(--erbd); color: var(--er); }
.c-orange { background: rgba(251, 169, 115, .08); border-color: rgba(251, 169, 115, .23); color: #fba973; }
.c-green { background: var(--okb); border-color: var(--okbd); color: var(--ok2); }
.kpi-b { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; }
.kpi-l { display: flex; align-items: center; min-height: 30px; padding-right: 34px; color: #b5bdc9; font-size: 12px; line-height: 1.4; }
.kpi strong { font-size: clamp(26px, 2.3vw, 36px); line-height: 1.15; letter-spacing: -.045em; font-weight: 600; overflow-wrap: anywhere; }
.kpi-s { color: var(--mt); font-size: 11px; line-height: 1.6; }
.kpi-s:empty { display: none; }
.up { color: var(--ok2); }
.down { color: var(--er); }
.prog { display: block; height: 5px; width: 100%; margin-top: 6px; background: var(--sf3); border-radius: 20px; overflow: hidden; }
.prog span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ac); transition: width 180ms ease; }
.prog.lg { height: 7px; }

/* Alertas, erros e vazio */
.alertas { display: flex; flex-direction: column; gap: 10px; }
.alertas:empty { display: none; }
.alerta { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid; border-radius: 11px; font-size: 12px; }
.alerta i { flex: none; margin-top: 1px; font-size: 18px; }
.alerta.err { background: var(--erb); border-color: var(--erbd); color: #ffb4b9; }
.alerta.warn { background: var(--alb); border-color: var(--albd); color: #f4d498; }
.alerta.info { background: var(--infob); border-color: var(--infobd); color: #b1cefa; }
.erro { color: var(--er); font-size: 12px; line-height: 1.6; }
.erro:not(:empty) { padding: 11px 13px; border: 1px solid var(--erbd); border-radius: 9px; background: var(--erb); }
.erro:empty { display: none; }
.vazio { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 146px; padding: 28px 22px; border: 1px dashed var(--bd); border-radius: 12px; color: var(--mt); font-size: 12px; line-height: 1.8; text-align: center; text-wrap: pretty; }
.vazio > i { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--bd); border-radius: 12px; background: var(--sf2); color: var(--ac2); font-size: 23px; }
.vazio:has(.ti-alert-triangle) { background: var(--erb); border-color: var(--erbd); color: var(--er); }
.vazio > .ti-alert-triangle { background: var(--erb); border-color: var(--erbd); color: var(--er); }

/* Equipe */
.equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 2px; }
.ag { min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 16px 14px; border: 1px solid var(--bd); border-radius: 12px; background: rgba(0, 0, 0, .1); scroll-snap-align: start; }
.ag.on { background: linear-gradient(150deg, rgba(255, 106, 0, .07), transparent); border-color: var(--acbd); }
.ag-top { display: flex; align-items: center; gap: 12px; min-width: 0; font-weight: 600; }
.ag-top > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipe .ag-top { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 12px; }
.ag-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--bd); border-radius: 11px; background: var(--sf2); color: #c2cbd8; font-size: 21px; }
.ag.on .ag-ic { background: var(--acb); border-color: var(--acbd); color: var(--ac2); }
.ag-st { display: flex; align-items: center; gap: 7px; color: var(--mt); font-size: 12px; line-height: 1.5; }
.ag-st .dot { background: var(--mt2); }
.ag-st.ok { color: var(--ok2); }
.ag-st.ok .dot { background: var(--ok); }
.ag-st.work { color: var(--al); }
.ag-st.work .dot { background: var(--al); animation: pulso 1.4s ease-in-out infinite; }
.ag-st.err { color: var(--er); }
.ag-st.err .dot { background: var(--er); }
.ag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.ag-card, .eq-card { min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 22px; border: 1px solid var(--bd); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.ag-card .ag-top, .eq-card .ag-top { font-size: 15px; }
.ag-card p { color: var(--mt); font-size: 12px; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ag-card .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.eq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.eq-card.ativo { border-color: var(--albd); background: linear-gradient(145deg, rgba(239, 191, 105, .04), transparent), var(--sf); }
.eq-num { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.eq-num div { display: flex; flex-direction: column; gap: 4px; padding: 10px 3px; border: 1px solid var(--bd); border-radius: 8px; background: rgba(0, 0, 0, .12); text-align: center; }
.eq-num b { font-size: 19px; font-weight: 600; }
.eq-num span { font-size: 10px; color: var(--mt); }
.eq-tarefa { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.eq-tarefa > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-ultima { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ac2); font-size: 12px; text-align: left; overflow-wrap: anywhere; }
.eq-ultima i { flex: none; }
.eq-card > .btn { margin-top: auto; }

/* Listas de tarefas, prazos e recebíveis */
.linhas { display: flex; flex-direction: column; min-width: 0; }
.linha { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; min-height: 76px; padding: 18px 2px; border-top: 1px solid var(--bd); text-align: left; }
.linhas > .linha:first-child { border-top: 0; padding-top: 6px; }
.linhas > .linha:last-child { padding-bottom: 6px; }
.linha .txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.linha .t { font-size: 14px; font-weight: 500; line-height: 1.6; }
.linha .s { color: var(--mt); font-size: 12px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.linha .tags { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; max-width: 48%; }
.linha .data { display: inline-flex; align-items: center; gap: 5px; color: var(--mt); font-size: 12px; }
.linha .data i { color: var(--mt2); font-size: 15px; }
.linha .quando { font-size: 12px; font-weight: 500; }
.quando.err { color: var(--er); }
.quando.warn { color: var(--al); }
.quando.ok { color: var(--mt); }
.seta { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px; color: var(--mt2); font-size: 17px; }
.linha .valor { font-size: 15px; font-weight: 600; }
.linha .dir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Quadro do time: rolagem contida na superfície */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(208px, 1fr)); gap: 12px; overflow-x: auto; padding: 2px 2px 14px; scroll-snap-type: x proximity; }
.col { display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: 12px; background: rgba(0, 0, 0, .12); border: 1px solid var(--bd); border-radius: 12px; scroll-snap-align: start; }
.col-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 2px 12px; font-size: 12px; font-weight: 500; }
.col-head .pill { min-width: 24px; justify-content: center; }
.col > .muted { padding: 24px 8px; border: 1px dashed var(--bd); border-radius: 8px; font-size: 11px; text-align: center; }
.tk { padding: 14px; border: 1px solid var(--bd); border-radius: 10px; background: var(--surface); box-shadow: 0 2px 3px rgba(0, 0, 0, .1); }
.tk .t { font-size: 12px; font-weight: 500; line-height: 1.7; }
.tk .s { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; color: var(--mt); font-size: 10px; }
.tk .s span { display: inline-flex; align-items: center; gap: 3px; }

/* Tráfego e tabelas */
.perf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.perf .pf { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--bd); border-radius: 11px; background: rgba(0, 0, 0, .12); }
.perf .pf > span { color: var(--mt); font-size: 11px; }
.perf .pf strong { font-size: 25px; font-weight: 600; line-height: 1.2; letter-spacing: -.04em; overflow-wrap: anywhere; }
.perf .pf small { color: var(--mt); font-size: 10px; line-height: 1.7; }
/* O segundo indicador gerado em renderPerfInicio é CPA (R$).
   Restrição do Júlio: valores monetários aparecem somente em Tráfego. */
#perfInicio > .pf:nth-child(2):not(.skeleton) { display: none; }
.perf .perf-connect { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; padding: 20px; }
.perf-connect > .perf-connect-copy { flex: 1; min-width: min(100%, 180px); font-size: 12px; line-height: 1.8; }
.perf-connect-copy b { color: var(--tx); font-size: 13px; font-weight: 500; }
.tabela-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--bd); border-radius: 11px; }
.tabela { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 12px; }
.tabela th { padding: 14px 16px; border-bottom: 1px solid var(--bd2); background: var(--sf2); color: var(--mt); font-size: 10px; font-weight: 500; text-align: left; white-space: nowrap; }
.tabela td { padding: 18px 16px; border-bottom: 1px solid var(--bd); white-space: nowrap; }
.tabela td b { font-weight: 500; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td.n, .tabela th.n { text-align: right; }
.tabela tr:has(.vazio) td { white-space: normal; }
.tabela:has(.vazio) { min-width: 100%; }
.plat { display: inline-flex; align-items: center; gap: 7px; }
.plat i { font-size: 17px; }
.plat.meta i { color: var(--info); }
.plat.google i { color: var(--al); }
.plat.tiktok i { color: #f2a5d3; }
.conectar { display: flex; flex-direction: column; gap: 20px; }
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.passo-c { min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 18px; border: 1px solid var(--bd); border-radius: 11px; background: rgba(0, 0, 0, .12); overflow-wrap: anywhere; }
.passo-c > i { flex: none; }
.passo-c b { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 500; }
.passo-c span { font-size: 11px; line-height: 1.8; color: var(--mt); }
.passo-c .ok { color: var(--ok2); }
#trConectar:empty { display: none; }
#cliTrafego { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* Gráficos e produção */
.chart-wrap { position: relative; min-width: 0; }
.mini-chart { height: 220px; }
.bar-chart { height: 282px; }
.mini-chart svg, .bar-chart svg { display: block; width: 100%; height: 100%; font-family: inherit; }
.bar-chart svg text { fill: var(--mt); }
.chart-vazio { position: absolute; inset: 0 0 22px 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; text-align: center; }
.chart-vazio .ci { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 3px; border: 1px solid var(--bd2); border-radius: 12px; background: var(--sf2); color: var(--mt); font-size: 23px; }
.chart-vazio b { font-size: 13px; font-weight: 500; }
.chart-vazio span.sm { max-width: 310px; font-size: 11px; }
.legenda { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; color: var(--mt); font-size: 10px; }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.sw-fat { background: var(--ac); }
.sw-rec { background: repeating-linear-gradient(45deg, var(--al) 0 2px, var(--bg) 2px 4px); }
.sw-meta { height: 0; border-top: 2px dashed var(--al); border-radius: 0; }
.tip { position: fixed; z-index: 30; max-width: calc(100vw - 16px); min-width: 170px; padding: 13px 15px; border: 1px solid var(--bd2); border-radius: 11px; background: var(--sf2); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); font-size: 11px; pointer-events: none; }
.tip b { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 500; text-transform: capitalize; }
.tip .row { display: flex; justify-content: space-between; gap: 16px; line-height: 1.9; }
.producao { display: flex; flex-direction: column; gap: 16px; }
.etapa { display: flex; flex-direction: column; gap: 8px; }
.etapa-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.etapa-top b { font-size: 12px; font-weight: 500; }
.rk-bar { height: 5px; overflow: hidden; border-radius: 20px; background: var(--sf3); }
.rk-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ac); transition: width 180ms ease; }
.rk-bar.dim span { background: #198b69; }
.etapa.info .rk-bar span { background: var(--info); }
.etapa.warn .rk-bar span { background: var(--al); }
.etapa.ok .rk-bar span { background: var(--ok); }
.etapa.err .rk-bar span { background: var(--er); }
.etapa.neutral .rk-bar span { background: var(--mt2); }
.mrr { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 16px; border: 1px solid var(--bd); border-radius: 11px; background: rgba(0, 0, 0, .12); }
.mrr > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mrr b { font-size: 12px; font-weight: 500; }
.mrr strong { color: var(--ac2); font-size: 28px; font-weight: 600; letter-spacing: -.04em; }

/* Fichas e abas dos clientes */
#cliLista { display: flex; flex-direction: column; gap: 24px; }
.cli-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.cli { min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: 22px; border: 1px solid var(--bd); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; transition: border-color var(--ease), box-shadow var(--ease); }
.cli-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cli-head .avatar { width: 44px; height: 44px; font-size: 14px; }
.cli-head .nm { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.cli-head .nm b { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.cli-head .nm .sm { font-size: 11px; }
.cli-head > .pill { flex: none; }
.cli-num { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cli-num div { min-width: 0; padding: 12px 10px; border: 1px solid var(--bd); border-radius: 10px; background: rgba(0, 0, 0, .12); }
.cli-num span { display: block; margin-bottom: 6px; color: var(--mt); font-size: 11px; }
.cli-num strong { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.035em; overflow-wrap: anywhere; }
.cli-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.cli-acts { display: flex; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--bd); }
.cli-acts .btn { flex: 1; padding-inline: 8px; }
.det-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 6px 0; }
.det-head .avatar { width: 52px; height: 52px; font-size: 18px; border-radius: 14px; }
.det-head .nm { flex: 1; min-width: min(100%, 180px); }
.det-head h1 { font-size: 28px; }
.det-head p { margin-top: 5px; font-size: 12px; }
.voltar { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; padding: 0 5px; border-radius: 6px; color: var(--mt); font-size: 12px; font-weight: 500; }
.abas-cli { display: flex; gap: 14px; border-bottom: 1px solid var(--bd); overflow-x: auto; padding-top: 4px; scrollbar-width: thin; }
.abas-cli button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-height: 48px; padding: 12px 8px; border-bottom: 2px solid transparent; color: var(--mt); font-size: 12px; font-weight: 500; white-space: nowrap; }
.abas-cli button i { font-size: 18px; }
.abas-cli button.on { color: var(--tx); border-bottom-color: var(--ac); }
.abas-cli button.on i { color: var(--ac2); }
.abas-cli .badge { margin-left: 2px; }
.secoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip .n { display: grid; place-items: center; min-width: 20px; padding: 1px 6px; border-radius: 5px; background: var(--sf3); color: var(--mt); font-size: 10px; }
.chip.on .n { background: rgba(255, 106, 0, .14); color: var(--ac2); }
.entregas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 238px), 1fr)); gap: 12px; }
.entrega { min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--bd); border-radius: 11px; background: rgba(0, 0, 0, .12); text-align: left; }
.entrega .txt { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.entrega b { display: block; overflow: hidden; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.entrega small { color: var(--mt); font-size: 10px; }
.entrega .mini { width: 52px; height: 52px; object-fit: cover; flex: none; border: 1px solid var(--bd2); border-radius: 9px; background: var(--sf3); }
.atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.atalhos .chip { background: rgba(255, 255, 255, .02); }

/* Financeiro */
.ranking { display: flex; flex-direction: column; gap: 22px; }
.rk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 12px; }
.rk-top .n { display: flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.rk-top .v { flex: none; font-weight: 600; }
.rk-top small { margin-left: 10px; color: var(--mt); font-size: 10px; font-weight: 400; }
.rk-pos { display: grid; place-items: center; width: 25px; height: 25px; flex: none; border: 1px solid var(--bd); border-radius: 7px; background: var(--sf2); color: var(--mt); font-size: 10px; font-weight: 500; }
.rk-pos.first { background: var(--acb); border-color: var(--acbd); color: var(--ac2); }
.ind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ind div { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--bd); border-radius: 11px; background: rgba(0, 0, 0, .12); font-size: 11px; }
.ind strong { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.035em; overflow-wrap: anywhere; }
.limite { margin-top: 20px; }
.limite-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-size: 11px; }

/* Conhecimento, contratos e leitura */
.notas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.nota { min-width: 0; display: flex; align-items: flex-start; gap: 14px; padding: 22px; border: 1px solid var(--bd); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); text-align: left; }
.nota .txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nota b { font-size: 14px; font-weight: 600; }
.nota .s { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--mt); font-size: 12px; line-height: 1.8; }
.nota small { color: var(--mt2); font-size: 11px; }
.corpo { max-height: 48dvh; min-height: 0; overflow-y: auto; color: #cbd2dc; white-space: pre-wrap; font-size: 13px; line-height: 1.8; }
.corpo.md { white-space: normal; }
.md { color: #cbd2dc; font-size: 13px; line-height: 1.85; }
.md :is(h1, h2, h3, h4) { margin: 24px 0 10px; color: var(--tx); font-size: 16px; line-height: 1.5; letter-spacing: -.025em; }
.md :is(h1, h2, h3, h4):first-child { margin-top: 0; }
.md p { margin: 10px 0; }
.md ul { margin: 10px 0 10px 20px; }
.md li { margin-bottom: 5px; }
.md blockquote { margin: 16px 0; padding: 4px 14px; border-left: 2px solid var(--acbd); color: var(--mt); }
.md table { display: block; max-width: 100%; overflow-x: auto; margin: 16px 0; border-collapse: collapse; font-size: 12px; }
.md td, .md th { padding: 10px 12px; border: 1px solid var(--bd2); text-align: left; }
.md th { background: var(--sf2); font-weight: 500; }
.md .wl { color: var(--pu); }
.var-copy { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--bd); border-radius: 11px; background: rgba(0, 0, 0, .12); }
.var-copy .rot { color: var(--mt); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.var-copy p { margin-top: 5px; white-space: pre-wrap; font-size: 13px; }
.valida { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid; border-radius: 11px; font-size: 12px; }
.valida.ok { background: var(--okb); border-color: var(--okbd); color: var(--ok2); }
.valida.err { background: var(--erb); border-color: var(--erbd); color: #ffb4b9; }
.briefing-box { max-height: 320px; overflow-y: auto; }

/* Chat e passos dos agentes */
.tab-chat { height: calc(100dvh - 84px); }
.chat { display: flex; flex-direction: column; flex: 1; gap: 14px; min-height: 0; overflow-y: auto; padding: 16px 4px; overscroll-behavior-y: contain; }
.msg { max-width: min(720px, 90%); padding: 13px 16px; border: 1px solid var(--bd); border-radius: 14px; color: #dce2eb; white-space: pre-wrap; font-size: 13px; line-height: 1.8; }
.msg.eu { align-self: flex-end; background: linear-gradient(145deg, rgba(255, 106, 0, .12), rgba(255, 106, 0, .07)); border-color: var(--acbd); border-bottom-right-radius: 4px; }
.msg.mestre { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 4px; }
.msg.sys { align-self: center; max-width: 100%; padding: 8px 10px; border: 0; background: transparent; color: var(--mt); font-size: 11px; text-align: center; }
.msg.falha { display: flex; align-items: flex-start; gap: 10px; align-self: flex-start; background: var(--erb); border-color: var(--erbd); color: #ffb4b9; }
.msg.falha i { flex: none; margin-top: 3px; color: var(--er); font-size: 18px; }
.msg code { white-space: pre-wrap; }
.passo { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; align-self: flex-start; padding: 4px 0; color: var(--mt); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.passo > i { color: var(--ac2); flex: none; }
.passo .ag-nome { color: var(--info); font-weight: 500; }
.rodape { align-self: flex-start; padding: 0 4px; color: var(--mt2); font-size: 10px; overflow-wrap: anywhere; }
.digitando { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; }
.digitando span { width: 5px; height: 5px; border-radius: 50%; background: var(--mt); animation: pulso 1s ease-in-out infinite; }
.digitando span:nth-child(2) { animation-delay: .16s; }
.digitando span:nth-child(3) { animation-delay: .32s; }
.composer { display: flex; align-items: flex-end; gap: 10px; flex: none; padding: 8px 8px 8px 14px; border: 1px solid var(--bd2); border-radius: 13px; background: var(--sf2); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); transition: border-color var(--ease), box-shadow var(--ease); }
.composer:focus-within { border-color: var(--ac); box-shadow: 0 0 0 3px var(--acb); }
.composer textarea { min-height: 44px; max-height: 160px; padding: 10px 0; border: 0; background: transparent; resize: none; font-size: 13px; box-shadow: none; }
.composer textarea:focus-visible { outline: none; }
.send { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid transparent; border-radius: 9px; font-size: 19px; }
.send.parar { background: var(--er); color: #42151a; }
#conversaSel { width: 240px; }
.chat-intro { display: flex; flex-direction: column; align-items: center; gap: 14px; align-self: center; width: 100%; max-width: 440px; margin-block: auto; padding: 24px 14px; color: var(--mt); text-align: center; }
.chat-intro > .kpi-ic { width: 56px; height: 56px; margin-bottom: 4px; border-radius: 17px; font-size: 27px; background: linear-gradient(140deg, rgba(255, 106, 0, .16), rgba(255, 106, 0, .03)); box-shadow: 0 0 40px rgba(255, 106, 0, .04); }
.chat-intro b { color: var(--tx); font-size: 17px; line-height: 1.5; font-weight: 500; letter-spacing: -.035em; }
.chat-intro .sm { font-size: 12px; line-height: 1.9; }
.chat-intro .atalhos { justify-content: center; margin-top: 8px; }
.chat-intro .chip { background: var(--sf); font-size: 11px; }
.grupo-passos { max-width: 100%; align-self: flex-start; border: 1px solid var(--bd); border-radius: 10px; background: rgba(255, 255, 255, .02); font-size: 11px; }
.grupo-passos summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; border-radius: 9px; cursor: pointer; list-style: none; color: var(--tx); }
.grupo-passos summary::-webkit-details-marker { display: none; }
.grupo-passos summary::after { content: ''; width: 6px; height: 6px; flex: none; border-right: 1px solid var(--mt); border-bottom: 1px solid var(--mt); transform: rotate(45deg) translateY(-2px); margin-left: 4px; transition: transform var(--ease); }
.grupo-passos[open] summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.gp-ic { display: grid; flex: none; color: var(--ac2); font-size: 16px; }
.grupo-passos.vivo .gp-ic i { animation: gira 1s linear infinite; }
.gp-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-n { margin-left: auto; flex: none; color: var(--mt); font-size: 10px; }
.gp-lista { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; padding: 10px 14px; border-top: 1px solid var(--bd); }
.chat-card { display: flex; flex-direction: column; height: calc(100dvh - 300px); min-height: 460px; }
.chat-cli { min-height: 0; margin-bottom: 14px; }
.chat-card .head-acts { max-width: 100%; }
.chat-card .head-acts .campo { min-width: 0; max-width: 260px; }

/* Mestre: coluna fixa no desktop; tela própria no celular */
#tab-inicio:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 25vw, 390px); gap: 24px; align-items: start; }
.home-main { min-width: 0; }
.home-main .page-head { align-items: flex-end; }
.home-main .page-head .head-acts { margin-bottom: 2px; }
.mestre-painel { position: sticky; top: 24px; height: calc(100dvh - 48px); display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px; border: 1px solid var(--bd2); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow), 0 12px 36px rgba(0, 0, 0, .15); }
.mp-head { display: flex; align-items: center; gap: 12px; padding: 2px 0 16px; border-bottom: 1px solid var(--bd); }
.mp-tit { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; flex: 1; min-width: 0; }
.mp-tit b { font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.mp-tit .pill.status { border: 0; background: transparent; padding: 0; font-size: 10px; }
.mp-fechar { display: none; }
.mp-conv { display: flex; gap: 8px; }
.mp-conv .campo { min-width: 0; flex: 1; background-color: rgba(0, 0, 0, .12); }
.mp-conv > .btn { flex: none; }
.mestre-painel .chat { padding: 14px 4px; border-radius: 10px; background: rgba(0, 0, 0, .08); }
.mestre-painel .msg { max-width: 94%; font-size: 13px; }
.mestre-painel .chat-intro { padding: 20px 10px; }
.mestre-painel .chat-intro b { font-size: 16px; }
.mestre-painel .chat-intro .sm { font-size: 11px; }
.fab-mestre { display: none; }

/* Rodapé operacional */
.foot-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fc-txt { display: flex; flex-direction: column; flex: 1; gap: 5px; min-width: min(100%, 180px); }
.fc-txt > b { font-size: 13px; font-weight: 500; }
.fc-txt .sm { font-size: 11px; line-height: 1.8; }
.fc-txt .link { min-height: 44px; }
.op-stats { display: flex; flex-wrap: wrap; gap: 16px; width: 100%; padding-top: 16px; border-top: 1px solid var(--bd); }
.op-stats .st { display: flex; flex-direction: column; flex: 1; gap: 7px; font-size: 10px; color: var(--mt); }
.op-stats .st b { color: var(--tx); font-size: 12px; font-weight: 500; }
.op-stats .st b.ok { color: var(--ok2); }
.op-stats .st b.warn { color: var(--al); }
.op-stats .st b.err { color: var(--er); }
.op-stats .st span { display: inline-flex; align-items: center; gap: 5px; }
.lista-sis .linha-sis { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 0; border-top: 1px solid var(--bd); font-size: 12px; overflow-wrap: anywhere; }
.lista-sis .linha-sis:first-child { border-top: 0; padding-top: 0; }

/* Folhas, formulários e prévias */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(4, 6, 9, .76); backdrop-filter: blur(8px); overscroll-behavior: contain; }
body:has(.sheet:not(.hidden)) { overflow: hidden; }
.sheet-card { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 600px; max-height: 90dvh; overflow-y: auto; overscroll-behavior-y: contain; padding: 28px; border: 1px solid var(--bd2); border-radius: 20px; background: var(--surface); box-shadow: 0 32px 100px rgba(0, 0, 0, .5); animation: entrar 180ms ease-out; }
.sheet-card > .card-head { align-items: center; margin-bottom: 0; padding-bottom: 16px; border-bottom: 1px solid var(--bd); }
.sheet-card > .card-head h2 { min-width: 0; overflow-wrap: anywhere; font-size: 18px; font-weight: 600; }
.sheet-card > .card-head .icon-btn { margin: -8px -8px -8px 0; }
.sheet .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet .meta:empty { display: none; }
.sheet-card > .corpo { flex-shrink: 0; }
.sheet-card > .acoes { position: sticky; bottom: -28px; flex: none; padding: 16px 0 0; border-top: 1px solid var(--bd); background: var(--sf); box-shadow: 0 -12px 16px var(--sf); }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.acoes:empty { display: none; }
.acoes .btn { flex: 1 1 150px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid label, .form-col label { min-width: 0; display: flex; flex-direction: column; gap: 8px; color: var(--mt); font-size: 12px; font-weight: 500; }
.form-grid .full { grid-column: 1 / -1; }
.form-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.form-col > p { white-space: normal; }
.custo-linha { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .9fr) auto; align-items: center; gap: 8px; }
.custo-linha input { font-size: 12px; padding: 10px; }
.sub-h { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--bd); color: var(--tx); font-size: 13px; font-weight: 600; }
.sheet-card.largo { max-width: 1180px; }
.sheet-card.largo .corpo { max-height: none; overflow: visible; }
.previa { display: block; width: 100%; height: 68dvh; border: 1px solid var(--bd2); border-radius: 11px; background: #fff; }
.previa.cel { width: 390px; max-width: 100%; height: 72dvh; margin: 0 auto; }
.previa-img { display: block; max-width: 100%; max-height: 68dvh; margin: 0 auto; border-radius: 11px; }
a.btn { color: var(--tx); text-decoration: none; }
a.btn.primary { color: #1A0800; }
.toast { position: fixed; bottom: 24px; left: 50%; z-index: 50; width: max-content; max-width: calc(100% - 32px); padding: 14px 18px; border: 1px solid var(--bd2); border-radius: 12px; background: var(--sf2); color: var(--tx); font-size: 12px; line-height: 1.7; box-shadow: 0 12px 40px rgba(0, 0, 0, .4); transform: translateX(-50%); overflow-wrap: anywhere; }

/* Skeletons iniciais: substituídos pelo innerHTML que já existe no app.js */
.skeleton { min-height: 100px; border: 1px solid var(--bd); border-radius: 11px; background: linear-gradient(100deg, var(--sf2) 15%, #242a32 45%, var(--sf2) 75%); background-size: 240% 100%; animation: carregar 1.6s ease-in-out infinite; pointer-events: none; }
.linhas > .skeleton { min-height: 60px; margin: 7px 0; }
.producao > .skeleton { min-height: 28px; }
.ag-grid > .skeleton, .cli-grid > .skeleton, .notas > .skeleton { min-height: 210px; }
.skeleton.ag { min-height: 140px; }
.btn:disabled .ti-loader-2 { animation: gira 1s linear infinite; }
@keyframes pulso { 50% { opacity: .35; } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes carregar { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Hover só onde há ponteiro: nenhum estado preso ao tocar */
@media (hover: hover) {
  .btn.primary:hover, .send:not(.parar):hover, .fab-mestre:hover { background: var(--ac-h); }
  .btn.ghost:hover { background: var(--sf3); border-color: #4a5463; }
  .btn.danger:hover { background: rgba(251, 146, 153, .15); }
  .btn.warn:hover { background: rgba(239, 191, 105, .15); }
  .btn.ok:hover { background: rgba(16, 185, 129, .16); }
  .icon-btn:hover { background: var(--sf3); color: var(--tx); }
  .link:hover { color: #9aedce; }
  .chip:hover, .voltar:hover { color: var(--tx); background: var(--sf2); }
  .nav button:hover { color: var(--tx); background-color: var(--sf2); }
  :is(button.kpi, .ag, .ag-card, .entrega, .nota, .cli):hover { border-color: #465160; box-shadow: var(--shadow), 0 4px 18px rgba(0, 0, 0, .14); }
  .cli:hover { border-color: var(--acbd); }
  button.linha:hover { background: rgba(255, 255, 255, .015); }
  button.linha:hover .seta { background: var(--acb); border-color: var(--acbd); color: var(--ac2); }
  .tabela tr:has(td):hover { background: rgba(255, 255, 255, .02); }
  .abas-cli button:hover { color: var(--tx); background: rgba(255, 255, 255, .02); }
  .grupo-passos summary:hover { background: var(--sf2); }
}

/* Desktop compacto e tablet */
@media (max-width: 1599px) {
  main { padding: 30px 28px 48px; }
  .kpis.k5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-main .duo { grid-template-columns: minmax(0, 1fr); }
  .home-main .kpi { padding: 18px; }
  .home-main .kpi-l { font-size: 11px; }
  .home-main .card { padding: 20px; }
  .home-main .kpi > .kpi-ic { right: 12px; top: 16px; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .home-main .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-main .perf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-main .page-head .head-acts { width: 100%; }
  .home-main .linha { flex-wrap: wrap; }
  .home-main .linha .tags { max-width: 100%; width: 100%; padding-left: 54px; }
  .home-main .linha .seta { display: none; }
}
@media (max-width: 1199px) {
  #tab-inicio:not(.hidden) { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo, .duo-main { grid-template-columns: minmax(0, 1fr); }
  .passos { grid-template-columns: minmax(0, 1fr); }
  .mestre-painel { display: none; position: fixed; inset: 0; top: 0; z-index: 35; height: 100dvh; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border: 0; border-radius: 0; background: var(--bg); }
  .mestre-painel.aberto { display: flex; }
  .mp-fechar { display: grid; }
  .mestre-painel .chat { background: var(--bg); }
  .mestre-painel .msg { max-width: min(640px, 90%); font-size: 13px; }
  .mestre-painel .chat-intro { max-width: 420px; }
  .mestre-painel .chat-intro .sm { font-size: 12px; }
  .fab-mestre { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 12px 18px; border: 1px solid #FF8A33; border-radius: 14px; background: var(--ac); color: #1A0800; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2); }
  .fab-mestre i { font-size: 20px; }
  body.sem-rolagem { overflow: hidden; }
  .home-main .duo-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Celular: navegação persistente, áreas seguras e campos sem zoom no iOS */
@media (max-width: 900px) {
  html { scrollbar-gutter: auto; scroll-padding-top: 20px; }
  .side { display: none; }
  main { width: 100%; margin-left: 0; padding: calc(24px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(160px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .tab { gap: 20px; }
  .page-head { gap: 20px; padding-bottom: 4px; }
  .page-head p { font-size: 12px; margin-top: 8px; line-height: 1.8; }
  .head-acts { width: 100%; }
  .head-acts .btn { flex: 1 1 auto; }
  input, textarea, select, .campo { font-size: 16px !important; }
  .head-acts .campo { flex: 1; }
  #trCliente, #trPlat { flex: 1 1 calc(50% - 4px); width: 0; }
  #trDias { flex: 1 1 100%; width: 100%; }
  .bottom-nav { position: fixed; inset: auto 0 0; z-index: 10; display: flex; gap: 4px; padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); border-top: 1px solid var(--bd2); background: rgba(16, 18, 22, .96); backdrop-filter: blur(20px); box-shadow: 0 -8px 32px rgba(0, 0, 0, .18); }
  .bottom-nav button { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 54px; padding: 7px 2px; border: 1px solid transparent; border-radius: 11px; color: var(--mt); font-size: 10px; font-weight: 500; }
  .bottom-nav button i { font-size: 22px; }
  .bottom-nav button.on { border-color: var(--acbd); background: var(--acb); color: var(--ac2); }
  .bottom-nav .badge { position: absolute; top: 1px; left: calc(50% + 5px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 5px; background: #e9bb69; color: #30240c; font-size: 9px; }
  /* Mais continua sendo o acesso às quatro seções secundárias. */
  .app:has(main > :is(#tab-agentes, #tab-financeiro, #tab-contratos, #tab-conhecimento):not(.hidden)) #maisBtn { color: var(--ac2); border-color: var(--acbd); background: var(--acb); }
  .card, .home-main .card { padding: 20px; }
  .card-head { gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
  .card-head > .link { margin: -8px 0 -6px; }
  .card-head > div { flex: 1 1 170px; }
  .card-head > .head-acts { flex-basis: 100%; }
  .kpi { padding: 20px; }
  .kpi strong { font-size: 32px; }
  .equipe { grid-template-columns: repeat(7, 136px); padding-bottom: 12px; overflow-x: auto; scroll-snap-type: x proximity; }
  .linha { flex-wrap: wrap; }
  .linha .txt { flex-basis: calc(100% - 70px); }
  .linha .tags { width: 100%; max-width: 100%; justify-content: flex-start; padding-left: 54px; }
  .linha .seta { display: none; }
  .linha .dir { justify-content: flex-end; width: 100%; padding-left: 54px; }
  .linha > .quando { padding-left: 54px; }
  .linha > .pill { margin-left: 54px; }
  .perf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perf .perf-connect { padding: 16px; }
  .sheet { align-items: flex-end; padding: env(safe-area-inset-top) 0 0; }
  .sheet-card { max-width: 100%; max-height: 92dvh; padding: 24px max(20px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); border-bottom: 0; border-radius: 22px 22px 0 0; gap: 18px; }
  .sheet-card::before { content: ''; align-self: center; flex: none; width: 32px; height: 4px; margin: -12px 0 0; border-radius: 20px; background: var(--bd2); }
  .sheet-card > .card-head { flex-wrap: nowrap; }
  .sheet-card > .acoes { bottom: calc(-24px - env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
  .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
  .fab-mestre { right: max(20px, env(safe-area-inset-right)); bottom: calc(88px + env(safe-area-inset-bottom)); }
  .tab-chat { height: calc(100dvh - 150px - env(safe-area-inset-bottom)); }
  #conversaSel { flex: 1; width: 100%; }
  .chat-card { min-height: 420px; height: calc(100dvh - 250px); padding: 16px; }
  .chat-card .card-head { flex-direction: column; flex: none; align-items: stretch; margin-bottom: 10px; }
  .chat-card .card-head > div { flex: initial; }
  .chat-card .card-head p { display: none; }
  .chat-card .card-head h2 { font-size: 14px; }
  .chat-card .head-acts { flex-wrap: nowrap; }
  .chat-card .head-acts .campo { flex: 1; max-width: none; width: 0; }
  .chat-card .head-acts .btn { flex: 0 0 auto; }
  .mestre-painel .msg, .msg { font-size: 14px; }
  .mp-head { padding-bottom: 12px; }
}
@media (max-width: 560px) {
  main { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  h1 { font-size: 27px; }
  h2 { font-size: 15px; }
  .eyebrow { margin-bottom: 8px; }
  .card, .home-main .card { padding: 18px; border-radius: 14px; }
  .kpis, .kpis.k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi, .home-main .kpi { padding: 16px; border-radius: 13px; }
  .kpi > .kpi-ic, .home-main .kpi > .kpi-ic { top: 12px; right: 10px; width: 26px; height: 26px; font-size: 16px; border-radius: 7px; }
  .kpi-l { min-height: 32px; padding-right: 24px; font-size: 11px; }
  .kpi strong { font-size: 28px; }
  .kpis.k5 .kpi strong, #tab-financeiro .kpi strong { font-size: clamp(20px, 5.4vw, 28px); }
  .kpi-s { font-size: 10px; }
  .card-head > div { flex-basis: 155px; }
  .card-head .link { justify-content: flex-start; font-size: 11px; }
  .linha { gap: 12px; }
  .linha .t { font-size: 13px; }
  .linha .tags, .linha .dir, .linha > .quando { padding-left: 0; }
  .linha .dir { justify-content: space-between; }
  .linha > .pill { margin-left: 0; }
  .perf { gap: 10px; }
  .perf .pf { padding: 14px; }
  .perf .pf strong { font-size: 25px; }
  .perf-connect > .btn { width: 100%; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .custo-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: 16px; border-bottom: 1px solid var(--bd); }
  .custo-linha .cAtivo { justify-self: end; }
  .ind { grid-template-columns: minmax(0, 1fr); }
  .cli-grid, .notas, .ag-grid { grid-template-columns: minmax(0, 1fr); }
  .home-main .duo-foot { grid-template-columns: minmax(0, 1fr); }
  .cli { padding: 18px; gap: 18px; }
  .cli-acts { flex-wrap: wrap; }
  .cli-acts .btn { flex-basis: 120px; }
  .det-head { gap: 10px; }
  .det-head .nm { min-width: 0; flex-basis: calc(100% - 68px); }
  .det-head h1 { font-size: 25px; }
  .abas-cli { gap: 8px; }
  .abas-cli button { padding-inline: 10px; }
  .chart-vazio { inset-inline: 0; background: rgba(20, 23, 28, .85); }
  .bar-chart { height: 250px; }
  .rk-top { flex-wrap: wrap; }
  .rk-top .v { margin-left: auto; }
  .foot-card > .btn { width: 100%; }
  .op-stats { gap: 12px; }
  .op-stats .st { min-width: 65px; }
  .login-card { padding: 26px; }
}
@media (max-width: 360px) {
  main { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .kpi, .home-main .kpi { padding: 13px; }
  .kpi-l { font-size: 10px; }
  .kpi strong { font-size: 26px; }
  .kpis.k5 .kpi strong, #tab-financeiro .kpi strong { font-size: 19px; }
  .cli-head { flex-wrap: wrap; }
  .cli-head .nm { flex-basis: calc(100% - 58px); }
  .pill { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- funil de prospecção ---------- */
.busca { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--bd); border-radius: 10px; background: var(--sf); color: var(--mt); }
.busca input { width: 180px; min-width: 0; border: 0; background: none; outline: none; font-size: 14px; }
.busca:focus-within { border-color: var(--acbd); }
.fun-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.fr { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--bd); border-radius: 12px; background: var(--surface); }
.fr > span { color: var(--mt); font-size: 12px; }
.fr b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fr b small { margin-left: 2px; color: var(--mt); font-size: 12px; font-weight: 500; }
.fr.alerta { border-color: var(--albd); background: var(--alb); }
.fr.alerta b { color: var(--al); }
.fun-quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x proximity; align-items: start; }
.fun-col { display: flex; flex-direction: column; min-height: 320px; border: 1px solid var(--bd); border-radius: 14px; background: rgba(255, 255, 255, .012); scroll-snap-align: start; }
.fun-col.skeleton { min-height: 360px; }
.fun-col > header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--bd); font-size: 13px; }
.fun-col > header small { margin-left: auto; color: var(--mt); font-variant-numeric: tabular-nums; }
.fun-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--mt2); flex: none; }
.etapa-contato .fun-ponto { background: var(--info); }
.etapa-reuniao .fun-ponto { background: var(--pu); }
.etapa-proposta .fun-ponto { background: var(--al); }
.etapa-negociacao .fun-ponto { background: #f59e7b; }
.etapa-ganho .fun-ponto { background: var(--ok); }
.etapa-perdido .fun-ponto { background: var(--er); }
.etapa-ganho, .etapa-perdido { background: transparent; border-style: dashed; }
.fun-qtd { min-width: 22px; padding: 1px 7px; border-radius: 6px; background: var(--sf3); color: var(--mt); font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
.fun-itens { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 120px; padding: 10px; border-radius: 0 0 14px 14px; transition: background var(--ease); }
.fun-itens.sobre { background: var(--acb); outline: 1px dashed var(--acbd); outline-offset: -6px; }
.fun-vazio { display: grid; place-items: center; flex: 1; min-height: 90px; color: var(--mt2); font-size: 12px; text-align: center; }
.fun-add { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 0 10px 10px; border: 1px dashed var(--bd2); border-radius: 10px; color: var(--mt); font-size: 13px; }
.fun-add:hover { color: var(--ac2); border-color: var(--acbd); }
.lead { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--bd); border-radius: 11px; background: var(--sf2); cursor: grab; transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease); }
.lead:hover { border-color: var(--bd2); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.lead:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.lead.arrastando { opacity: .45; transform: rotate(-1.5deg); }
.lead-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lead-top .avatar.sm { width: 30px; height: 30px; font-size: 11px; flex: none; }
.lead-nome { display: flex; flex-direction: column; min-width: 0; }
.lead-nome b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.lead-nome small { color: var(--mt); font-size: 12px; }
.lead-valor { color: var(--ac2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lead-prox { display: flex; align-items: flex-start; gap: 6px; color: var(--mt); font-size: 12px; line-height: 1.4; }
.lead-prox i { margin-top: 1px; font-size: 14px; flex: none; }
.lead-prox.hoje { color: var(--info); }
.lead-prox.atrasado { color: var(--al); }
.lead-prox.vazio-prox { color: var(--mt2); font-style: italic; }
.lead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; }
.lead-meta .pill { background: var(--sf3); color: var(--mt); }
.lead-meta .muted { margin-left: auto; }
.lead-form { display: flex; flex-direction: column; gap: 18px; }
.lead-acoes-rapidas { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-card h2 .ti-brand-whatsapp { color: #25D366; }
.wa-card .kpis { margin: 14px 0; }
.wa-dias { margin-top: 12px; }
.wa-niveis { margin: 4px 0 10px; }
.wa-passos { margin: 8px 0 8px 20px; display: grid; gap: 8px; font-size: 13px; line-height: 1.5; }
.wa-passos code { font-size: 12px; word-break: break-all; }
.wa-dias summary { cursor: pointer; color: var(--mt); font-size: 13px; padding: 6px 0; }
.prop-servs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.prop-serv { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--bd); border-radius: 12px; background: var(--sf2); }
.prop-serv .ck-linha { color: var(--tx); font-size: 14px; font-weight: 500; }
.prop-serv:not(:has(input:checked)) [data-pvalor] { opacity: .45; }
@media (max-width: 640px) { .prop-servs { grid-template-columns: 1fr; } }
.lead-timeline h3 { margin-bottom: 10px; font-size: 14px; }
.ativ-nova { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; margin-bottom: 12px; }
.ativ-lista { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; }
.ativ { display: flex; gap: 10px; }
.ativ p { font-size: 13px; line-height: 1.45; }
.ativ-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--sf3); color: var(--mt); flex: none; }
.ativ.etapa .ativ-ic, .ativ.sistema .ativ-ic { background: var(--acb); color: var(--ac2); }
@media (max-width: 900px) {
  .fun-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fun-quadro { grid-auto-columns: 82%; margin-inline: -16px; padding-inline: 16px; }
  .busca { flex: 1; }
  .busca input { width: 100%; font-size: 16px; }
  .ativ-nova { grid-template-columns: 1fr; }
  .lead { cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) { .lead, .fun-itens { transition: none; } }

/* passos agrupados no chat */
.grupo-passos{align-self:flex-start;max-width:100%;background:var(--sf);border:1px solid var(--bd);border-radius:12px;font-size:13px}
.grupo-passos summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 12px;color:var(--tx)}
.grupo-passos summary::-webkit-details-marker{display:none}
.gp-ic{color:var(--ac2);display:grid}
.grupo-passos.vivo .gp-ic i{animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.gp-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px}
.gp-n{color:var(--mt2);font-size:12px;margin-left:auto;white-space:nowrap}
.gp-lista{padding:4px 12px 10px;display:flex;flex-direction:column;gap:4px;max-height:260px;overflow-y:auto;border-top:1px solid var(--bd)}
.mestre-painel .gp-txt{max-width:220px}

/* marca Crown Digital */
.logo-marca{width:auto;height:30px;flex:none;display:block}
.nome-marca{display:flex;align-items:baseline;font-family:Poppins,Inter,sans-serif;font-size:17px;letter-spacing:.01em;line-height:1;white-space:nowrap}.nome-marca b{font-weight:700}.nome-marca span{font-weight:300}
.login .nome-marca{font-size:21px}.login .logo-marca{height:36px}

/* ---------- controle segmentado ---------- */
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--bd); border-radius: 10px; background: var(--sf); }
.seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 7px; color: var(--mt); font-size: 13px; font-weight: 500; }
.seg button.on { background: var(--sf3); color: var(--tx); }
.seg button:hover:not(.on) { color: var(--tx); }

/* ---------- tarefas em quadro ---------- */
.tk-quadro { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 14px; align-items: start; }
.tk-col.col-fazendo .fun-ponto, .tk-col.col-fazendo header b { color: var(--info); }
.tk-col.col-bloqueada header b { color: var(--er); }
.tk-col.col-feita { border-style: dashed; background: transparent; }
.tkc { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--bd); border-radius: 11px; background: var(--sf2); cursor: grab; transition: border-color var(--ease), box-shadow var(--ease); }
.tkc:hover { border-color: var(--bd2); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.tkc:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.tkc.arrastando { opacity: .45; }
.tkc-top { display: flex; align-items: flex-start; gap: 10px; }
.tkc-top b { font-size: 13px; font-weight: 600; line-height: 1.4; }
.tkc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; }
.tk-ck { display: inline-flex; align-items: center; gap: 4px; color: var(--mt); }
.checklist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; padding: 12px; border: 1px solid var(--bd); border-radius: 10px; background: var(--sf2); }
.ck { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; font-size: 14px; }
.ck input { width: 18px; height: 18px; accent-color: var(--ac); flex: none; }
.ck input:checked + span { color: var(--mt); text-decoration: line-through; }
.ck-linha { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.ck-linha input { width: 18px; height: 18px; accent-color: var(--ac); }

/* ---------- agenda ---------- */
.ag-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; color: var(--mt); font-size: 12px; }
.lg::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 3px; background: var(--c); }
.lg.evento, .ag-it.evento, .ag-item.evento { --c: var(--ac); }
.lg.tarefa, .ag-it.tarefa, .ag-item.tarefa { --c: var(--info); }
.lg.time, .ag-it.time, .ag-item.time { --c: var(--pu); }
.lg.funil, .ag-it.funil, .ag-item.funil { --c: var(--al); }
.ag-mes { border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; background: var(--surface); }
.ag-sem, .ag-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ag-sem span { padding: 10px; border-bottom: 1px solid var(--bd); color: var(--mt); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.ag-dia { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; min-height: 112px; padding: 8px; border-right: 1px solid var(--bd); border-bottom: 1px solid var(--bd); text-align: left; transition: background var(--ease); }
.ag-dia:nth-child(7n) { border-right: 0; }
.ag-dia:hover { background: rgba(255, 255, 255, .02); }
.ag-dia.fora { opacity: .4; }
.ag-dia .n { font-size: 12px; font-weight: 600; color: var(--mt); }
.ag-dia.hoje .n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--ac); color: #1A0800; }
.ag-it { overflow: hidden; padding: 2px 6px; border-left: 2px solid var(--c); border-radius: 4px; background: color-mix(in srgb, var(--c) 10%, transparent); font-size: 11px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.ag-mais { color: var(--mt); font-size: 11px; }
.ag-lista { margin-top: 24px; }
.ag-lista h2 { margin-bottom: 12px; }
.ag-grupo { margin-bottom: 16px; }
.ag-grupo h3 { margin-bottom: 8px; color: var(--mt); font-size: 12px; font-weight: 600; text-transform: capitalize; }
.ag-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin-bottom: 6px; padding: 10px 12px; border: 1px solid var(--bd); border-left: 3px solid var(--c); border-radius: 10px; background: var(--sf); text-align: left; }
.ag-item:hover { border-color: var(--bd2); border-left-color: var(--c); }
.ag-item > i { color: var(--c); font-size: 18px; flex: none; }
.ag-hora { min-width: 42px; color: var(--mt); font-size: 12px; font-variant-numeric: tabular-nums; }
.ag-txt { display: flex; flex-direction: column; min-width: 0; }
.ag-txt b { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ag-txt small { color: var(--mt); font-size: 12px; }
.ag-lista-dia { display: flex; flex-direction: column; }
@media (max-width: 900px) {
  .tk-quadro { grid-template-columns: repeat(4, 82%); margin-inline: -16px; padding-inline: 16px; }
  .ag-mes { display: none; }
  .ag-lista { margin-top: 0; }
  .seg button { min-height: 40px; }
}

/* ---------- automações ---------- */
.au-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; margin-top: 16px; }
.au { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--bd); border-radius: 14px; background: var(--surface); transition: border-color var(--ease); }
.au.on { border-color: var(--acbd); }
.au-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.au-txt b { font-size: 14px; }
.au-txt small { font-size: 11px; line-height: 1.5; }
.switch { position: relative; flex: none; width: 46px; height: 28px; margin-top: 4px; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border: 1px solid var(--bd2); border-radius: 99px; background: var(--sf3); transition: background var(--ease), border-color var(--ease); pointer-events: none; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--mt); transition: transform var(--ease), background var(--ease); }
.switch input:checked + span { background: var(--ac); border-color: var(--ac); }
.switch input:checked + span::after { transform: translateX(18px); background: #1A0800; }
.switch input:focus-visible + span { outline: 2px solid var(--ac); outline-offset: 2px; }
.push-dica { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--infobd); border-radius: 10px; background: var(--infob); color: var(--tx); font-size: 13px; line-height: 1.6; }

/* portal do cliente (no painel) */
.portal-link { display: flex; gap: 8px; }
.portal-link input { flex: 1; min-width: 0; font-size: 13px; }

/* Visão geral: conteúdo amplo e mestre sob demanda. */
#tab-inicio:not(.hidden) { grid-template-columns: minmax(0, 1fr); }
#tab-inicio .home-main { width: 100%; min-width: 0; }
#tab-inicio .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#tab-inicio .vg-zero .kpi-ic { color: var(--mt2); background: var(--sf2); border-color: var(--bd); }
#tab-inicio .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
#tab-inicio .duo > *, #tab-inicio .card { min-width: 0; }
#tab-inicio .perf { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#tab-inicio #perfInicio > .pf:nth-child(2):not(.skeleton) { display: flex; }
#tab-inicio .vg-alert-loading { min-height: 44px; }
.vg-alert { border: 1px solid var(--infobd); border-radius: 12px; background: var(--infob); color: var(--info); font-size: 12px; }
.vg-alert.vg-err { color: var(--er); background: var(--erb); border-color: var(--erbd); }
.vg-alert.vg-warn { color: var(--al); background: var(--alb); border-color: var(--albd); }
.vg-alert summary { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; list-style: none; min-height: 44px; }
.vg-alert summary::-webkit-details-marker { display: none; }
.vg-alert summary b { flex: 1; font-weight: 500; }
.vg-alert-toggle { font-size: 11px; text-decoration: underline; }
.vg-alert[open] .vg-alert-toggle { opacity: .6; }
.vg-alert ul { padding: 0 20px 16px 38px; margin: 0; line-height: 1.8; overflow-wrap: anywhere; }
.vg-all-clear { display: inline-flex; align-items: center; gap: 7px; color: var(--mt); font-size: 12px; }
.vg-all-clear i { color: var(--ok2); }
.vg-hoje-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.vg-hoje-grid > * { min-width: 0; }
.vg-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.vg-list-head h3 { font-size: 12px; font-weight: 500; color: var(--mt); }
.vg-list-head .link { font-size: 11px; min-height: 44px; }
.vg-item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--bd); font-size: 12px; }
.vg-item-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.vg-item-copy b { font-weight: 500; }
.vg-item-copy small, .vg-hour { color: var(--mt); font-size: 11px; }
.vg-hour { flex: none; width: 52px; font-variant-numeric: tabular-nums; }
.vg-empty { color: var(--mt2); font-size: 12px; padding: 16px 0; }
.vg-list .skeleton { min-height: 64px; }
#tab-inicio #equipe { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; padding: 0; }
#tab-inicio #equipe .skeleton { width: 115px; min-height: 44px; }
.vg-agent { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 13px; border: 1px solid var(--bd); border-radius: 24px; background: var(--sf2); font-size: 12px; max-width: 100%; }
.vg-agent > i { font-size: 18px; color: var(--mt); }
.vg-agent.vg-working { background: var(--acb); border-color: var(--acbd); color: var(--ac2); }
.vg-agent-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mt2); flex: none; }
.vg-agent-dot.ok { background: var(--ok2); } .vg-agent-dot.work { background: var(--ac2); }
.vg-agent-dot.err { background: var(--er); }
.vg-agent-dot.work { box-shadow: 0 0 0 3px var(--acb); }
#tab-inicio .vg-footer { display: flex; flex-wrap: wrap; gap: 16px 28px; padding: 18px 0 40px; border-top: 1px solid var(--bd); }
#tab-inicio .vg-footer .foot-card { flex: 1 1 320px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: 10px; align-content: start; }
#tab-inicio .vg-footer .kpi-ic { display: none; }
#tab-inicio .vg-footer .fc-txt { min-width: 0; }
#tab-inicio .vg-footer .btn { font-size: 11px; padding: 8px; }
#tab-inicio .vg-footer .op-stats { width: auto; padding: 0; border: 0; gap: 16px; }
#tab-inicio .vg-footer .op-stats .st { flex: none; gap: 4px; }
#tab-inicio #painelMestre { display: none; position: fixed; inset: 0 0 0 auto; z-index: 35; width: min(420px, 100%); height: 100dvh; border-radius: 0; padding: 20px; background: var(--sf); border: 0; border-left: 1px solid var(--bd2); box-shadow: var(--shadow); }
#tab-inicio #painelMestre.aberto { display: flex; }
#tab-inicio .mp-fechar { display: grid; }
#tab-inicio:has(#painelMestre.aberto)::before { content: ''; position: fixed; inset: 0; background: var(--bg); opacity: .7; z-index: 34; }
#tab-inicio #fabMestre { position: fixed; display: inline-flex; align-items: center; gap: 9px; right: 24px; bottom: 24px; z-index: 20; min-height: 48px; padding: 12px 18px; border: 1px solid var(--acbd); border-radius: 24px; background: var(--sf2); color: var(--tx); box-shadow: var(--shadow); font-size: 13px; }
#tab-inicio #fabMestre > i { color: var(--ac2); font-size: 20px; }
#tab-inicio #fabMestre .pill { border: 0; padding: 0; background: transparent; }
#tab-inicio #fabMestre [data-status-mestre] > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 901px) { #tab-inicio .page-head .head-acts { width: auto; } }
@media (max-width: 900px) {
  #tab-inicio .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tab-inicio .duo, .vg-hoje-grid { grid-template-columns: minmax(0, 1fr); }
  #tab-inicio #fabMestre { right: max(20px, env(safe-area-inset-right)); bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  #tab-inicio #painelMestre { width: 100%; border: 0; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  #tab-inicio .perf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vg-alert-toggle { display: none; }
  .vg-hoje-grid { gap: 16px; }
}
.vg-mestre-aberto { overflow: hidden; }

.pix-box { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.pix-qr { width: 200px; height: 200px; flex: none; border-radius: 12px; background: #fff; padding: 6px; }
.pix-info { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.pix-info strong { font-size: 26px; }
.pix-info textarea, #pixMsg { font: 12px/1.4 ui-monospace, monospace; word-break: break-all; }
@media (max-width: 600px) { .pix-box { flex-direction: column; align-items: center; } .pix-info { width: 100%; } }

.dados-ct { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--bd, #2a2f36); border-radius: 12px; }
.contrato-txt { width: 100%; font: 13px/1.5 ui-monospace, monospace; }
.pl-cen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.pl-c { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--bd, #2a2f36); border-radius: 12px; }
.pl-res { overflow-x: auto; }
.tab-plano { width: 100%; border-collapse: collapse; font-size: 13px; }
.tab-plano th, .tab-plano td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--bd, #2a2f36); white-space: nowrap; }
.tab-plano th:first-child, .tab-plano td:first-child { text-align: left; }
label.check { display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; }
label.check input { width: 18px !important; height: 18px !important; min-height: 0 !important; padding: 0 !important; flex: none; accent-color: var(--ac); }
label.check span, label.check { color: var(--tx); }
@media (max-width: 600px) { .pl-cen { grid-template-columns: 1fr; } }

#detEntregas:has(> .lote) { display: flex; flex-direction: column; gap: 18px; }
.lote-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; text-transform: capitalize; }
.lote-head .muted { margin-left: auto; text-transform: none; }

/* celular: botão do mestre acima da barra de baixo e campos com 16px (o iphone dá zoom em campo menor e a barra "solta" do rodapé) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 900px) {
  #tab-inicio #fabMestre { right: max(16px, env(safe-area-inset-right)); bottom: calc(88px + env(safe-area-inset-bottom)); }
  input, textarea, select, .composer textarea, .custo-linha input, .busca input, .portal-link input { font-size: 16px !important; }
}

/* planejamento do cliente */
.pl-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pl-sub { margin: 4px 0 16px; }
.pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.pl-linha { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--bd); }
.pl-linha span { color: var(--mt); font-size: 12px; } .pl-linha b { font-weight: 500; }
.pl-h3 { margin: 18px 0 8px; font-size: 13px; color: var(--mt); text-transform: capitalize; }
.pl-funil, .pl-canais { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pl-funil > div, .pl-canal { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--bd); border-radius: 12px; background: var(--sf2); }
.pl-canal { opacity: .55; } .pl-canal.on { opacity: 1; border-color: var(--acbd, var(--ac)); }
.pl-camps, .pl-rots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.pl-camp, .pl-rot { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--bd); border-radius: 14px; background: var(--sf2); text-align: left; }
.pl-camp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pl-camp-top > div { display: flex; flex-direction: column; gap: 2px; }
.pl-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.pl-nums > div { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; background: var(--sf3); }
.pl-nums span { color: var(--mt); font-size: 11px; } .pl-nums b { font-size: 16px; } .pl-nums small { color: var(--mt2); font-size: 11px; }
.pl-nums b.up { color: var(--ok, #10b981); } .pl-nums b.down { color: var(--er, #ef4444); }
.pl-acts { display: flex; gap: 6px; justify-content: flex-end; }
.pl-calc { margin-top: 8px; }
.pl-data { display: flex; flex-direction: column; align-items: center; min-width: 40px; }
.pl-data b { font-size: 18px; line-height: 1; } .pl-data small { color: var(--mt); font-size: 11px; text-transform: capitalize; }
.pl-procs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 12px; }
.pl-check { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pl-canais-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pl-cf { display: grid; grid-template-columns: 1.2fr 1fr .6fr 1.6fr; gap: 8px; align-items: center; }
@media (max-width: 900px) { .pl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-grid { grid-template-columns: 1fr; } .pl-cf { grid-template-columns: 1fr 1fr; } }
.pl-camp .pill, .pl-rot .pill, #plCorpo .linha .pill { white-space: nowrap; flex: none; }
.pl-nums b { font-size: 15px; white-space: nowrap; }
@media (max-width: 900px) { .pl-kpis .kpi strong { font-size: 22px; } }

/* briefing passo a passo */
.bf { display: flex; flex-direction: column; gap: 12px; }
.bf-topo { display: flex; justify-content: space-between; }
.bf-blocos { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-bloco { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid var(--bd); border-radius: 99px; color: var(--mt); font-size: 12px; }
.bf-bloco.on { border-color: var(--ac); color: var(--tx); } .bf-bloco.ok { color: var(--ok); }
.bf-q { font-size: 22px; line-height: 1.3; margin-top: 6px; }
.bf input, .bf textarea { width: 100%; font-size: 16px; }
.bf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-chips .chip.on { border-color: var(--ac); background: var(--acb, rgba(16,185,129,.12)); color: var(--tx); }
.bf-resumo { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }

/* central de dados */
.imp-passos { display: flex; gap: 8px; list-style: none; padding: 0; margin: 4px 0 14px; counter-reset: p; flex-wrap: wrap; }
.imp-passos li { counter-increment: p; display: flex; align-items: center; gap: 6px; color: var(--mt2); font-size: 12px; }
.imp-passos li::before { content: counter(p); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--bd2); font-size: 11px; }
.imp-passos li.on { color: var(--tx); } .imp-passos li.on::before { background: var(--ac); border-color: var(--ac); color: #1A0800; }
.imp-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 16px; border: 1.5px dashed var(--bd2); border-radius: 14px; cursor: pointer; text-align: center; }
.imp-drop i { font-size: 32px; color: var(--ac); } .imp-drop.carregando { opacity: .5; pointer-events: none; }
.imp-prev td, .imp-prev th { font-size: 12px; text-align: left !important; }
.imp-rej summary { cursor: pointer; color: var(--er); margin: 8px 0; }
.tab-plano.dic td { white-space: normal; text-align: left; }
.alerta.ok { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.35); color: #9ff0cf; }
#dadosCorpo .pl-nums { margin-bottom: 14px; }
#dadosCorpo .head-acts .campo { width: auto; min-width: 150px; }
@media (min-width: 901px) { #dadosCorpo .card-head .head-acts { flex-direction: row; } }
/* prospecção */
.mesa-topo { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.mesa-meta { flex: 1; min-width: 200px; } .mesa-meta .barra { height: 6px; border-radius: 6px; background: var(--bd2); margin-top: 6px; overflow: hidden; }
.mesa-meta .barra span { display: block; height: 100%; background: var(--ac); border-radius: 6px; }
.mesa-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .mesa-filtros .campo { width: auto; min-width: 180px; }
.mesa-card { max-width: 720px; }
.mesa-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mesa-nome { font-size: 24px; margin: 4px 0; }
.mesa-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.mesa-ligar { width: 100%; justify-content: center; font-size: 18px; padding: 16px; margin-bottom: 10px; }
.mesa-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .mesa-links .btn { flex: 1; justify-content: center; min-width: 90px; }
.mesa-notas { background: var(--bg2, rgba(255,255,255,.03)); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.mesa-roteiro { border: 1px solid var(--bd2); border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
.mesa-roteiro summary { cursor: pointer; font-weight: 600; } .mesa-roteiro div { margin-top: 8px; font-size: 13px; line-height: 1.6; }
.mesa-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mesa-res .btn { justify-content: center; text-align: center; white-space: normal; min-height: 48px; }
.mesa-res .res-contato { border-color: rgba(16,185,129,.35); } .mesa-res .res-invalido { border-color: rgba(239,68,68,.35); }
.g-item { cursor: pointer; } .g-item input { width: 20px; height: 20px; flex: none; accent-color: var(--ac); } .g-item.apagado { opacity: .5; }
.linha.sel { outline: 1px solid var(--ac); border-radius: 10px; } .linha.clicavel { cursor: pointer; }
.barras-h { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.bh { display: grid; grid-template-columns: minmax(120px, 260px) 1fr 40px; gap: 10px; align-items: center; font-size: 13px; }
.bh div { height: 10px; background: var(--bd2); border-radius: 6px; overflow: hidden; } .bh i { display: block; height: 100%; background: var(--ac); }
.bh b { text-align: right; }
@media (max-width: 900px) { .mesa-res { grid-template-columns: 1fr 1fr; } .bh { grid-template-columns: 110px 1fr 32px; } .mesa-filtros .campo { width: 100%; } }
/* decisões e simuladores */
.dec-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; } .dec-topo .campo { width: auto; min-width: 160px; }
.dec-card { border-left: 3px solid var(--bd2); } .dec-card.sev-alta { border-left-color: var(--er); } .dec-card.sev-media { border-left-color: var(--al); }
.dec-head { display: flex; gap: 12px; align-items: flex-start; } .dec-tit { flex: 1; min-width: 0; } .dec-tit h3 { margin: 0 0 6px; font-size: 16px; }
.dec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 6px; }
.dec-ev td, .dec-ev th { text-align: left !important; font-size: 13px; }
.dec-hip { margin: 0 0 8px; padding-left: 18px; font-size: 13px; } .dec-hip li { margin: 3px 0; }
.dec-acts { flex-wrap: wrap; margin-top: 12px; }
.cks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.ck { border: 1px solid var(--bd2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; } .ck.pend { opacity: .55; }
.sim-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; }
.sim-tab td:not(:first-child), .sim-tab th:not(:first-child) { text-align: right; }
.badge.err { background: var(--er); color: #fff; }
@media (max-width: 900px) { .dec-grid, .cks { grid-template-columns: 1fr; } .dec-acts .btn { flex: 1 1 45%; justify-content: center; } }
/* motor de automações */
.au-abrir { background: none; border: 0; color: inherit; text-align: left; padding: 0; cursor: pointer; font: inherit; flex: 1; min-width: 0; }
.au-grupo { margin: 18px 0 6px; } .au-log { margin-top: 18px; }
.au-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .au-ficha div { border: 1px solid var(--bd2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.au-ficha span { font-size: 11px; color: var(--mt2); text-transform: uppercase; letter-spacing: .04em; } .au-ficha b { font-size: 13px; font-weight: 500; }
@media (max-width: 900px) { .au-ficha { grid-template-columns: 1fr; } }
label.chk { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; cursor: pointer; }
label.chk input[type=checkbox] { width: 18px !important; height: 18px !important; min-height: 0 !important; flex: none; accent-color: var(--ac); margin: 0; padding: 0; }
/* site (landing) no painel */
.site-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.site-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.site-lado { display: flex; flex-direction: column; gap: 16px; }
.site-lado .card { margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--bd2); border-radius: 10px; overflow: hidden; }
.seg button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: none; border: 0; color: var(--mt2); font: inherit; font-size: 13px; cursor: pointer; }
.seg button.on { background: var(--ac); color: #1A0800; }
.site-moldura { margin-top: 10px; border-radius: 14px; overflow: hidden; border: 1px solid var(--bd2); background: #0b0b0f; margin-inline: auto; transition: max-width .3s ease; }
.site-moldura.cel { max-width: 390px; height: 720px; border-radius: 28px; border-width: 6px; }
.site-moldura.pc { max-width: 100%; height: 680px; }
.site-moldura iframe { width: 100%; height: 100%; border: 0; display: block; }
.site-barras { display: flex; align-items: flex-end; gap: 3px; height: 60px; margin: 12px 0; }
.site-barras span { flex: 1; min-height: 3px; background: var(--ac); border-radius: 3px 3px 0 0; opacity: .85; }
@media (max-width: 1100px) { .site-grid { grid-template-columns: 1fr; } .site-moldura.cel { height: 640px; } }

/* ---------- relatório do cliente (aba Tráfego → Relatório) ---------- */
.tr-cli-head .seg { margin-right: auto; }
#cliRel { display: flex; flex-direction: column; gap: 14px; }
.rel-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rel-topo .link { min-height: 0; margin-left: auto; }
.rel-sem { color: var(--mt2); font-size: 13px; font-weight: 500; }
.rel-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 12px; }
.rel-kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--bd); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.rel-kpi > span, .rel-lucro span { color: var(--mt); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.rel-kpi strong { font-size: 24px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rel-kpi small { color: var(--mt2); font-size: 12px; }
.rel-lucro { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; border-color: var(--acbd); background: radial-gradient(120% 140% at 100% 0%, rgba(255, 106, 0, .22), transparent 60%), var(--sf); }
.rel-lucro > div:first-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rel-lucro strong { font-size: 28px; color: #fff; }
.rel-lucro.neg strong { color: var(--er); }
.rel-roi { --p: 0; flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(closest-side, var(--sf) 78%, transparent 80%), conic-gradient(var(--ac) calc(var(--p) * 100%), var(--sf3) 0); }
.rel-roi b { font-size: 15px; line-height: 1; } .rel-roi small { font-size: 10px; color: var(--mt); }
.rel-minis { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.rel-minis.dentro { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0; }
.rel-mini { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--bd); border-radius: 12px; background: var(--sf); min-width: 0; }
.rel-mini span { color: var(--mt); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-mini b { font-size: 16px; font-variant-numeric: tabular-nums; }
.rel-grade { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; }
.rel-grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rel-grade.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rel-card { padding: 16px 18px; border: 1px solid var(--bd); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.rel-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.rel-svg { width: 100%; height: auto; display: block; margin-top: 8px; }
.rel-eixo text { fill: var(--mt2); font-size: 11px; }
.rel-zero { stroke: var(--bd2); stroke-dasharray: 4 4; }
.rel-leg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 8px; vertical-align: -1px; }
.rel-leg.bar { background: var(--ac); } .rel-leg.lin { background: #FFD08A; height: 3px; vertical-align: 2px; }
.rel-funil { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }
.rel-etapa { width: var(--w); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rel-faixa { width: 100%; display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: linear-gradient(90deg, rgba(255, 154, 0, .22), rgba(255, 51, 0, .18)); border: 1px solid var(--acbd); }
.rel-faixa b { font-size: 17px; font-variant-numeric: tabular-nums; } .rel-faixa span { color: var(--mt); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-etapa-info { display: flex; gap: 10px; font-size: 11px; color: var(--ac2); min-height: 14px; }
.rel-rosca { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.rel-rosca svg { width: 120px; height: 120px; flex: none; }
.rel-rosca ul { list-style: none; display: grid; gap: 5px; min-width: 0; flex: 1; }
.rel-rosca li { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.rel-rosca li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rel-rosca li span { color: var(--mt); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rel-rosca li b { font-variant-numeric: tabular-nums; }
.rel-colunas { display: flex; align-items: flex-end; gap: 4px; height: 140px; margin-top: 12px; }
.rel-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.rel-col span { width: 100%; max-width: 34px; border-radius: 4px 4px 0 0; background: var(--sf3); }
.rel-col.top span { background: var(--ac); }
.rel-col small { font-size: 10px; color: var(--mt2); }
@media (max-width: 1100px) { .rel-minis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rel-grade, .rel-grade.tres, .rel-grade.dois { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .rel-kpis { grid-template-columns: 1fr; } .rel-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rel-topo .link { margin-left: 0; } }
/* ---------- perfis de acesso: o que só o dono vê (a trava de verdade é no servidor) ---------- */
body[data-papel]:not([data-papel="dono"]) :is(.so-dono, #fabMestre, #painelMestre, [data-prompt], [data-nova]) { display: none !important; }
/* ---------- controle diário (aba Controle do cliente) ---------- */
#cliControle { display: flex; flex-direction: column; gap: 12px; }
.ctl-topo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }
.ctl-mes { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.ctl-mes h2 { font-size: 20px; text-transform: capitalize; min-width: 170px; text-align: center; }
.ctl-vp { display: flex; flex-direction: column; gap: 6px; color: var(--mt); font-size: 12px; font-weight: 500; }
.ctl-vp input { width: 150px; }
.ctl-kpis { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.ctl-verde b { color: var(--ok2); } .ctl-neg b { color: var(--er); }
.ctl-card { padding: 0; overflow: hidden; }
.ctl-tab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.ctl-tab th { position: sticky; top: 0; z-index: 1; padding: 10px 8px; background: linear-gradient(180deg, #FF7A1A, #FF5A00); color: #1A0800; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-align: center; white-space: nowrap; }
.ctl-tab td { padding: 3px 6px; border-bottom: 1px solid var(--bd); text-align: center; white-space: nowrap; }
.ctl-tab td.n { text-align: right; padding-right: 12px; }
.ctl-tab .auto { color: var(--mt); }
.ctl-tab tr.futuro td { opacity: .45; }
.ctl-tab tr.hoje td { background: rgba(255, 106, 0, .06); }
.ctl-tab tr.hoje .ctl-data { color: var(--ac2); font-weight: 700; }
.ctl-data { text-align: left !important; padding-left: 12px !important; font-weight: 600; }
.ctl-data small { display: block; color: var(--mt2); font-size: 10px; font-weight: 500; }
.ctl-laranja { background: rgba(255, 138, 51, .10); color: #FFB27A !important; }
.ctl-verde-c { background: rgba(16, 185, 129, .08); }
.ctl-taxa.bom { background: rgba(16, 185, 129, .14); color: var(--ok2); } .ctl-taxa.ruim { background: rgba(251, 146, 153, .10); color: var(--er); }
.ctl-in { width: 74px; min-height: 30px; padding: 4px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--tx); text-align: center; font: inherit; }
.ctl-in:hover { border-color: var(--bd2); }
.ctl-in:focus { border-color: var(--ac); background: var(--sf2); outline: none; box-shadow: 0 0 0 3px var(--acb); }
.ctl-in.auto { color: var(--mt); font-style: italic; }
.ctl-in.din { width: 104px; color: var(--ok2); }
.ctl-in.din::placeholder { color: var(--ok2); opacity: .75; }
.ctl-in.nota { width: 160px; text-align: left; color: var(--mt); }
.ctl-in.salvando { border-color: var(--al); } .ctl-in.salvo { border-color: var(--ok); } .ctl-in.erro { border-color: var(--er); background: var(--erb); }
.ctl-tab tfoot td { padding: 10px 8px; background: var(--sf3); font-weight: 700; border-top: 2px solid var(--ac); }
.ctl-leg { padding: 10px 14px; }
.ctl-tag.auto { color: var(--mt); font-weight: 600; }
@media (max-width: 1200px) { .ctl-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ctl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ctl-mes { margin-right: 0; width: 100%; justify-content: space-between; } }
.ctl-kpis .rel-mini b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctl-kpis { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.ctl-kpis .rel-mini b { overflow: visible; text-overflow: clip; }

/* controle: limites de empate e diagnóstico do gargalo */
.ctl-lim { padding: 10px 14px; border: 1px dashed var(--bd2); border-radius: 12px; color: var(--tx); }
.ctl-lim .ti { color: var(--ac2); margin-right: 4px; }
.ctl-lim .link { min-height: 0; font-size: inherit; }
.ctl-diag h2 .ti { color: var(--ac2); }
.ctl-sec { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.ctl-sec .chip b { margin-left: 4px; }
.ctl-diag-lista { display: grid; gap: 10px; }
.ctl-d { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 12px 14px; border: 1px solid var(--bd); border-radius: 12px; background: var(--sf2); }
.ctl-d > .ti { font-size: 20px; margin-top: 1px; }
.ctl-d b { font-weight: 600; } .ctl-d p { margin-top: 4px; color: var(--mt); font-size: 13px; }
.ctl-d .tag { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--sf3); color: var(--mt); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.ctl-d ul { margin: 6px 0 0 18px; display: grid; gap: 3px; font-size: 13px; }
.ctl-d.ok > .ti { color: var(--ok2); } .ctl-d.info > .ti { color: var(--info); }
.ctl-d.alerta { border-color: var(--albd); background: var(--alb); } .ctl-d.alerta > .ti { color: var(--al); }
.ctl-d.critico { border-color: var(--erbd); background: var(--erb); } .ctl-d.critico > .ti { color: var(--er); }
/* controle: cabeçalho, coluna Data e Total ficam fixos ao rolar (a tabela tem rolagem própria, do tamanho da tela) */
#cliControle .ctl-card .tabela-wrap { max-height: calc(100dvh - 120px); overflow: auto; border: 0; border-radius: 0; }
.ctl-tab thead th { position: sticky; top: 0; z-index: 3; }
.ctl-tab tfoot td { position: sticky; bottom: 0; z-index: 3; }
.ctl-tab thead th:first-child { left: 0; z-index: 5; }
.ctl-tab tbody td.ctl-data { position: sticky; left: 0; z-index: 2; background: var(--sf); box-shadow: 1px 0 0 var(--bd); }
.ctl-tab tbody tr.hoje td.ctl-data { background: #2a1d14; }
.ctl-tab tfoot td:first-child { left: 0; z-index: 4; }