/* Dashboard online do graça notes. Identidade v5: grafite + um acento (Brasa), letra Geist. */
@font-face { font-family: "Geist"; src: url("fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #0a0a0b; --s1: #111113; --s2: #17171a; --s3: #1f1f23; --linha: #26262b; --linha2: #1c1c20;
  --t1: #f2f2f3; --t2: #a9a9b0; --t3: #75757d;
  --brasa: #f25c2a; --brasa-l: #ff9f72; --brasa-d: #d9461a; --brasa-f: rgba(242, 92, 42, .14);
  --bom: #4cc38a; --bom-f: rgba(76, 195, 138, .13); --ruim: #f2555a; --ruim-f: rgba(242, 85, 90, .13);
  --aviso: #e8a33d; --aviso-f: rgba(232, 163, 61, .13);
  --r: 16px; --r2: 11px;
  --num: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; font-family: "Geist", system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.45; color: var(--t1);
  background: var(--bg); -webkit-font-smoothing: antialiased; min-height: 100dvh; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }
.mudo { color: var(--t2); }
.fraco { color: var(--t3); }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
:focus-visible { outline: 2px solid var(--brasa); outline-offset: 2px; border-radius: 6px; }

/* ---------- topo fixo ---------- */
.topo { position: sticky; top: 0; z-index: 20; background: rgba(10, 10, 11, .86); backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px); border-bottom: 1px solid var(--linha2); padding: max(10px, env(safe-area-inset-top)) 16px 0; }
.topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 1180px; margin: 0 auto; }
.topo__marca { display: flex; align-items: center; gap: 8px; font-size: 15px; letter-spacing: -.02em; }
.topo__marca span { font-size: 13px; }
.topo__filtros { padding: 10px 0 12px; }
.frescor { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--linha); background: var(--s1); border-radius: 999px;
  padding: 5px 11px 5px 9px; font-size: 12.5px; color: var(--t2); cursor: pointer; white-space: nowrap; }
.frescor__ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--t3); flex: none; }
.frescor[data-estado="fresco"] .frescor__ponto { background: var(--bom); box-shadow: 0 0 0 0 rgba(76, 195, 138, .6); animation: pulso 2.4s infinite; }
.frescor[data-estado="morno"] .frescor__ponto { background: var(--aviso); }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(76, 195, 138, .55); } 70% { box-shadow: 0 0 0 7px rgba(76, 195, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 195, 138, 0); } }
@media (prefers-reduced-motion: reduce) { .frescor__ponto { animation: none !important; } * { transition: none !important; } }

.segmento { display: flex; gap: 2px; background: var(--s1); border: 1px solid var(--linha); border-radius: 12px; padding: 3px;
  overflow-x: auto; scrollbar-width: none; min-width: 0; }
.segmento::-webkit-scrollbar { display: none; }
.segmento button { border: 0; background: transparent; color: var(--t2); padding: 6px 11px; border-radius: 9px; font-size: 13.5px;
  white-space: nowrap; cursor: pointer; font-weight: 500; }
.segmento button[aria-pressed="true"] { background: var(--s3); color: var(--t1); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset; }
.botao-sec { position: relative; flex: none; border: 1px solid var(--linha); background: var(--s1); border-radius: 12px; padding: 7px 13px;
  font-size: 13.5px; font-weight: 500; cursor: pointer; }
.bolinha { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--brasa);
  color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }

/* abas: embaixo no celular, no topo no computador */
.abas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(14, 14, 16, .92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--linha2);
  padding: 6px 6px calc(6px + var(--seguro-baixo)); }
.abas a { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--t3); font-size: 11px;
  font-weight: 500; padding: 5px 0; border-radius: 10px; }
.abas svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.abas a[aria-current="page"] { color: var(--t1); }
.abas a[aria-current="page"] svg { stroke: var(--brasa); }
@media (min-width: 900px) {
  .abas { position: static; display: flex; gap: 4px; background: none; border: 0; border-bottom: 1px solid var(--linha2); backdrop-filter: none; padding: 0 max(16px, calc((100% - 1148px) / 2)); }
  .abas a { flex-direction: row; gap: 7px; font-size: 14px; padding: 10px 14px 12px; border-radius: 0; border-bottom: 2px solid transparent; }
  .abas svg { width: 17px; height: 17px; }
  .abas a[aria-current="page"] { border-bottom-color: var(--brasa); }
  .topo__filtros { padding-bottom: 6px; }
}

