/* Studio Santana · demo navegável
   Tokens e regras em design/DESIGN-SYSTEM.md. Vidro escuro sobre a foto do estúdio,
   lima = dinheiro entrando e coisa feita, lavanda = etapa e previsão, coral = atraso e saída.
   Dois modos: .modo-tv (palco fixo 1920x1080 escalado) e .modo-app (fluido, notebook). */

:root{
  --lima:#C8F542; --lima-claro:#D6FF66; --lavanda:#AB9FF3; --lavanda-esc:#7F70DB; --coral:#FF7A6E; --coral-claro:#FFB3AB;
  --branco:#FFFFFF; --tinta:#111114; --tinta-suave:#5E5E68; --preto:#1A1A1E;
  --texto:#F5F5F7; --texto-2:rgba(245,245,247,.64); --texto-3:rgba(245,245,247,.42);
  --vidro:rgba(24,24,28,.54); --vidro-borda:rgba(255,255,255,.16);
  --card:rgba(255,255,255,.07); --card-borda:rgba(255,255,255,.10); --card-hover:rgba(255,255,255,.11);
  --r-cena:44px; --r-card:24px; --r-tira:18px; --blur:40px;
  --fonte:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --z-rail:30; --z-modal:50; --z-toast:60;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--fonte);color:var(--texto);background:#CFCBC3;min-height:100vh;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;font-size:16px;line-height:1.5}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--lima);outline-offset:3px}
.oculto{display:none!important}
svg.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num{font-variant-numeric:tabular-nums}

/* ---------- cena ---------- */
.cena{position:fixed;inset:0;z-index:0;
  background:url(assets/fundo-studio.jpg) center/cover no-repeat,
  radial-gradient(120% 90% at 20% 10%,#F4F1EA 0%,#DDD8CF 45%,#B9B3A8 100%)}
.cena::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.06))}

/* ---------- palco ---------- */
/* Um só palco de 1920 de largura pros dois modos, escalado pelo mesmo --escala (min de vw/1920 e vh/1080).
   Topo, trilho e tipografia ficam do mesmo tamanho na TV e nas telas de trabalho: sair da TV não dá salto.
   Na TV a altura é fixa (1080) e nada rola; no app a altura cresce e a página rola.
   Abaixo de 1100px a escala desliga e o layout fica fluido. */
.palco{position:relative;z-index:1;width:1920px;padding:50px 60px 50px 164px;zoom:var(--escala,1)}
.rail{position:fixed;z-index:var(--z-rail);width:76px;top:50%;left:var(--rail-esq,24px);transform:translateY(-50%) scale(var(--escala,1));transform-origin:left center;
  background:var(--vidro);backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);
  border:1px solid var(--vidro-borda);border-radius:999px;padding:16px 0;display:flex;flex-direction:column;gap:8px;align-items:center;box-shadow:0 30px 80px rgba(0,0,0,.22)}
.rail button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--texto-2);transition:background .2s,color .2s}
.rail button:hover{background:rgba(255,255,255,.08);color:var(--texto)}
.rail button.ativo{background:rgba(255,255,255,.14);color:var(--texto)}
.vidro{position:relative;min-height:0;background:var(--vidro);backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);
  border:1px solid var(--vidro-borda);border-radius:var(--r-cena);overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.25);padding:34px 46px 40px}
.vidro::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 30%)}
.vidro > *{position:relative}

/* modo TV · altura fixa, nada rola */
body.modo-tv{display:grid;place-items:center;overflow:hidden;height:100vh}
body.modo-tv .palco{height:1080px}
body.modo-tv .vidro{height:100%;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);gap:26px}

/* modo app · altura livre, página rola */
body.modo-app{display:block;overflow-x:hidden}
body.modo-app .palco{margin:var(--palco-topo,0) auto 0;min-height:1080px}   /* mesma margem de cima que o palco centrado da TV */
body.modo-app .vidro{min-height:980px;display:flex;flex-direction:column;gap:26px}
@media (max-width:1100px){
  body.modo-app .palco{width:auto;zoom:1;padding:12px;min-height:100vh}
  body.modo-app .vidro{min-height:calc(100vh - 24px);padding:20px 18px 110px;border-radius:28px}
  body.modo-app .rail{top:auto;bottom:14px;left:50%;transform:translateX(-50%);flex-direction:row;padding:0 10px;gap:4px}
}

