/* Elo: o que as telas da F1 precisam além dos componentes (entrada, formulário na gaveta, abas de página, quadro de chave e valor,
   relatório para imprimir). Só tokens: cor solta aqui é defeito. Conferido pelo scripts/cacoetes_css.cjs (sem sombra de cartão,
   sem caixa alta, sem letra espaçada, sem serifa, sem creme). */

/* ───────────── entrada (login) e troca da senha inicial: a única tela sem trilho ───────────── */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: var(--e-5) var(--e-3); }
.entrada-caixa { width: min(420px, 100%); background: var(--folha); border: 1px solid var(--regua); box-shadow: inset 0 var(--enfase) 0 var(--azul); padding: var(--e-5); display: grid; gap: var(--e-4); }
.entrada-marca { display: flex; align-items: center; gap: var(--e-2); color: var(--tinta); }
.entrada-marca .marca-simbolo { width: 28px; height: 28px; }
.entrada-marca .marca-elo { font: var(--peso-titulo) var(--t-4)/1 var(--fonte); }
.entrada-marca .meta { margin-left: auto; }
.entrada form { display: grid; gap: var(--e-3); }
.entrada .botao--principal { width: 100%; min-height: var(--toque); }

/* o conteúdo recebe o foco a cada tela aberta (leitor de tela começa dali); o anel em volta da tela inteira não ajuda quem enxerga */
.conteudo:focus, .conteudo:focus-visible { outline: none; box-shadow: none; }

/* ───────────── formulário (gaveta e tela) ───────────── */
.form-grade { display: grid; gap: var(--e-3); }
.form-grade .campo--marcar label { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: var(--peso-corpo); }
.form-grade .campo--marcar input { width: 20px; height: 20px; min-height: 0; }
.form-explica { display: grid; gap: var(--e-2); padding: var(--e-3); background: var(--zebra); border: 1px solid var(--regua); }
.form-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); margin-top: var(--e-2); }
.erro-campo { color: var(--erro-cor); font-size: var(--t-1); line-height: var(--l-1); }
.erro-geral { padding: var(--e-2) var(--e-3); border: 1px solid var(--erro-cor); background: var(--folha); color: var(--erro-cor); }

/* ───────────── abas que trocam de página (Preços, Estoque, Ajuda) e botões de filtro marcáveis ───────────── */
.abas-pagina { margin-top: 0; margin-bottom: var(--e-4); }
.filtro-novo[aria-pressed="true"] { border-style: solid; border-color: var(--azul); background: var(--azul-selecao); }
.filtro-novo .n { color: var(--grafite); font-weight: var(--peso-corpo); }

/* ───────────── quadro de chave e valor, notas e linhas de número ───────────── */
.quadro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); border: 1px solid var(--regua); background: var(--folha); }
.quadro > div { padding: var(--e-3) var(--e-4); border-left: 1px solid var(--regua); display: grid; gap: 2px; align-content: start; min-width: 0; }
.quadro > div:first-child { border-left: 0; }
.quadro .valor { font: var(--peso-titulo) var(--t-4)/var(--l-4) var(--fonte); }
.nota { color: var(--grafite); font-size: var(--t-1); line-height: var(--l-1); max-width: var(--medida); }
.texto-tela { max-width: var(--medida); display: grid; gap: var(--e-2); }
/* só a lista de texto (sem classe): lista de componente dentro do texto (os dias do portão) guarda o desenho dela */
.texto-tela :is(ul, ol):not([class]) { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--e-1); }
.lista-simples li > .lista-texto { min-width: 0; padding: 6px 0; }
.lista-simples a.lista-link { color: inherit; text-decoration: none; display: contents; }
.lista-simples li.alarme { box-shadow: inset var(--enfase) 0 0 var(--vermelho); }
.lista-simples li.atencao { box-shadow: inset var(--enfase) 0 0 var(--atencao); }
.tabela-rolagem + .tabela-pe { margin-top: 0; }
.botoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.elo .tabela td.acoes { white-space: nowrap; text-align: right; }
.elo .tabela td.quebra-texto .l2 { white-space: normal; } /* a segunda linha de uma célula que quebra também quebra (a nota do ML saía cortada à direita) */
.elo .tabela td.nome > .com-selo { display: inline-flex; -webkit-line-clamp: unset; overflow: visible; } /* selo e nome lado a lado, com respiro */
.elo .tabela td.quebra-texto { white-space: normal; min-width: 14rem; }
.elo .tabela td.quebra-texto.curta { min-width: 9rem; } /* texto curto que quebra (o ritmo das rotinas): com a pausa longa na Situação, a tabela passava 5 px no computador */
.elo .tabela td.erro-texto { white-space: normal; color: var(--erro-cor); min-width: 12rem; }
.taxa-boa { color: var(--no-ar); font-weight: var(--peso-titulo); }
.taxa-baixa { color: var(--erro-cor); font-weight: var(--peso-titulo); }
.alarme-bloco { display: grid; gap: var(--e-1); padding: var(--e-3) var(--e-4) var(--e-3) calc(var(--e-4) + 2px); background: var(--folha); border: 1px solid var(--regua); box-shadow: inset var(--enfase) 0 0 var(--atencao); }
.alarme-bloco[data-nivel="grave"] { box-shadow: inset var(--enfase) 0 0 var(--vermelho); }
.alarme-bloco .alarme-texto { font-weight: var(--peso-titulo); }
.alarme-bloco + .alarme-bloco { margin-top: var(--e-2); }

