/* Fin Farma — viz.css: estilo dos componentes de gráfico (par do viz.js).
   Canônico em frontend/app; frontend/site usa uma cópia.
   Sincronia: uma duração e uma curva únicas para barra, coluna e número. */

:root {
  --viz-dur: .7s;
  --viz-ease: cubic-bezier(.2, .7, .3, 1);
  --viz-marca: #16305E;          /* série única: marinho */
  --viz-marca-forte: #0F1B33;
  --viz-status: #B45309;         /* âmbar: status rotulado, nunca "série 2" */
  --viz-trilha: #DEE5F0;         /* degrau claro do próprio marinho */
  --viz-alem: #0E7C5A;           /* trecho além da meta (status bom) */
  --viz-eixo: #E2E5EB;
  --viz-texto: #0F1B33;
  --viz-texto-2: #41506B;
  --viz-texto-apoio: #6B7383;
}

.viz { max-width: 100%; }

/* ---------- colunas (SVG) ---------- */
.viz-colunas svg { display: block; max-width: 100%; }
.viz-eixo { stroke: var(--viz-eixo); stroke-width: 1; }
.viz-col {
  fill: var(--viz-marca);
  transform-box: fill-box; transform-origin: bottom center;
  animation: vizCrescerY var(--viz-dur) var(--viz-ease) both;
  animation-delay: var(--d, 0s);
  transition: opacity .15s;
}
.viz-col-status { fill: var(--viz-status); }
.viz-valor {
  fill: var(--viz-texto); font-size: 11px; font-weight: 700;
  animation: vizSurgir var(--viz-dur) var(--viz-ease) both;
  animation-delay: var(--d, 0s);
}
.viz-rotulo { fill: var(--viz-texto-apoio); font-size: 10.5px; font-weight: 600; }
.viz-hit { fill: transparent; cursor: pointer; outline: none; }
.viz-col.viz-hover { opacity: .82; }

@keyframes vizCrescerY { from { transform: scaleY(0); } }
@keyframes vizSurgir { from { opacity: 0; transform: translateY(5px); } }
@keyframes vizCrescerX { from { width: 0; } }