/* ---------- topo ---------- */
.topo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.marca{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:500;letter-spacing:.01em;white-space:nowrap}
.marca svg{width:30px;height:30px}
.marca small{font-weight:300;color:var(--texto-2);margin-left:2px;font-size:20px}
.abas{display:flex;gap:8px;justify-self:center;flex-wrap:wrap;justify-content:center}
.aba{padding:12px 22px;border-radius:999px;border:1px solid var(--vidro-borda);color:var(--texto);font-size:15px;transition:background .2s,color .2s;min-height:44px}
.aba:hover{background:rgba(255,255,255,.08)}
.aba.ativa{background:#fff;color:var(--tinta);border-color:#fff;font-weight:500}
.topo-acoes{justify-self:end;display:flex;align-items:center;gap:10px}
.relogio{font-size:14px;color:var(--texto-2);margin-right:8px;display:flex;gap:10px;align-items:center;white-space:nowrap}
.relogio i{font-style:normal;padding:4px 10px;border:1px solid var(--vidro-borda);border-radius:999px;font-size:12px;color:var(--texto-2)}
.redondo{width:44px;height:44px;border-radius:50%;border:1px solid var(--vidro-borda);background:rgba(255,255,255,.06);display:grid;place-items:center;color:var(--texto);transition:background .2s;position:relative}
.redondo:hover{background:rgba(255,255,255,.12)}
.redondo .bolha{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;background:var(--coral);color:var(--tinta);font-size:11px;font-weight:600;display:grid;place-items:center;padding:0 5px}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--lavanda),var(--lima));border:2px solid rgba(255,255,255,.35);display:grid;place-items:center;color:var(--tinta);font-weight:600;font-size:14px;letter-spacing:.02em}
@media (max-width:1100px){.topo{grid-template-columns:1fr auto}.abas{display:none}.relogio{display:none}}

