/* ============================================================================
   PLATAFORMA VITRINI — componentes.
   Depende de vitrini-tokens.css (importar ANTES). Nenhum hex aqui: só var(--v-*).
   Régua: produto/agencia/EXPANSAO_PORTFOLIO/03b_RACIONAL_VISUAL_SEM-CARA-DE-IA.md
   ========================================================================== */

/* ─────────────────────────── casca da aplicação ─────────────────────────── */

.app{
  min-height:100dvh;
  display:grid;
  grid-template-columns:248px 1fr;
  grid-template-rows:auto 1fr;
  grid-template-areas:"marca topo" "nav conteudo";
}

.app__marca{
  grid-area:marca;
  display:flex; align-items:center; gap:var(--v-s3);
  padding:var(--v-s4) var(--v-s5);
  border-right:1px solid var(--v-line);
  border-bottom:1px solid var(--v-line);
  background:var(--v-surface);
}

.app__topo{
  grid-area:topo;
  display:flex; align-items:center; justify-content:space-between; gap:var(--v-s4);
  padding:var(--v-s4) var(--v-s6);
  border-bottom:1px solid var(--v-line);
  background:var(--v-surface);
  position:sticky; top:0; z-index:var(--v-z-sticky);
}

.app__nav{
  grid-area:nav;
  padding:var(--v-s5) var(--v-s3);
  border-right:1px solid var(--v-line);
  background:var(--v-surface);
  display:flex; flex-direction:column; gap:2px;
}

.app__conteudo{
  grid-area:conteudo;
  padding:var(--v-s6);
  max-width:var(--v-maxw-app);
  width:100%;
}

/* O wordmark. O pingo do "i" é o âmbar — é o único âmbar do cabeçalho. */
.wordmark{
  font-weight:var(--v-fw-bold); font-size:1.0625rem;
  letter-spacing:var(--v-tracking-wm); color:var(--v-text);
  display:inline-flex; align-items:baseline; gap:1px;
}
.wordmark i{ font-style:normal; position:relative; }
.wordmark i::after{
  content:""; position:absolute; left:50%; top:-.34em; translate:-50% 0;
  width:.26em; height:.26em; border-radius:50%; background:var(--v-accent);
}
.wordmark__sufixo{
  font-weight:var(--v-fw-label); font-size:var(--v-fs-caption);
  color:var(--v-text-subtle); letter-spacing:.02em; margin-left:var(--v-s2);
  padding-left:var(--v-s2); border-left:1px solid var(--v-line);
}

.nav__grupo{
  font-size:var(--v-fs-overline); font-weight:var(--v-fw-label);
  text-transform:uppercase; letter-spacing:var(--v-tracking-label);
  color:var(--v-text-subtle);
  padding:var(--v-s4) var(--v-s3) var(--v-s2);
}
.nav__item{
  display:flex; align-items:center; gap:var(--v-s3);
  padding:9px var(--v-s3); border-radius:var(--v-radius-xs);
  color:var(--v-text-muted); font-size:var(--v-fs-small); font-weight:var(--v-fw-label);
  background:none; border:0; width:100%; text-align:left; cursor:pointer;
  font-family:inherit;
  transition:background var(--v-t-ui) var(--v-ease-rapida),
             color var(--v-t-ui) var(--v-ease-rapida);
}
.nav__item:hover{ background:var(--v-surface-2); color:var(--v-text); }
.nav__item[aria-current="page"]{
  background:var(--v-surface-2); color:var(--v-text);
  box-shadow:inset 2px 0 0 var(--v-accent);
}
.nav__item svg{ width:17px; height:17px; flex:none; opacity:.72; }
.nav__item[aria-current="page"] svg{ opacity:1; }
.nav__contador{
  margin-left:auto; font-size:var(--v-fs-caption); font-weight:var(--v-fw-bold);
  background:var(--v-accent-tint); color:var(--v-accent-ink);
  padding:1px 7px; border-radius:var(--v-radius-pill); min-width:20px; text-align:center;
}

