/* Estatísticas da leitura: visitas que abrem a ficha, barras, horas do dia, placar, acessos brutos e a tela Acessos.
   Só tokens do :root de app.css (nenhuma cor ou fonte literal aqui). Celular primeiro.
   A largura das barras e a força das horas chegam por --parte (0 a 1), definido por JS via CSSOM. */

/* ---------- área de estatísticas na tela da proposta ---------- */
.area-estatisticas { margin-top: 8px; }
.area-estatisticas > .sobre { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.area-estatisticas > .sobre::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.estatisticas-grade { display: flex; flex-direction: column; }
.bloco-estatistica .bloco-intro { max-width: 72ch; }
.bloco-corpo > .subtitulo:first-child { margin-top: 16px; }
.bloco-corpo .carregando { padding: 22px 0; }
.lista-paginada .mostrar-mais { margin-top: 6px; }

/* ---------- barras horizontais ---------- */
.barras { list-style: none; margin: 4px 0 0; padding: 0; }
.barra-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 16px;
  padding: 10px 0 11px; border-bottom: 1px solid var(--linha);
}
.barra-rotulo { font-size: .94rem; color: var(--texto); overflow-wrap: anywhere; }
.barra-numero {
  font: 600 .95rem/1.2 var(--fonte-display); font-variation-settings: var(--facetas);
  font-variant-numeric: tabular-nums lining-nums; color: var(--marca); text-align: right; white-space: nowrap;
}
.barra-sub { grid-column: 1 / -1; margin-top: 1px; font-size: .8rem; color: var(--apagado); }
.barra-destino { color: var(--apagado); }
.barra-pos {
  display: inline-block; min-width: 2.1em; margin-right: 6px;
  font: 600 .74rem/1 var(--fonte-texto); color: var(--apagado); font-variant-numeric: tabular-nums;
}
.barra-trilho {
  display: block; grid-column: 1 / -1; height: 4px; margin-top: 7px; overflow: hidden;
  border-radius: 1px; background: var(--linha);
}
.barra-trilho i {
  display: block; width: 100%; height: 100%; border-radius: 1px;
  background: color-mix(in srgb, var(--marca-tinta) 70%, var(--linha));
  transform: scaleX(var(--parte, 0)); transform-origin: left center;
  animation: crescer .55s var(--curva) both;
}
@keyframes crescer { from { transform: scaleX(0); } }
.barra-item.destaque .barra-rotulo { font-weight: 600; }
.barra-item.destaque .barra-trilho i { background: var(--cor-proposta, var(--acento)); }
.barras-partes .barra-item { padding: 8px 0 9px; }
.barras-partes .barra-trilho { height: 3px; margin-top: 6px; }

/* ---------- horas do dia (quatro turnos de seis horas) ---------- */
.horas-pico { margin: 12px 0 12px; font: 600 1.05rem/1.3 var(--fonte-display); font-variation-settings: var(--facetas); color: var(--marca); }
.turnos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.turno { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.turno-rotulo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 600 .84rem/1.2 var(--fonte-texto); color: var(--texto); }
.turno-total { font-weight: 400; font-size: .78rem; color: var(--apagado); font-variant-numeric: tabular-nums; }
.turno-horas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.hora {
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
  min-height: 50px; padding: 6px 7px; border-radius: 2px;
  background: var(--superficie);
  /* até 55% do acento: o texto escuro continua legível na hora mais movimentada */
  background: color-mix(in srgb, var(--acento) calc(var(--parte, 0) * 55%), var(--superficie));
  box-shadow: inset 0 0 0 1px var(--linha);
}
.hora-rotulo { font: 600 .68rem/1 var(--fonte-texto); color: var(--texto); font-variant-numeric: tabular-nums; }
.hora-numero {
  font: 600 1.05rem/1 var(--fonte-display); font-variation-settings: var(--facetas);
  color: var(--texto); font-variant-numeric: tabular-nums lining-nums;
}
.hora.zerada .hora-rotulo, .hora.zerada .hora-numero { color: var(--apagado); font-weight: 400; }

/* ---------- placar ---------- */
.placar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 6px 0 0; }
.placar-item { padding: 12px 0 13px; border-bottom: 1px solid var(--linha); min-width: 0; }
.placar dt { font-size: .82rem; color: var(--apagado); }
.placar dd {
  margin: 4px 0 0; font: 600 1.55rem/1.1 var(--fonte-display); font-variation-settings: var(--facetas);
  color: var(--marca); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere;
}
.placar-item:first-child dd { font-size: 2.3rem; color: var(--acento-forte); }
.placar dd.placar-sub { margin-top: 2px; font: 400 .8rem/1.3 var(--fonte-texto); color: var(--apagado); }