/* ---------- barras horizontais ---------- */
.viz-barras { margin: 0; padding: 0; }
.viz-barras li {
  list-style: none;
  /* 34% de um cartão de 1.150px daria 391px de coluna para escrever
     "Genéricos" — o rótulo curto abre um vazio do tamanho de um terço
     da tela antes da barra começar. O teto em pixels só entra quando a
     tela é larga; no celular quem manda continua sendo o percentual. */
  display: grid; grid-template-columns: minmax(90px, min(34%, 240px)) 1fr auto;
  align-items: center; gap: 10px;
  padding: 7px 4px; border-radius: 8px; cursor: pointer;
  animation: vizSurgir var(--viz-dur) var(--viz-ease) both;
  animation-delay: var(--d, 0s);
}
.viz-barras li:hover, .viz-barras li:focus-visible { background: rgba(22, 48, 94, .05); outline: none; }
.vb-rotulo {
  font-size: 12.5px; color: var(--viz-texto-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vb-trilha {
  display: block; height: 10px; border-radius: 5px;
  background: var(--viz-trilha); overflow: hidden; min-width: 40px;
}
.vb-fill {
  display: block; height: 100%; width: var(--w);
  background: var(--viz-marca); border-radius: 0 4px 4px 0;
  animation: vizCrescerX var(--viz-dur) var(--viz-ease) both;
  animation-delay: var(--d, 0s);
}
.vb-valor { font-size: 12.5px; font-weight: 700; color: var(--viz-texto); white-space: nowrap; }

@media (max-width: 560px) {
  .viz-barras li { grid-template-columns: 1fr auto; }
  .vb-rotulo { grid-column: 1 / -1; }
}

/* ---------- radar de pilares (pipa) ---------- */
.viz-radar svg { display: block; margin: 0 auto; max-width: 100%; }
.viz-radar-grade { fill: none; stroke: var(--viz-eixo); stroke-width: 1; }
.viz-radar-rotulo {
  fill: var(--viz-texto-2); font-size: 10px; font-weight: 700; letter-spacing: .07em;
}
.viz-radar-rotulo.apagado { fill: var(--viz-texto-apoio); opacity: .6; }
.viz-radar-dado { animation: vizCrescerRadial var(--viz-dur) var(--viz-ease) both; }
.viz-radar-area {
  fill: rgba(22, 48, 94, .13); stroke: var(--viz-marca);
  stroke-width: 2; stroke-linejoin: round;
}
.viz-radar-raio { stroke: var(--viz-marca); stroke-width: 2.5; stroke-linecap: round; }
.viz-radar-ponto { fill: var(--viz-marca); }
@keyframes vizCrescerRadial { from { transform: scale(0); opacity: 0; } }

/* ---------- medidor de meta ---------- */
.viz-medidor { cursor: pointer; padding: 14px 0 4px; }
.vm-trilha {
  position: relative; height: 14px; border-radius: 7px;
  background: var(--viz-trilha);
}
.vm-fill {
  position: absolute; inset: 0 auto 0 0; width: var(--w);
  background: var(--viz-marca); border-radius: 7px 0 0 7px;
  animation: vizCrescerX var(--viz-dur) var(--viz-ease) both;
}
/* projeção HACHURADA: nunca se confunde com resultado sólido (Experience V2) */
.vm-fill-proj {
  background: repeating-linear-gradient(135deg, #B9C4D6 0 4px, #EDEFF3 4px 8px);
}
.vm-alem {
  position: absolute; top: 0; bottom: 0; left: var(--a); right: 0;
  background: var(--viz-alem); border-radius: 0 7px 7px 0;
  animation: vizSurgir var(--viz-dur) var(--viz-ease) both;
  animation-delay: var(--viz-dur);
}
/* a meta é a régua do dono: tick dourado (reconhecimento, nunca dado) */
.vm-marca {
  position: absolute; top: -5px; bottom: -5px; left: 100%; width: 2px;
  background: #D1A13A; border-radius: 1px;
}
.vm-legenda {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px;
  font-size: 12px; color: var(--viz-texto-2);
}
.vm-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.vm-legenda i { display: inline-block; width: 12px; height: 9px; border-radius: 2px; }
.vm-leg-real { background: var(--viz-marca); }
.vm-leg-proj { background: repeating-linear-gradient(135deg, #B9C4D6 0 3px, #EDEFF3 3px 6px); }
.vm-leg-meta { width: 2px !important; height: 11px !important; background: #D1A13A; border-radius: 1px !important; }
.vm-marca-rotulo {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--viz-texto-apoio); padding-bottom: 2px; white-space: nowrap;
}

/* ---------- tooltip ---------- */
.viz-tip {
  position: fixed; z-index: 90; pointer-events: none;
  background: var(--viz-marca-forte); color: #fff;
  border-radius: 10px; padding: 9px 12px; max-width: 260px;
  font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 10px 30px rgba(15, 27, 51, .35);
}
.viz-tip p { margin: 0; }
.viz-tip strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.viz-tip-titulo { font-weight: 600; opacity: .8; margin-bottom: 2px !important; font-size: 11.5px; }

@media (prefers-reduced-motion: reduce) {
  .viz-col, .viz-valor, .viz-barras li, .vb-fill, .vm-fill, .vm-alem,
  .viz-radar-dado { animation: none !important; }
}

/* ---------- anel e arco (dashboards redondos) ---------- */
.viz-anel {
  position: relative; width: var(--anel-t); height: var(--anel-t);
  display: inline-grid; place-items: center;
}
.viz-anel svg { transform: rotate(-90deg); }
.viz-anel-trilha, .viz-arco-trilha {
  fill: none; stroke: var(--viz-trilha); stroke-width: 12; stroke-linecap: round;
}
.viz-anel-fill, .viz-arco-fill {
  fill: none; stroke: var(--cor); stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: var(--c); stroke-dashoffset: var(--off);
  animation: vizGirar var(--viz-dur) var(--viz-ease) both;
}
@keyframes vizGirar { from { stroke-dashoffset: var(--c); } }

.viz-anel-meio, .viz-arco-meio {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; gap: 1px; pointer-events: none;
}
.viz-anel-meio strong, .viz-arco-meio strong {
  font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-size: 25px; line-height: 1.05; color: var(--viz-texto);
}
.viz-anel-meio span, .viz-arco-meio span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--viz-texto-apoio);
}
.viz-anel-vazio { color: #9AA3B2 !important; }

.viz-arco { position: relative; display: inline-block; width: 168px; height: 100px; }
.viz-arco-meio { inset: 26px 0 0 0; }
.viz-arco-teto { stroke: #D1A13A; stroke-width: 2.5; stroke-linecap: round; }

@media (prefers-reduced-motion: reduce) {
  .viz-anel-fill, .viz-arco-fill { animation: none !important; }
}

/* ---------- medidor com referência (KPI redondo) ---------- */
.viz-medref {
  position: relative; width: var(--medref-w); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.viz-medref svg { display: block; overflow: visible; }
.viz-medref-trilha {
  fill: none; stroke: var(--viz-trilha); stroke-width: 13; stroke-linecap: round;
}
/* a zona boa é fundo, não dado: fica atrás e discreta */
.viz-medref-zona {
  fill: none; stroke: rgba(14, 124, 90, .18); stroke-width: 13; stroke-linecap: butt;
}
.viz-medref-fill {
  fill: none; stroke: var(--cor); stroke-width: 13; stroke-linecap: round;
  stroke-dasharray: var(--c); stroke-dashoffset: var(--off);
  animation: vizGirar var(--viz-dur) var(--viz-ease) both;
}
.viz-medref-tick { stroke: #D1A13A; stroke-width: 3; stroke-linecap: round; }

.viz-medref-meio {
  position: absolute; left: 0; right: 0; top: 30%;
  display: grid; place-items: center; gap: 1px; pointer-events: none;
}
.viz-medref-meio strong {
  font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-size: 27px; line-height: 1.02; color: var(--viz-texto);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.viz-medref-meio span {
  font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--viz-texto-apoio);
}
.viz-medref-vazio { color: #9AA3B2 !important; }

.viz-medref-leg {
  margin-top: -4px; font-size: 11.5px; color: var(--viz-texto-apoio);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.viz-medref-leg i {
  display: inline-block; width: 2px; height: 11px;
  background: #D1A13A; border-radius: 1px;
}
.viz-medref[data-viz-hit] { cursor: pointer; }
.viz-medref[data-viz-hit]:focus-visible { outline: 3px solid #D1A13A; outline-offset: 4px; border-radius: 10px; }
.viz-medref:hover .viz-medref-fill, .viz-medref:focus-within .viz-medref-fill { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .viz-medref-fill { animation: none !important; }
}

/* ---------- série dentro do cartão (o gráfico no quadrado do número) ------
   Ocupa a largura inteira do cartão, sangrando pelas laterais: é fundo de
   leitura, não um segundo objeto com moldura própria. */
.viz-serie {
  position: relative; margin: 12px -18px 0; height: 62px;
}
.viz-serie svg { display: block; width: 100%; height: 62px; }
.serie-area { fill: var(--serie-fraca, rgba(22, 48, 94, .10)); stroke: none; }
.serie-linha {
  fill: none; stroke: var(--serie-forte, #16305E); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.serie-ref {
  stroke: var(--dourado); stroke-width: 1.5; stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke; opacity: .9;
}
.serie-ponta { fill: var(--serie-forte, #16305E); stroke: #fff; stroke-width: 1.5; }
.serie-marca { fill: var(--serie-forte, #16305E); opacity: 0; transition: opacity .12s; }
.serie-marca.viz-hover { opacity: 1; }
.serie-hit { cursor: pointer; }
.serie-hit:focus-visible { outline: 2px solid var(--marinho); outline-offset: -2px; }

/* a cor da série acompanha o ESTADO do indicador, nunca a moda */
.viz-serie.tom-bom     { --serie-forte: var(--verde);     --serie-fraca: rgba(14, 124, 90, .12); }
.viz-serie.tom-ruim    { --serie-forte: var(--vermelho);  --serie-fraca: rgba(179, 38, 30, .12); }
.viz-serie.tom-atencao { --serie-forte: var(--ambar);     --serie-fraca: rgba(180, 83, 9, .12); }
.viz-serie.tom-neutro  { --serie-forte: #8A93A5;          --serie-fraca: rgba(138, 147, 165, .12); }

/* ---------- o cartão que carrega a série ---------- */
.cartao-kpi-serie {
  display: flex; flex-direction: column; overflow: hidden;
  padding-bottom: 0;
}
.cartao-kpi-serie .valor { margin-top: 2px; }
.cartao-kpi-serie .dica { margin-top: 4px; }
.cartao-kpi-serie .viz-serie {
  margin-top: auto;
  /* a sangria tem de bater EXATAMENTE com o padding do cartão (14px): com -18px
     o gráfico passava 4px por fora e cobria a própria borda do quadrado, e a
     borda arredondada ficava com um pedaço faltando no canto direito. */
  margin-left: -14px; margin-right: -14px;
}
/* Estado e régua em linhas próprias: com quatro cartões numa fileira de 1440px
   não cabem lado a lado, e régua cortada pela metade ("mínimo R$ 84…") é pior
   do que régua numa linha só para ela. Os quatro ficam idênticos. */
.kpi-rodape {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; padding: 10px 0 14px;
}
.kpi-rodape .estado { flex: none; }
.kpi-ref {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; color: var(--texto-apoio); font-variant-numeric: tabular-nums;
}
.kpi-ref i {
  display: inline-block; width: 12px; height: 0;
  border-top: 2px dashed var(--dourado);
}
.cartao-clicavel { cursor: pointer; }
.cartao-clicavel:hover { border-color: var(--marinho); }
.cartao-clicavel:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }

/* quatro numa linha no desktop, dois no tablet, um no celular */
.grade-kpi-serie { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grade-kpi-serie { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .grade-kpi-serie { grid-template-columns: repeat(4, 1fr); } }
/* Com CINCO indicadores, quatro colunas deixam o quinto sozinho numa linha —
   e cartão órfão parece erro. A partir de 1320px os cinco cabem lado a lado. */
@media (min-width: 1320px) { .grade-kpi-serie-cinco { grid-template-columns: repeat(5, 1fr); } }

/* ---------- diagnóstico com a conta escrita ---------- */
.cartao-diagnostico { border-left: 4px solid var(--ambar); }
.diag-titulo { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; color: var(--tinta); }
.diag-texto { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--texto-suave); }
.diag-conta {
  margin: 10px 0 0; padding: 8px 12px; border-radius: 8px;
  background: var(--cinza); font-size: 12.5px; color: var(--texto-apoio);
  font-variant-numeric: tabular-nums;
}
.cartao-diagnostico .acoes-linha { margin-top: 14px; }

/* ---------- seletor de período ---------- */
.periodo-barra { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 16px; }
.periodo-chips { flex-wrap: wrap; }
.periodo-datas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.periodo-datas input {
  font-family: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--borda); border-radius: 10px; color: var(--texto);
  background: var(--branco);
}
.periodo-datas input:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }
.periodo-aviso { color: var(--ambar); font-size: 13px; }

/* ---------- bloco que EXPLICA: um gráfico e a frase que ele prova ---------- */
.cartao-explicado { margin-top: 16px; }
.explicado-titulo {
  margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--tinta);
}
.explicado-frase {
  margin: 0; font-size: 15px; line-height: 1.65; color: var(--texto-suave);
  max-width: 78ch; text-wrap: pretty;
}
.explicado-grafico { margin-top: 16px; }
.explicado-atencao { border-left: 4px solid var(--ambar); }

/* ---------- INÍCIO: o resumo das seis abas ----------
   Cartões iguais em altura e ritmo. O gráfico ocupa o meio do cartão, entre a
   pergunta e a frase — é ele que faz o dono entender antes de ler. */
.grade-abas { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 4px; }
@media (min-width: 700px) { .grade-abas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .grade-abas { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

.cartao-aba {
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cartao-aba:hover { border-color: var(--marinho); box-shadow: 0 6px 18px rgba(15,27,51,.08); }
.cartao-aba:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }

.aba-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.aba-nome {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--marinho);
}
.aba-plano {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto-apoio);
}
.aba-pergunta {
  margin: 0; font-size: 19px; line-height: 1.25; font-weight: 700;
  color: var(--tinta); text-wrap: balance;
}
.aba-grafico {
  margin-top: auto; display: flex; align-items: center; justify-content: center;
  min-height: 150px;
}
.aba-grafico > * { width: 100%; }
.aba-frase {
  margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--texto-suave);
  text-wrap: pretty;
}
.aba-ir { font-size: 13px; font-weight: 600; color: var(--marinho); }
.cartao-aba:hover .aba-ir { text-decoration: underline; }

/* as três leituras do Copiloto ocupam o lugar do gráfico */
.aba-leituras { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.aba-leituras li {
  display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: start;
  font-size: 13.5px; line-height: 1.5; color: var(--texto-suave);
}
.leitura-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--cinza); color: var(--marinho);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------- ATENDIMENTO: o fio único e a rota do dia ---------- */
.grade-fio { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .grade-fio { grid-template-columns: 1.15fr .85fr; gap: 16px; } }

.fio-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.thread-alto { max-height: 460px; overflow-y: auto; scroll-behavior: smooth; }

/* evento do sistema: centralizado, discreto — não é fala de ninguém */
.fio-evento {
  margin: 10px 0; text-align: center; font-size: 12px; color: var(--texto-apoio);
}
.fio-evento span { font-variant-numeric: tabular-nums; opacity: .75; }

/* A mensagem automática se identifica: quem escreveu foi o sistema, e ela sai
   do azul da loja para ninguém confundir com alguém digitando. */
.bolha-auto {
  border: 1px dashed var(--dourado); background: #FBF6EC;
  color: var(--tinta); align-self: flex-end; max-width: 82%;
}
.bolha-auto .bolha-pe { color: var(--texto-apoio); opacity: 1; }
.bolha-marca {
  display: inline-block; margin-bottom: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dourado-texto, #8A6D1F);
}
/* quem está na rua fala com outra cor de borda — mesma conversa, outra voz */
.bolha-rua { border-left: 3px solid var(--marinho); }

/* ---------- a rota ---------- */
.rota-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.rota-parada {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 10px; border: 1px solid var(--borda); border-radius: 10px;
  transition: border-color .2s, background-color .2s;
}
.rota-ordem {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--cinza); color: var(--marinho);
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rota-quem { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rota-quem strong { font-size: 14px; color: var(--tinta); }
.rota-quem small { font-size: 12px; color: var(--texto-apoio); }
.rota-estado { font-size: 11.5px; white-space: nowrap; }
.rota-a_caminho { border-color: var(--ambar); background: #FDF6EE; }
.rota-a_caminho .rota-ordem { background: var(--ambar); color: #fff; }
.rota-entregue { opacity: .55; }
.rota-entregue .rota-ordem { background: var(--verde); color: #fff; }
/* a parada que estamos acompanhando na conversa ao lado */
.rota-foco { box-shadow: inset 3px 0 0 var(--marinho); }

.rota-quem small { display: block; }
.rota-porque { color: var(--texto-inativo, #8A93A5); font-size: 11px !important; }

/* ---------- Meu Fin Farma do entregador: a rota no celular ---------- */
.fone-rota { max-width: 340px; margin: 16px auto 0; }
.fone-rota .fone-corpo { padding: 14px; background: var(--fundo-app); }
.fone-titulo { margin: 0; font-size: 17px; font-weight: 700; color: var(--tinta); }
.fone-sub { margin: 2px 0 12px; font-size: 12px; color: var(--texto-apoio); }
.fone-rota-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fone-parada {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 9px; align-items: center;
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 10px; padding: 9px 10px;
}
.fone-ordem {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--cinza); color: var(--marinho);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fone-quem { min-width: 0; }
.fone-quem strong { display: block; font-size: 14px; color: var(--tinta); }
.fone-quem small { display: block; font-size: 11.5px; color: var(--texto-apoio); line-height: 1.35; }
.fone-acao { font-size: 11.5px; color: var(--texto-apoio); white-space: nowrap; }
/* a parada de agora é a única com botão: letra grande, um alvo só */
.fone-agora { border-color: var(--marinho); box-shadow: inset 3px 0 0 var(--marinho); }
.fone-agora .fone-ordem { background: var(--marinho); color: #fff; }
.fone-agora .fone-acao {
  background: var(--marinho); color: #fff; border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 700;
}

/* a regra da rota, escrita para poder ser contestada */
.regra-rota { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 10px; }
.regra-rota li { font-size: 14px; line-height: 1.55; color: var(--texto-suave); }
.regra-rota strong { color: var(--tinta); }
.regra-limite {
  margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
  background: var(--cinza); font-size: 13px; line-height: 1.55; color: var(--texto-suave);
}

/* ---------- coluna lateral do Atendimento: rota + ferramentas ---------- */
.coluna-lado { display: grid; gap: 14px; align-content: start; }

/* ---------- ferramentas do balcão ---------- */
.ferramenta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda); }
/* a IA de Balcão se identifica como todo automático: dourado tracejado */
.ferramenta-ia .ferramenta-titulo { color: var(--dourado-texto, #8A6D1F); }
.sugestao-ia { border: 1px dashed var(--dourado, #D1A13A); background: rgba(209, 161, 58, .06); }
.ferramenta:first-of-type { border-top: 0; padding-top: 0; }
.ferramenta-titulo { margin: 0; font-size: 14px; font-weight: 700; color: var(--tinta); }
.ferramenta-sub { margin: 2px 0 10px; font-size: 12px; color: var(--texto-apoio); }
.sugestao {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border: 1px solid var(--borda); border-radius: 10px; margin-bottom: 8px;
}
.sugestao > div { min-width: 0; }
.sugestao strong { font-size: 13.5px; color: var(--tinta); }
.sugestao small { display: block; font-size: 11.5px; color: var(--texto-apoio); line-height: 1.4; }
.sugestao-valor {
  margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--marinho);
  font-variant-numeric: tabular-nums;
}
.sugestao-alerta { color: var(--ambar) !important; }
.sugestao-fonte { font-style: italic; }
.ferramenta-aviso {
  margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--texto-apoio);
  border-left: 2px solid var(--ambar); padding-left: 9px;
}

/* ---------- rota na mão ---------- */
.rota-dir { display: flex; align-items: center; gap: 8px; }
.rota-setas { display: inline-flex; flex-direction: column; gap: 2px; }
.rota-seta {
  font-family: inherit; font-size: 9px; line-height: 1; cursor: pointer;
  width: 22px; height: 15px; padding: 0;
  background: var(--branco); color: var(--texto-suave);
  border: 1px solid var(--borda); border-radius: 5px;
}
.rota-seta:hover { border-color: var(--marinho); color: var(--marinho); }
.rota-seta:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }

/* ---------- campanhas com o custo na frente ---------- */
.campanha-texto {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--fundo-app);
  font-size: 13.5px; line-height: 1.5; color: var(--texto-suave); font-style: italic;
}
.campanha-conta { margin-top: 12px; }
.campanha-conta p { margin: 0; font-size: 14px; color: var(--tinta); }
.campanha-conta small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--texto-apoio); }
.campanha-trava {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px;
  background: #FDF0EF; border-left: 3px solid var(--vermelho);
  font-size: 12.5px; line-height: 1.5; color: var(--texto-suave);
}
.campanha-regras {
  margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--cinza);
  font-size: 12.5px; line-height: 1.6; color: var(--texto-suave);
}

/* ---------- EQUIPE: os pilares, o liga/desliga e a nota final ---------- */
.pilar {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 12px; padding: 14px 16px;
}
.pilar-sistema { background: var(--fundo-app); }
.pilar-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pilar-nome { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--tinta); }
.pilar-fonte {
  margin: 2px 0 0; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-apoio);
}
.pilar-auto { color: var(--marinho); }
.pilar-nota {
  font-family: Jost, Archivo, sans-serif; font-weight: 600; font-size: 26px;
  line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums;
}
.pilar-como { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--texto-suave); }
.pilar-confirma {
  margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--texto-apoio);
  border-left: 2px solid var(--borda); padding-left: 9px;
}
.pilar-motivo { margin: 10px 0 0; font-size: 12px; color: var(--ambar); }
.pilar-faixa { display: inline-flex; margin-top: 10px; }

/* uma linha por indicador: liga/desliga · nome · as quatro notas */
.indicador {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center;
  gap: 10px; padding: 9px 0; border-top: 1px solid var(--borda);
}
.indicador:first-of-type { margin-top: 10px; }
.indicador-nome { font-size: 13.5px; color: var(--texto-suave); }
.indicador-off .indicador-nome { color: var(--texto-apoio); text-decoration: line-through; }

/* a chave: "não se aplica" é uma decisão, e ela se vê */
.chave {
  width: 36px; height: 20px; padding: 0; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--cinza);
  display: inline-flex; align-items: center; transition: background-color .15s, border-color .15s;
}
.chave-bola {
  width: 14px; height: 14px; margin-left: 2px; border-radius: 999px;
  background: var(--branco); box-shadow: 0 1px 3px rgba(15,27,51,.3);
  transition: transform .15s;
}
.chave-on { background: var(--marinho); border-color: var(--marinho); }
.chave-on .chave-bola { transform: translateX(15px); }
.chave:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }

.notas { display: inline-flex; gap: 4px; }
.nota-btn {
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  font-family: Jost, Archivo, sans-serif; font-weight: 600; font-size: 14px;
  border: 1px solid var(--borda); border-radius: 8px;
  background: var(--branco); color: var(--texto-suave);
  font-variant-numeric: tabular-nums; transition: all .12s;
}
.nota-btn:hover:not(:disabled) { border-color: var(--marinho); color: var(--marinho); }
.nota-btn.on { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.nota-btn:disabled { opacity: .35; cursor: not-allowed; }
.nota-btn:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }

/* a nota final, embaixo da pipa */
.nota-final {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda);
}
.nota-final-valor {
  font-family: Jost, Archivo, sans-serif; font-weight: 600; font-size: 38px;
  line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums;
}
.nota-final-rot { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--tinta); }
.nota-final-conta { margin: 2px 0 0; font-size: 12px; color: var(--texto-apoio); }

/* ---------- ranking com a pipa de cada um ---------- */
.ranking-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ranking-linha {
  display: grid; grid-template-columns: 30px 1fr 86px auto auto;
  align-items: center; gap: 12px;
  padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px;
}
.ranking-topo { border-color: var(--dourado); background: #FDFAF3; }
.ranking-pos {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--cinza); color: var(--marinho);
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ranking-topo .ranking-pos { background: var(--dourado); color: #fff; }
.ranking-quem strong { display: block; font-size: 14px; color: var(--tinta); }
.ranking-quem small { font-size: 11.5px; color: var(--texto-apoio); }
.ranking-pipa { display: block; }
.ranking-pipa svg { display: block; }
.ranking-nota {
  font-family: Jost, Archivo, sans-serif; font-weight: 600; font-size: 20px;
  color: var(--tinta); font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
  .ranking-linha { grid-template-columns: 26px 1fr auto; row-gap: 6px; }
  .ranking-pipa { grid-column: 2 / -1; }
}

/* ---- Equipe V2.1: função, indicadores editáveis, Meu Fin Farma ---------- */
.seletor-rot {
  margin: 0 0 6px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texto-apoio);
}
.seg-funcoes { margin-bottom: 14px; }

.indicador-campo {
  min-width: 0; width: 100%; font: inherit; font-size: 13.5px;
  color: var(--tinta); background: transparent;
  border: 1px solid transparent; border-radius: 8px; padding: 5px 7px;
}
.indicador-campo:hover { border-color: var(--linha); background: #fff; }
.indicador-campo:focus { outline: none; border-color: var(--marinho); background: #fff; }
.indicador-off .indicador-campo { color: var(--texto-apoio); text-decoration: line-through; }
.ind-apagar {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--linha); background: #fff;
  color: var(--texto-apoio); font-size: 12px; line-height: 1; cursor: pointer;
}
.ind-apagar:hover { border-color: var(--vermelho); color: var(--vermelho); }
.ind-apagar:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.ind-add { margin-top: 10px; }
.pilar-erro {
  margin: 10px 0 0; font-size: 12px; color: var(--vermelho);
  background: #FBEDEC; border: 1px solid #F1D3D1; border-radius: 8px; padding: 6px 8px;
}

.meu-ganhos { display: grid; gap: 8px; margin-bottom: 14px; }
.meu-ganho {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px;
  background: #fff; border: 1px solid var(--linha);
}
.meu-ganho-rot { font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.meu-ganho strong { font-size: 20px; color: var(--tinta); }
.meu-ganho small { font-size: 11px; color: var(--texto-apoio); line-height: 1.4; }

.meu-secao {
  margin: 0 0 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texto-apoio);
}
.meu-nota {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--linha);
}
.meu-nota strong { font-size: 26px; color: var(--tinta); }
.meu-nota small { font-size: 11.5px; color: var(--texto-apoio); }
.meu-indicadores { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.meu-indicadores li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--tinta);
  padding: 7px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--linha);
}
.meu-indicadores .meu-off { color: var(--texto-apoio); }
.meu-indicadores .meu-off span { text-decoration: line-through; }
.meu-rodape { margin: 10px 0 0; font-size: 11.5px; color: var(--texto-apoio); line-height: 1.5; }
.meu-bloqueio {
  display: grid; gap: 8px; padding: 12px; border-radius: 12px;
  background: #fff; border: 1px dashed var(--linha);
}
.meu-bloqueio p { margin: 0; font-size: 13px; color: var(--texto-suave); line-height: 1.5; }
.meu-bloqueio .estado { justify-self: start; }
.meu-bloqueio-nota { font-size: 11.5px !important; color: var(--texto-apoio) !important; }

.func-lista { display: grid; gap: 8px; }
.func-linha {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 1fr auto auto;
  padding: 10px 12px; border-radius: 12px;
  background: var(--fundo-app); border: 1px solid var(--linha);
}
.func-quem strong { display: block; font-size: 14px; color: var(--tinta); }
.func-quem small { font-size: 11.5px; color: var(--texto-apoio); }
.func-nota { display: grid; gap: 1px; justify-items: end; text-align: right; }
.func-nota .num { font-size: 20px; font-weight: 700; color: var(--tinta); }
.func-nota small { font-size: 11px; color: var(--texto-apoio); }
.func-ganhos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.func-ganho {
  display: grid; gap: 1px; padding: 5px 9px; border-radius: 9px;
  background: #fff; border: 1px solid var(--linha);
}
.func-ganho small { font-size: 10.5px; color: var(--texto-apoio); }
.func-ganho strong { font-size: 14px; color: var(--tinta); }
@media (max-width: 620px) {
  .func-linha { grid-template-columns: 1fr auto; row-gap: 8px; }
  .func-linha > .estado { grid-column: 1 / -1; justify-self: start; }
}

/* linha de indicador EDITÁVEL: liga/desliga · nome · notas · remover */
.indicador-edit { grid-template-columns: 38px minmax(0, 1fr) auto 26px; }
@media (max-width: 720px) {
  .indicador-edit {
    grid-template-columns: 38px minmax(0, 1fr) 26px;
    row-gap: 8px;
  }
  .indicador-edit .ind-apagar { grid-column: 3; grid-row: 1; }
  .indicador-edit .notas { grid-column: 2 / -1; grid-row: 2; justify-self: start; }
}

/* ---- parte dentro do todo: a barrinha que mora no quadrado do número --- */
.viz-parte { margin-top: 12px; }
.parte-trilho {
  position: relative; height: 10px; border-radius: 999px;
  background: var(--cinza); overflow: visible;
}
.parte-fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--viz-marca, #16305E);
}
.viz-parte.tom-bom .parte-fill { background: var(--verde); }
.viz-parte.tom-ruim .parte-fill { background: var(--vermelho); }
.viz-parte.tom-atencao .parte-fill { background: var(--ambar); }
.parte-fill:not([style*="width: 0%"]) { min-width: 8px; }
/* O limite entra como seta ABAIXO da barra, nunca cruzando o preenchimento:
   marca dourada por cima do vermelho vira um talho, e barra cortada ao meio
   se lê como duas barras. Embaixo, ela aponta para o ponto e não estraga nada. */
.parte-tick {
  position: absolute; top: 100%; margin-top: 3px;
  width: 0; height: 0; transform: translateX(-4px);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 5px solid var(--dourado);
}
.parte-pe {
  display: flex; justify-content: space-between; gap: 10px;
  /* 11px porque a seta do limite desce 8px abaixo da trilha: com 7px ela
     encostava na primeira linha do texto. */
  margin: 11px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--texto-apoio);
}
.parte-limite { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.parte-limite::before {
  content: ""; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 5px solid var(--dourado);
}
.parte-trilho:focus-visible { outline: 2px solid var(--marinho); outline-offset: 4px; }
@media (max-width: 460px) {
  /* No quadrado estreito do celular, "289 de 2.140 itens" e "teto 5%" na
     mesma linha viram três linhas quebradas. Empilhados, viram duas. */
  .parte-pe { flex-direction: column; gap: 2px; }
}

/* ---- Financeiro: a lista de contas com vencimento -------------------- */
.conta-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.conta-linha {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--fundo-app); border: 1px solid var(--borda);
}
.conta-vencida { border-color: #F1D3D1; background: #FDF4F3; }
.conta-quem strong { display: block; font-size: 13.5px; color: var(--tinta); }
.conta-quem small { font-size: 11px; color: var(--texto-apoio); }
.conta-valor { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.conta-sai { color: var(--tinta); }
.conta-entra { color: var(--verde); }
@media (max-width: 560px) {
  .conta-linha { grid-template-columns: 1fr auto; row-gap: 6px; }
  .conta-linha > .estado { grid-column: 1 / -1; justify-self: start; }
}

/* ---- Meu Fin Farma: o celular do funcionário -------------------------- */
.fone-meu .fone-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fone-quem {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  opacity: .75;
}
.fone-meu .fone-corpo { padding: 14px; background: var(--fundo-app); }
.meu-ganho-novo { border-style: dashed; border-color: var(--dourado); }
.seg-btn-add { border-style: dashed; }
.cartao.explicativo { padding: 20px 22px; }
.cartao.explicativo .lista-fatos { margin-top: 12px; }

/* ---- Navegador: dois botões, voltar e seguir. Nada mais. -------------- */
.navegador {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 26px 0 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 14px 16px; border-radius: 12px;
  background: var(--branco); border: 1px solid var(--borda);
  color: var(--tinta); transition: border-color .15s, transform .15s;
}
.nav-item:hover { border-color: var(--marinho); transform: translateY(-1px); }
.nav-item:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.nav-dir { flex-direction: row-reverse; text-align: right; justify-content: flex-start; }
.nav-esq { justify-content: flex-start; }
.nav-seta { font-size: 18px; color: var(--marinho); line-height: 1; }
.nav-texto { display: grid; gap: 1px; min-width: 0; }
.nav-texto small {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-apoio);
}
.nav-texto strong { font-size: 15px; }
.nav-vazio {
  display: flex; align-items: center; padding: 14px 16px; border-radius: 12px;
  border: 1px dashed var(--borda); color: var(--texto-inativo); font-size: 12.5px;
}
.nav-vazio.nav-dir { justify-content: flex-end; }
@media (max-width: 480px) {
  .nav-texto strong { font-size: 13.5px; }
  .nav-item { padding: 12px; gap: 8px; }
}

/* ---- Financeiro: a lista de contas com vencimento -------------------- */
.conta-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.conta-linha {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--fundo-app); border: 1px solid var(--borda);
}
.conta-vencida { border-color: #F1D3D1; background: #FDF4F3; }
.conta-quem strong { display: block; font-size: 13.5px; color: var(--tinta); }
.conta-quem small { font-size: 11px; color: var(--texto-apoio); }
.conta-valor { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.conta-sai { color: var(--tinta); }
.conta-entra { color: var(--verde); }
@media (max-width: 560px) {
  .conta-linha { grid-template-columns: 1fr auto; row-gap: 6px; }
  .conta-linha > .estado { grid-column: 1 / -1; justify-self: start; }
}

/* ---- Meu Fin Farma: o celular do funcionário -------------------------- */
.fone-meu .fone-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fone-quem {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  opacity: .75;
}
.fone-meu .fone-corpo { padding: 14px; background: var(--fundo-app); }
.meu-ganho-novo { border-style: dashed; border-color: var(--dourado); }
.seg-btn-add { border-style: dashed; }
.cartao.explicativo { padding: 20px 22px; }
.cartao.explicativo .lista-fatos { margin-top: 12px; }

/* ---- Navegador de dois níveis: área vizinha e aba vizinha ------------- */
.navegador { display: grid; gap: 10px; margin: 26px 0 6px; }
.nav-linha {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px;
}
.nav-rot {
  align-self: center; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-apoio); white-space: nowrap;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 12px 14px; border-radius: 12px;
  background: var(--branco); border: 1px solid var(--borda);
  color: var(--tinta); transition: border-color .15s, transform .15s;
}
.nav-item:hover { border-color: var(--marinho); transform: translateY(-1px); }
.nav-item:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.nav-dir { flex-direction: row-reverse; text-align: right; justify-content: flex-start; }
.nav-esq { justify-content: flex-start; }
.nav-seta { font-size: 17px; color: var(--marinho); line-height: 1; }
.nav-texto { display: grid; gap: 1px; min-width: 0; }
.nav-texto small { font-size: 10.5px; color: var(--texto-apoio); }
.nav-texto strong { font-size: 14.5px; }
.nav-vazio {
  display: flex; align-items: center; padding: 12px 14px; border-radius: 12px;
  border: 1px dashed var(--borda); color: var(--texto-inativo); font-size: 12.5px;
}
.nav-vazio.nav-dir { justify-content: flex-end; }
.nav-aba .nav-item { background: var(--superficie); }
@media (max-width: 620px) {
  .nav-linha { grid-template-columns: 1fr 1fr; }
  .nav-rot { grid-column: 1 / -1; order: -1; }
  .nav-texto strong { font-size: 13px; }
}
.sugestao > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.sugestao > div small { flex: 1 0 100%; }

/* ---- O painel do funcionário: número + gráfico, quase sem frase --------- */
.meu-painel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Os quadrados da mesma fileira têm de ter as MESMAS faixas nas mesmas
   alturas: rótulo · número · gráfico · legenda. Sem isso, o número de um
   quadrado fica na altura da legenda do vizinho e a fileira parece torta
   mesmo com os dois quadrados do mesmo tamanho. O gráfico e a legenda são
   ancorados embaixo, e a barra do percentual desce para onde a série está. */
.meu-card {
  display: grid; gap: 2px; grid-template-rows: minmax(29px, auto) auto 1fr auto;
  padding: 10px 12px 12px; border-radius: 12px;
  background: #fff; border: 1px solid var(--borda); overflow: hidden;
}
.meu-card-hero { grid-column: 1 / -1; }
.meu-card-rot {
  font-size: 11px; font-weight: 600; color: var(--texto-apoio); line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.meu-card > .viz-parte, .meu-card > .viz-serie,
.meu-card > .meu-card-como, .meu-card > .meu-card-pend { align-self: end; }
.meu-card-num { font-size: 20px; color: var(--tinta); }
.meu-card-hero .meu-card-num { font-size: 27px; }
.meu-card-como { font-size: 10px; color: var(--texto-inativo); }
.meu-card-pend { justify-self: start; margin-top: 4px; }
.meu-card .viz-parte { margin-top: 8px; }
.meu-card .parte-pe { font-size: 10px; }
.meu-card .viz-serie { margin: 6px -12px 0; height: 44px; }
.meu-card .viz-serie svg { height: 44px; }
.meu-ganho-novo { border-style: dashed; border-color: var(--dourado); }
/* No painel do funcionário a série é pequena: traço mais grosso e área mais
   presente, senão o gráfico vira um risco cinza que ninguém lê de relance. */
.meu-card .serie-linha { stroke-width: 2.6; }
.meu-card .viz-serie { --serie-fraca: rgba(22, 48, 94, .16); }
.meu-card .viz-serie { --serie-forte: var(--marinho); }

/* ---- O quadrado que leva a algum lugar diz para onde leva --------------- */
.kpi-leva {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--borda);
  font-size: 11.5px; font-weight: 600; color: var(--marinho);
}
.kpi-leva i { font-style: normal; font-size: 14px; transition: transform .15s; }
.cartao-clicavel:hover .kpi-leva i { transform: translateX(3px); }
.cartao-kpi-serie .kpi-leva { margin-top: 0; }

/* ---- A chamada para o Meu Fin Farma: o app que fica com a equipe -------- */
.chamada-meu {
  display: flex; align-items: center; gap: 18px; text-decoration: none;
  margin-top: 18px; padding: 18px 20px;
  background: linear-gradient(100deg, var(--tinta), var(--marinho));
  border: 1px solid var(--marinho); color: #fff;
  transition: transform .15s, box-shadow .15s;
}
.chamada-meu:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,27,51,.22); }
.chamada-meu:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }
.chamada-meu-texto { display: grid; gap: 3px; flex: 1; min-width: 0; }
.chamada-meu-selo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dourado);
}
.chamada-meu-texto strong { font-size: 18px; }
.chamada-meu-texto span:last-child { font-size: 13.5px; line-height: 1.5; color: var(--sobre-tinta-corpo); }
.chamada-meu-fones { display: flex; gap: 5px; flex: none; }
.chamada-meu-fones i {
  display: block; width: 20px; height: 34px; border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,.5); background: rgba(255,255,255,.10);
}
.chamada-meu-fones i:nth-child(2) { height: 42px; border-color: var(--dourado); background: rgba(209,161,58,.18); }
.chamada-meu-seta { flex: none; font-size: 22px; color: var(--dourado); }
@media (max-width: 560px) {
  .chamada-meu { gap: 12px; padding: 16px; }
  .chamada-meu-fones { display: none; }
  .chamada-meu-texto strong { font-size: 16px; }
}
.meu-intro {
  margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: var(--texto-suave);
}
.meu-intro strong { color: var(--tinta); }

