/* Fabrika — estilo único, sem dependências externas (CSP: style-src 'self'). */
:root {
  --cor-fundo: #f5f6f8; --cor-texto: #1d2733; --cor-sutil: #5d6b7a; --cor-borda: #d6dbe1;
  --cor-primaria: #0b6e4f; --cor-primaria-escura: #08533b; --cor-perigo: #b42318; --cor-aviso: #b54708;
  --cor-ok-fundo: #e7f6ee; --cor-erro-fundo: #fdecea; --cor-aviso-fundo: #fff4e5; --cor-cartao: #fff;
  --raio: 6px; --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--fonte); font-size: 15px; color: var(--cor-texto); background: var(--cor-fundo); }
body.grande { font-size: 17px; }
a { color: var(--cor-primaria); }
h1 { font-size: 1.5em; margin: .2em 0 .6em; display: flex; flex-wrap: wrap; align-items: center; gap: .6em; }
h2 { font-size: 1.15em; margin: 1.4em 0 .5em; display: flex; flex-wrap: wrap; align-items: center; gap: .6em; }
h3 { font-size: 1em; margin: .2em 0 .5em; }

.topo { display: flex; align-items: center; gap: 1em; background: #12313f; color: #fff; padding: .4em 1em; flex-wrap: wrap; }
.topo a, .topo summary { color: #fff; text-decoration: none; }
.marca { font-weight: 700; font-size: 1.2em; }
.ambiente { background: var(--cor-aviso); color: #fff; padding: 0 .5em; border-radius: var(--raio); font-size: .8em; }
.menu { display: flex; gap: .2em; flex-wrap: wrap; flex: 1; }
.grupo { position: relative; }
.grupo summary { cursor: pointer; padding: .4em .7em; border-radius: var(--raio); list-style: none; }
.grupo summary::-webkit-details-marker { display: none; }
.grupo[open] summary, .grupo summary:hover { background: rgba(255,255,255,.15); }
.grupo ul { position: absolute; z-index: 10; margin: .2em 0 0; padding: .3em 0; list-style: none; background: #fff; border: 1px solid var(--cor-borda);
  border-radius: var(--raio); min-width: 15em; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.grupo ul a { display: block; padding: .45em 1em; color: var(--cor-texto); }
.grupo ul a:hover, .grupo ul a[aria-current] { background: var(--cor-fundo); }
.conta { display: flex; gap: .8em; align-items: center; font-size: .9em; }
.conta button.link { color: #fff; }

.conteudo { max-width: 1280px; margin: 0 auto; padding: 1em; }
.cartao { background: var(--cor-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 1em 1.2em; margin: 1em 0; }
.cartao.estreito { max-width: 420px; margin: 3em auto; }
.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1.5em; }
.sutil { color: var(--cor-sutil); font-size: .92em; }
.vazio { color: var(--cor-sutil); font-style: italic; text-align: center; padding: 1em; }

table { width: 100%; border-collapse: collapse; background: var(--cor-cartao); border: 1px solid var(--cor-borda); margin: .4em 0 1em; }
th, td { padding: .5em .6em; border-bottom: 1px solid var(--cor-borda); text-align: left; vertical-align: top; }
th { background: #eef1f4; font-weight: 600; font-size: .9em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.compacta td { font-size: .88em; }
tr.inativo td { color: var(--cor-sutil); }
tr.atrasado td { background: var(--cor-aviso-fundo); }
tr.selecionado td { background: var(--cor-ok-fundo); }
.negativo { color: var(--cor-perigo); font-weight: 600; }
pre { white-space: pre-wrap; font-size: .8em; margin: .3em 0; }

label { display: flex; flex-direction: column; gap: .25em; font-size: .92em; color: var(--cor-sutil); margin: .4em 0; }
label.check { flex-direction: row; align-items: center; gap: .4em; color: var(--cor-texto); }
input, select, button { font: inherit; }
input, select { padding: .45em .55em; border: 1px solid var(--cor-borda); border-radius: var(--raio); background: #fff; color: var(--cor-texto); min-width: 0; }
input:focus, select:focus, button:focus { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .3em 1em; align-items: end; }
.grade .largo, label.largo { grid-column: 1 / -1; }
input.largo { width: 100%; }
.filtros { display: flex; flex-wrap: wrap; gap: .5em; align-items: end; margin: .5em 0 1em; }
.filtros label { margin: 0; }
form.inline { display: inline-flex; gap: .3em; align-items: center; margin: 0; }
form.motivo input { width: 14em; }
.acoes { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }
td.acoes { display: table-cell; }  /* os botões quebram linha em vez de alargar a página */
td.acoes form.inline { margin: .1em .2em .1em 0; }
td form.motivo input { width: 8em; }

button, .botao { display: inline-block; padding: .5em 1em; border: 1px solid var(--cor-borda); border-radius: var(--raio); background: #fff;
  color: var(--cor-texto); cursor: pointer; text-decoration: none; font-size: .95em; line-height: 1.3; }
button:hover, .botao:hover { background: #eef1f4; }
.primario { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.primario:hover { background: var(--cor-primaria-escura); }
.perigo { color: var(--cor-perigo); border-color: var(--cor-perigo); }
button.link { border: 0; background: none; color: var(--cor-primaria); padding: 0 .2em; text-decoration: underline; }
button.largo, .botao.largo { width: 100%; }
.grande-botao { font-size: 1.15em; padding: .8em 1.6em; }
body.grande button, body.grande .botao { padding: .7em 1.2em; }

.msg { padding: .7em 1em; border-radius: var(--raio); margin: 0 0 .8em; border: 1px solid; }
.msg-ok { background: var(--cor-ok-fundo); border-color: #a6dcbf; }
.msg-erro { background: var(--cor-erro-fundo); border-color: #f2b8b5; }
.msg-aviso { background: var(--cor-aviso-fundo); border-color: #f5c58c; }

.status { display: inline-block; padding: .05em .55em; border-radius: 1em; font-size: .8em; font-weight: 600; background: #e4e7eb; color: #334; white-space: nowrap; }
.status-recebida, .status-recebido, .status-ok, .status-concluida, .status-enviado, .status-atendida, .status-aprovado, .status-aprovada, .status-lancado, .status-confirmada, .status-encerrada, .status-fechada { background: var(--cor-ok-fundo); color: #075e3c; }
.status-enviada, .status-recebida_com_divergencia, .status-recebido_com_divergencia, .status-liberada, .status-em_producao, .status-separado, .status-parcial, .status-executando { background: #e3f0fb; color: #0b4a86; }
.status-em_transito { background: #fde8c4; color: #7a3d00; outline: 2px solid #f0a330; }
.status-pendente, .status-aguardando_envio, .status-envio_parcial, .status-aguardando_aprovacao, .status-aguardando_producao, .status-pendente_vinculo, .status-aberta, .status-solicitado, .status-previa, .status-planejada, .status-reaberta { background: var(--cor-aviso-fundo); color: #8a3c06; }
.status-cancelada, .status-cancelado, .status-rejeitado, .status-rejeitada, .status-erro, .status-ignorado { background: var(--cor-erro-fundo); color: #8f1d14; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8em; margin-bottom: 1em; }
.kpi { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: .8em 1em; display: flex; flex-direction: column; gap: .2em; }
.kpi span { color: var(--cor-sutil); font-size: .85em; }
.kpi strong { font-size: 1.45em; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--cor-sutil); font-size: .78em; }
.kpi-alerta { border-color: var(--cor-aviso); background: var(--cor-aviso-fundo); }

ul.alertas, ul.lista-simples { list-style: none; padding: 0; margin: .3em 0; }
ul.alertas li, ul.lista-simples li { padding: .5em .7em; border-left: 4px solid var(--cor-borda); background: #fff; margin-bottom: .3em; }
ul.alertas small { color: var(--cor-sutil); display: block; }
.sev-critico { border-left-color: var(--cor-perigo) !important; }
.sev-aviso { border-left-color: var(--cor-aviso) !important; }
tr.sev-critico td:first-child { color: var(--cor-perigo); font-weight: 600; }

.cartoes-op { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1em; }
.cartao.op { display: flex; flex-direction: column; gap: .4em; margin: 0; }
.op-cabecalho { display: flex; justify-content: space-between; align-items: center; }
.op-item { font-size: 1.1em; font-weight: 600; }
.op-progresso { color: var(--cor-sutil); }
.cartao.op input { font-size: 1.3em; padding: .5em; }
.cartao.op form { display: flex; flex-direction: column; gap: .4em; margin: 0; }
.cartao.op form.inline { display: block; }
.cartao.op form.inline button { width: 100%; }
.cartao.op.atingido { border-color: var(--cor-ok, #2e8b57); box-shadow: inset 4px 0 0 var(--cor-ok, #2e8b57); }
.op-atingido { background: var(--cor-ok-fundo); padding: .4em .6em; border-radius: 4px; font-weight: 600; }

dl.ficha { display: grid; grid-template-columns: max-content 1fr; gap: .3em 1em; background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 1em; }
dl.ficha dt { color: var(--cor-sutil); }
dl.ficha dd { margin: 0; }
.chave { font-family: ui-monospace, Consolas, monospace; font-size: 1.2em; letter-spacing: .1em; background: var(--cor-fundo); padding: .6em; border-radius: var(--raio); word-break: break-all; }
table.edicao td { padding: .25em .4em; }
.filtro-tabela { width: 100%; margin: .5em 0; font-size: 1.05em; }

@media (max-width: 720px) {
  .colunas { grid-template-columns: 1fr; }
  table { display: block; overflow-x: auto; }
  .conta span { display: none; }
}
@media print {
  .topo, .acoes, .msg, button, form.inline, form.filtros { display: none; }
  input, select { border: 0; padding: 0; }
  body { background: #fff; }
}

/* OP com vários itens (ADR-19) */
table.ops tr.op-inicio td { border-top: 2px solid var(--cor-borda); }
.item-op h3 { display: flex; flex-wrap: wrap; gap: .5em; align-items: baseline; margin-bottom: .3em; }
.item-op-linha { display: flex; flex-wrap: wrap; gap: 1em; align-items: center; margin: .3em 0 .6em; }
.item-op tr.calda td { background: var(--cor-ok-fundo, #eef7ee); }
.item-op tr.alterado td:nth-child(4) { font-weight: 600; }
td.falta { color: var(--cor-perigo); font-weight: 600; }
.status-aberto { background: var(--cor-aviso-fundo); color: #8a3c06; }
.status-encerrado { background: var(--cor-ok-fundo); color: #075e3c; }
.status-envio_encerrado { background: #e4e7eb; color: #334; }
.item-op-linha label { display: inline-flex; gap: .3em; align-items: center; }
.item-op-linha form.inline { flex-wrap: wrap; }