/* ---------- visitas (linha fechada e ficha aberta) ---------- */
.visitas-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.visita { border-bottom: 1px solid var(--linha); }
.visita-linha { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.visita-abrir {
  position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: 14px 30px 12px 0; background: none; border: 0; border-radius: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.visita-abrir::after {
  content: ""; position: absolute; right: 8px; top: 19px; width: 7px; height: 7px;
  border-right: 2px solid var(--marca); border-bottom: 2px solid var(--marca);
  transform: rotate(45deg); transition: transform .2s var(--curva);
}
.visita-abrir[aria-expanded="true"]::after { transform: translateY(4px) rotate(-135deg); }
.visita-abrir:hover .visita-nome { text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.visita-abrir:active { background: var(--superficie-toque); }
.visita-abrir:focus-visible { outline-offset: -2px; }
.visita-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.visita-nome { font: 600 1.02rem/1.25 var(--fonte-display); font-variation-settings: var(--facetas); color: var(--texto); }
.visita-proposta { font-size: .88rem; color: var(--texto); overflow-wrap: anywhere; }
.visita-abrir .leitura { margin: 8px 0 4px; }
.visita-meta { font-size: .9rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.visita-onde { font-size: .84rem; color: var(--apagado); overflow-wrap: anywhere; }
.visita-linha .fui-eu { justify-self: end; min-height: 36px; margin: -8px 0 4px; padding: 0 2px; font: 600 .78rem/1 var(--fonte-texto); }

.visita-ficha {
  margin: 0 0 18px; padding: 14px 14px 16px 17px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-g);
  box-shadow: inset 3px 0 var(--cor-proposta, var(--acento));
}
.visita-ficha .vazio { padding: 10px 0 4px; }
.ficha-grupos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 28px; }
.ficha-titulo {
  margin: 8px 0 4px;
  font: 700 .68rem/1 var(--fonte-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--acento-forte);
}
.ficha-lista { margin: 0; }
.ficha-lista div {
  display: grid; grid-template-columns: minmax(7.5em, 38%) minmax(0, 1fr); gap: 2px 12px;
  padding: 6px 0; border-bottom: 1px solid var(--linha); font-size: .88rem;
}
.ficha-lista div:last-child { border-bottom: 0; }
.ficha-lista dt { color: var(--apagado); }
.ficha-lista dd { margin: 0; color: var(--texto); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ficha-mapa { font-weight: 600; white-space: nowrap; }
.ficha-colunas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; margin-top: 6px; }
.ficha-coluna { min-width: 0; }
.ficha-rodape { margin-top: 14px; font-weight: 600; }

/* linha do tempo */
.eventos { list-style: none; margin: 4px 0 0 3px; padding: 0; }
.evento {
  position: relative; display: grid; grid-template-columns: 4.9em minmax(0, 1fr); gap: 10px;
  padding: 6px 0 6px 16px; font-size: .9rem;
}
.evento::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--linha); }
.evento::after {
  content: ""; position: absolute; left: -3px; top: 12px; width: 7px; height: 7px; border-radius: 1px;
  background: var(--borda-campo);
}
.evento-hora { padding-top: 1px; font-size: .8rem; color: var(--apagado); font-variant-numeric: tabular-nums; }
.evento-frase { overflow-wrap: anywhere; }
.evento[data-tipo="clique"]::after, .evento[data-tipo="campo"]::after,
.evento[data-tipo="midia"]::after, .evento[data-tipo="copia"]::after, .evento[data-tipo="impressao"]::after { background: var(--marca); }
.evento[data-tipo="secao"]::after, .evento[data-tipo="marco"]::after { background: var(--marca-com); }
.evento[data-tipo="precos"]::after, .evento[data-tipo="aprovar"]::after { background: var(--cor-proposta, var(--acento)); }
.evento[data-tipo="precos"] .evento-frase, .evento[data-tipo="aprovar"] .evento-frase { font-weight: 700; color: var(--positivo-tinta); }
.evento[data-tipo="saiu"]::after, .evento[data-tipo="voltou"]::after { background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borda-campo); }
.evento[data-tipo="saiu"] .evento-frase, .evento[data-tipo="voltou"] .evento-frase { color: var(--apagado); }

