/* Painel do admin: números, colunas por dia, listas de barras e a tabela das sessões de teste.
   Uma cor por série (ouro profundo #b98a2c, conferido no validador de paleta sobre a laca),
   texto sempre nas cores de texto, grade discreta. Cada seção cabe numa tela (1366×768). */

.slide--painel .cabeca { margin-bottom: clamp(10px, 2vh, 20px); }
.slide--painel .cabeca h2 { font-size: calc(var(--fs-h2) * .82); }

.painel-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(12px, 2.4vh, 26px); }
.painel-topo h1 { margin: 0; }
.painel-periodo { display: flex; gap: 8px; }

/* Números do topo: valor, rótulo e uma nota de uma linha cada. */
.painel-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(14px, 2vw, 30px); border-top: 1px solid var(--ouro-linha); }
.painel-numeros--seis { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: clamp(10px, 2vh, 20px); }
.painel-numero { display: grid; gap: 4px; min-width: 0; padding: clamp(12px, 2.2vh, 24px) 0; border-bottom: 1px solid var(--ouro-linha); }
.painel-numero__valor { font: 500 clamp(24px, 1vw + 1.7vh, 42px)/1.05 Cinzel, serif; color: var(--ouro); }
.painel-numero--compacto .painel-numero__valor { font-size: clamp(19px, .7vw + 1.2vh, 30px); }
.painel-numero__rotulo { font-size: calc(var(--fs-corpo) * .95); color: var(--texto); }
.painel-numero__nota { font-size: calc(var(--fs-corpo) * .82); color: var(--texto-suave); }
.painel-numero--compacto { padding-block: clamp(8px, 1.4vh, 14px); }

/* A grade de cada seção: o gráfico largo à esquerda, as listas ao lado e embaixo. */
.painel-grade { display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.4vh, 26px) clamp(18px, 2.4vw, 36px); align-items: start; }
.painel-bloco { min-width: 0; }
.painel-bloco--largo { grid-row: span 2; }
.painel-grade--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.painel-grade--testes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }

/* Colunas por dia (x-painel.colunas). */
.grafico { margin: 0; }
.grafico__area { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; height: clamp(150px, 26vh, 250px); padding-top: 18px; }
.grafico__eixo-y { position: relative; min-width: 3.4em; font-size: 12px; color: var(--texto-suave); font-variant-numeric: tabular-nums; text-align: right; }
.grafico__eixo-y span { position: absolute; right: 0; bottom: var(--y); transform: translateY(50%); white-space: nowrap; }
.grafico__plot { position: relative; }
.grafico__grade { position: absolute; left: 0; right: 0; bottom: var(--y); height: 1px; background: rgba(232, 196, 106, .12); }
.grafico__grade--base { background: rgba(232, 196, 106, .32); }
.grafico__colunas { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; align-items: end; }
.grafico__coluna { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; outline: none; cursor: default; }
.grafico__coluna i { position: relative; display: block; width: 100%; max-width: 24px; min-height: 0; background: #b98a2c; border-radius: 4px 4px 0 0; transition: background .15s; }
.grafico__coluna:hover i, .grafico__coluna:focus-visible i { background: #d9a948; }
.grafico__coluna:focus-visible { box-shadow: inset 0 0 0 1px var(--ouro); }
.grafico__rotulo { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); font: 600 12px/1 inherit; color: var(--texto); white-space: nowrap; }
.grafico__eixo-x { display: flex; justify-content: space-between; margin: 6px 0 0 calc(3.4em + 10px); font-size: 12px; color: var(--texto-suave); }

/* A dica das colunas (public/js/painel.js). */
.painel-dica { position: fixed; z-index: 80; pointer-events: none; padding: 6px 10px; background: #0b130f; border: 1px solid var(--ouro-linha); color: var(--creme); font-size: 14px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.painel-dica[hidden] { display: none; }

/* Listas de barras (x-painel.barras). */
.barras ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.barras__titulo { margin: 0 0 10px; color: var(--ouro); font-size: var(--fs-mini); }
.barras li { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: calc(var(--fs-corpo) * .88); }
.barras__rotulo { color: var(--texto); }
.barras__trilho { height: 8px; }
.barras__trilho i { display: block; height: 100%; background: #b98a2c; border-radius: 0 4px 4px 0; }
.barras__valor { font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.barras__vazio { margin: 0; font-size: calc(var(--fs-corpo) * .88); }

/* Fatos do guia e o medidor de cota do ElevenLabs. */
.painel-fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 14px 0 0; }
.painel-fatos div { min-width: 0; }
.painel-fatos dt { font: 600 var(--fs-mini)/1.3 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }
.painel-fatos dd { margin: 2px 0 0; color: var(--texto); font-variant-numeric: tabular-nums; }
.painel-medidor { display: block; height: 10px; background: rgba(185, 138, 44, .22); border-radius: 0 5px 5px 0; }
.painel-medidor i { display: block; height: 100%; background: #b98a2c; border-radius: 0 5px 5px 0; }
.painel-medidor__rotulo { margin: 0 0 8px; color: var(--texto); }
.painel-medidor__nota { margin: 8px 0 0; font-size: calc(var(--fs-corpo) * .85); }

/* Tabela das sessões de teste. */
.painel-tabela-caixa { overflow-x: auto; }
.painel-tabela { width: 100%; border-collapse: collapse; font-size: calc(var(--fs-corpo) * .85); font-variant-numeric: tabular-nums; }
.painel-tabela th { padding: 6px 8px; font: 600 var(--fs-mini)/1.3 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); text-align: left; border-bottom: 1px solid var(--ouro-linha); }
.painel-tabela td { padding: 7px 8px; border-bottom: 1px solid rgba(232, 196, 106, .12); color: var(--texto); max-width: 11em; }

/* Só para leitores de tela (a tabela de cada gráfico). */
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1100px) {
    .painel-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .painel-bloco--largo { grid-column: 1 / -1; grid-row: auto; }
    .painel-numeros--seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .painel-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .painel-numeros--seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .painel-grade, .painel-grade--testes, .painel-grade--duas { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .painel-numero__nota { display: none; }
    .grafico__area { height: 140px; }
    .barras li { grid-template-columns: minmax(0, 7em) minmax(0, 1fr) auto; }
    .painel-tabela th:nth-child(n+6), .painel-tabela td:nth-child(n+6) { display: none; }
    .painel-tabela tbody tr:nth-child(n+5), .barras li:nth-child(n+5) { display: none; }
    .painel-bloco--secundario, .painel-niveis, .painel-fatos { display: none; }
}