/* ---------- conteúdo ---------- */
.conteudo { max-width: 1180px; margin: 0 auto; padding: 16px 16px calc(96px + var(--seguro-baixo)); display: flex; flex-direction: column; gap: 14px; outline: none; }
@media (min-width: 900px) { .conteudo { padding: 22px 16px 48px; gap: 18px; } }
.grade { display: grid; gap: 14px; }
@media (min-width: 900px) { .grade--2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } .grade--2i { grid-template-columns: 1fr 1fr; align-items: start; } }

.cartao { background: var(--s1); border: 1px solid var(--linha2); border-radius: var(--r); padding: 16px; }
.cartao__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cartao h2 { font-size: 15px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.cartao h3 { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--t3); margin: 18px 0 10px; }
.cartao h3:first-child { margin-top: 0; }
.dica { font-size: 12.5px; color: var(--t3); }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.kpi { background: var(--s1); border: 1px solid var(--linha2); border-radius: var(--r); padding: 13px 14px 10px; display: flex; flex-direction: column;
  gap: 2px; min-width: 0; position: relative; overflow: hidden; }
.kpi__rot { font-size: 12.5px; color: var(--t2); display: flex; justify-content: space-between; gap: 6px; }
.kpi__val { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: clamp(22px, 6.2vw, 30px); font-weight: 500; letter-spacing: -.045em;
  line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__sub { font-size: 11.5px; color: var(--t3); min-height: 16px; line-height: 1.35; }
.kpi__linha { height: 26px; margin-top: 6px; }
.kpi__linha svg { width: 100%; height: 26px; overflow: visible; }
.kpi--principal { background: linear-gradient(160deg, rgba(242, 92, 42, .16), rgba(242, 92, 42, .02) 60%), var(--s1); border-color: rgba(242, 92, 42, .25); }
.delta { font-family: var(--num); font-size: 11.5px; font-weight: 500; padding: 1px 6px; border-radius: 6px; white-space: nowrap; align-self: center; }
.delta--bom { color: var(--bom); background: var(--bom-f); }
.delta--ruim { color: var(--ruim); background: var(--ruim-f); }
.delta--neutro { color: var(--t2); background: var(--s3); }

/* funil */
.fgrupo + .fgrupo { margin-top: 6px; }
.fgrupo__tit { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em;
  color: var(--t3); margin: 4px 0 8px; }
.fgrupo__tit b { color: var(--t1); font-weight: 600; letter-spacing: .02em; }
.fgrupo__tit::after { content: ""; flex: 1; height: 1px; background: var(--linha2); }
.etapa { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 12px 12px; border-radius: var(--r2);
  background: var(--s2); border: 1px solid var(--linha2); overflow: hidden; }
.etapa__barra { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(242, 92, 42, .22), rgba(242, 92, 42, .07));
  border-right: 1px solid rgba(242, 92, 42, .45); pointer-events: none; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.etapa > *:not(.etapa__barra) { position: relative; }
.etapa__barra[data-w="0"] { display: none; }
.etapa__nome { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.etapa__fonte { font-size: 11.5px; color: var(--t3); grid-column: 1; }
.etapa__qtd { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 500; letter-spacing: -.04em; text-align: right;
  grid-row: 1 / span 2; grid-column: 2; align-self: center; line-height: 1.1; }
.etapa__qtd small { display: block; font-size: 11.5px; color: var(--t2); letter-spacing: -.01em; margin-top: 3px; }
.etapa__motivo { grid-column: 1 / -1; font-size: 11.5px; color: var(--aviso); }
.etapa--vazia .etapa__qtd { color: var(--t3); }
.passo { display: flex; align-items: center; gap: 8px; padding: 6px 0 6px 18px; font-size: 12.5px; color: var(--t2); min-height: 32px; }
.passo::before { content: ""; width: 1px; align-self: stretch; background: var(--linha); margin-right: 6px; }
.passo b { font-family: var(--num); color: var(--t1); font-weight: 500; }
.selo { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--s3); color: var(--t2); white-space: nowrap; }
.selo--verde { color: var(--bom); background: var(--bom-f); }
.selo--amarelo { color: var(--aviso); background: var(--aviso-f); }
.selo--vermelho { color: var(--ruim); background: var(--ruim-f); }
.selo--brasa { color: var(--brasa-l); background: var(--brasa-f); }

/* listas de valores */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--linha2); }
.lista li:first-child { border-top: 0; padding-top: 2px; }
.lista__txt { flex: 1; min-width: 0; }
.lista__txt b { font-weight: 500; font-size: 14px; }
.lista__txt div { font-size: 11.5px; color: var(--t3); margin-top: 1px; }
.lista__val { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 15px; letter-spacing: -.03em; white-space: nowrap; }