/* ---- Fileira de KPIs: todos os cartões com a MESMA anatomia -------------
   rótulo · número · dica · gráfico · rodapé, nas mesmas alturas. Sem isso o
   número de um cartão fica na altura da dica do vizinho e a fileira parece
   desalinhada mesmo com todos os cartões do mesmo tamanho. */
.cartao-kpi-serie {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  align-content: start;
}
.cartao-kpi-serie .valor { margin-top: 2px; align-self: start; }
.cartao-kpi-serie .dica {
  margin-top: 4px; align-self: start;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cartao-kpi-serie .viz-serie, .cartao-kpi-serie .viz-parte { align-self: end; }
.cartao-kpi-serie .kpi-rodape, .cartao-kpi-serie .kpi-leva { align-self: end; }
/* a barrinha ocupa a mesma faixa vertical da série, para as fileiras baterem */
.cartao-kpi-serie .viz-parte { margin-top: 12px; margin-bottom: 6px; }
/* E a legenda embaixo da barra reserva DUAS linhas sempre. Sem isso, o cartão
   cuja legenda quebra em duas empurra a própria barra para cima e a fileira
   fica com as barras em alturas diferentes — que é o mesmo defeito que a
   harmonização dos KPIs veio corrigir. */
.cartao-kpi-serie .parte-pe { min-height: 2.6em; align-items: flex-start; }

/* No celular, dois quadrados lado a lado espremem o rótulo contra a etiqueta
   ("CANCELAMENTOS" + "Realizado" não cabem em 160px) e a fileira perde o
   alinhamento. Um por linha lê melhor e mantém todos iguais. */
@media (max-width: 560px) {
  .grade-kpi.tres { grid-template-columns: 1fr; }
  .grade-kpi.tres .cartao-kpi:first-child { grid-column: auto; }
}
/* respiro entre a fileira de indicadores e o bloco seguinte */
.grade-kpi + .bloco, .grade-kpi + .cartao-explicado { margin-top: 18px; }

/* ---- A conversa em miniatura, no cartão do Início ---------------------- */
.mini-fio {
  display: grid; gap: 5px; margin-top: 10px;
  padding: 10px; border-radius: 12px; background: var(--fundo-app);
}
.mini-balao {
  max-width: 88%; padding: 6px 10px; border-radius: 12px;
  border: 1px solid var(--borda); background: var(--branco);
}
.mini-balao p { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--tinta); }
.mini-hora { display: block; margin-top: 2px; font-size: 9.5px; color: var(--texto-apoio); }
.mini-cliente { justify-self: start; border-top-left-radius: 4px; }
.mini-loja {
  justify-self: end; background: var(--marinho); border-color: var(--marinho);
  border-top-right-radius: 4px;
}
.mini-loja p { color: #fff; }
.mini-loja .mini-hora { color: var(--sobre-tinta-corpo); }
.mini-evento {
  margin: 2px 0 0; text-align: center; font-size: 11px; color: var(--texto-apoio);
}
.cartao-aba-chefe { border-color: var(--dourado); }

/* A série do cartão de aba respira mais que a do quadrado de KPI: ali ela é o
   rodapé de um número, aqui ela É a resposta da pergunta. Com os 62px do KPI,
   sobravam 44px de branco dentro do cartão e a linha ficava rente ao pé. */
.aba-grafico .viz-serie { margin: 0 -18px; height: 118px; }
.aba-grafico .viz-serie svg { height: 118px; }

/* o quadrado do funcionário é um botão: toque abre de onde o número sai */
button.meu-card {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
button.meu-card:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
button.meu-card:active { transform: scale(.995); }
.meu-card-explica {
  display: none; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--borda);
  font-size: 10.5px; line-height: 1.45; color: var(--texto-apoio);
}
.meu-card-aberto .meu-card-explica { display: block; }
.meu-card-aberto { border-color: var(--marinho); }

/* ---------- A ESCALA: a folha do mural, com a marca em cima -------------- */
/* Mesma anatomia do papel que já está colado no quadro — cabeçalho com a
   marca, tabela com os seis dias, faixa de domingo e rodapé —, porque a
   pessoa reconhece o documento antes de ler qualquer coisa nele. */
.escala {
  border: 1px solid var(--borda); border-radius: 14px; overflow: hidden;
  background: var(--branco);
}
.escala-cab {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--marinho); color: #fff;
}
.escala-simbolo { width: 30px; height: 30px; flex: 0 0 auto; }
.escala-simbolo .ff-barra { stroke: #fff; }
.escala-titulo { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.escala-titulo strong {
  font-size: 15px; font-weight: 700; line-height: 1.2;
  overflow-wrap: anywhere;
}
.escala-titulo small { font-size: 11px; color: var(--sobre-tinta-corpo); }
.escala-per {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dourado);
}

.escala-rola { overflow-x: auto; }
.escala-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.escala-tab th, .escala-tab td {
  padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
.escala-tab thead th {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-apoio); background: var(--fundo-app); border-bottom: 1px solid var(--borda);
}
.esc-quem {
  text-align: left !important; padding-left: 14px !important;
  position: sticky; left: 0; background: var(--branco); z-index: 1;
}
.escala-tab thead .esc-quem { background: var(--fundo-app); }
.esc-quem strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--tinta); }
.esc-eu-marca {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dourado-texto);
}
.esc-cel { color: var(--texto-suave); }
.esc-hora { display: block; font-size: 12px; line-height: 1.25; color: var(--tinta); }
.esc-sai { color: var(--texto-apoio); }
.esc-intervalo { font-size: 11.5px; color: var(--texto-apoio); }
.esc-coringa-txt { font-size: 11px; font-style: italic; color: var(--texto-inativo); }
/* FOLGA é a informação que todo mundo procura primeiro: ela não pode ser a
   célula mais apagada da tabela. */
