/* Painel (folha de abertura, v2): cabeçalho compacto, chips de sinal e a grade de
   oito cartões: quatro por linha no desktop, três até 1279, dois até 1023, um no celular. */
/* cabeçalho de uma linha: no notebook (1366×768) o primeiro cartão tem de começar antes de 240px */
.painel__cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3) var(--s-6); align-items: end; padding: var(--s-4) 0 var(--s-3); border-bottom: 1px solid var(--rule); }
.painel__quem { display: grid; gap: var(--s-2); min-width: 0; }
.painel__nome { font-size: var(--fs-28); line-height: var(--lh-28); }
.painel__manchete { font-size: var(--fs-19); line-height: var(--lh-19); color: var(--ink); max-width: 60ch; margin-top: var(--s-2); }
.painel__numero { display: grid; gap: var(--s-1); justify-items: end; text-align: right; }
.painel__numero .fh-etiqueta__numero { color: var(--gold-text); }
.painel__numero-linha { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: var(--s-2) var(--s-3); }
.painel__sinais { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0 0; }
.painel__sinal { max-width: 100%; white-space: normal; text-decoration: none; }
/* grade de 12 colunas: 4 cartões por linha; com 7 (o caso comum) a segunda fileira fecha com 3 mais largos, sem buraco */
.painel__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.painel__grade > .fh-cartao { grid-column: span 3; } /* a fileira mantém a linha de base comum; o vazio se resolve com conteúdo (linha do líder, da cobertura), não com altura solta */
.painel__cartao .fh-cartao__grafico .area { fill-opacity: 0.05; } /* a área sob a linha, mais leve: a 0,08 lia como bloco de carregamento no cartão */
.painel__grade[data-n="7"] > .fh-cartao:nth-child(n + 5), .painel__grade[data-n="6"] > .fh-cartao, .painel__grade[data-n="3"] > .fh-cartao { grid-column: span 4; }
.painel__grade[data-n="5"] > .fh-cartao:nth-child(n + 4), .painel__grade[data-n="2"] > .fh-cartao { grid-column: span 6; }
.painel__grade[data-n="1"] > .fh-cartao { grid-column: span 12; }
/* ranking dentro do cartão: rótulo numa linha só (reticências), trilho curto, valor e peso à direita */
.painel__cartao .fh-ranking { display: grid; gap: var(--s-2); }
.painel__cartao .fh-ranking__item, .painel__cartao .fh-ranking__link { display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem auto; gap: var(--s-2); align-items: center; padding: 4px 0; border-top: 1px solid var(--rule-soft); font-size: var(--fs-12); }
/* Quando a linha e um link, a grade mora no <a> e o <li> so guarda o filete: sem isto a coluna
   do rotulo desabava para ~45px e partia a palavra no meio da silaba ("CAPE / X"). */
.painel__cartao .fh-ranking__item--link { display: block; padding: 0; }
.painel__cartao .fh-ranking__item--link .fh-ranking__link { border-top: 0; text-decoration: none; }
.painel__cartao .fh-ranking__item--link:hover .fh-ranking__label { text-decoration: underline; }
.painel__unidade { display: block; margin-top: var(--s-1); }
.painel__cartao .fh-ranking__item:first-child { border-top: 0; }
.painel__cartao .fh-ranking__label { white-space: normal; overflow-wrap: break-word; line-height: 1.25; color: var(--ink); } /* o rótulo do ERP quebra na palavra, nunca no meio dela (anywhere encolhia a coluna e partia sílabas) nem em reticências */
.painel__cartao .fh-ranking__label .fh-ranking__sub { display: none; }
.painel__cartao .fh-ranking__val { color: var(--ink-strong); font-weight: var(--fw-semibold); white-space: nowrap; }
.painel__cartao .fh-ranking__pct { color: var(--ink-soft); white-space: nowrap; min-width: 3ch; text-align: right; }
.painel__legenda { margin-top: var(--s-2); }
.painel__vendas { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: center; }
.painel__vendas > svg, .painel__rosca > svg { width: 96px; height: 96px; } /* a rosca ganhou um invólucro (a leitura no ponteiro mora nele) e continua do mesmo tamanho */
.painel__mix { display: grid; gap: 4px; font-size: var(--fs-12); color: var(--ink); }
.painel__mix li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; }
.painel__mix-nome { overflow-wrap: break-word; line-height: 1.25; } /* nome do item verbatim, quebrado na palavra em duas linhas se preciso */
.painel__ticket { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--rule-soft); }
.painel__ticket-valor { font-weight: var(--fw-bold); color: var(--ink-strong); }
.painel__faixa-rotulos { margin-top: var(--s-2); }
/* No celular o cartão fica estreito e os dois fatos da régua ("caixa hoje" e "reserva") encostam
   um no outro e leem como uma frase só; empilhados, cada um volta a ser um fato. */
@media (max-width: 599px) { .painel__faixa-rotulos { display: grid; gap: 2px; } }
.painel__cartao--capital .capital__faixa { margin: var(--s-4) 0 var(--s-1); }
.painel__cartao--pendencias .pend__buckets { margin-top: 0; }
.painel__cartao--pendencias .pend__bucket-coluna { height: 72px; }
@media (max-width: 1279px) {
  .painel__grade > .fh-cartao, .painel__grade[data-n] > .fh-cartao { grid-column: span 4; }
  .painel__grade[data-n="7"] > .fh-cartao:nth-child(n + 4), .painel__grade[data-n="8"] > .fh-cartao:nth-child(n + 7), .painel__grade[data-n="5"] > .fh-cartao:nth-child(n + 4), .painel__grade[data-n="4"] > .fh-cartao, .painel__grade[data-n="2"] > .fh-cartao { grid-column: span 6; }
}
@media (max-width: 1023px) { .painel__grade > .fh-cartao, .painel__grade[data-n] > .fh-cartao { grid-column: span 6; } .painel__grade[data-n="7"] > .fh-cartao:last-child, .painel__grade[data-n="5"] > .fh-cartao:last-child, .painel__grade[data-n="3"] > .fh-cartao:last-child { grid-column: span 12; } .painel__cabeca { grid-template-columns: minmax(0, 1fr); } .painel__numero { justify-items: start; text-align: left; } .painel__numero-linha { justify-content: flex-start; } }
/* :nth-child(n) só para vencer a especificidade das regras de 1279/1023 acima: no celular é sempre uma coluna */
@media (max-width: 599px) { .painel__grade[data-n] > .fh-cartao:nth-child(n) { grid-column: span 12; } .painel__vendas { grid-template-columns: minmax(0, 1fr); justify-items: start; } } /* no celular a rosca fica acima da legenda: ao lado, a coluna do nome ficava mais estreita que a palavra mais longa do rótulo */