/* SLC Domicílio — painel de mesa de liquidação.
   Papel frio + tinta azul-ardósia; cor só para estado. A peça marcante é o trilho de etapas. */
:root {
  --papel: #f3f5f2;
  --superficie: #ffffff;
  --tinta: #17222d;
  --tinta-2: #4b5a68;
  --tinta-3: #7a8794;
  --linha: #d9dfe3;
  --linha-2: #eaeef0;
  --azul: #1f4fb8;
  --azul-claro: #e6edfb;
  --verde: #1f7550;
  --verde-claro: #e2f2ea;
  --ambar: #9a5f0c;
  --ambar-claro: #fbf0dc;
  --vermelho: #b3261e;
  --vermelho-claro: #fbe7e5;
  --cinza: #6b7682;
  --cinza-claro: #eceff1;
  --console: #0f1b26;
  --console-tinta: #d6e1ea;
  --raio: 6px;
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papel); }
a { color: var(--azul); text-underline-offset: 2px; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
code, .mono { font-family: var(--mono); font-size: 0.88em; }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 0.3rem; font-weight: 650; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; margin: 2rem 0 0.6rem; font-weight: 650; }
p { margin: 0.3rem 0; }
.sub { color: var(--tinta-2); max-width: 75ch; }
.obs { color: var(--tinta-3); font-size: 0.85rem; }
.erro-campo { color: var(--vermelho); font-size: 0.85rem; }
.mono-titulo { font-family: var(--mono); font-weight: 600; letter-spacing: -0.02em; }