/* ---------- acessos ao endereço (registro bruto) ---------- */
.acessos-resumo { margin: 12px 0 6px; font: 600 1rem/1.35 var(--fonte-display); font-variation-settings: var(--facetas); color: var(--marca); }
.acessos { list-style: none; margin: 0; padding: 0; }
.acesso { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 0 10px 13px; border-bottom: 1px solid var(--linha); }
.acesso::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 1px; background: var(--marca-tinta); }
.acesso[data-tipo="link"]::before { background: var(--cor-proposta, var(--acento)); }
.acesso[data-tipo="previa"]::before { background: var(--linha); }
.acesso.sem-leitura::before { background: var(--atencao); }
.acesso-topo { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
.acesso-o-que { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-weight: 600; color: var(--texto); }
.acesso[data-tipo="previa"] .acesso-o-que { font-weight: 400; color: var(--apagado); }
.acesso-quando { font-size: .82rem; color: var(--apagado); font-variant-numeric: tabular-nums; white-space: nowrap; }
.acesso-proposta { font-size: .86rem; color: var(--texto); text-decoration-color: var(--linha); overflow-wrap: anywhere; }
.acesso-linha { font-size: .84rem; color: var(--apagado); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.selo.atencao { border-color: var(--atencao); color: var(--atencao); }

/* ---------- link da proposta e convites ---------- */
.link-proposta .link-reserva-abrir { color: var(--texto); }
.convite { margin-top: 12px; }
.convite .link-proposta { margin-top: 0; }
.convite .pequeno { margin-top: 8px; }
.instalar p + p { margin-top: 6px; }
.instalar code, .ajuste-texto code {
  padding: 1px 5px; border-radius: 2px; background: var(--superficie-toque);
  font: 600 .92em/1.2 var(--fonte-texto); color: var(--marca);
}
.aparelho-dono .acoes-form, .aparelho-outro .acoes-form { margin-top: 4px; }

/* ---------- tela Acessos ---------- */
.tela-acessos .abas { margin-bottom: 26px; }
.tabela-propostas { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.tabela-propostas th[scope="col"] {
  padding: 12px 14px 8px 0; text-align: left; border-bottom: 1px solid var(--linha); white-space: nowrap;
  font: 700 .66rem/1.2 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--apagado);
}
.tabela-propostas td, .tabela-propostas th[scope="row"] {
  padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha);
}
.tabela-propostas th[scope="col"]:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(9)), .pp-num { text-align: right; }
.pp-num, .pp-melhor, .pp-ultimo { white-space: nowrap; }
.pp-nome { min-width: 15em; font-weight: 400; }
.pp-nome a {
  display: inline; font: 600 .98rem/1.3 var(--fonte-display); font-variation-settings: var(--facetas);
  color: var(--texto); text-decoration: none; overflow-wrap: anywhere;
}
.pp-nome a:hover { text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }
.pp-nome .marca-proposta.com-codinome { vertical-align: .1em; }
.pp-nome .linha-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; margin-top: 4px; font-size: .82rem; }
.pp-locais { min-width: 12em; color: var(--apagado); }
.paradas { margin-top: 14px; }
.paradas .linha { align-items: center; padding: 11px 0; }
.paradas .linha-nome { font-size: .98rem; }

/* ---------- celular ---------- */
@media (max-width: 699px) {
  .tabela-propostas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela-propostas, .tabela-propostas tbody { display: block; }
  .tabela-propostas tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px;
    padding: 14px 0; border-bottom: 1px solid var(--linha);
  }
  .tabela-propostas th[scope="row"] { grid-column: 1 / -1; padding: 0 0 4px; border: 0; min-width: 0; }
  .tabela-propostas td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    padding: 0; border: 0; text-align: right; white-space: normal; min-width: 0;
  }
  .tabela-propostas td::before { content: attr(data-rotulo); flex: none; font-size: .8rem; color: var(--apagado); text-align: left; }
  .tabela-propostas .pp-melhor, .tabela-propostas .pp-locais { grid-column: 1 / -1; }
  /* último acesso e prévias lado a lado; os lugares fecham o cartão */
  .tabela-propostas .pp-locais { order: 1; }
}

/* celular e tablet: estatísticas em uma coluna, na ordem de uso */
@media (max-width: 899px) {
  .estatisticas-coluna { display: contents; }
  .estatisticas-grade .bloco-recentes-visitas { order: 1; }
  .estatisticas-grade .bloco-partes { order: 2; }
  .estatisticas-grade .bloco-toques { order: 3; }
  .estatisticas-grade .bloco-quando { order: 4; }
  .estatisticas-grade .bloco-origem { order: 5; }
}

@media (min-width: 600px) {
  .placar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .turno { grid-template-columns: 7.2em minmax(0, 1fr); align-items: center; gap: 12px; }
  .turno-rotulo { flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; }
  .visita-linha { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .visita-linha .fui-eu { align-self: start; min-height: 44px; margin: 6px 0 0; }
  .ficha-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .estatisticas-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; align-items: start; }
  .placar { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .ficha-colunas { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .visita-ficha { padding: 18px 20px 20px 23px; }
  .proposta-fim { max-width: 720px; }
}

@media (prefers-reduced-motion: reduce) {
  .barra-trilho i { animation: none; }
  .visita-abrir::after { transition: none; }
}