/* ────────────────────────────── cabeçalhos ────────────────────────────── */

.pagina__cabeca{ margin-bottom:var(--v-s6); }
.pagina__cabeca h1{ margin-bottom:var(--v-s2); }
.pagina__sub{ color:var(--v-text-muted); max-width:60ch; margin:0; }

/* ──────────────────────────────── cartões ──────────────────────────────── */

.cartao{
  background:var(--v-surface);
  border:1px solid var(--v-line);
  border-radius:var(--v-radius);
  padding:var(--v-s5);
}
.cartao--destaque{
  border-color:var(--v-line-strong);
  box-shadow:var(--v-shadow-sm);
}
.cartao__titulo{
  font-size:var(--v-fs-overline); font-weight:var(--v-fw-label);
  text-transform:uppercase; letter-spacing:var(--v-tracking-label);
  color:var(--v-text-subtle); margin:0 0 var(--v-s4);
}

.grade{ display:grid; gap:var(--v-s4); }
.grade--2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grade--3{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.grade--4{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }

/* ───────────────────────── o número que importa ───────────────────────── */

.metrica{ display:flex; flex-direction:column; gap:var(--v-s1); }
.metrica__rotulo{
  font-size:var(--v-fs-overline); font-weight:var(--v-fw-label);
  text-transform:uppercase; letter-spacing:var(--v-tracking-label);
  color:var(--v-text-subtle);
}
.metrica__valor{
  font-size:1.75rem; font-weight:var(--v-fw-bold); line-height:1.05;
  letter-spacing:var(--v-tracking-tight); color:var(--v-text);
  font-variant-numeric:tabular-nums;
}
.metrica__valor small{ font-size:.9rem; font-weight:var(--v-fw-label); color:var(--v-text-muted); }
.metrica__nota{ font-size:var(--v-fs-caption); color:var(--v-text-subtle); }

/* ─────────────────────────── pílulas de estado ─────────────────────────
   O estado é FORMA + cor, nunca só cor: o ponto muda de preenchimento.     */

.pilula{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--v-fs-caption); font-weight:var(--v-fw-label);
  padding:3px 10px 3px 8px; border-radius:var(--v-radius-pill);
  border:1px solid var(--v-line-strong); color:var(--v-text-muted);
  background:var(--v-surface-2); white-space:nowrap;
}
.pilula::before{
  content:""; width:7px; height:7px; border-radius:50%;
  border:1.5px solid currentColor; background:transparent;
}
.pilula--ok{ color:var(--v-success); border-color:var(--v-success); background:transparent; }
.pilula--ok::before{ background:currentColor; }
.pilula--andamento{ color:var(--v-accent-ink); border-color:var(--v-accent); background:var(--v-accent-tint); }
.pilula--andamento::before{ background:linear-gradient(90deg,currentColor 50%,transparent 50%); }
.pilula--atencao{ color:var(--v-warning); border-color:var(--v-warning); background:transparent; }
.pilula--atencao::before{ border-radius:1px; rotate:45deg; }
.pilula--parado{ color:var(--v-danger); border-color:var(--v-danger); background:transparent; }
.pilula--parado::before{ background:currentColor; border-radius:1px; }

/* ──────────────────────────────── botões ──────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--v-s2);
  font-family:inherit; font-size:var(--v-fs-small); font-weight:var(--v-fw-label);
  padding:10px var(--v-s4); border-radius:var(--v-radius-sm);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background var(--v-t-ui) var(--v-ease-rapida),
             border-color var(--v-t-ui) var(--v-ease-rapida),
             transform var(--v-t-ui) var(--v-ease-rapida);
}
.btn:active{ transform:translateY(1px); }
.btn--primario{ background:var(--v-text); color:var(--v-bg); }
.btn--primario:hover{ background:var(--v-surface-3); color:var(--v-text); }
.btn--acento{ background:var(--v-accent); color:var(--v-on-accent); font-weight:var(--v-fw-bold); }
.btn--acento:hover{ filter:brightness(1.06); }
.btn--linha{ background:transparent; border-color:var(--v-line-strong); color:var(--v-text); }
.btn--linha:hover{ background:var(--v-surface-2); }
.btn--fantasma{ background:transparent; color:var(--v-text-muted); padding:6px var(--v-s3); }
.btn--fantasma:hover{ background:var(--v-surface-2); color:var(--v-text); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* ──────────────────────────── curva S (SVG) ──────────────────────────── */