.esc-folga span {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--cinza); color: var(--texto-apoio);
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
}
.esc-coringa span { color: var(--texto-inativo); }
.esc-turno { font-size: 11px; font-weight: 600; color: var(--texto-apoio); }
.esc-turno-manha { color: var(--marinho); }
.esc-turno-tarde { color: var(--ambar); }
.esc-turno-folguista { color: var(--dourado-texto); }
/* A linha da pessoa fica acesa, MAS a primeira coluna é fixa: ela não rola
   junto e precisa de fundo OPACO. Com cor semitransparente, o horário do dia
   passava por baixo do nome e a célula virava duas informações empilhadas —
   defeito que só aparece quando a tabela rola de lado no celular. Por isso a
   cor da linha acesa vai como sólido já composto (dourado 8% sobre branco). */
.escala-tab tbody tr.esc-eu td { background: #FBF7EF; }
.escala-tab tbody tr.esc-eu .esc-quem { background: #FBF7EF; }
/* e a coluna fixa pinta SEMPRE por cima do que rola atrás dela */
.esc-quem { z-index: 2; }
.escala-tab thead .esc-quem { z-index: 3; }

.escala-dom { padding: 12px 16px; border-top: 1px solid var(--borda); background: var(--fundo-app); }
.escala-dom-tit {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto-apoio);
}
.escala-dom-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.escala-dom-lista li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
  font-size: 12.5px; color: var(--texto-suave);
  padding: 4px 8px; border-radius: 8px;
}
.escala-dom-lista li.esc-eu { background: rgba(209, 161, 58, .10); }
.esc-folga-dom { font-size: 11px; color: var(--texto-apoio); }
.escala-obs {
  margin: 0; padding: 10px 16px; font-size: 12px; color: var(--texto-apoio);
  border-top: 1px solid var(--borda);
}
.escala-pe {
  margin: 0; padding: 10px 16px; font-size: 11px; color: var(--texto-inativo);
  border-top: 1px solid var(--borda); display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px;
}

