/* Etapa 9A — ordem de entrada e catálogo. Tema e componentes do app; nada aqui pode forçar
   rolagem horizontal em 390px e todo alvo de toque tem pelo menos 44px. */
.cat-pagina{max-width:1200px;margin:auto;padding:0 40px 56px}
.cat-voltar{display:inline-block;margin:8px 0 14px;color:var(--poeira);text-decoration:none;min-height:44px;line-height:44px}
.cat-voltar:hover{color:var(--ouro)}
.cat-cabecalho{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.cat-cabecalho h1{font-size:2rem;margin:2px 0 6px;overflow-wrap:anywhere}
.cat-contexto{color:var(--poeira);margin:0;overflow-wrap:anywhere}
.cat-selo{flex:0 0 auto;font-size:.8125rem;padding:8px 14px;border-radius:999px;border:1px solid var(--c-bd-ffffff22,#ffffff22);color:var(--poeira);white-space:nowrap}
.cat-selo-alerta{border-color:var(--c-bd-f2a90066,#f2a90066);color:var(--c-tx-ffc94d,#ffc94d);background:var(--c-bg-231c0d,#231c0d)}

.cat-aviso-faixa{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--c-bg-231c0d,#231c0d);border:1px solid var(--c-bd-f2a90066,#f2a90066);border-radius:12px;padding:12px 16px;margin-bottom:16px}
.cat-aviso-faixa .icon{flex:0 0 auto;width:18px;height:18px;color:var(--c-tx-ffc94d,#ffc94d)}
.cat-aviso-faixa span{flex:1 1 240px;font-size:.9375rem;overflow-wrap:anywhere}

.cat-barra{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.cat-barra .btn{margin:0;min-height:44px}
.cat-busca{flex:1 1 260px;min-width:0}
.cat-busca input{width:100%;min-height:44px}
.cat-nota{color:var(--poeira);font-size:.8125rem;margin:0 0 18px;overflow-wrap:anywhere}

.cat-lista{list-style:none;margin:0 0 20px;padding:0 0 8px;display:grid;gap:8px}
.cat-item{display:flex;gap:12px;align-items:center;background:var(--curral,var(--c-bg-1B1D1A,#1B1D1A));border:1px solid var(--c-bd-353B33,#353B33);border-radius:12px;padding:12px 14px;min-width:0}
.cat-item.cat-arrastando{opacity:.5;border-color:var(--ouro)}
.cat-alca{flex:0 0 auto;color:var(--poeira);cursor:grab}
.cat-alca .icon{width:18px;height:18px}
.cat-pos{flex:0 0 auto;min-width:34px;text-align:center;font-weight:700;color:var(--ouro);font-variant-numeric:tabular-nums}
.cat-corpo{flex:1 1 auto;min-width:0}
.cat-topo{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cat-codigo{font-size:1.0625rem;letter-spacing:.02em}
.cat-linha{margin:4px 0 0;font-size:.9375rem;overflow-wrap:anywhere}
.cat-sub{color:var(--poeira);font-size:.875rem}
.cat-acoes-item{display:flex;gap:6px;flex:0 0 auto}
.cat-acoes-item button{min-width:44px;min-height:44px;border-radius:10px;border:1px solid var(--c-bd-ffffff22,#ffffff22);background:var(--c-bg-141414,#141414);color:var(--giz);font-size:1.0625rem;cursor:pointer}
.cat-acoes-item button:hover:not([disabled]){border-color:var(--ouro);color:var(--ouro)}
.cat-acoes-item button[disabled]{opacity:.35;cursor:default}
.cat-vazio{display:flex;gap:10px;align-items:center;color:var(--poeira);padding:18px;border:1px dashed var(--c-bd-ffffff22,#ffffff22);border-radius:12px}

/* a barra fica ao alcance sem cobrir o último lote: fundo sólido e a lista reserva o espaço
   dela logo abaixo (ver `.cat-lista` e a media query do celular) */
.cat-rodape{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;align-items:flex-end;
  position:sticky;bottom:0;z-index:2;background:var(--noite,var(--c-bg-0b0b0b,#0b0b0b));border-top:1px solid var(--c-bd-ffffff14,#ffffff14);
  padding:14px 0 12px;margin-top:8px}
.cat-acoes{display:flex;gap:10px;flex-wrap:wrap}
.cat-acoes .btn{margin:0;min-height:44px}
.cat-export{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cat-export label{font-size:.8125rem;color:var(--poeira)}
.cat-export select{min-height:44px;max-width:280px}
.cat-export .btn{margin:0;min-height:44px}
.cat-check{display:flex;gap:8px;align-items:center;min-height:44px;color:var(--giz);font-size:.875rem}

.cat-previa-tabela{overflow-x:auto;margin:12px 0}
.cat-previa-tabela table{width:100%;border-collapse:collapse;font-size:.875rem;min-width:520px}
.cat-previa-tabela th,.cat-previa-tabela td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--c-bd-ffffff14,#ffffff14);white-space:nowrap}
.cat-previa-tabela th{color:var(--ouro);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.cat-resumo-previa{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0;padding-top:12px;border-top:1px solid var(--c-bd-ffffff14,#ffffff14)}
.cat-resumo-previa div{display:flex;flex-direction:column;color:var(--poeira);font-size:.8125rem}
.cat-resumo-previa span{font-size:1.5rem;font-weight:700;color:var(--ouro);line-height:1.1}
.cat-aviso{color:var(--c-tx-ffc94d,#ffc94d);font-size:.875rem;margin:6px 0}
dialog#dlgCatalogoPrevia{width:min(94vw,720px);max-height:88vh;overflow:auto}

@media (max-width:760px){
  .cat-pagina{padding:0 20px 40px}
  .cat-cabecalho h1{font-size:1.5rem}
  .cat-item{flex-wrap:wrap;gap:8px}
  .cat-corpo{flex:1 1 100%;order:3}
  .cat-acoes-item{order:2;margin-left:auto}
  .cat-alca{display:none}          /* no celular a ordem é por botões, não por arrastar */
  /* no celular o rodapé inteiro grudado ocuparia mais de 400px e esconderia a lista atrás dele.
     `display:contents` solta os dois blocos no fluxo da página: só as ações ficam grudadas —
     duas linhas de botão, sempre ao alcance — e a exportação volta a ser um bloco comum no fim. */
  .cat-rodape{display:contents}
  .cat-acoes{position:sticky;bottom:0;z-index:2;gap:8px;margin-top:10px;padding:10px 0 12px;
    background:var(--noite,var(--c-bg-0b0b0b,#0b0b0b));border-top:1px solid var(--c-bd-ffffff14,#ffffff14)}
  /* `width:auto` vence o `width:100%` que o tema dá aos botões no celular — sem isso cada
     botão ocuparia uma linha e a barra voltaria a ficar alta */
  .cat-acoes .btn{flex:1 1 calc(50% - 4px);width:auto;min-width:0;padding-left:10px;padding-right:10px;
    font-size:.8125rem}
  .cat-acoes .btn:last-child{flex:1 1 100%}
  .cat-lista{padding-bottom:6px}
  .cat-export{width:100%;margin-top:16px}
  .cat-export .btn{flex:1 1 100%}
  .cat-export select{max-width:none;width:100%}
  dialog#dlgCatalogoPrevia{width:calc(100vw - 24px)}
}

/* até 600px o app mantém a navegação inferior fixa (.mobile-nav, 68px + área segura). A barra
   de ações precisa parar logo acima dela: grudada em bottom:0 o "Pré-visualizar" some atrás
   da navegação. */
@media (max-width:600px){
  .cat-acoes{bottom:calc(68px + env(safe-area-inset-bottom))}
}

/* de 361px para cima os dois rótulos cabem inteiros em meia linha; abaixo disso deixamos quebrar,
   porque cortar "Descartar alterações" no meio some com a palavra sem nenhum aviso */
@media (min-width:361px) and (max-width:760px){
  .cat-acoes .btn{white-space:nowrap}
}

/* botão desabilitado precisa PARECER desabilitado: sem isso "Salvar ordem" fica dourado e
   convidativo mesmo quando não há nada para salvar */
.cat-acoes .btn[disabled],.cat-export .btn[disabled],.cat-barra .btn[disabled]{
  opacity:.45;cursor:not-allowed;filter:grayscale(.6)
}