.curva{ width:100%; height:auto; display:block; overflow:visible; }
.curva__grade{ stroke:var(--v-line); stroke-width:1; }
.curva__eixo{ stroke:var(--v-line-strong); stroke-width:1; }
.curva__rotulo{
  font-size:10px; fill:var(--v-text-subtle); font-family:var(--v-font);
  font-variant-numeric:tabular-nums;
}
.curva__previsto{
  fill:none; stroke:var(--v-text-subtle); stroke-width:1.5;
  stroke-dasharray:5 4; stroke-linecap:round;
}
.curva__realizado{
  fill:none; stroke:var(--v-accent); stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.curva__area{ fill:var(--v-accent-tint); }
.curva__ponta{ fill:var(--v-accent); stroke:var(--v-surface); stroke-width:2.5; }
.curva__hoje{ stroke:var(--v-text-muted); stroke-width:1; stroke-dasharray:3 3; }
.curva__legenda{
  display:flex; gap:var(--v-s5); margin-top:var(--v-s4);
  font-size:var(--v-fs-caption); color:var(--v-text-muted);
}
.curva__legenda span{ display:inline-flex; align-items:center; gap:6px; }
.curva__chave{ width:18px; height:0; border-top:2px solid; border-radius:2px; }
.curva__chave--prev{ border-top-style:dashed; color:var(--v-text-subtle); }
.curva__chave--real{ color:var(--v-accent); }

/* ─────────────────────────── linha do tempo/gates ─────────────────────── */

.gates{ display:flex; gap:0; margin:var(--v-s5) 0; }
.gate{
  flex:1; position:relative; padding:var(--v-s3) var(--v-s3) var(--v-s3) var(--v-s5);
  border-top:2px solid var(--v-line);
  font-size:var(--v-fs-caption);
}
.gate::before{
  content:""; position:absolute; left:0; top:-6px;
  width:10px; height:10px; border-radius:50%;
  background:var(--v-bg); border:2px solid var(--v-line-strong);
}
.gate--feito{ border-top-color:var(--v-accent); }
.gate--feito::before{ background:var(--v-accent); border-color:var(--v-accent); }
.gate--atual{ border-top-color:var(--v-accent); }
.gate--atual::before{
  background:var(--v-surface); border-color:var(--v-accent);
  box-shadow:0 0 0 4px var(--v-accent-tint);
}
.gate__nome{ font-weight:var(--v-fw-bold); color:var(--v-text); display:block; }
.gate__desc{ color:var(--v-text-subtle); }

/* ──────────────────────────────── tabela ──────────────────────────────── */

.tabela{ width:100%; border-collapse:collapse; font-size:var(--v-fs-small); }
.tabela th{
  text-align:left; font-size:var(--v-fs-overline); font-weight:var(--v-fw-label);
  text-transform:uppercase; letter-spacing:var(--v-tracking-label);
  color:var(--v-text-subtle); padding:var(--v-s2) var(--v-s3);
  border-bottom:1px solid var(--v-line-strong); background:var(--v-surface-2);
  white-space:nowrap;
}
.tabela td{
  padding:11px var(--v-s3); border-bottom:1px solid var(--v-line);
  color:var(--v-text); vertical-align:middle;
}
.tabela tbody tr:hover td{ background:var(--v-surface-2); }
.tabela .num{ text-align:right; font-variant-numeric:tabular-nums; }
.tabela__rolagem{ overflow-x:auto; border-radius:var(--v-radius-table); }

/* ───────────────────────────── envio de arquivo ──────────────────────── */

.solta{
  display:block;   /* <label> é inline por padrão: sem isto a borda tracejada quebra */
  border:1.5px dashed var(--v-line-strong); border-radius:var(--v-radius);
  padding:var(--v-s6) var(--v-s5); text-align:center; background:var(--v-surface-2);
  transition:border-color var(--v-t-ui) var(--v-ease-rapida),
             background var(--v-t-ui) var(--v-ease-rapida);
  cursor:pointer;
}
.solta:hover,.solta.ativo{ border-color:var(--v-accent); background:var(--v-accent-tint); }
.solta__titulo{ font-weight:var(--v-fw-bold); margin-bottom:var(--v-s2); }
.solta__nota{ font-size:var(--v-fs-caption); color:var(--v-text-subtle); margin:0; max-width:52ch;
  margin-inline:auto; }
.solta input[type=file]{ display:none; }

.pedido{
  display:flex; align-items:flex-start; gap:var(--v-s4);
  padding:var(--v-s4) 0; border-bottom:1px solid var(--v-line);
}
.pedido:last-child{ border-bottom:0; }
.pedido__corpo{ flex:1; min-width:0; }
.pedido__titulo{ font-weight:var(--v-fw-label); margin-bottom:2px; }
.pedido__instrucao{ font-size:var(--v-fs-caption); color:var(--v-text-muted); margin:0; }

/* ───────────────────────────────  achados  ──────────────────────────── */

.achado{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--v-s4);
  align-items:start; padding:var(--v-s4); border:1px solid var(--v-line);
  border-radius:var(--v-radius-sm); background:var(--v-surface);
  transition:border-color var(--v-t-card) var(--v-ease-suave);
}
.achado:hover{ border-color:var(--v-line-strong); }
.achado__ordem{
  font-size:var(--v-fs-caption); font-weight:var(--v-fw-bold);
  color:var(--v-text-subtle); font-variant-numeric:tabular-nums;
  padding-top:2px; min-width:2ch;
}
.achado__titulo{ font-weight:var(--v-fw-label); margin-bottom:var(--v-s1); }
.achado__evidencia{ font-size:var(--v-fs-caption); color:var(--v-text-muted); margin:0 0 var(--v-s2); }
.achado__valor{
  font-size:1.0625rem; font-weight:var(--v-fw-bold); white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--v-text);
}
.achado__valor small{ display:block; font-size:var(--v-fs-overline); font-weight:var(--v-fw-label);
  color:var(--v-text-subtle); text-transform:uppercase; letter-spacing:var(--v-tracking-label); }