@media (max-width: 560px) {
  .escala-dom-lista li { grid-template-columns: 1fr auto; }
  .esc-folga-dom { grid-column: 1 / -1; }
}

/* ---------- a tira da semana, dentro do quadrado do celular -------------- */
.tira-semana { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-top: 8px; }
.tira-dia {
  display: grid; gap: 1px; justify-items: center; padding: 4px 0 5px;
  border-radius: 7px; border: 1px solid var(--borda); background: var(--branco);
}
.tira-dia small {
  font-size: 8.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-apoio);
}
.tira-dia b { font-size: 12px; font-weight: 700; color: var(--tinta); }
.tira-on { background: rgba(22, 48, 94, .07); border-color: rgba(22, 48, 94, .18); }
.tira-folga { background: var(--cinza); }
.tira-folga b { color: var(--texto-apoio); }
.tira-coringa b { color: var(--texto-inativo); }
.tira-hoje { outline: 2px solid var(--dourado); outline-offset: -1px; }

/* A tira da semana dentro de um bloco explicado não precisa da largura toda:
   ela é a semana de UMA pessoa, não um gráfico de série. */
.grafico-bloco .tira-semana { max-width: 420px; margin-top: 0; }
.grafico-bloco .tira-dia { padding: 7px 0 8px; }

