/* Analítico e Serviços do painel (por cima de painel.css, que dá a moldura, os cartões e os
   blocos): gráficos de barra, ranking, lista de serviços e o cadastro bloqueado da demo. */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; border: 0; }

/* ---------- Analítico ---------- */
.resumo-mes { margin: 0 0 24px; padding: 18px 22px; background: var(--papel); border: 1px solid var(--tom); border-left: 4px solid var(--marca); font-size: 1.125rem; line-height: 1.45; text-wrap: pretty; }
.resumo-mes strong { font-weight: 800; }

.grade-analitico { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
@media (min-width: 1100px) {
  .grade-analitico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-analitico .bloco-largo { grid-column: 1 / -1; }
}

.grafico text { font-family: inherit; font-variant-numeric: tabular-nums; }
.barras-deitadas .rotulo, .colunas .rotulo { fill: var(--texto); font-size: 14px; font-weight: 600; }
.barras-deitadas .valor, .colunas .valor { fill: var(--suave); font-size: 13px; font-weight: 600; }
.colunas .valor.maior { fill: var(--texto); font-weight: 800; }
.colunas.estreitas .rotulo, .colunas.estreitas .valor { font-size: 11px; }
.barras-deitadas .trilho { fill: var(--tom); }
.barras-deitadas .barra, .colunas .barra { fill: var(--linha); }
.barras-deitadas .barra.maior, .colunas .barra.maior { fill: var(--marca); }
.colunas .base { stroke: var(--linha); stroke-width: 1; }

/* Barras crescem ao abrir a tela (uma depois da outra); paradas para quem pede menos movimento. */
.animar .barra { transform-box: fill-box; animation: crescer-deitada .7s var(--saida) both; animation-delay: calc(var(--i) * 60ms); transform-origin: left center; }
.colunas.animar .barra { animation-name: crescer-em-pe; transform-origin: center bottom; animation-delay: calc(var(--i) * 35ms); }
@keyframes crescer-deitada { from { transform: scaleX(0); } to { transform: none; } }
@keyframes crescer-em-pe { from { transform: scaleY(0); } to { transform: none; } }

.ranking { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: ranking; }
.ranking li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding: 12px 0; border-bottom: 1px solid var(--tom); counter-increment: ranking; }
.ranking li:last-child { border-bottom: 0; }
.ranking li::before { content: counter(ranking); display: grid; place-items: center; width: 32px; height: 32px; background: var(--tom); font-weight: 800; font-variant-numeric: tabular-nums; }
.ranking li:first-child::before { background: var(--marca); color: var(--sobre-marca); }
.ranking-texto { display: grid; min-width: 0; }
.ranking-texto strong { overflow-wrap: anywhere; }
.ranking-texto span { color: var(--suave); font-size: .875rem; }
.ranking-valor { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Serviços ---------- */
.aviso-contratar { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 14px 16px; background: var(--fundo); border: 1px solid var(--linha); border-left: 4px solid var(--marca); }
.aviso-contratar svg, .selo-travado svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.aviso-contratar strong { display: block; }

.servicos-titulos { display: none; margin: 0; padding: 0 0 8px; color: var(--suave); font-size: .8125rem; font-weight: 700; border-bottom: 1px solid var(--texto); }
.lista-servicos { display: grid; margin: 0; padding: 0; list-style: none; }
.servico { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--tom); }
.servico-texto { display: grid; gap: 2px; min-width: 0; }
.servico-nome { font-size: 1.0625rem; overflow-wrap: anywhere; }
.servico-vendas { color: var(--suave); font-size: .8125rem; }
.servico-duracao { grid-column: 1; color: var(--suave); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.servico-valor { grid-column: 2; grid-row: 1 / 3; font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tabela-servicos + .exemplo { margin-top: 16px; }
@media (min-width: 640px) {
  .servicos-titulos, .servico { display: grid; grid-template-columns: minmax(0, 1fr) 120px 140px; gap: 16px; }
  .servicos-titulos span:last-child, .servico-valor { text-align: right; }
  .servico-duracao, .servico-valor { grid-column: auto; grid-row: auto; }
  .servico-duracao { font-size: 1rem; color: var(--texto); }
  .so-celular { display: none; }
}

.bloco-travado { background: var(--papel); }
.selo-travado { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--tom); color: var(--texto); font-size: .8125rem; font-weight: 700; }
.form-travado fieldset { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.form-travado label, .travado-rotulo { display: grid; gap: 6px; margin: 0; color: var(--suave); font-size: .875rem; font-weight: 700; }
.form-travado input { width: 100%; min-width: 0; min-height: 48px; padding: 0 12px; background: var(--fundo); border: 1px dashed var(--linha); color: var(--suave); font: inherit; font-size: 1rem; cursor: not-allowed; }
.form-travado input::placeholder { color: var(--suave); }
.travado-profissionais { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.travado-profissionais span { padding: 6px 12px; background: var(--fundo); border: 1px dashed var(--linha); color: var(--suave); font-size: .875rem; }
.travado-lista { display: grid; gap: 8px; margin: 20px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--tom); }
.travado-lista li { display: flex; align-items: center; gap: 10px; }
.travado-lista li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--marca); }

@media (max-width: 600px) {
  .resumo-mes { padding: 14px 16px; font-size: 1rem; }
  .ranking li { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 0 10px; }
  .ranking li::before { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .animar .barra { animation: none; }
}

/* Os 4 números do Analítico: 2 × 2, e 4 lado a lado na tela larga. */
.cartoes-analitico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartoes-analitico .cartao:first-child { grid-column: auto; }
@media (min-width: 1200px) { .cartoes-analitico { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .cartoes-analitico .cartao strong, .cartoes-analitico .cartao:first-child strong { font-size: 1.5rem; }
}

/* Cardápio da demo de pedido (produtos.html): título de cada categoria e o selo de destaque. */
.categoria-admin + .categoria-admin { margin-top: 28px; }
.categoria-titulo { margin: 0 0 10px; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.selo-destaque { width: fit-content; padding: 2px 8px; background: var(--marca); color: var(--sobre-marca); font-size: .75rem; font-weight: 700; }

/* Cardápio do dia (produtos.html, demo de pedido): "Acabou"/"Voltou" por item e "Fechado hoje". */
.cardapio-hoje { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 24px; padding: 16px; background: var(--fundo); border: 1px solid var(--tom); }
.cardapio-hoje.fechado { border-color: var(--texto); }
.cardapio-hoje-titulo { margin: 0; font-weight: 800; }
.cardapio-hoje .exemplo { margin: 4px 0 0; }
.cardapio-hoje .botao[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: #fff; }
.botao-acabou { grid-column: 1 / -1; justify-self: start; min-height: 44px; padding: 0 16px; background: var(--papel); border: 1px solid var(--texto); color: var(--texto); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.botao-acabou[aria-pressed="true"] { background: var(--texto); color: #fff; }
.servico.esgotado .servico-nome, .servico.esgotado .servico-valor { color: var(--suave); text-decoration: line-through; }
.selo-esgotado { width: fit-content; padding: 2px 8px; background: #FDE2E1; color: #7F1D1D; font-size: .75rem; font-weight: 700; }
html:not(.js) .so-js { display: none; }
@media (min-width: 640px) {
  .categoria-admin .servicos-titulos, .categoria-admin .servico { grid-template-columns: minmax(0, 1fr) 120px 140px 96px; }
  .categoria-admin .servicos-titulos span:nth-child(3) { text-align: right; }
  .botao-acabou { grid-column: auto; justify-self: end; }
}
@media (hover: hover) and (pointer: fine) { .botao-acabou:hover { border-color: var(--marca); } }