/* ──────────────────────────────── conversa ──────────────────────────── */

.conversa{ display:flex; flex-direction:column; gap:var(--v-s4); }
.balao{ max-width:min(60ch,80%); padding:var(--v-s3) var(--v-s4); border-radius:var(--v-radius-lg); }
.balao--deles{
  align-self:flex-start; background:var(--v-surface-2);
  border:1px solid var(--v-line); border-bottom-left-radius:var(--v-radius-xs);
}
.balao--meu{
  align-self:flex-end; background:var(--v-text); color:var(--v-bg);
  border-bottom-right-radius:var(--v-radius-xs);
}
.balao__meta{ font-size:var(--v-fs-overline); opacity:.7; margin-bottom:2px;
  text-transform:uppercase; letter-spacing:var(--v-tracking-label); }
.balao p{ margin:0; max-width:none; }

/* ──────────────────────────────── diversos ──────────────────────────── */

.vazio{
  text-align:center; padding:var(--v-s8) var(--v-s5);
  color:var(--v-text-subtle); border:1px dashed var(--v-line-strong);
  border-radius:var(--v-radius); background:var(--v-surface-2);
}
.vazio p{ margin:0 auto; max-width:44ch; }

.aviso{
  display:flex; gap:var(--v-s3); padding:var(--v-s4);
  border-radius:var(--v-radius-sm); font-size:var(--v-fs-small);
  border:1px solid var(--v-warning); background:transparent; color:var(--v-text);
}
.aviso strong{ color:var(--v-warning); }