/* barras de proporção (eventos da página) */
.barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.barras li { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; background: var(--s2); overflow: hidden; }
.barras__fundo { position: absolute; inset: 0 auto 0 0; background: rgba(242, 92, 42, .14); border-radius: 9px; }
.barras li > *:not(.barras__fundo) { position: relative; }
.barras__nome { flex: 1; min-width: 0; font-size: 13.5px; }
.barras__nome small { display: block; color: var(--t3); font-family: var(--num); font-size: 10.5px; letter-spacing: 0; }
.barras__n { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 14px; }
.barras__pct { font-family: var(--num); font-size: 11.5px; color: var(--t2); width: 46px; text-align: right; }

/* criativos */
.ordem { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.criativos { display: grid; gap: 12px; }
@media (min-width: 700px) { .criativos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .criativos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cri { background: var(--s1); border: 1px solid var(--linha2); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.cri__topo { display: flex; gap: 12px; align-items: flex-start; }
.cri__img { width: 58px; height: 72px; border-radius: 9px; object-fit: cover; background: var(--s3); flex: none; border: 1px solid var(--linha); }
.cri__img--vazia { display: grid; place-items: center; color: var(--t3); font-size: 10px; text-align: center; }
.cri__nome { font-weight: 600; font-size: 15px; letter-spacing: -.02em; word-break: break-word; }
.cri__meta { font-size: 11.5px; color: var(--t3); margin-top: 2px; }
.cri__sit { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--t2); margin-top: 5px; }
.cri__sit i { width: 6px; height: 6px; border-radius: 50%; background: var(--t3); }
.cri__sit[data-s="ACTIVE"] i { background: var(--bom); }
.cri__sit[data-s="PENDING_REVIEW"] i, .cri__sit[data-s="IN_PROCESS"] i { background: var(--aviso); }
.cri__sit[data-s="DISAPPROVED"] i, .cri__sit[data-s="WITH_ISSUES"] i { background: var(--ruim); }
.cri__numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linha2); border-radius: 10px; overflow: hidden; }
.cri__numeros div { background: var(--s2); padding: 8px 9px; min-width: 0; }
.cri__numeros span { display: block; font-size: 10.5px; color: var(--t3); text-transform: uppercase; letter-spacing: .05em; }
.cri__numeros b { font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 14.5px; letter-spacing: -.03em; white-space: nowrap; }
.ret { display: flex; flex-direction: column; gap: 6px; }
.ret__rot { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--t3); }
.ret__barras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; align-items: end; height: 34px; }
.ret__barras div { position: relative; background: var(--s3); border-radius: 4px; height: 100%; overflow: hidden; }
.ret__barras div i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--brasa); border-radius: 4px; }
.ret__pct { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; font-family: var(--num); font-size: 11px; color: var(--t2); }
.cri details summary { cursor: pointer; font-size: 12.5px; color: var(--t2); list-style: none; display: flex; align-items: center; gap: 6px; }
.cri details summary::-webkit-details-marker { display: none; }
.cri details summary::before { content: "+"; font-family: var(--num); color: var(--brasa); }
.cri details[open] summary::before { content: "–"; }
.cri dl { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin: 10px 0 0; font-size: 13px; }
.cri dt { color: var(--t2); }
.cri dd { margin: 0; font-family: var(--num); font-variant-numeric: tabular-nums; text-align: right; }

