/* menuchef-admin/estilo/componentes.css — as peças do painel. */
.topo { display: flex; align-items: center; gap: 12px; padding: 14px var(--margem); }
.topo-logo { width: 36px; height: 36px; }
.topo-titulo { font-weight: 800; font-size: 1.125rem; }
.topo .botao-texto { margin-left: auto; }

.filtros {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 10px var(--margem);
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}
.filtros-resumo { font-weight: 600; flex: 1 1 100%; }
.filtros label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-detalhe); }
.filtros input[type="date"], .filtros select, .campo {
  padding: 6px 10px; border: 1px solid var(--contorno); border-radius: var(--raio-campo); background: var(--superficie);
}
.chips { display: inline-flex; gap: 6px; }
.chip { padding: 5px 12px; border: 1px solid var(--linha); border-radius: var(--raio-chip); background: var(--superficie); cursor: pointer; }
.chip:hover { border-color: var(--contorno); }
.chip[aria-pressed="true"] { background: var(--escolhido); color: var(--sobre-escolhido); border-color: var(--escolhido); font-weight: 600; }

.abas {
  display: flex; gap: 4px; padding: 8px var(--margem); overflow-x: auto;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--margem);
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.aba { padding: 8px 16px; border: 0; border-radius: var(--raio-chip); background: transparent; cursor: pointer; font-weight: 600; white-space: nowrap; scroll-snap-align: start; }

/* Pista de rolagem: a borda esmaece SÓ enquanto a faixa transborda. A animação presa à rolagem da própria
   faixa só fica ativa quando há o que rolar; sem transbordo, as bordas valem 0 e não há máscara visível.
   Esquerda aparece depois de rolar; direita some no fim. Sem suporte (Firefox hoje), fica sem esmaecer. */
@property --abas-esq { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --abas-dir { syntax: "<length>"; inherits: false; initial-value: 0px; }
@supports (animation-timeline: scroll()) {
  .abas {
    -webkit-mask-image: linear-gradient(to right, transparent, currentColor var(--abas-esq), currentColor calc(100% - var(--abas-dir)), transparent);
    mask-image: linear-gradient(to right, transparent, currentColor var(--abas-esq), currentColor calc(100% - var(--abas-dir)), transparent);
    animation: abas-borda linear both;
    animation-timeline: scroll(self inline);
  }
  @keyframes abas-borda {
    0% { --abas-esq: 0px; --abas-dir: 56px; }
    12% { --abas-esq: 56px; }
    88% { --abas-dir: 56px; }
    100% { --abas-esq: 56px; --abas-dir: 0px; }
  }
}
.aba:hover { background: var(--fundo-suave); }
.aba[aria-selected="true"] { background: var(--fundo-suave); }

.conteudo { padding: 8px var(--margem) 48px; max-width: 1440px; margin: 0 auto; }
.resposta { display: grid; gap: 4px; margin: 8px 0 20px; }
.resposta-numero { font-size: var(--t-numero); line-height: 1.1; }
.resposta-frase { font-size: var(--t-resposta); font-weight: 600; line-height: 1.25; }

.alertas { display: grid; gap: 8px; margin-bottom: 16px; }
.alerta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; padding: 10px 14px; border-radius: var(--raio-campo); background: var(--superficie); border: 2px solid var(--tom-atencao); }
.alerta-ruim { border-color: var(--tom-ruim); }

.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--vao); align-items: start; } /* o cartão só com a nota não estica até o vizinho */
.grade > .bloco { grid-column: span 6; }
.grade > .bloco.largo { grid-column: span 12; }
@media (max-width: 900px) { .grade > .bloco, .grade > .bloco.largo { grid-column: span 12; } }

.bloco { background: var(--superficie); border: var(--linha-cartao); border-radius: var(--raio-cartao); padding: 18px 20px; min-width: 0; }
.bloco-titulo { font-size: var(--t-kick); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--texto-2); margin-bottom: 10px; }
.bloco-corpo { display: grid; gap: 8px; }
.destaque { font-size: var(--t-numero); line-height: 1.1; letter-spacing: -0.01em; }
.linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 4px 0; border-bottom: 1px solid var(--linha); }
.linha:last-child { border-bottom: 0; }
.bloco-rodape { margin-top: 12px; display: grid; gap: 8px; }
.bloco-acoes { display: flex; flex-wrap: wrap; gap: 8px 18px; }

.estado { color: var(--texto-2); }
.estado-erro { display: grid; gap: 10px; justify-items: start; color: var(--texto); }
.estado-pouca_amostra { display: inline-block; justify-self: start; font-size: var(--t-detalhe); font-weight: 600; color: var(--texto-2); padding: 1px 8px; border-radius: var(--raio-chip); background: var(--fundo-suave); }
.esqueleto-barra { display: block; height: 14px; margin: 6px 0; border-radius: 7px; background: var(--fundo-suave); animation: pulsar 1.2s ease-in-out infinite alternate; }
.esqueleto-barra.curta { width: 60%; }
@keyframes pulsar { from { opacity: 0.5; } to { opacity: 1; } }