/* ---------- painel da TV ---------- */
.grade{display:grid;grid-template-columns:520px 1fr;gap:40px;min-height:0}
.esq{display:grid;grid-template-rows:auto 1fr auto;gap:10px;min-height:0}
.esq h1{font-size:60px;line-height:1.04;font-weight:500;letter-spacing:-.01em;margin-top:6px}
.heroi{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:0}
.rosca{position:relative;display:grid;place-items:center}
.rosca svg{width:340px;height:340px;transform:rotate(-90deg)}
.rosca-centro{position:absolute;text-align:center;line-height:1}
.rosca-centro b{display:block;font-size:44px;font-weight:300;letter-spacing:-.02em}
.rosca-centro span{display:block;font-size:14px;color:var(--texto-2);margin-top:6px}
.rosca-leg{display:grid;grid-template-columns:auto auto;justify-content:center;gap:8px 24px;font-size:13px;color:var(--texto-2)}
.rosca-leg .larga{grid-column:1/-1;justify-self:center}
.rosca-leg span{display:flex;align-items:center;gap:7px}
.pt{width:9px;height:9px;border-radius:50%;background:var(--texto-3);flex:none;display:inline-block}
.pt.lima{background:var(--lima)} .pt.lav{background:var(--lavanda)} .pt.coral{background:var(--coral)} .pt.branco{background:#fff} .pt.cinza{background:var(--texto-3)}
.pt.vazio{background:transparent;border:2px solid rgba(255,255,255,.55)}
.pt.hach{border-radius:2px;background:repeating-linear-gradient(135deg,var(--lavanda) 0 2px,transparent 2px 5px)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 14px;align-self:end;padding-bottom:4px}
.kpi b{display:block;font-size:30px;font-weight:400;letter-spacing:-.01em;line-height:1.1}
.kpi span{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--texto-2);margin-top:5px}
.dir{display:grid;grid-template-rows:auto 1fr 1fr;gap:20px;min-height:0}
.tiras{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.tira{background:var(--card);border:1px solid var(--card-borda);border-radius:var(--r-tira);padding:14px 16px;min-height:96px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;transition:background .2s}
.tira.clicavel{cursor:pointer} .tira.clicavel:hover{background:var(--card-hover)}
.tira.ativa{background:#fff;color:var(--tinta);border-color:#fff}
.tira.ativa span{color:var(--tinta-suave)}
.tira span{font-size:13px;color:var(--texto-2);line-height:1.2}
.tira b{font-size:24px;font-weight:300;letter-spacing:-.01em}
.tira b small{font-size:15px;color:var(--texto-3);font-weight:300}
.tira.alerta b{color:var(--coral-claro)}
.linha{display:grid;gap:20px;min-height:0}
.linha.dois{grid-template-columns:1fr 1fr}
.linha.tres{grid-template-columns:1fr 1fr 1fr}
.card{position:relative;border-radius:var(--r-card);padding:22px 24px 20px;display:flex;flex-direction:column;min-height:0;overflow:hidden;transition:background .2s;text-align:left}
.card.clicavel{cursor:pointer}
.card.vidro-c{background:var(--card);border:1px solid var(--card-borda)}
.card.vidro-c.clicavel:hover{background:var(--card-hover)}
.card.branco{background:#fff;color:var(--tinta)}
.card.branco .rotulo{color:var(--tinta-suave)}
.card.lavanda{background:var(--lavanda);color:var(--tinta)}
.card.lavanda .rotulo{color:rgba(17,17,20,.66)}
.ir{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--card-borda);background:rgba(255,255,255,.06);color:var(--texto);transition:background .2s}
.ir svg{width:16px;height:16px}
.ir:hover{background:rgba(255,255,255,.16)}
.card.branco .ir{background:var(--tinta);border-color:var(--tinta);color:#fff}
.card.lavanda .ir{background:rgba(255,255,255,.38);border-color:transparent;color:var(--tinta)}
.rotulo{font-size:14px;color:var(--texto-2);padding-right:52px;line-height:1.3}
.valor{font-size:42px;font-weight:300;letter-spacing:-.02em;line-height:1;margin-top:12px}
.valor small{font-size:20px;font-weight:300;color:var(--texto-3);margin-left:4px}
.card.branco .valor small{color:var(--tinta-suave)} .card.lavanda .valor small{color:rgba(17,17,20,.6)}
.delta{font-size:13px;margin-top:8px;display:inline-flex;align-self:flex-start;gap:6px}
.delta.pos{color:var(--lima)} .delta.neg{color:var(--coral)} .delta.neutro{color:var(--texto-2)}
.card.branco .delta.pos,.card.lavanda .delta.pos{background:var(--lima);color:var(--tinta);padding:3px 10px;border-radius:999px;font-weight:500}
.card.branco .delta.neg{background:#FFE1DD;color:#B3261E;padding:3px 10px;border-radius:999px;font-weight:500}
.card.lavanda .delta.neutro{color:rgba(17,17,20,.66)}
.graf{margin-top:auto;padding-top:14px}
.graf-titulo{font-size:12px;color:var(--tinta-suave);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.graf-titulo i{width:14px;height:8px;background:var(--lima);border-radius:2px;display:inline-block}
.legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--texto-2);margin-top:10px}
.legenda span{display:flex;align-items:center;gap:6px}
.legenda.duas{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.card.branco .legenda,.card.lavanda .legenda{color:rgba(17,17,20,.66)}
/* barras horizontais · origem */
.bh{display:grid;grid-template-columns:1fr 150px;gap:16px;align-items:center;margin-top:10px}
.bh + .bh{margin-top:12px}
.bh-bar{height:56px;display:flex;gap:2px}
.bh-bar i{display:block;height:100%}
.bh-bar i.preto{background:var(--tinta)} .bh-bar i.lima{background:var(--lima)}
.bh-bar i.hach{background:repeating-linear-gradient(135deg,#C9C9CF 0 3px,#E9E9EC 3px 8px)}
.bh-leg b{display:block;font-size:22px;font-weight:400;line-height:1}
.bh-leg span{display:block;font-size:13px;color:var(--tinta-suave);margin-top:3px}
.bh-leg small{display:block;font-size:12px;color:var(--tinta-suave);margin-top:2px}
/* degraus · funil */
.funil{display:flex;gap:12px;align-items:flex-end;height:172px}
.degrau{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.dg-v{font-size:17px;font-weight:500;line-height:1}
.dg-n{font-size:12px;color:rgba(17,17,20,.66);margin:3px 0 6px;white-space:nowrap}
.dg-bar{background:rgba(255,255,255,.28);border-top:3px solid var(--tinta);border-radius:4px 4px 0 0;min-height:6px}
/* barras por dia */
.dias{display:flex;gap:6px;align-items:flex-end;height:124px}
.dia{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%}
.dia i{display:block;border-radius:3px}
.dia i.top{background:var(--lavanda)} .dia i.base{background:var(--lima)}
.dia.hoje i.base{background:#fff}
/* matriz de pontos */
.pontos{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px}
.pontos i{aspect-ratio:1;min-width:0;border-radius:50%;background:var(--texto-3);display:block}
.pontos i.lav{background:var(--lavanda)} .pontos i.branco{background:#fff} .pontos i.lima{background:var(--lima)}
.pontos i.vazio{background:transparent;border:2px solid rgba(255,255,255,.55)}
.pontos i.nada{background:transparent;border:1px dashed rgba(255,255,255,.18)}
.pontos i.mais{background:transparent;border:1px solid rgba(255,255,255,.3);font-style:normal;font-size:11px;display:grid;place-items:center;color:var(--texto-2)}
/* área */
.area svg{width:100%;height:118px;display:block}

/* ---------- carrossel da TV · painel gráfico ⇄ mural ---------- */
:root{ --verde:#7DE0A0; --ambar:#F5C24B; --c-ok:#7DE0A0; --c-atencao:#F5C24B; --c-ruim:#FF7A6E;
  --verde-bg:rgba(125,224,160,.10); --verde-bd:rgba(125,224,160,.30);
  --ambar-bg:rgba(245,194,75,.11); --ambar-bd:rgba(245,194,75,.32);
  --coral-bg:rgba(255,122,110,.11); --coral-bd:rgba(255,122,110,.32); }
.pt.ok{background:var(--verde)} .pt.atencao{background:var(--ambar)} .pt.ruim{background:var(--coral)}
.tv{position:static;height:100%;min-height:0;min-width:0}
.tv-janela{height:100%;min-height:0;min-width:0;overflow:hidden}
.tv-track{display:flex;height:100%;transform:translateX(var(--arraste,var(--n,0)));transition:transform .38s cubic-bezier(.4,0,.2,1)}
.tv.arr .tv-track{transition:none}
.tv[data-slide="0"] .tv-track{--n:0} .tv[data-slide="1"] .tv-track{--n:-100%}
.tv-slide{flex:0 0 100%;height:100%;min-width:0;overflow:hidden;touch-action:pan-y}
/* alternador flutua na margem de baixo do vidro · não rouba altura do slide, não corta */
.tv-dots{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.tv-dot{padding:7px 20px;border-radius:999px;border:1px solid var(--vidro-borda);background:rgba(20,20,24,.55);color:var(--texto-2);font-size:14px;transition:background .2s,color .2s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tv-dot:hover{color:var(--texto);background:rgba(255,255,255,.10)}
.tv[data-slide="0"] .tv-dot:nth-child(1),.tv[data-slide="1"] .tv-dot:nth-child(2){background:#fff;color:var(--tinta);border-color:#fff;font-weight:500}

/* mural · a segunda tela, cards ricos como o dono pediu */
.mural-tela{display:flex;flex-direction:column;height:100%;gap:16px}
.mural-topo{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex:none}
.mural-topo h1{font-size:38px;font-weight:500;letter-spacing:-.01em;line-height:1}
.mural-leg{display:flex;gap:20px;align-items:center;font-size:13px;color:var(--texto-2)}
.mural-sem{display:flex;align-items:center;gap:7px} .mural-sem .pt{margin-left:8px}
.mural-sem .pt:first-child{margin-left:0}

/* ROI em cima, faixa larga */
.roi-hero{flex:none;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:32px;border-radius:24px;padding:20px 28px;
  background:var(--card);border:1px solid var(--card-borda);border-left:5px solid var(--lima)}
.roi-anel{position:relative;width:118px;height:118px;display:grid;place-items:center;flex:none}
.roi-anel svg{position:absolute;inset:0;width:100%;height:100%}
.roi-anel-c{text-align:center;line-height:1}
.roi-anel-c b{font-size:30px;font-weight:400} .roi-anel-c span{font-size:12px;color:var(--texto-2);display:block;margin-top:3px}
.roi-info{min-width:0;overflow:hidden}
.roi-titulo{font-size:15px;color:var(--texto-2);margin-bottom:6px}
.roi-num{font-size:38px;font-weight:300;letter-spacing:-.02em;line-height:1} .roi-num span{font-size:20px;color:var(--texto-3)}
.roi-sub{font-size:13.5px;color:var(--texto-2);margin-top:8px}
.roi-kpis{display:flex;gap:28px;flex:none}
.roi-kpis b{font-size:24px;font-weight:400;display:block;line-height:1.1}
.roi-kpis span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--texto-2);margin-top:5px}

/* grade · um card completo por colaborador (como a referência) */
.mural{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:16px;min-height:0;min-width:0}
.mcard{position:relative;min-width:0;display:flex;flex-direction:column;gap:10px;text-align:left;border-radius:20px;padding:18px 20px;overflow:hidden;
  background:var(--card);border:1px solid var(--card-borda);border-top:4px solid var(--card-borda);transition:background .2s;cursor:pointer}
.mcard:hover{background:var(--card-hover)}
.mcard.ok{background:var(--verde-bg);border-color:var(--verde-bd);border-top-color:var(--verde)}
.mcard.atencao{background:var(--ambar-bg);border-color:var(--ambar-bd);border-top-color:var(--ambar)}
.mcard.ruim{background:var(--coral-bg);border-color:var(--coral-bd);border-top-color:var(--coral)}
.mc-cab{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.mc-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--lavanda),var(--lima));color:var(--tinta);font-size:13px;font-weight:600;display:grid;place-items:center;flex:none}
.mc-nome{min-width:0} .mc-nome b{font-size:16px;font-weight:500;display:block;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-nome span{font-size:12px;color:var(--texto-2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpill{font-size:11px;font-weight:500;padding:4px 10px;border-radius:999px;white-space:nowrap;flex:none;border:1px solid transparent}
.mpill.ok{background:var(--verde-bg);color:var(--verde);border-color:var(--verde-bd)}
.mpill.atencao{background:var(--ambar-bg);color:var(--ambar);border-color:var(--ambar-bd)}
.mpill.ruim{background:var(--coral-bg);color:var(--coral-claro);border-color:var(--coral-bd)}
.mc-media{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}
.mc-media > div:first-child{min-width:0}
.mc-media small{font-size:12px;color:var(--texto-2);display:block}
.mc-media > div:first-child b{font-size:30px;font-weight:300;letter-spacing:-.02em;line-height:1.05;display:inline}
.mc-media > div:first-child > span{font-size:13px;color:var(--texto-3);margin-left:4px}
.anelp{position:relative;width:64px;height:64px;flex:none;display:grid;place-items:center}
.anelp svg{position:absolute;inset:0;width:100%;height:100%} .anelp b{font-size:14px;font-weight:500}
.mc-alvo{font-size:12px;color:var(--texto-2);display:flex;justify-content:space-between;gap:8px;padding-bottom:2px;border-bottom:1px solid var(--card-borda)}
.mc-alvo span{color:var(--texto);text-align:right}
.mc-linha{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--texto-2)}
.mc-linha b{color:var(--texto);font-weight:500}
.mbar{height:7px;border-radius:999px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.mbar i{position:absolute;top:0;left:0;height:100%;border-radius:999px}
.mbar i.piso{background:rgba(255,255,255,.30)} .mbar i.meta{background:var(--lima)}
.mcard.ruim .mbar i.meta{background:var(--coral)} .mcard.atencao .mbar i.meta{background:var(--ambar)} .mcard.ok .mbar i.meta{background:var(--verde)}
.mc-caixas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
.mc-caixas div{background:rgba(255,255,255,.05);border:1px solid var(--card-borda);border-radius:12px;padding:8px 12px}
.mc-caixas span{font-size:11px;color:var(--texto-2);display:block} .mc-caixas b{font-size:16px;font-weight:500}
.mc-funil{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:auto;padding-top:10px;border-top:1px solid var(--card-borda)}
.mc-funil div{text-align:center} .mc-funil b{font-size:18px;font-weight:400;display:block;line-height:1.1} .mc-funil span{font-size:10.5px;color:var(--texto-2)}
.mc-rot{display:flex;justify-content:space-between;font-size:12px;color:var(--texto-2)}
.mc-rot b{font-weight:500}
.falta{color:var(--coral-claro)} .ok-txt{color:var(--verde)}
@media (max-width:1100px){ .roi-hero{grid-template-columns:auto 1fr;gap:18px} .roi-kpis{grid-column:1/-1;justify-content:space-between} .mural{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- telas do app ---------- */
.tela{display:flex;flex-direction:column;gap:22px;flex:1}
.tela-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tela-topo h1{font-size:40px;line-height:1.05;font-weight:500;letter-spacing:-.01em}
.tela-topo .sub{color:var(--texto-2);font-size:15px;margin-top:6px}
.tela-acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;min-height:44px;border-radius:999px;font-size:14px;font-weight:500;border:1px solid var(--vidro-borda);color:var(--texto);background:rgba(255,255,255,.06);transition:background .2s,color .2s;white-space:nowrap}
.btn:hover{background:rgba(255,255,255,.12)}
.btn.primario{background:var(--lima);color:var(--tinta);border-color:var(--lima)}
.btn.primario:hover{background:var(--lima-claro)}
.btn.mini{padding:0 12px;min-height:36px;font-size:13px}
.btn.perigo{color:var(--coral-claro);border-color:rgba(255,122,110,.35)}
.btn.perigo:hover{background:rgba(255,122,110,.14)}
.btn svg.ico{width:16px;height:16px}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{padding:0 14px;min-height:38px;border-radius:999px;border:1px solid var(--vidro-borda);font-size:13.5px;color:var(--texto-2);transition:background .2s,color .2s;display:inline-flex;align-items:center;gap:6px}
.chip.ativo{background:#fff;color:var(--tinta);border-color:#fff;font-weight:500}
.chip:hover:not(.ativo){background:rgba(255,255,255,.08);color:var(--texto)}
.chip small{opacity:.7}
.sep{width:1px;height:22px;background:var(--vidro-borda);margin:0 4px}
.busca{position:relative;margin-left:auto}
.busca input{height:40px;width:260px;max-width:60vw;padding:0 14px 0 40px;border-radius:999px;border:1px solid var(--vidro-borda);background:rgba(255,255,255,.07);color:var(--texto);font-size:14px;outline:none}
.busca input:focus{border-color:var(--lima)}
.busca input::placeholder{color:var(--texto-3)}
.busca svg{position:absolute;left:14px;top:10px;width:18px;height:18px;color:var(--texto-3)}
.filtros{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
body.modo-app .tiras{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:500;border:1px solid transparent;white-space:nowrap;line-height:1.4}
.pill.neutro{background:rgba(255,255,255,.10);color:var(--texto)}
.pill.lav{background:rgba(171,159,243,.22);color:#DAD4FF;border-color:rgba(171,159,243,.35)}
.pill.lima{background:rgba(200,245,66,.18);color:var(--lima);border-color:rgba(200,245,66,.3)}
.pill.coral{background:rgba(255,122,110,.16);color:var(--coral-claro);border-color:rgba(255,122,110,.3)}
.pill.branco{background:#fff;color:var(--tinta)}
.pill.cinza{background:rgba(255,255,255,.05);color:var(--texto-2);border-color:var(--card-borda)}
.tabela-rolagem{overflow-x:auto;margin:0 -4px;padding:0 4px}
.tabela{width:100%;border-collapse:separate;border-spacing:0 6px;min-width:860px}
.tabela th{font-size:12px;font-weight:500;color:var(--texto-3);text-align:left;padding:0 14px 2px;letter-spacing:.03em;text-transform:uppercase}
.tabela td{background:var(--card);padding:12px 14px;font-size:15px;vertical-align:middle;border-top:1px solid var(--card-borda);border-bottom:1px solid var(--card-borda);transition:background .2s}
.tabela td:first-child{border-left:1px solid var(--card-borda);border-radius:14px 0 0 14px}
.tabela td:last-child{border-right:1px solid var(--card-borda);border-radius:0 14px 14px 0}
.tabela tr.clicavel td{cursor:pointer}
.tabela tr.clicavel:hover td{background:var(--card-hover)}
.tabela td.dir,.tabela th.dir{text-align:right}
.tabela .nome b{font-weight:500;display:block}
.tabela .nome small{color:var(--texto-3);font-size:12.5px}
.tabela .acoes{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.tabela .apagado{color:var(--texto-3)}
.nada-aqui{padding:40px;text-align:center;color:var(--texto-2);background:var(--card);border:1px dashed var(--card-borda);border-radius:18px}
.nota{font-size:13px;color:var(--texto-3)}

/* kanban */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
@media (max-width:1100px){.kanban{grid-template-columns:repeat(2,1fr)}}
.coluna{background:var(--card);border:1px solid var(--card-borda);border-radius:22px;padding:12px;min-height:340px;display:flex;flex-direction:column;gap:10px;transition:outline-color .2s;outline:2px dashed transparent;outline-offset:-2px}
.coluna.sobre{outline-color:var(--lima)}
.coluna-topo{display:flex;justify-content:space-between;align-items:baseline;padding:6px 8px 4px}
.coluna-topo b{font-size:16px;font-weight:500;display:flex;align-items:center;gap:8px}
.coluna-topo span{font-size:13px;color:var(--texto-2)}
.album{background:rgba(255,255,255,.06);border:1px solid var(--card-borda);border-radius:16px;padding:12px 14px;display:grid;gap:8px;cursor:grab;transition:background .2s}
.album:hover{background:rgba(255,255,255,.10)}
.album.arrastando{opacity:.4}
.album b{font-weight:500;font-size:15px;line-height:1.3}
.album .meta{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--texto-2)}
.album .parado{color:var(--coral-claro)}
.album .btn{justify-self:end}

/* equipe */
.pessoas{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media (max-width:1100px){.pessoas{grid-template-columns:1fr}}
.pessoa{background:var(--card);border:1px solid var(--card-borda);border-radius:var(--r-card);padding:22px 24px;display:flex;flex-direction:column;gap:18px}
.pessoa-topo{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.pessoa-topo .avatar{width:52px;height:52px;font-size:16px}
.pessoa-topo h2{font-size:22px;font-weight:500;line-height:1.1}
.pessoa-topo .sub{font-size:13px;color:var(--texto-2)}
.anel{position:relative;width:76px;height:76px;display:grid;place-items:center}
.anel svg{position:absolute;inset:0;transform:rotate(-90deg)}
.anel b{font-size:17px;font-weight:500}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat{background:rgba(255,255,255,.05);border:1px solid var(--card-borda);border-radius:14px;padding:10px 12px}
.stat b{display:block;font-size:22px;font-weight:400;line-height:1.1}
.stat span{font-size:12px;color:var(--texto-2)}
.tarefas{display:grid;gap:4px}
.tarefa{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;transition:background .2s;width:100%;text-align:left;min-height:44px}
.tarefa:hover{background:rgba(255,255,255,.06)}
.tarefa .caixa{width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(255,255,255,.45);display:grid;place-items:center;flex:none;transition:background .2s}
.tarefa .caixa svg{width:14px;height:14px;opacity:0}
.tarefa.feita .caixa{background:var(--lima);border-color:var(--lima);color:var(--tinta)}
.tarefa.feita .caixa svg{opacity:1}
.tarefa.feita span{color:var(--texto-3);text-decoration:line-through}
.nova-tarefa{display:flex;gap:8px}
.nova-tarefa input{flex:1;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--vidro-borda);background:rgba(255,255,255,.07);color:var(--texto);font-size:14px;outline:none}
.nova-tarefa input:focus{border-color:var(--lima)}
.regras{background:var(--card);border:1px solid var(--card-borda);border-radius:var(--r-card);padding:22px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1100px){.regras{grid-template-columns:1fr}}
.regras h3{font-size:15px;font-weight:500;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.regras p{font-size:14px;color:var(--texto-2);line-height:1.5}

/* acesso */
body.modo-acesso .vidro{justify-content:center;align-items:center}
.acesso{display:grid;gap:18px;width:min(1080px,100%);margin:0 auto}
.acesso-topo{text-align:center;display:grid;gap:8px;margin-bottom:12px}
.acesso-topo .marca{justify-content:center;font-size:24px}
.acesso-topo h1{font-size:44px;font-weight:500;line-height:1.05}
.acesso-topo p{color:var(--texto-2);font-size:16px}
.entradas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1100px){.entradas{grid-template-columns:repeat(2,1fr)}}
.entrada{background:var(--card);border:1px solid var(--card-borda);border-radius:var(--r-card);padding:24px 22px;display:grid;gap:14px;text-align:left;transition:background .2s;min-height:200px;align-content:start}
.entrada:hover{background:var(--card-hover)}
.entrada .avatar{width:56px;height:56px;font-size:17px;display:grid;color:var(--tinta);line-height:1}
.entrada b{font-size:19px;font-weight:500;display:block}
.entrada span{font-size:13.5px;color:var(--texto-2);display:block;line-height:1.4}
.entrada .vai{margin-top:auto;font-size:13px;color:var(--lima);display:flex;align-items:center;gap:6px}
.acesso .nota{text-align:center}

/* ---------- modal e toast ---------- */
.modal-fundo{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(10,10,12,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}
.modal{width:min(580px,100%);max-height:calc(100vh - 40px);overflow:auto;background:rgba(30,30,34,.90);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid var(--vidro-borda);border-radius:28px;padding:28px 30px;color:var(--texto);box-shadow:0 40px 120px rgba(0,0,0,.4)}
.modal h2{font-size:24px;font-weight:500;margin-bottom:4px;line-height:1.2}
.modal .sub{color:var(--texto-2);font-size:14px;margin-bottom:20px}
.form{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.form .larga{grid-column:1/-1}
.campo{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--texto-2)}
.campo input,.campo select{height:46px;padding:0 14px;border-radius:14px;border:1px solid var(--vidro-borda);background:rgba(255,255,255,.07);color:var(--texto);font-size:15px;outline:none;width:100%}
.campo input:focus,.campo select:focus{border-color:var(--lima)}
.campo select option{color:#111}
.campo input::placeholder{color:var(--texto-3)}
.opcoes{display:flex;gap:8px;flex-wrap:wrap}
.opcoes label{display:inline-flex;align-items:center;gap:8px;padding:0 14px;min-height:44px;border-radius:999px;border:1px solid var(--vidro-borda);cursor:pointer;font-size:14px;color:var(--texto);transition:background .2s}
.opcoes label:has(input:checked){background:#fff;color:var(--tinta);border-color:#fff;font-weight:500}
.opcoes input{position:absolute;opacity:0;width:0;height:0}
.modal-acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.resumo{background:rgba(255,255,255,.06);border:1px solid var(--card-borda);border-radius:16px;padding:14px 16px;font-size:14px;color:var(--texto-2);display:grid;gap:4px}
.resumo b{color:var(--texto);font-weight:500}
.linha-tempo{display:grid;gap:10px;margin-top:6px}
.evento{display:grid;grid-template-columns:64px 1fr;gap:12px;font-size:14px;align-items:baseline}
.evento small{color:var(--texto-3);font-size:12.5px}
.evento span{color:var(--texto)}
.toasts{position:fixed;right:24px;bottom:24px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:rgba(30,30,34,.94);border:1px solid var(--vidro-borda);border-left:3px solid var(--lima);border-radius:14px;padding:12px 16px;font-size:14px;color:var(--texto);max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:sobe .25s ease-out}
.toast.alerta{border-left-color:var(--coral)}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============ acréscimos do sistema real ============
   O que a demo não precisava: login de verdade, cadastro e o estado "sem meta". */

/* --- login --- */
.acesso .form.entrar{max-width:420px;margin:0 auto;display:grid;gap:14px}
.erro-entrar{grid-column:1/-1;margin:0;padding:10px 14px;border-radius:12px;
  background:rgba(255,122,110,.14);border:1px solid rgba(255,122,110,.34);color:var(--coral-claro,#FF7A6E);font-size:14px}

/* --- cartão sem meta cadastrada ---
   Cinza deliberado: o semáforo só acende quando existe número pra comparar. */
.mcard.sem-meta,.roi-hero.sem-meta{--c-sem-meta:rgba(245,245,247,.34)}
.mpill.sem-meta{background:rgba(245,245,247,.12);color:var(--texto-2)}
.mcard.sem-meta .mc-alvo{color:var(--texto-2)}

/* --- campo dentro de tabela (metas) --- */
.mini-input{width:130px;padding:7px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.22);color:var(--texto);font:inherit;font-size:14px}
.mini-input:focus{outline:2px solid var(--lima);outline-offset:1px}

/* --- linha de tabela de pessoa inativa --- */
tr.apagado{opacity:.45}

/* --- marcador de tarefa conferida pela direção --- */
.tarefa small{margin-left:auto;font-size:12px;opacity:.8}

/* --- tabela de metas dentro da coluna estreita da configuração ---
   Quatro colunas não cabem em meia largura. A rolagem horizontal do .tabela-rolagem
   resolve, mas escondia justamente o botão de salvar · por isso ele encolhe e a
   primeira coluna para de esticar. */
.pessoas .tabela-rolagem{overflow-x:auto}
.pessoas .tabela th,.pessoas .tabela td{white-space:nowrap}
.pessoas .tabela .nome{white-space:normal;min-width:150px}
.mini-input{width:104px}

/* --- a logo ---
   Altura fixa e largura automática: a marca é horizontal e não pode esticar.
   Nada de filtro nem recolorir · logo de cliente se usa como o cliente entregou.

   O elo sobe acima da altura das letras, então a caixa precisa de folga em cima
   pra não cortar o símbolo, e de folga embaixo pra o título não encostar. */
.marca .logo{height:26px;width:auto;display:block}
.marca.marca-grande{display:block;padding-top:6px;margin-bottom:22px;overflow:visible}
.marca.marca-grande .logo{height:58px;margin:0 auto}
.acesso-topo h1{margin-top:0}
.logo-simbolo{height:22px;width:auto;vertical-align:middle}
@media (max-width:1100px){ .marca .logo{height:22px} .marca.marca-grande .logo{height:44px} }