/* tabela compacta */
.tab { overflow-x: auto; margin: 0 -4px; }
.tab table { border-collapse: collapse; width: 100%; font-size: 13px; }
.tab th { text-align: left; font-weight: 500; color: var(--t3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 4px; white-space: nowrap; }
.tab td { padding: 8px 4px; border-top: 1px solid var(--linha2); white-space: nowrap; }
.tab .n { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; }

/* avisos */
.nota { border: 1px solid var(--linha); background: var(--s1); border-radius: var(--r2); padding: 11px 13px; font-size: 13px; color: var(--t2); display: flex; gap: 10px; }
.nota::before { content: ""; width: 3px; border-radius: 3px; background: var(--t3); flex: none; }
.nota--aviso::before { background: var(--aviso); }
.nota b { color: var(--t1); font-weight: 500; }
.vazio { text-align: center; padding: 26px 12px; color: var(--t2); font-size: 14px; }
.vazio b { display: block; color: var(--t1); font-weight: 500; margin-bottom: 4px; }

/* folha (filtros) */
.folha { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.folha__fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); animation: aparece .2s; }
.folha__caixa { position: relative; width: 100%; max-width: 520px; background: var(--s1); border: 1px solid var(--linha); border-bottom: 0;
  border-radius: 20px 20px 0 0; padding: 10px 18px calc(22px + var(--seguro-baixo)); animation: sobe .25s cubic-bezier(.2, .8, .2, 1); max-height: 88dvh; overflow-y: auto; }
@media (min-width: 900px) { .folha { align-items: center; } .folha__caixa { border-radius: 20px; border-bottom: 1px solid var(--linha); } }
.folha__pega { width: 38px; height: 4px; border-radius: 4px; background: var(--linha); margin: 0 auto 14px; }
.folha h2 { font-size: 17px; margin: 0 0 14px; letter-spacing: -.02em; }
@keyframes sobe { from { transform: translateY(30px); opacity: 0; } }
@keyframes aparece { from { opacity: 0; } }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo span { font-size: 12.5px; color: var(--t2); }
.campo select, .campo input { width: 100%; background: var(--s2); border: 1px solid var(--linha); border-radius: 11px; padding: 11px 12px; font-size: 15px; }
.campo--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.botao { display: inline-flex; justify-content: center; align-items: center; width: 100%; border: 0; border-radius: 12px; background: var(--brasa); color: #fff;
  font-weight: 600; padding: 12px 16px; font-size: 15px; cursor: pointer; }
.botao:disabled { opacity: .6; }
.botao--fantasma { background: var(--s2); color: var(--t1); border: 1px solid var(--linha); margin-top: 8px; }

/* carregando */
.carregando { display: flex; gap: 6px; justify-content: center; padding: 60px 0; }
.carregando span { width: 7px; height: 7px; border-radius: 50%; background: var(--brasa); animation: pisca 1s infinite alternate; }
.carregando span:nth-child(2) { animation-delay: .2s; } .carregando span:nth-child(3) { animation-delay: .4s; }
@keyframes pisca { from { opacity: .2; } }

/* entrar */
.entrar { display: grid; place-items: center; padding: 24px; background: radial-gradient(80% 60% at 50% 0%, rgba(242, 92, 42, .13), transparent 70%), var(--bg); }
.entrar__caixa { width: 100%; max-width: 360px; }
.entrar__marca { margin-bottom: 18px; }
.entrar h1 { font-size: 26px; font-weight: 500; letter-spacing: -.045em; margin: 0 0 4px; }
.entrar h1 span { color: var(--t3); }
.entrar form { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.entrar label { font-size: 13px; color: var(--t2); }
.entrar input { background: var(--s1); border: 1px solid var(--linha); border-radius: 12px; padding: 13px 14px; font-size: 16px; }
.entrar__erro { color: var(--ruim); font-size: 13.5px; margin: 2px 0 0; }

/* utilitários (a página não aceita estilo em linha) */
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .m0 { margin: 0; } .sozinho { align-self: flex-start; max-width: 100%; }
.titulo-sec { font-size: 17px; } .titulo-sec span { font-size: 14px; } .minw0 { min-width: 0; }

/* =====================================================================
   v2 (04/11/2026): animações, interações e componentes novos
   ===================================================================== */
:root { --ease: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.4, 0, .2, 1); }

/* alvos de toque de pelo menos 44 px */
.segmento button { min-height: 40px; padding: 0 13px; }
.botao-sec { min-height: 44px; }
.abas a { min-height: 48px; justify-content: center; }
.cri details summary { min-height: 40px; }

/* topo: selo + botão de atualizar */
.topo__acoes { display: flex; align-items: center; gap: 6px; min-width: 0; }
.frescor { min-height: 36px; }
.icone-bt { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--linha);
  background: var(--s1); cursor: pointer; color: var(--t1); transition: background .2s, border-color .2s, transform .15s var(--ease); }