/* selo: a palavra fica na cor do texto (milho e tomate não passam 4,5:1 como texto); o tom vai no ícone e no contorno */
.selo { --tom: var(--tom-neutro); display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border: 1.5px solid var(--tom); border-radius: var(--raio-chip); background: color-mix(in srgb, var(--tom) 12%, transparent); color: var(--texto); font-size: var(--t-detalhe); font-weight: 600; line-height: 1.4; }
.selo .icone { color: var(--tom); }
.icone { width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat; }
.selo-bom { --tom: var(--tom-bom); }
.selo-atencao { --tom: var(--tom-atencao); }
.selo-ruim { --tom: var(--tom-ruim); }
.selo-neutro { --tom: var(--tom-neutro); }
.icone-bom { --icone: url("data:image/svg+xml;utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.2 11.6 2.6 8l1.4-1.4 2.2 2.2 5.8-5.8L13.4 4.4z'/%3E%3C/svg%3E"); }
.icone-atencao { --icone: url("data:image/svg+xml;utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8 1 15 14H1zM7 6v4h2V6zm0 5v2h2v-2z'/%3E%3C/svg%3E"); }
.icone-ruim { --icone: url("data:image/svg+xml;utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4.2 2.8 8 6.6l3.8-3.8 1.4 1.4L9.4 8l3.8 3.8-1.4 1.4L8 9.4l-3.8 3.8-1.4-1.4L6.6 8 2.8 4.2z'/%3E%3C/svg%3E"); }
.icone-neutro { --icone: url("data:image/svg+xml;utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle fill='black' cx='8' cy='8' r='4'/%3E%3C/svg%3E"); }

.botao, .botao-sec, .botao-texto { cursor: pointer; border-radius: var(--raio-campo); font-weight: 700; transition: transform 120ms ease; }
.botao:active, .botao-sec:active { transform: translateY(1px); }
.botao { padding: 10px 18px; border: 2px solid var(--contorno); background: var(--escolhido); color: var(--sobre-escolhido); }
.botao-sec { padding: 8px 14px; border: 2px solid var(--contorno); background: var(--superficie); }
.botao-texto { padding: 0; border: 0; background: none; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.botao[disabled] { opacity: 0.6; cursor: progress; }

.acesso { max-width: 440px; margin: 10vh auto; padding: 0 var(--margem); display: grid; gap: 14px; }
.acesso .formulario { display: grid; gap: 10px; }
.acesso .campo { font-size: 1.125rem; }
.acesso .qr { width: 200px; height: 200px; background: var(--mc-cartao); border: var(--linha-cartao); border-radius: 16px; padding: 8px; }
.codigo { font-family: var(--fonte-numero); letter-spacing: 0.08em; word-break: break-all; }
.aviso { padding: 12px 14px; border-radius: 14px; background: var(--fundo-suave); }

.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-detalhe); }
.tabela th, .tabela td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--linha); }
.tabela th { color: var(--texto-2); font-weight: 700; }
@media (max-width: 600px) {
  .tabela thead { display: none; }
  .tabela tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--linha); }
  .tabela td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 2px 0; }
  .tabela td { text-align: right; overflow-wrap: anywhere; }
  .tabela td::before { content: attr(data-rotulo); color: var(--texto-2); text-align: left; }
}

.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* a coluna do número tem largura fixa: os trilhos ficam do mesmo tamanho e a barra compara de verdade */
.barras-linha { display: grid; grid-template-columns: minmax(90px, 30%) 1fr 6ch; align-items: center; gap: 10px; }
.barras-linha > .num { text-align: right; }
.barras-trilho { height: 12px; border-radius: 6px; background: var(--fundo-suave); overflow: hidden; display: flex; }
.barras-barra { height: 100%; width: calc(var(--p, 0) * 1%); }
.cor-mar { background: var(--serie-mar); }
.cor-abobora { background: var(--serie-abobora); }
.cor-berinjela { background: var(--serie-berinjela); }
.cor-couve { background: var(--serie-couve); }
.cor-cacau { background: var(--serie-cacau); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0; font-size: var(--t-detalhe); }
.legenda li { display: inline-flex; align-items: center; gap: 6px; }
.legenda .amostra { width: 10px; height: 10px; border-radius: 3px; }
.grafico-linha { width: 100%; min-height: 220px; }
/* uPlot: a legenda e os eixos com as fontes da casa (os eixos do canvas recebem a fonte por opção, na Task 13b) */
.uplot { font-family: var(--fonte-texto); max-width: 100%; }
.uplot .u-legend { font-size: var(--t-detalhe); color: var(--texto-2); }
.uplot .u-value { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; }
.u-select { background: var(--fundo-suave); }
.form-decisao { display: grid; gap: 10px; max-width: 520px; }
.form-decisao label { display: grid; gap: 4px; font-size: var(--t-detalhe); }
.bloco-corpo > .selo { justify-self: start; }
.detalhe, .nota { font-size: var(--t-detalhe); color: var(--texto-2); }
.capa-data { margin: -12px 0 20px; }
/* Task 13b: legenda acima do gráfico e das empilhadas; o formulário da decisão sem <form> */
.empilhadas { display: grid; gap: 10px; }
.bloco > .legenda { margin-bottom: 8px; }
.form-decisao > label { font-size: var(--t-detalhe); font-weight: 600; margin-top: 4px; }
.form-decisao > .botao { justify-self: start; }
.form-decisao textarea { resize: vertical; }