.pilha{ display:flex; flex-direction:column; gap:var(--v-s4); }
.linha{ display:flex; align-items:center; gap:var(--v-s3); flex-wrap:wrap; }
.entre{ justify-content:space-between; }
.crescer{ flex:1; }
.oculto{ display:none !important; }

.campo{ display:flex; flex-direction:column; gap:var(--v-s2); }
.campo label{ font-size:var(--v-fs-caption); font-weight:var(--v-fw-label); color:var(--v-text-muted); }

.carregando{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--v-line-strong); border-top-color:var(--v-accent);
  animation:gira .7s linear infinite;
}
@keyframes gira{ to{ rotate:360deg; } }

/* ─────────────────────────────── responsivo ─────────────────────────── */

@media (max-width:900px){
  .app{
    grid-template-columns:1fr;
    grid-template-areas:"marca" "topo" "conteudo";
  }
  .app__marca{ border-right:0; }
  .app__nav{
    grid-area:auto; position:fixed; bottom:0; left:0; right:0;
    flex-direction:row; overflow-x:auto; border-right:0;
    border-top:1px solid var(--v-line); padding:var(--v-s2);
    z-index:var(--v-z-nav);
  }
  .nav__grupo{ display:none; }
  .nav__item{ flex-direction:column; gap:3px; font-size:10px; padding:6px 10px; min-width:66px;
    text-align:center; white-space:nowrap; }
  .nav__item[aria-current="page"]{ box-shadow:inset 0 2px 0 var(--v-accent); }
  .nav__contador{ position:absolute; top:2px; right:8px; margin:0; }
  .app__conteudo{ padding:var(--v-s5) var(--v-s4) calc(var(--v-s8) + 40px); }
  .app__topo{ position:static; }
}

@media print{
  .app__nav,.app__topo,.btn{ display:none !important; }
  .app{ grid-template-columns:1fr; }
  .cartao{ break-inside:avoid; }
}

/* ──────────────────────── cadência (serviço contínuo) ────────────────────
   Não é barra de progresso: serviço que não termina não tem percentual.
   É uma régua de ritmo — o que já chegou, o que chega agora, o que vem. */
.cadencia{ list-style:none; padding:0; margin:0; }
.cadencia__item{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--v-s4);
  align-items:baseline; padding:var(--v-s4) 0 var(--v-s4) var(--v-s5);
  border-left:2px solid var(--v-line); position:relative;
}
.cadencia__item::before{
  content:""; position:absolute; left:-6px; top:calc(var(--v-s4) + 5px);
  width:10px; height:10px; border-radius:50%;
  background:var(--v-bg); border:2px solid var(--v-line-strong);
}
.cadencia__item--feito{ border-left-color:var(--v-accent); }
.cadencia__item--feito::before{ background:var(--v-accent); border-color:var(--v-accent); }
.cadencia__item--agora{ border-left-color:var(--v-accent); }
.cadencia__item--agora::before{
  background:var(--v-surface); border-color:var(--v-accent);
  box-shadow:0 0 0 4px var(--v-accent-tint);
}
.cadencia__item:last-child{ border-left-style:dashed; }
.cadencia__n{
  font-size:var(--v-fs-overline); font-weight:var(--v-fw-bold);
  text-transform:uppercase; letter-spacing:var(--v-tracking-label);
  color:var(--v-text-subtle); white-space:nowrap; min-width:9ch;
}
.cadencia__item--agora .cadencia__n{ color:var(--v-accent-ink); }
.cadencia__tema{ font-weight:var(--v-fw-label); color:var(--v-text); }
.cadencia__promessa{ margin:2px 0 0; font-size:var(--v-fs-small); color:var(--v-text-muted); }
.cadencia__quando{ font-size:var(--v-fs-caption); color:var(--v-text-subtle); white-space:nowrap; }
@media (max-width:640px){
  .cadencia__item{ grid-template-columns:1fr; gap:var(--v-s1); }
  .cadencia__quando{ grid-column:1; }
}