/* Seis dias num quadrado de meia largura no celular: a tira fica apertada e o
   sábado saía cortado. O quadrado da escala passa a ocupar a linha inteira —
   a semana é uma coisa só e não se lê pela metade. */
@media (max-width: 560px) {
  .meu-painel .meu-card:has(.tira-semana) { grid-column: 1 / -1; }
  .tira-dia small { font-size: 8px; }
}

/* Os dois indicadores da ficha dentro do pilar do sistema. O gestor precisa
   ver o que ele está assinando: um dos dois sai do arquivo, o outro é o olho
   dele. Pilar que só mostra o número parece 100% automático. */
.ficha-inds { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.ficha-inds li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 5px 9px; border-radius: 8px; background: var(--fundo-app);
  font-size: 12.5px; color: var(--texto-suave);
}
.ficha-inds small { flex: 0 0 auto; font-size: 10.5px; }
.ficha-auto { color: var(--marinho); font-weight: 600; }
.ficha-manual { color: var(--texto-apoio); font-style: italic; }

/* O toque na nota abre os QUATRO pilares. Só três viram quadrado no painel —
   o Resultado a pessoa vê em detalhe na aba Vendas —, e sem os quatro escritos
   aqui quem somasse os três da tela acharia outro número. */
.nota-pilares { display: grid; gap: 3px; margin-top: 7px; }
.nota-pilar {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 8px; border-radius: 7px; background: var(--fundo-app);
  font-size: 11px; color: var(--texto-suave);
}
.nota-pilar b { margin-left: auto; font-size: 12px; color: var(--tinta); }
.nota-pilar-onde {
  flex: 0 0 auto; order: 3; font-size: 9.5px; font-style: italic;
  color: var(--dourado-texto);
}

/* ---------- A biblioteca de treinamento ---------- */
.treino-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.treino-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px;
}
.treino-item.treino-feito { background: var(--fundo-app); }
.treino-quem { min-width: 0; display: grid; gap: 2px; }
.treino-quem strong { font-size: 13.5px; color: var(--tinta); line-height: 1.3; }
.treino-quem small { font-size: 11.5px; color: var(--texto-apoio); line-height: 1.4; }
.treino-dir { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end; }
@media (max-width: 620px) {
  .treino-item { flex-direction: column; align-items: stretch; }
  .treino-dir { justify-content: flex-start; }
}

/* ---------- a coluna fixa da escala, quando a tabela rola de lado --------- */
/* Ela precisa (a) de fundo OPACO, (b) de pintar por cima do que rola atrás e
   (c) de uma borda que diga onde ela termina. Sem a borda, o leitor não sabe
   qual coluna ficou parada e qual andou. */
.esc-quem { box-shadow: 1px 0 0 var(--borda); }
.esc-intervalo-mob { display: none; }
@media (max-width: 720px) {
  /* o intervalo desce para debaixo do nome e a coluna dele sai da tabela */
  .esc-intervalo-mob {
    display: block; font-size: 10px; font-weight: 400; color: var(--texto-apoio);
  }
  .escala-tab thead th:nth-child(2), .escala-tab tbody td:nth-child(2) { display: none; }
  .esc-quem { max-width: 148px; }
}

/* A Visão Geral do Estoque e Compras tem duas fileiras, e cada uma diz de que
   metade ela é. Sem o rótulo, oito quadrados em sequência se leem como uma
   fileira só que quebrou a linha. */
.fileira-rot { margin-top: 18px; }
.fileira-rot:first-of-type { margin-top: 0; }

/* ---------- Marketing: a campanha e o público, linha a linha ------------- */
.camp-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.camp-item {
  display: grid; grid-template-columns: minmax(0, 1.1fr) auto auto; gap: 12px;
  align-items: center; padding: 11px 13px;
  border: 1px solid var(--borda); border-radius: 10px;
}
.camp-item.camp-encerrada { background: var(--fundo-app); }
.camp-quem { min-width: 0; display: grid; gap: 2px; }
.camp-quem strong { font-size: 13.5px; color: var(--tinta); line-height: 1.3; }
/* anywhere aqui é deliberado: a linha pode ser uma URL longa (Site e Google),
   que não tem onde quebrar — sem isso o min-content dela alarga a coluna e o
   texto entra por baixo do selo "No ar" no celular */
.camp-quem small { font-size: 11.5px; color: var(--texto-apoio); line-height: 1.4; overflow-wrap: anywhere; }
.camp-nums { display: flex; flex-wrap: wrap; gap: 14px; }
.camp-num { display: grid; gap: 0; min-width: 56px; }
.camp-num b {
  font-family: Jost, Archivo, sans-serif; font-weight: 600; font-size: 15px;
  color: var(--tinta); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.camp-num small {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto-apoio);
}
.camp-estado { flex: 0 0 auto; justify-self: end; }
@media (max-width: 760px) {
  .camp-item { grid-template-columns: 1fr auto; }
  .camp-nums { grid-column: 1 / -1; gap: 12px; }
  .camp-estado { justify-self: start; }
}

/* ---------- A lista de ITENS: a resposta para "quais?" ------------------- */
.itens-rola { overflow-x: auto; margin-top: 12px; }
.itens-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.itens-tab th, .itens-tab td {
  padding: 9px 8px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--borda);
}
.itens-tab thead th {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-apoio); background: var(--fundo-app);
}
/* A primeira coluna é fixa: o nome é o que identifica a linha, e sem ele a
   tabela rolada de lado vira uma grade de números órfãos. Fundo OPACO,
   z-index e borda à direita — as três coisas, como na escala. */
.it-nome {
  text-align: left !important; padding-left: 14px !important; white-space: normal;
  position: sticky; left: 0; z-index: 2; background: var(--branco);
  box-shadow: 1px 0 0 var(--borda); min-width: 190px; max-width: 260px;
}
.itens-tab thead .it-nome { background: var(--fundo-app); z-index: 3; }
/* O nome quebra DENTRO da célula fixa. Sem isto, "Absorvente noturno 8un"
   estoura os 150px do celular e o texto invade a coluna que rola atrás — a
   coluna fixa é justamente a que não pode vazar. */
/* `break-word` e não `anywhere`: com `anywhere` a largura MÍNIMA da célula
   vira um caractere, a tabela espreme a coluna e o nome sai picado no meio da
   palavra ("Amoxici / lina"). Com o min-width abaixo, a coluna guarda espaço
   para as palavras inteiras e só quebra o que realmente não couber. */