/* ---------- estrutura ---------- */
body.com-menu { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.menu {
  background: var(--tinta); color: #c9d4de; display: flex; flex-direction: column; gap: 1.2rem;
  padding: 1.2rem 0.9rem; position: sticky; top: 0; height: 100vh;
}
.marca { display: flex; flex-direction: column; gap: 0.35rem; padding: 0 0.4rem; }
.marca .nome { color: #fff; font-weight: 700; font-size: 1.05rem; }
.amb { align-self: flex-start; font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 3px; }
.amb-hml { background: #e8b44a; color: #2a1d00; }
.amb-prd { background: #d64545; color: #fff; }
.menu nav { display: flex; flex-direction: column; gap: 2px; }
.menu nav a { color: #c9d4de; text-decoration: none; padding: 0.5rem 0.6rem; border-radius: var(--raio); }
.menu nav a:hover { background: #22303e; color: #fff; }
.menu nav a.ativo { background: #2a3b4d; color: #fff; box-shadow: inset 3px 0 0 #7fa6ff; }
.robo { margin-top: auto; display: flex; gap: 0.6rem; align-items: flex-start; background: #1e2b38; padding: 0.7rem; border-radius: var(--raio); }
.robo b { display: block; color: #fff; font-size: 0.88rem; }
.robo small { color: #a9b6c2; font-size: 0.78rem; }
.pulso { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex: none; background: #7a8794; }
.robo-ativo .pulso { background: #3ccf8e; box-shadow: 0 0 0 0 rgba(60, 207, 142, 0.6); animation: pulso 2.4s infinite; }
.robo-parado .pulso { background: #e46a5f; }
@keyframes pulso { 70% { box-shadow: 0 0 0 8px rgba(60, 207, 142, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 207, 142, 0); } }
.sair { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; padding: 0 0.4rem; }
button.link { background: none; border: 0; color: #c9d4de; text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }
main { padding: 1.8rem 2.2rem 4rem; max-width: 1320px; width: 100%; min-width: 0; }
.cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.cab-acoes { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.migalha { font-size: 0.85rem; color: var(--tinta-3); margin-bottom: 0.2rem; }
.migalha a { color: var(--tinta-2); }

/* ---------- botões ---------- */
button, .botao {
  font: inherit; font-weight: 600; border-radius: var(--raio); padding: 0.55rem 0.95rem; cursor: pointer;
  border: 1px solid transparent; text-decoration: none; display: inline-block; line-height: 1.2;
}
.primario { background: var(--azul); color: #fff; }
.primario:hover { background: #173d8f; color: #fff; }
.secundario { background: var(--superficie); color: var(--tinta); border-color: var(--linha); }
.secundario:hover { border-color: var(--tinta-3); color: var(--tinta); }
.perigo { background: var(--vermelho); color: #fff; }
.perigo:hover { background: #8f1d17; }
button.pequeno, .pequeno { padding: 0.3rem 0.6rem; font-size: 0.82rem; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- chips de status: cor + forma ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600;
  padding: 0.12rem 0.55rem 0.12rem 0.45rem; border-radius: 999px; white-space: nowrap; cursor: default;
}
.chip::before { content: ""; width: 8px; height: 8px; flex: none; }
.tom-ok { background: var(--verde-claro); color: var(--verde); }
.tom-ok::before { background: var(--verde); border-radius: 50%; }
.tom-espera { background: var(--ambar-claro); color: var(--ambar); }
.tom-espera::before { border: 2px solid var(--ambar); border-radius: 50%; width: 9px; height: 9px; }
.tom-acao { background: var(--azul-claro); color: var(--azul); }
.tom-acao::before { background: var(--azul); }
.tom-erro { background: var(--vermelho-claro); color: var(--vermelho); }
.tom-erro::before { background: var(--vermelho); transform: rotate(45deg); width: 7px; height: 7px; }
.tom-fim { background: var(--cinza-claro); color: var(--cinza); }
.tom-fim::before { background: var(--cinza); height: 2px; }
.tom-neutro { background: transparent; color: var(--tinta-2); }

/* ---------- situação do arquivo ---------- */
.situacao {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--linha); border-left-width: 6px; border-radius: var(--raio);
  padding: 1.1rem 1.3rem; margin: 0.5rem 0 1.3rem;
}
.situacao.tom-ok { border-left-color: var(--verde); }
.situacao.tom-espera { border-left-color: var(--ambar); }
.situacao.tom-acao { border-left-color: var(--azul); }
.situacao.tom-erro { border-left-color: var(--vermelho); }
.situacao.tom-fim { border-left-color: var(--cinza); }
.situacao::before { display: none; }
.situacao h2 { margin: 0 0 0.25rem; font-size: 1.3rem; color: var(--tinta); }
.situacao p { color: var(--tinta-2); max-width: 70ch; }
.sit-alerta { color: var(--vermelho) !important; font-weight: 600; }
.sit-acao { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-end; max-width: 380px; }
.sit-acao.confirmar { align-items: stretch; }

/* ---------- trilho de etapas (a peça central) ---------- */
.trilho { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin: 0 0 0.6rem; padding: 0; }
.trilho li { position: relative; padding: 2.1rem 0.6rem 0 0; display: flex; flex-direction: column; gap: 0.1rem; }
.trilho li::before { /* linha que liga os marcos */
  content: ""; position: absolute; top: 0.68rem; left: 0; right: 0; height: 4px; background: var(--linha);
}
.trilho li:first-child::before { left: 0.7rem; }
.trilho li:last-child::before { right: calc(100% - 0.7rem); }
.trilho .marco {
  position: absolute; top: 0.2rem; left: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--superficie); border: 3px solid var(--linha); z-index: 1;
}
.trilho .rot { font-weight: 650; font-size: 0.92rem; }
.trilho .cont { font-size: 0.82rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.trilho .ajuda { font-size: 0.78rem; color: var(--tinta-3); max-width: 22ch; }
.trilho .te-feito::before { background: var(--verde); }
.trilho .te-feito .marco { background: var(--verde); border-color: var(--verde); }
.trilho .te-feito .marco::after { content: ""; position: absolute; left: 0.32rem; top: 0.12rem; width: 0.3rem; height: 0.6rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.trilho .te-parcial::before { background: linear-gradient(90deg, var(--verde) 0 50%, var(--linha) 50%); }
.trilho .te-parcial .marco { border-color: var(--verde); background: linear-gradient(90deg, var(--verde) 0 50%, var(--superficie) 50%); }
.trilho .te-atual .marco { border-color: var(--azul); box-shadow: 0 0 0 4px var(--azul-claro); }
.trilho .te-atual .rot { color: var(--azul); }
.trilho .te-pendente .rot, .trilho .te-vazio .rot { color: var(--tinta-3); }
.fora-trilho { margin: 0 0 1rem; }
.trilho-mini { list-style: none; display: flex; gap: 3px; margin: 0; padding: 0; }
.trilho-mini li { width: 18px; height: 6px; border-radius: 2px; background: var(--linha); }
.trilho-mini .te-feito { background: var(--verde); }
.trilho-mini .te-parcial { background: linear-gradient(90deg, var(--verde) 50%, var(--linha) 50%); }
.trilho-mini .te-atual { background: var(--azul); }

/* ---------- Hoje ---------- */
.faixa h2 { display: flex; align-items: center; gap: 0.5rem; }
.qtd { font-size: 0.8rem; background: var(--cinza-claro); color: var(--tinta-2); padding: 0.05rem 0.5rem; border-radius: 999px; }
.lista-itens { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.item { background: var(--superficie); border: 1px solid var(--linha); border-left: 4px solid var(--linha); border-radius: var(--raio); padding: 0.75rem 1rem; display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1.5rem; align-items: center; }
.item.tom-acao { border-left-color: var(--azul); }
.item.tom-erro { border-left-color: var(--vermelho); }
.item.tom-espera { border-left-color: var(--ambar); }
.item::before { display: none; }
.item-cab { display: flex; gap: 0.8rem; align-items: baseline; flex-wrap: wrap; }
.item-nome { font-family: var(--mono); font-weight: 600; font-size: 0.9rem; }
.item-tipo { color: var(--tinta-2); font-size: 0.85rem; }
.item-sit { grid-column: 1; color: var(--tinta-2); font-size: 0.9rem; }
.item .trilho-mini { grid-column: 2; grid-row: 1 / span 2; }
.rodape-dados { margin-top: 2rem; color: var(--tinta-3); font-size: 0.85rem; }

/* ---------- tabelas ---------- */
table { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--linha-2); vertical-align: top; }
th { font-size: 0.8rem; font-weight: 650; color: var(--tinta-2); background: #f8f9f8; }
tbody tr:hover { background: #fafbfc; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.mono { font-family: var(--mono); font-size: 0.82rem; }
.linha-erro td { background: #fff8f7; }
tr.inativo td { color: var(--tinta-3); }
table.compacta td { padding: 0.4rem 0.7rem; }
.acoes-linha { text-align: right; }

/* ---------- formulários ---------- */
input[type=text], input[type=email], input[type=password], input[type=search], input:not([type]), select {
  font: inherit; padding: 0.5rem 0.6rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); color: var(--tinta);
}
.check { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.88rem; }
.check input { margin-top: 0.2rem; }
.conferir { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; max-width: 300px; }
.conferir input[type=text] { font-size: 0.85rem; padding: 0.35rem 0.5rem; }
.filtro { display: flex; gap: 0.5rem; margin: 0 0 1rem; flex-wrap: wrap; }
.filtro input[type=search] { min-width: 340px; flex: 1; }
.abas { display: flex; gap: 0.2rem; border-bottom: 1px solid var(--linha); margin-bottom: 1rem; }
.abas a { padding: 0.5rem 0.9rem; text-decoration: none; color: var(--tinta-2); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.abas a.ativo { color: var(--tinta); border-bottom-color: var(--azul); font-weight: 600; }
.perm-form { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.bloco-form { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.2rem; margin-top: 2rem; max-width: 640px; }
.bloco-form h2 { margin-top: 0; }
.form-grade { display: grid; gap: 0.8rem; }
.form-grade label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
fieldset { border: 1px solid var(--linha); border-radius: var(--raio); display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- avisos ---------- */
.aviso { border-radius: var(--raio); padding: 0.7rem 1rem; margin: 0 0 1rem; border: 1px solid; }
.aviso-ok { background: var(--verde-claro); border-color: #b9dfcb; color: #134d34; }
.aviso-erro { background: var(--vermelho-claro); border-color: #f1c4bf; color: #7a1b15; }
.vazio { color: var(--tinta-3); }
.vazio-grande { color: var(--tinta-2); padding: 3rem 0; text-align: center; }

/* ---------- console de log ---------- */
.execucao .exec-status { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.6rem; flex-wrap: wrap; }
.alterna { margin-left: auto; }
.console {
  list-style: none; margin: 0; padding: 0.6rem 0; background: var(--console); color: var(--console-tinta);
  border-radius: var(--raio); font-family: var(--mono); font-size: 0.82rem; line-height: 1.5; overflow-x: auto;
}
.console .linha { display: grid; grid-template-columns: 6.6rem 4.4rem 7.5rem 1fr; gap: 0 0.8rem; padding: 0.15rem 1rem; align-items: baseline; }
.console .linha.nova { background: rgba(127, 166, 255, 0.16); transition: background 1s; }
.console time { color: #7f909f; }
.console .nv { font-size: 0.72rem; font-weight: 700; padding: 0 0.35rem; border-radius: 3px; text-align: center; background: transparent; }
.console .nv::before { display: none; }
.console .nv.tom-ok { color: #6fdca7; }
.console .nv.tom-acao { color: #f2c46d; }
.console .nv.tom-erro { color: #ff8f86; background: rgba(255, 143, 134, 0.12); }
.console .nv.tom-fim { color: #6c7c8a; }
.console .nv.tom-neutro { color: #a9c2ff; }
.console .et { color: #9fb3c4; }
.console .msg { white-space: pre-wrap; word-break: break-word; }
.console .nv-ERRO .msg { color: #ffc2bd; }
.console .nv-AVISO .msg { color: #ffe2a8; }
.console .nv-SUCESSO .msg { color: #bff0d6; }
.console .nv-DEBUG .msg { color: #8fa1b1; }
.console .ref { color: #a9c2ff; }
.console .quem { color: #7f909f; }
.console .dados { grid-column: 4; }
.console .dados summary { color: #7f909f; cursor: pointer; font-size: 0.76rem; }
.console .dados pre { margin: 0.3rem 0 0.4rem; padding: 0.6rem; background: #0a131b; border-radius: 4px; max-height: 380px; overflow: auto; color: #c6d3de; }
.console.sem-debug .nv-DEBUG { display: none; }
.console.claro { background: var(--superficie); color: var(--tinta); border: 1px solid var(--linha); }
.console.claro time, .console.claro .et, .console.claro .quem, .console.claro .dados summary { color: var(--tinta-3); }
.console.claro .nv.tom-ok { color: var(--verde); }
.console.claro .nv.tom-acao { color: var(--ambar); }
.console.claro .nv.tom-erro { color: var(--vermelho); background: var(--vermelho-claro); }
.console.claro .nv.tom-neutro { color: var(--azul); }
.console.claro .nv-ERRO .msg { color: var(--vermelho); }
.console.claro .nv-AVISO .msg { color: var(--ambar); }
.console.claro .nv-SUCESSO .msg { color: var(--verde); }
.console.claro .nv-DEBUG .msg { color: var(--tinta-3); }
.console.claro .ref { color: var(--azul); }
.console.claro .dados pre { background: #f6f8f9; color: var(--tinta); }
.historico summary { cursor: pointer; font-weight: 600; margin: 1.5rem 0 0.6rem; }

/* ---------- login / ajuda ---------- */
body.sem-menu main { max-width: none; }
.login { max-width: 380px; margin: 12vh auto; background: var(--superficie); padding: 2rem; border: 1px solid var(--linha); border-radius: 10px; }
.login form { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.2rem; }
.login label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.texto { max-width: 820px; }
.passos { padding-left: 1.3rem; }
.passos li { margin-bottom: 0.6rem; }

@media (max-width: 900px) {
  body.com-menu { grid-template-columns: minmax(0, 1fr); }
  .menu { position: static; height: auto; }
  main { padding: 1rem; }
  .menu { gap: 0.6rem; padding: 0.8rem; }
  .menu nav { flex-direction: row; overflow-x: auto; white-space: nowrap; }
  .robo { margin-top: 0; }
  .mono-titulo, h1 { overflow-wrap: anywhere; }
  table { display: block; overflow-x: auto; }
  .situacao { flex-direction: column; align-items: stretch; }
  .sit-acao { align-items: stretch; max-width: none; }
  .item { grid-template-columns: 1fr; }
  .item .trilho-mini { grid-column: 1; grid-row: auto; }
  .filtro input[type=search] { min-width: 0; }
  .trilho { grid-auto-flow: row; }
  .trilho li { padding: 0 0 0.8rem 2.2rem; }
  .trilho li::before { top: 0; bottom: 0; left: 0.6rem; right: auto; width: 4px; height: auto; }
  .trilho .marco { top: 0; }
  .console .linha { grid-template-columns: 1fr; }
  .console .dados { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .robo-ativo .pulso { animation: none; }
  .console .linha.nova { transition: none; }
}