/* ───────────── simulação de preço antes de aplicar ───────────── */
.simulacao { display: grid; gap: var(--e-3); }
.simulacao .quadro .valor.sobe { color: var(--erro-cor); }

/* ───────────── sombra: os dias do portão e a igualdade por dia ───────────── */
.portao-dias { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.portao-dias li { display: grid; place-items: center; min-width: 52px; min-height: var(--toque); padding: 0 6px; border: 1px solid var(--regua-forte); background: var(--folha); color: var(--grafite); font-size: var(--t-1); }
.portao-dias li.bom { background: var(--ok-suave); border-color: var(--ok); color: var(--texto); }
.portao-dias li.ruim { background: var(--erro-suave); border-color: var(--erro); color: var(--texto); }
.taxas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--e-4); }
.taxas h3 { margin-bottom: var(--e-2); }
.taxa-grafico svg { display: block; width: 100%; height: auto; max-height: 120px; overflow: visible; }
.taxa-grafico .linha-taxa { fill: none; stroke: var(--azul); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.taxa-grafico .linha-portao { stroke: var(--grafite); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.taxa-grafico .ponto { fill: var(--azul); }
.taxa-grafico .ponto.abaixo { fill: var(--erro-cor); }
.link-botao { background: none; border: 0; padding: 2px 0; color: var(--azul); font: inherit; text-align: left; cursor: pointer; }
.link-botao:hover { text-decoration: underline; }
.link-botao[aria-pressed="true"] { color: var(--texto); font-weight: var(--peso-titulo); text-decoration: underline; }
.tela details > summary { display: inline-flex; align-items: center; gap: 4px; color: var(--azul); font-size: var(--t-1); cursor: pointer; list-style: none; }
.tela details > summary::-webkit-details-marker { display: none; }
.tela details[open] > summary .icone { rotate: 90deg; }

/* ───────────── ajuda: a lista do manual, cada linha inteira é o link (título e o que a tela é) */
.lista-ajuda li > a { display: grid; gap: 2px; width: 100%; min-height: var(--toque); padding: var(--e-2) 0; text-decoration: none; }
.lista-ajuda-titulo { color: var(--azul); font-weight: var(--peso-rotulo); }
.lista-ajuda li > a:hover .lista-ajuda-titulo { text-decoration: underline; }

/* ───────────── relatório da sombra (folha para imprimir ou salvar em PDF) ───────────── */
.relatorio { max-width: 210mm; margin: 0 auto; padding: var(--e-5); background: var(--folha); border: 1px solid var(--regua); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
/* no celular a tabela rola dentro dela, a folha não empurra a página; impressa, sai inteira */
.relatorio-rola { overflow-x: auto; }
.relatorio h1 { font-size: var(--t-5); }
.relatorio table { width: 100%; border-collapse: collapse; }
.relatorio th, .relatorio td { padding: 6px 8px; border-bottom: 1px solid var(--regua); text-align: left; font-size: var(--t-1); }
.relatorio td.num, .relatorio th.num { text-align: right; }
@media print {
  .relatorio { border: 0; padding: 0; max-width: none; }
  .relatorio-rola { overflow: visible; }
  .cabeca, .voltar { display: none !important; }
}

@media (max-width: 720px) {
  .entrada { place-items: start center; padding-top: var(--e-6); }
  .entrada-caixa { padding: var(--e-4); }
  .quadro > div { border-left: 0; border-top: 1px solid var(--regua); }
  .quadro > div:first-child { border-top: 0; }
  .form-acoes .botao { flex: 1 1 0; }
  .relatorio { padding: var(--e-3); }
  .link-botao, .tela details > summary { min-height: var(--toque); min-width: var(--toque); }
}