.it-nome strong, .it-nome small {
  display: block; overflow-wrap: break-word; white-space: normal;
}
.it-nome strong { font-size: 12.5px; font-weight: 600; color: var(--tinta); line-height: 1.3; }
.it-nome small { font-size: 10.5px; color: var(--texto-apoio); line-height: 1.35; }
.itens-tab td.num { font-variant-numeric: tabular-nums; color: var(--tinta); }
.it-fraco { color: var(--texto-apoio) !important; }
.it-forte { font-weight: 700; }
.it-zero { color: var(--vermelho) !important; font-weight: 700; }
.it-de { display: block; font-size: 10px; color: var(--texto-apoio); text-decoration: line-through; }
.it-curva {
  display: inline-block; min-width: 20px; padding: 2px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; background: var(--cinza); color: var(--texto-apoio);
}
.curva-a { background: rgba(22, 48, 94, .12); color: var(--marinho); }
.curva-b { background: rgba(180, 83, 9, .12); color: var(--ambar); }
.it-promo { font-size: 10px !important; }
.it-qtd {
  width: 66px; padding: 5px 7px; text-align: right;
  border: 1px solid var(--borda); border-radius: 7px; background: var(--branco);
  font: inherit; font-variant-numeric: tabular-nums; color: var(--tinta);
}
.it-qtd:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }
.itens-pe {
  margin: 10px 0 0; font-size: 11.5px; color: var(--texto-apoio);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
@media (max-width: 620px) {
  .it-nome { min-width: 138px; max-width: 152px; padding-left: 10px !important; }
  .itens-tab th, .itens-tab td { padding: 8px 6px; }
}

/* ---------- O resultado do mês, linha a linha --------------------------- */
/* Cada linha diz de QUE ABA ela vem: é a única tela do produto onde as três
   fontes se encontram, e a origem escrita é o que prova a integração. */
.dre-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.dre-linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 12px; border-radius: 8px;
}
.dre-rot { display: grid; gap: 1px; min-width: 0; }
.dre-rot strong { font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.dre-rot small { font-size: 11px; color: var(--texto-apoio); }
.dre-valor { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: var(--tinta); }
.dre-sai { color: var(--vermelho); }
.dre-entra { background: rgba(22, 48, 94, .05); }
.dre-subtotal {
  background: var(--fundo-app); border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}
.dre-sobra {
  margin-top: 6px; background: var(--marinho); color: #fff;
}
.dre-sobra .dre-rot strong { color: #fff; }
.dre-sobra .dre-rot small { color: var(--sobre-tinta-corpo); }
.dre-sobra .dre-valor { color: var(--dourado); font-size: 19px; }

/* ============================================================ COPILOTO
   A tela do chat, com o trilho de assuntos à esquerda.

   O trilho não esconde a aba fora do plano: ela fica com cadeado. Sumir
   esconderia do dono metade do produto que ele poderia estar usando, e ainda
   faria o menu mudar de tamanho conforme o plano — o que se lê como defeito.
   ------------------------------------------------------------------------ */
.cop { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 14px; align-items: start; }
.cop-trilho {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--tinta); border-radius: 14px; padding: 10px 8px;
  position: sticky; top: 12px;
}
.cop-trilho-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 10px; text-decoration: none;
  color: rgba(255,255,255,.72); font-size: .82rem; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.cop-trilho-item svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cop-trilho-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cop-trilho-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.cop-trilho-item.ativo { background: rgba(255,255,255,.12); color: #fff; }
.cop-trilho-item.ativo svg { stroke: var(--dourado); }
.cop-trilho-item.travado { color: rgba(255,255,255,.38); }
.cop-cadeado { margin-left: auto; font-size: .68rem; opacity: .8; }

.cop-chat { border: 1px solid var(--borda); border-radius: 14px; background: var(--branco); overflow: hidden; min-width: 0; }
.cop-chat-cab {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--borda); background: var(--cinza);
}
.cop-chat-cab strong { font-size: .95rem; }
.cop-chat-sub { color: var(--texto-suave); font-size: .8rem; }
.cop-chat-cab .selo-dado-demo { margin-left: auto; }

.cop-fio { padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.cop-balao { max-width: 88%; border-radius: 14px; padding: 11px 14px; font-size: .9rem; line-height: 1.55; }
.cop-balao p { margin: 0 0 8px; }
.cop-balao p:last-child { margin-bottom: 0; }
.cop-dono { align-self: flex-end; background: var(--marinho); color: #fff; border-bottom-right-radius: 4px; }
.cop-cop { align-self: flex-start; background: var(--cinza); border: 1px solid var(--borda); border-bottom-left-radius: 4px; }
.cop-quem { display: flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 6px; }
.cop-estrela { color: var(--dourado); }
.cop-fonte { margin-top: 10px !important; padding-top: 8px; border-top: 1px dashed var(--borda); font-size: .76rem; color: var(--texto-suave); }

.cop-sugestoes { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 12px; }
.cop-sug {
  border: 1px solid var(--borda); background: var(--branco); border-radius: 999px;
  padding: 7px 13px; font: inherit; font-size: .82rem; cursor: pointer; text-align: left;
  color: var(--tinta); transition: border-color .15s ease, background .15s ease;
}
.cop-sug:hover { border-color: var(--marinho); }
.cop-sug.ativo { background: var(--marinho); border-color: var(--marinho); color: #fff; }

.cop-campo { padding: 0 14px 14px; }
.cop-campo-caixa {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--borda); border-radius: 12px; padding: 11px 12px; background: var(--cinza);
}
.cop-campo-texto { color: var(--texto-suave); font-size: .88rem; flex: 1; }
.cop-campo-btn {
  width: 26px; height: 26px; border-radius: 50%; background: var(--marinho); color: #fff;
  display: grid; place-items: center; font-size: .8rem; opacity: .45;
}
/* Na demonstração a caixa é uma CENA (um span com o texto de exemplo); na
   conta real ela é um campo de verdade, que cresce até 140px e depois rola.
   O botão de enviar sai da opacidade baixa: ali ele funciona. */
.cop-campo-input {
  flex: 1; min-width: 0; border: 0; background: none; resize: none; overflow-y: auto;
  font: inherit; font-size: .88rem; color: var(--tinta); line-height: 1.5; padding: 0;
}
.cop-campo-input:focus { outline: none; }
.cop-campo-input::placeholder { color: var(--texto-suave); }
.cop-campo-caixa:focus-within { border-color: var(--marinho); }
.cop-campo-caixa:has(.cop-campo-input) { align-items: flex-end; }
button.cop-campo-btn { opacity: 1; border: 0; cursor: pointer; font-family: inherit; }
button.cop-campo-btn:hover { background: var(--tinta); }

.cop-campo-nota { margin: 8px 2px 0; font-size: .78rem; color: var(--texto-suave); line-height: 1.5; }

/* o modelo do negócio: fechado por padrão, mas SEMPRE alcançável num toque */
.cop-md-caixa { padding: 0; overflow: hidden; }
.cop-md-cab {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: none; border: 0; font: inherit; cursor: pointer; text-align: left;
}
/* nome e tamanho em DUAS linhas, não lado a lado: no celular "O modelo do meu
   negócio" quebra em duas e o tamanho ao lado cavalgava a segunda linha. */
.cop-md-cab > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cop-md-cab em { display: block; font-style: normal; color: var(--texto-suave); font-size: .82rem; }
.cop-md-seta { transition: transform .2s ease; color: var(--texto-suave); }
.cop-md-caixa.aberto .cop-md-seta { transform: rotate(180deg); }
.cop-md {
  display: none; margin: 0; padding: 0 14px 14px; max-height: 380px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; color: var(--tinta);
}
.cop-md-caixa.aberto .cop-md { display: block; }

/* regras e tipos de anexo em DUAS colunas no desktop: com o texto de uma
   linha (V1.2), quatro cartões em fileiras de largura cheia viravam um
   corredor de vazio à direita */
.grade-cartoes { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .grade-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cop-regras strong { display: block; margin-bottom: 5px; }

@media (max-width: 720px) {
  /* No celular o trilho deita: uma tira de ícones em cima do chat. Coluna de
     168px num telefone come metade da largura da conversa. */
  .cop { grid-template-columns: minmax(0, 1fr); }
  .cop-trilho { flex-direction: row; overflow-x: auto; position: static; gap: 4px; }
  .cop-trilho-item { flex: 0 0 auto; }
  .cop-trilho-nome { display: none; }
  .cop-trilho-item.ativo .cop-trilho-nome { display: inline; }
  .cop-balao { max-width: 95%; }
}
.cop-md-pe { margin: 0; padding: 0 14px 12px; font-size: .78rem; color: var(--texto-suave); line-height: 1.5; }
.cop-planos { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.cop-planos-rot { font-size: .8rem; color: var(--texto-suave); margin-right: 2px; }
.cop-plano {
  border: 1px solid var(--borda); background: var(--branco); border-radius: 999px;
  padding: 5px 12px; font: inherit; font-size: .8rem; cursor: pointer; color: var(--tinta);
}
.cop-plano.ativo { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.cop-travado { align-self: start; }
.cop-travado strong { display: block; margin: 6px 0 6px; }

/* ---- o clipe do Copiloto: um só, dois destinos ---- */
.cop-clipe { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 10px; }
.cop-clipe-rot { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--texto-suave); }
.cop-clipe-ico { font-size: .95rem; }
.cop-arq {
  border: 1px dashed var(--borda); background: var(--branco); border-radius: 10px;
  padding: 6px 11px; font: inherit; font-size: .8rem; cursor: pointer; color: var(--tinta);
}
.cop-arq:hover { border-color: var(--marinho); }
.cop-arq.ativo { border-style: solid; border-color: var(--marinho); background: var(--cinza); }

.cop-anexo { margin-bottom: 12px; }
.cop-anexo-cab { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.cop-anexo-cab strong { font-size: .88rem; word-break: break-word; }
.cop-anexo-como { margin: 0 0 8px; font-size: .85rem; }
.cop-anexo-leitura { border-left: 2px solid var(--dourado); padding-left: 11px; margin: 10px 0; }
.cop-anexo-leitura p { margin: 0; font-size: .87rem; line-height: 1.55; }
.cop-anexo-aviso { margin: 8px 0 0; font-size: .8rem; color: var(--ambar, #B45309); line-height: 1.5; }
.cop-anexo-custo { margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed var(--borda);
  font-size: .79rem; color: var(--texto-suave); line-height: 1.55; }
.cop-anexo-nota { font-size: .78rem; color: var(--texto-suave); }
.cop-anexo-import { border-left: 3px solid var(--ambar, #B45309); }
.cop-anexo-nao { opacity: .82; }
.cop-tipo-como { margin: 4px 0 6px; font-size: .82rem; color: var(--marinho); font-weight: 500; }

/* ---- o Copiloto dentro do celular do funcionário ---- */
.fone-fio { display: flex; flex-direction: column; gap: 9px; margin: 10px 0 12px; }
.fone-balao { max-width: 100%; font-size: .8rem; padding: 9px 11px; }
.fone-balao p { margin: 0; }
.fone-recusa { border-left: 3px solid var(--ambar, #B45309); }
.fone-sugestoes { display: flex; flex-direction: column; gap: 6px; }
.cop-sug-sm { font-size: .76rem; padding: 6px 10px; border-radius: 9px; }
/* a pergunta que a demonstração faz de propósito para mostrar a recusa */
.cop-sug-nao { border-style: dashed; color: var(--texto-suave); }
.cop-sug-nao.ativo { background: var(--ambar, #B45309); border-color: var(--ambar, #B45309); color: #fff; }

/* ---- a coluna da esquerda: trilho de assuntos + conversas ---- */
.cop-lado { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px; min-width: 0; }
.cop-lado .cop-trilho { position: static; }
.cop-conversas { border: 1px solid var(--borda); border-radius: 12px; padding: 8px; background: var(--branco); }
.cop-conversas-rot { margin: 2px 4px 7px; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-suave); }
.cop-conversas-vazio { margin: 0 4px 4px; font-size: .78rem; color: var(--texto-suave); line-height: 1.45; }
.cop-conversa { display: block; width: 100%; text-align: left; border: 0; background: none;
  border-radius: 8px; padding: 7px 8px; font: inherit; cursor: pointer; color: var(--tinta); }
.cop-conversa:hover { background: var(--cinza); }
.cop-conversa.ativo { background: var(--cinza); box-shadow: inset 2px 0 0 var(--dourado); }
.cop-conversa-nome { display: block; font-size: .8rem; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cop-conversa-quando { display: block; font-size: .7rem; color: var(--texto-suave); margin-top: 1px; }

/* ---- cruzar abas ---- */
.cop-cruzar { position: relative; width: 100%; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cop-cruzar-btn, .cop-cruzar-off {
  border: 1px dashed var(--borda); background: var(--branco); border-radius: 999px;
  padding: 4px 11px; font: inherit; font-size: .76rem; cursor: pointer; color: var(--texto-suave);
}
.cop-cruzar-btn:hover, .cop-cruzar-off:hover { border-color: var(--marinho); color: var(--tinta); }
.cop-cruzar-off { border-style: solid; border-color: var(--dourado-texto, #8A6D1F); color: var(--dourado-texto, #8A6D1F); }
.cop-cruzar-rot { font-size: .74rem; color: var(--texto-suave); }
.cop-cruzar-menu { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; padding-top: 6px; }
.cop-acoes { margin-top: 4px; align-items: center; }
.cop-virar { white-space: nowrap; }

/* ---- o uso do mês ---- */
.uso-box { padding: 4px 0; }
.uso-trilha { display: flex; height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--cinza); border: 1px solid var(--borda); }
.uso-parte { display: block; height: 100%; }
.uso-dono { background: var(--marinho); }
.uso-equipe { background: #7C93BE; }
.uso-legenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; font-size: .78rem; color: var(--texto-suave); }
.uso-cor { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
i.uso-dono { background: var(--marinho); }
i.uso-equipe { background: #7C93BE; }
.uso-teto { margin-left: auto; }
.cop-md-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 900px) { .cop-md-par { grid-template-columns: 1fr; } }

/* ---- a triagem do Início ---- */
.tri-resposta { max-width: 100%; }
.tri-resposta .grade-prioridades { margin-top: 12px; gap: 10px; }
.tri-ordem {
  display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 50%; background: var(--tinta); color: #fff;
  font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tri-esforco { margin-left: auto; font-size: .74rem; color: var(--texto-suave); white-space: nowrap; }
.tri-porque { margin: 6px 0 0; font-size: .82rem; color: var(--texto-suave); line-height: 1.55; }
.tri-acao { margin: 8px 0 0; font-size: .86rem; line-height: 1.5; }
.tri-lacunas { margin: 0; padding-left: 18px; }
.tri-lacunas li { font-size: .86rem; line-height: 1.6; margin-bottom: 6px; }
/* fila numerada: uma coluna, de cima para baixo. Em três colunas o olho lê em
   Z e a ORDEM — que é o produto desta tela — deixa de ser lida como ordem. */
.tri-fila { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.tri-fila .prioridade { padding: 13px 15px; }
.tri-fila .prio-cab { flex-wrap: wrap; gap: 8px; }

/* ---- a mensagem que sai da loja, e a varredura dela ---- */
.msg-caixa { margin: 12px 0; border-left: 3px solid var(--borda); }
.msg-ok { border-left-color: var(--verde, #0E7C5A); }
.msg-bloq { border-left-color: var(--vermelho, #B3261E); }
.msg-cab { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.msg-quantos { margin-left: auto; font-size: .78rem; color: var(--texto-suave); }
/* o texto vem na cara de mensagem: é assim que o cliente vai ler */
.msg-texto {
  margin: 0; padding: 12px 14px; border-radius: 12px 12px 12px 4px;
  background: var(--cinza); border: 1px solid var(--borda);
  font-size: .9rem; line-height: 1.55;
}
.msg-modelo { margin: 10px 0 0; font-size: .78rem; color: var(--texto-suave); line-height: 1.5; }
.msg-custo { margin: 12px 0 0; font-size: .84rem; line-height: 1.55; }
.msg-estoura { color: var(--vermelho, #B3261E); font-weight: 600; }
.msg-acoes { margin-top: 10px; align-items: center; }
.msg-acoes .btn[disabled] { opacity: .45; cursor: not-allowed; }

.varr-bloco { margin-top: 4px; }
.varr-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.varr-item { border: 1px solid var(--borda); border-radius: 12px; padding: 11px 13px; background: var(--branco); }
.varr-bloq { border-left: 3px solid var(--vermelho, #B3261E); }
.varr-aviso { border-left: 3px solid var(--ambar, #B45309); }
.varr-limpo { border-left: 3px solid var(--verde, #0E7C5A); }
.varr-cab { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.varr-trecho { margin: 0 0 5px; font-size: .82rem; color: var(--tinta); }
/* o trecho achado fica marcado: "sua mensagem tem um problema" não ajuda
   ninguém a corrigir — o que ajuda é ver ONDE. */
.varr-marca { background: #FBF0C4; border-radius: 4px; padding: 1px 4px; }
.varr-motivo { margin: 0; font-size: .8rem; color: var(--texto-suave); line-height: 1.55; }

/* ---------- V7: o documento entra no fio, e o Copiloto digita ---------- */
.cop-arq-chip {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 8px;
}
.cop-arq-chip .cop-arq-ico { font-size: 20px; }
.cop-arq-chip strong { display: block; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.cop-arq-chip small { font-size: 11px; opacity: .8; font-variant-numeric: tabular-nums; }
.cop-pontos { display: flex; gap: 5px; padding: 4px 0 2px; }
.cop-pontos i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--texto-apoio);
  animation: cop-pulso 1s ease-in-out infinite;
}
.cop-pontos i:nth-child(2) { animation-delay: .18s; }
.cop-pontos i:nth-child(3) { animation-delay: .36s; }
@keyframes cop-pulso {
  0%, 100% { opacity: .35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .cop-pontos i { animation: none; } }

/* a tecla de gerar o modelo, e o motivo escrito quando ela falha */
.cop-md-botao { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cop-md-erro { color: var(--vermelho); margin: 0; }
/* o rodapé do quadro do modelo: o que aconteceu na última leitura, e a
   tecla de refazer — dentro do cartão, alinhado com o texto dele */
.cop-md-acao { padding: 0 14px 14px; }
.cop-md-ok { color: var(--verde); margin: 0 0 8px; }
.cop-md-erro { margin: 0 0 8px; }

/* As ferramentas do balcão são quatro blocos independentes. Empilhados numa
   coluna estreita viravam uma torre ao lado de um chat curto, e metade da
   tela ficava vazia. Agora eles ocupam a largura que existe.

   Em GRADE não serve: a linha tem a altura do bloco mais alto, e um bloco
   curto ao lado de um comprido devolve o vazio pela porta dos fundos. Em
   COLUNAS o navegador equilibra as alturas sozinho; `break-inside: avoid`
   é o que impede um bloco de ser cortado no meio entre duas colunas. */
.ferramentas-grade { margin-top: 10px; column-gap: 14px; }
.ferramentas-grade > * { break-inside: avoid; margin-bottom: 14px; }
@media (min-width: 900px)  { .ferramentas-grade { columns: 2; } }
@media (min-width: 1360px) { .ferramentas-grade { columns: 3; } }