.icone-bt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icone-bt:hover { border-color: #3a3a41; }
.icone-bt[data-estado="rodando"] { color: var(--brasa); border-color: rgba(242, 92, 42, .45); background: var(--brasa-f); }
.icone-bt[data-estado="rodando"] svg { animation: gira .9s linear infinite; }
.icone-bt[data-estado="ok"] { color: var(--bom); border-color: rgba(76, 195, 138, .45); }
@keyframes gira { to { transform: rotate(360deg); } }
@media (max-width: 380px) { .frescor .so-largo { display: none; } }

/* toque com resposta */
.kpi, .etapa, .cri, .botao, .botao-sec, .segmento button, .icone-bt, .lista--toque li, .destaque { -webkit-tap-highlight-color: transparent; }
.kpi:active, .etapa:active, .botao:active, .botao-sec:active, .icone-bt:active, .destaque:active { transform: scale(.975); }
.kpi, .etapa, .destaque { transition: transform .16s var(--ease), border-color .2s, background .2s; }
button.kpi, button.etapa, button.destaque { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
button.etapa { display: grid; }
.kpi:hover, .etapa:hover { border-color: #303036; }
.kpi__mais { position: absolute; right: 12px; bottom: 10px; width: 14px; height: 14px; color: var(--t3); opacity: .8; }
.kpi__mais svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* entrada das telas e troca de período sem piscar */
.vista { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) { .vista { gap: 18px; } }
.vista--entra > * { animation: entra .42s var(--ease) both; }
.vista--entra > *:nth-child(2) { animation-delay: .04s; } .vista--entra > *:nth-child(3) { animation-delay: .08s; }
.vista--entra > *:nth-child(4) { animation-delay: .12s; } .vista--entra > *:nth-child(5) { animation-delay: .16s; }
.vista--entra > *:nth-child(n+6) { animation-delay: .2s; }
.vista--dir > * { animation-name: entra-dir; } .vista--esq > * { animation-name: entra-esq; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
@keyframes entra-dir { from { opacity: 0; transform: translateX(18px); } }
@keyframes entra-esq { from { opacity: 0; transform: translateX(-18px); } }
.conteudo { position: relative; }
.conteudo::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 40; background: linear-gradient(90deg, transparent, var(--brasa), transparent);
  background-size: 50% 100%; background-repeat: no-repeat; opacity: 0; transition: opacity .2s; pointer-events: none; }
.conteudo.atualizando::before { opacity: 1; animation: barra-carrega 1s linear infinite; }
.conteudo.atualizando .vista { opacity: .6; transition: opacity .25s; }
@keyframes barra-carrega { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* skeleton */
.esq { position: relative; overflow: hidden; background: var(--s1); border: 1px solid var(--linha2); border-radius: var(--r); }
.esq::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .045), transparent); animation: brilho 1.3s infinite; }
@keyframes brilho { to { transform: translateX(100%); } }
.esq--kpi { height: 112px; } .esq--grande { height: 420px; } .esq--linha { height: 54px; border-radius: var(--r2); }

/* barras crescendo */
.etapa__barra, .barras__fundo { transition: width .7s var(--ease); }
.ret__barras div i { transition: height .7s var(--ease); }
.kpi__linha .linha-traco { stroke-dasharray: 1; stroke-dashoffset: 1; animation: traco 1s var(--ease) .15s forwards; }
.kpi__linha .linha-area { opacity: 0; animation: aparece-suave .8s ease .5s forwards; }
@keyframes traco { to { stroke-dashoffset: 0; } }
@keyframes aparece-suave { to { opacity: 1; } }
.num-muda { animation: realce 1.1s ease; border-radius: 4px; }
@keyframes realce { 0% { background: rgba(242, 92, 42, .28); } 100% { background: transparent; } }

/* "o que olhar agora" */
.destaques { display: grid; gap: 8px; }
@media (min-width: 900px) { .destaques { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.destaque { display: flex; gap: 11px; align-items: flex-start; padding: 12px 13px; border-radius: var(--r2); background: var(--s1); border: 1px solid var(--linha2); min-height: 44px; }
.destaque__marca { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--t3); }
.destaque[data-tom="ruim"] .destaque__marca { background: var(--ruim); box-shadow: 0 0 0 4px var(--ruim-f); }
.destaque[data-tom="bom"] .destaque__marca { background: var(--bom); box-shadow: 0 0 0 4px var(--bom-f); }
.destaque[data-tom="aviso"] .destaque__marca { background: var(--aviso); box-shadow: 0 0 0 4px var(--aviso-f); }
.destaque b { font-weight: 500; font-size: 14px; display: block; }
.destaque span { font-size: 12.5px; color: var(--t2); }
.rotulo-sec { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--t3); margin: 2px 0 -4px; }

/* gráfico diário na folha */
.grafico { margin: 4px 0 6px; }
.grafico__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.grafico__val { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 26px; letter-spacing: -.04em; }
.grafico__dia { font-size: 12.5px; color: var(--t2); }
.grafico svg { width: 100%; height: 150px; touch-action: none; cursor: crosshair; }
.grafico rect.b { fill: rgba(242, 92, 42, .32); transform-box: fill-box; transform-origin: bottom; animation: sobe-barra .55s var(--ease) both; }
.grafico rect.b.sel { fill: var(--brasa); }
.grafico rect.zero { fill: var(--s3); }
.grafico__eixo { display: flex; justify-content: space-between; font-family: var(--num); font-size: 10.5px; color: var(--t3); margin-top: 4px; }
.grafico + .grafico { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linha2); }
@keyframes sobe-barra { from { transform: scaleY(0); } }
.resumo-folha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linha2); border-radius: 11px; overflow: hidden; margin: 12px 0 4px; }
.resumo-folha div { background: var(--s2); padding: 9px 10px; }
.resumo-folha span { display: block; font-size: 10.5px; color: var(--t3); text-transform: uppercase; letter-spacing: .05em; }
.resumo-folha b { font-family: var(--num); font-weight: 500; font-size: 15px; letter-spacing: -.03em; }

