/* Guti · produção — o que é só do PAINEL de formulação (T-10, R-12, publicação, prévia da retroação).
   Regras comuns ficam em ../producao.css; aqui entra o específico da receita, da linha do tempo
   e do formulário de publicação. Prefixo das classes novas: .painel- */

/* --------------------------------------------------------------------------
   A receita (nível 1): a frase é a primeira linha, não um cabeçalho de tabela
   -------------------------------------------------------------------------- */
.painel-frase { font-size: var(--t3); line-height: 1.45; margin: 0 0 var(--e3); max-width: 60rem; }
.painel-frase strong { font-weight: 600; }
.painel-frase .consequencia { font-weight: 400; color: var(--tinta-2); }
.painel-receita table.proc { margin-top: var(--e3); }
/* D1 · um número principal por linha: aqui é "por batelada" — a coluna que dá nome à tela (a receita
   É quanto entra por batelada). O filtro `grandeza` emite `.num` sem `.principal` (é Python, e está
   registrado no §1 das pendências), então a escala do sistema entra pela coluna, com o mesmo valor
   de `.num.principal`: 17 px o número, 15 px a natureza colada a ele. A tolerância fica em 15. */
.painel-receita table.proc td:nth-child(2) .num { font-size: var(--t3); }
.painel-receita table.proc td:nth-child(2) .num + .nat { font-size: var(--t2); }
.painel-receita .kv { margin-top: var(--e4); }
.painel-receita .kv dd .num { font-size: 1em; }
.painel-receita .kv dt { padding-top: .1em; }

/* --------------------------------------------------------------------------
   A linha do tempo (nível 2): o passado tem dono e não se mexe
   -------------------------------------------------------------------------- */
.painel-antigas { font-size: var(--t0); color: var(--apagado); margin: var(--e2) 0 0; }
.painel-antigas a { white-space: nowrap; }

/* descontinuar é ato raro: fica dobrado, sem parecer perigo (não apaga nada) */
details.painel-dobra { margin-top: var(--e4); color: var(--apagado); font-size: var(--t1); }
details.painel-dobra > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--e2); color: var(--tinta-2); }
details.painel-dobra > summary::-webkit-details-marker { display: none; }
details.painel-dobra > summary::before { content: "+"; font-family: var(--mono); color: var(--apagado-2); width: 1em; }
details.painel-dobra[open] > summary::before { content: "−"; }
details.painel-dobra > summary:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 2px; }
details.painel-dobra > .caixa { margin-top: var(--e4); }   /* D6 · duas distâncias, e --e4 é a de dentro (crítica 2, achado 18) */

/* --------------------------------------------------------------------------
   R-12: a ficha da versão — o lado direito acompanha a rolagem no laptop
   -------------------------------------------------------------------------- */
.painel-lateral { position: sticky; top: var(--e4); }
@media (max-width: 1000px) { .painel-lateral { position: static; } }
.painel-retroacoes > li { padding: var(--e2) 0; }
.painel-retroacoes .corte { display: inline-block; margin-top: var(--e1); }

/* --------------------------------------------------------------------------
   Publicar (mudar / novo): blocos com legenda e a grade de itens com cabeçalho
   -------------------------------------------------------------------------- */
form.linha fieldset.painel-bloco { border: 1px solid var(--linha); border-radius: var(--r2); padding: var(--e2) var(--e4) var(--e4); margin: var(--e1) 0 0; }
form.linha fieldset.painel-bloco > legend { padding: 0 var(--e2); margin-bottom: 0; }   /* o estilo do legend é o do sistema */
form.linha fieldset.painel-bloco > .nota { display: block; margin: 0 0 var(--e3); }
form.linha fieldset.painel-bloco > .nota:last-child { margin: var(--e3) 0 0; }
form.linha fieldset.painel-bloco .grade { margin-top: var(--e2); }

/* a grade de itens: uma linha por insumo, colunas alinhadas, cabeçalho em rótulo */
.painel-itens { display: grid; gap: var(--e2); margin-top: var(--e2); }
.painel-itens .painel-cabecalho, .painel-itens .painel-item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--e2); align-items: center; }
.painel-itens.tres .painel-cabecalho, .painel-itens.tres .painel-item { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.painel-itens.dois .painel-cabecalho, .painel-itens.dois .painel-item { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.painel-itens .painel-cabecalho > span { font-size: var(--t-1); text-transform: uppercase; letter-spacing: .06em; color: var(--apagado); padding-bottom: var(--e1); border-bottom: 1px solid var(--linha-suave); }
.painel-itens .painel-item > input, .painel-itens .painel-item > select { font-size: var(--t1); padding: .35rem .5rem; }
.painel-itens .painel-item > select { padding-right: 1.7rem; }
.painel-itens .painel-mais { justify-self: start; margin-top: var(--e1); }
@media (max-width: 600px) {
  .painel-itens .painel-cabecalho { display: none; }
  .painel-itens .painel-item, .painel-itens.tres .painel-item, .painel-itens.dois .painel-item { grid-template-columns: 1fr 1fr; padding: var(--e2) 0; border-top: 1px solid var(--linha-suave); }
  .painel-itens .painel-item > :first-child { grid-column: 1 / -1; }
}

/* opções em linha (formatos, liberação): caixa de marcar com a palavra ao lado */
.painel-opcoes { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: center; margin-top: var(--e2); }
form.linha label.painel-opcao { flex-direction: row; align-items: center; gap: var(--e2); color: var(--tinta); font-size: var(--t1); }
form.linha label.painel-opcao > input[type="text"], form.linha label.painel-opcao > input:not([type]) { width: 14rem; font-size: var(--t1); padding: .3rem .5rem; }
form.linha label.painel-opcao > .nota { font-size: var(--t0); }

/* a faixa da retroação: quando a data vai para o passado, a tela muda — é ato, não campo */
#faixa { margin-top: 0; }
#faixa.retroagindo { border-left-color: var(--erro); background: var(--erro-suave); color: var(--erro-tinta); }
form.linha label#retro:not([hidden]) { padding: var(--e2) var(--e3) var(--e3); border-left: 3px solid var(--erro); background: var(--erro-suave); color: var(--erro-tinta); border-radius: 0 var(--r1) var(--r1) 0; }

/* --------------------------------------------------------------------------
   A prévia da retroação: a lista que precisa ter sido exibida
   -------------------------------------------------------------------------- */
.painel-previa .card { margin-bottom: var(--e3); }
.painel-previa .card > .card-titulo { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); align-items: baseline; margin-bottom: var(--e2); }
.painel-previa table.proc td.n { white-space: nowrap; }
.painel-previa tr.painel-muda td { background: var(--alerta-suave); }
.painel-previa tr.painel-muda .sub.muda { color: var(--alerta-tinta); }
.painel-previa .painel-encolhem { margin: 0 0 var(--e3); }
.painel-confirmar .acoes-form { padding-top: var(--e1); }

/* --------------------------------------------------------------------------
   Impressão: R-12 sai como ficha; a lateral volta para baixo
   -------------------------------------------------------------------------- */
@media print {
  .painel-lateral { position: static; }
  details.painel-dobra { display: none; }
  .painel-previa tr.painel-muda td { background: #fff; }
  .painel-previa tr.painel-muda td:first-child::before { content: "(muda) "; font-weight: 600; }
}