/* folha: fechar e cabeçalho */
.folha__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.folha__cab h2 { margin: 0; }
.folha__fechar { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--linha); background: var(--s2); cursor: pointer; display: grid; place-items: center; }
.folha__fechar svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.folha.fechando .folha__caixa { animation: desce .2s var(--ease-in) forwards; }
.folha.fechando .folha__fundo { animation: some .2s forwards; }
@keyframes desce { to { transform: translateY(40px); opacity: 0; } }
@keyframes some { to { opacity: 0; } }

/* criativos: busca, comparar */
.ferramentas-cri { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.busca { flex: 1 1 200px; position: relative; min-width: 0; }
.busca input { width: 100%; min-height: 44px; background: var(--s1); border: 1px solid var(--linha); border-radius: 12px; padding: 0 12px 0 36px; font-size: 15px; }
.busca svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); stroke: var(--t3); fill: none; stroke-width: 2; stroke-linecap: round; }
.cri__acoes { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bt-comparar { min-height: 36px; border: 1px solid var(--linha); background: var(--s2); border-radius: 10px; padding: 0 11px; font-size: 12.5px; color: var(--t2); cursor: pointer; }
.bt-comparar[aria-pressed="true"] { color: var(--brasa-l); border-color: rgba(242, 92, 42, .5); background: var(--brasa-f); }
.cri[data-escolhido="sim"] { border-color: rgba(242, 92, 42, .45); }
.comparar { position: fixed; left: 12px; right: 12px; bottom: calc(76px + var(--seguro-baixo)); z-index: 35; max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; background: #1b1b1f; border: 1px solid var(--linha); border-radius: 14px; padding: 8px 8px 8px 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45); animation: sobe .3s var(--ease); font-size: 13.5px; }
.comparar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comparar .botao { width: auto; min-height: 40px; padding: 0 14px; font-size: 14px; }
.comparar .bt-x { min-height: 40px; width: 40px; border: 0; background: transparent; color: var(--t2); cursor: pointer; font-size: 18px; }
@media (min-width: 900px) { .comparar { bottom: 20px; } }
.tab-comp table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tab-comp th { font-weight: 600; text-align: right; padding: 0 6px 10px; font-size: 13px; }
.tab-comp th:first-child { text-align: left; color: var(--t3); font-weight: 500; }
.tab-comp td { padding: 9px 6px; border-top: 1px solid var(--linha2); text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; }
.tab-comp td:first-child { text-align: left; font-family: inherit; color: var(--t2); }
.tab-comp td.ganha { color: var(--bom); }
.tab-comp .mini { width: 44px; height: 55px; border-radius: 8px; object-fit: cover; display: block; margin: 0 0 6px auto; border: 1px solid var(--linha); }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(84px + var(--seguro-baixo)); transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px);
  background: #232327; border: 1px solid #34343a; color: var(--t1); border-radius: 12px; padding: 11px 15px; font-size: 13.5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: toast-entra .3s var(--ease); }
.toast[data-tom="bom"] { border-color: rgba(76, 195, 138, .45); }
.toast[data-tom="ruim"] { border-color: rgba(242, 85, 90, .45); }
@keyframes toast-entra { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (min-width: 900px) { .toast { bottom: 28px; } }

/* puxar para atualizar */
.puxar { position: fixed; left: 50%; top: 0; z-index: 25; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; background: var(--s2);
  border: 1px solid var(--linha); display: grid; place-items: center; opacity: 0; pointer-events: none; transform: translateY(60px); }
.puxar svg { width: 18px; height: 18px; fill: none; stroke: var(--brasa); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.puxar.pronto svg { transform: rotate(180deg); }
.puxar.girando svg { animation: gira .8s linear infinite; }

/* fontes na folha de frescor */
.fonte-st { font-size: 12px; font-family: var(--num); padding: 2px 8px; border-radius: 999px; background: var(--s3); color: var(--t2); }
.fonte-st--ok { color: var(--bom); background: var(--bom-f); }
.fonte-st--erro { color: var(--ruim); background: var(--ruim-f); }

html, body { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  .vista--entra > *, .grafico rect.b, .kpi__linha .linha-traco, .kpi__linha .linha-area, .esq::after, .toast, .comparar, .num-muda { animation: none !important; }
  .kpi__linha .linha-traco { stroke-dashoffset: 0; } .kpi__linha .linha-area { opacity: 1; }
  .etapa__barra, .barras__fundo, .ret__barras div i { transition: none !important; }
  .kpi:active, .etapa:active, .botao:active, .icone-bt:active, .destaque:active { transform: none; }
}
button.kpi, button.etapa, button.destaque { -webkit-appearance: none; appearance: none; margin: 0; }
html.travado, html.travado body { overflow: hidden; }
.etapa__nome, .etapa__fonte, .etapa__qtd, .etapa__motivo { text-align: left; }
.etapa__qtd { text-align: right; }
.kpi__linha { margin-right: 18px; }

/* ---------- jornada viva (rio) ---------- */
.rio { position: relative; isolation: isolate; margin: 0 -6px -28px; padding: 2px 6px 48px; }
.rio__tela { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.rio__lista { position: relative; display: flex; flex-direction: column; animation: rio-entra .5s var(--ease) both; }
.rio__grupo { margin: 20px 8px 0; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--t3); opacity: .8; }
.rio__grupo:first-child { margin-top: 2px; }
button.rio__etapa { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px;
  padding: 10px 8px; margin: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; text-shadow: 0 1px 12px rgba(10, 10, 11, .95); transition: background .2s; }
button.rio__etapa:active { background: rgba(255, 255, 255, .03); }
.rio__nome { font-size: 13.5px; color: var(--t2); letter-spacing: -.005em; }
.rio__qtd { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 400; letter-spacing: -.04em; color: var(--t1); }
.rio__etapa--vazia .rio__qtd, .rio__etapa--vazia .rio__nome { color: var(--t3); }
.rio__lista > .rio__etapa:last-of-type .rio__nome { color: var(--t1); }
.rio__lista > .rio__etapa:last-of-type .rio__qtd { color: var(--brasa-l); }
.rio__passo { display: flex; justify-content: center; height: 14px; margin: -5px 0; }
.rio__passo--vazio { height: 6px; }
.rio__chip { font-family: var(--num); font-size: 10.5px; line-height: 14px; color: var(--t3); letter-spacing: -.01em; text-shadow: 0 0 8px rgba(10, 10, 11, 1), 0 0 3px rgba(10, 10, 11, 1); }
.rio__chip[data-faixa="verde"] { color: var(--bom); }
.rio__chip[data-faixa="amarelo"] { color: var(--aviso); }
.rio__chip[data-faixa="vermelho"] { color: var(--ruim); }
@keyframes rio-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rio__lista { animation: none; } }