/* ===================================================================
   Pré-Impressão · Controle de OS
   =================================================================== */
:root {
  --fundo: #f3f4f6;
  --painel: #ffffff;
  --texto: #1f2328;
  --suave: #636c76;
  --linha: #d8dde3;
  --linha-fraca: #eceff2;
  --destaque: #1f5fbf;
  --destaque-texto: #ffffff;
  --selecao: #dce9fb;
  --perigo: #c0362c;
  --alerta: #b45309;
  --alerta-fundo: #fff4e0;
  --ok: #1a7f37;
  --raio: 6px;
  --sombra: 0 10px 30px rgba(15, 23, 42, .18);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--texto);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- botões ---------- */
.btn {
  border: 1px solid var(--linha); background: var(--painel);
  padding: 6px 12px; border-radius: var(--raio); cursor: pointer;
  white-space: nowrap; line-height: 1.3;
}
.btn:hover:not(:disabled) { border-color: #aab3bd; background: #f8f9fa; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primario { background: var(--destaque); border-color: var(--destaque); color: var(--destaque-texto); }
.btn.primario:hover:not(:disabled) { background: #194f9f; }
.btn.perigo { color: var(--perigo); border-color: #e7b4ae; }
.btn.perigo:hover:not(:disabled) { background: #fdecea; }
.btn.alerta { color: var(--alerta); border-color: #f0c98d; background: var(--alerta-fundo); font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 6px 9px; background: #fff;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible {
  outline: 2px solid #8bb4f0; outline-offset: 0;
}

/* ---------- login ---------- */
.tela-login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.cartao-login {
  width: min(360px, 100%); background: var(--painel); border: 1px solid var(--linha);
  border-radius: 10px; padding: 28px; display: grid; gap: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.cartao-login h1 { margin: 0 0 6px; font-size: 22px; }
.cartao-login label { display: grid; gap: 5px; color: var(--suave); font-size: 13px; }
.cartao-login input { color: var(--texto); font-size: 14px; }
.marca { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--destaque); }
.erro { color: var(--perigo); margin: 0; font-size: 13px; }

/* ---------- principal ---------- */
.tela-principal { height: 100%; display: flex; flex-direction: column; }
.topo {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--painel); border-bottom: 1px solid var(--linha);
}
.titulo { display: flex; align-items: baseline; gap: 10px; }
.titulo .sub { font-weight: 600; font-size: 16px; }
.usuario { display: flex; align-items: center; gap: 8px; color: var(--suave); }
.selo { font-size: 11px; padding: 2px 7px; border-radius: 99px; background: #e8eefb; color: var(--destaque); font-weight: 600; }

.barra {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 10px 16px; background: var(--painel); border-bottom: 1px solid var(--linha);
}
.botoes, .filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#busca { width: 260px; max-width: 100%; }

.grade-wrap { flex: 1; overflow: auto; background: var(--painel); outline: none; }
.grade { width: 100%; border-collapse: collapse; }
.grade th {
  position: sticky; top: 0; z-index: 1; background: #f6f8fa; text-align: left;
  font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--suave);
  padding: 8px 12px; border-bottom: 1px solid var(--linha); cursor: pointer; user-select: none; white-space: nowrap;
}
.grade th.ordenado::after { content: " ▼"; font-size: 9px; }
.grade th.ordenado.asc::after { content: " ▲"; }
.grade td { padding: 7px 12px; border-bottom: 1px solid var(--linha-fraca); vertical-align: middle; }
.grade tbody tr { cursor: default; }
.grade tbody tr:hover { background: #f6f9fd; }
.grade tbody tr.selecionada { background: var(--selecao); }
.grade .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.grade td.vazio { text-align: center; color: var(--suave); padding: 40px; cursor: default; }
.grade.compacta th { position: static; cursor: default; }
.grade.compacta tbody tr { cursor: pointer; }
.marca-terc { margin-left: 6px; font-size: 11px; color: var(--alerta); font-weight: 600; white-space: nowrap; }

.rodape {
  display: flex; justify-content: space-between; gap: 12px; padding: 6px 16px;
  font-size: 12px; color: var(--suave); background: var(--painel); border-top: 1px solid var(--linha);
}
.dica { color: var(--suave); font-size: 12px; }

/* ---------- status ---------- */
.pilula {
  display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600;
  white-space: nowrap; background: #eef1f4; color: #4b5563;
}
.s-1  { background: #eef1f4; color: #4b5563; }  /* Aguardando arquivo */
.s-2  { background: #e2ecfb; color: #1f5fbf; }  /* Em execução */
.s-3  { background: #fde8e6; color: #b42318; }  /* Devolvido com problema */
.s-4  { background: #efe8fb; color: #6b3fbf; }  /* Tirando prova */
.s-5  { background: #fff3d6; color: #8a5a00; }  /* Enviado para aprovação */
.s-6  { background: #ffe9d9; color: #b54708; }  /* Alteração */
.s-7  { background: #dff5e4; color: #1a7f37; }  /* Aprovado */
.s-8  { background: #dbf3f3; color: #0e7470; }  /* Fazendo imposição */
.s-9  { background: #e3e7fb; color: #3b4bb8; }  /* Tirando chapa */
.s-10 { background: #1a7f37; color: #ffffff; }  /* Finalizado */
.s-11 { background: #eef1f4; color: #8a929b; text-decoration: line-through; } /* Cancelado */

/* ---------- diálogos ---------- */
.dlg {
  border: none; padding: 0; border-radius: 10px; box-shadow: var(--sombra);
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  color: var(--texto); background: var(--painel);
}
.dlg[open] { display: flex; flex-direction: column; }
.dlg.estreito { width: min(520px, calc(100vw - 32px)); }
.dlg.largo { width: min(1040px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(15, 23, 42, .45); }
.dlg-cab { padding: 16px 20px 12px; border-bottom: 1px solid var(--linha); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.dlg-cab h2 { margin: 0; font-size: 17px; }
/* flex 1 1 auto (e não só "flex: 1"): no Safari, "flex: 1" encolhe o meio da janela */
.dlg-cab, .dlg-rodape { flex: 0 0 auto; }
.dlg-corpo { padding: 16px 20px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.dlg-rodape { padding: 12px 20px; border-top: 1px solid var(--linha); display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.espaco { flex: 1; }
.alerta-cab { background: var(--alerta-fundo); border-bottom-color: #f0c98d; }
.alerta-cab h2 { color: var(--alerta); font-size: 15px; }
#form-nova { flex-direction: column; align-items: stretch; }
.linha { display: flex; gap: 8px; }
.linha input { flex: 1; min-width: 0; }

/* ---------- nova OS ---------- */
.msg { padding: 10px 12px; border-radius: var(--raio); margin: 0 0 12px; font-size: 13px; }
.msg.info { background: #eef4fd; color: #1f4f99; }
.msg.aviso { background: var(--alerta-fundo); color: #8a4a00; }
.msg.erro { background: #fdecea; color: var(--perigo); }
.previa { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13px; }
.previa dt { color: var(--suave); }
.previa dd { margin: 0; }
.campos { display: grid; gap: 10px; }
.campos label { display: grid; gap: 4px; font-size: 13px; color: var(--suave); }

/* ---------- ficha ---------- */
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.secao { border: 1px solid var(--linha); border-radius: 8px; padding: 12px 14px; }
.secao h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.secao.inteira { grid-column: 1 / -1; }
.dados { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.dados dt { color: var(--suave); }
.dados dd { margin: 0; overflow-wrap: anywhere; }
.dados dd.atrasado { color: var(--perigo); font-weight: 600; }
.obs-ecalc { white-space: pre-wrap; }
.situacao { display: grid; gap: 10px; }
.situacao label { display: grid; gap: 4px; font-size: 13px; color: var(--suave); }
.situacao textarea { min-height: 84px; resize: vertical; color: var(--texto); }
.situacao .acoes { display: flex; align-items: center; gap: 10px; }
.situacao .acoes .dica { flex: 1; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; cursor: pointer; padding: 3px 0; }
.check input { margin-top: 2px; }
.check.inativo { color: var(--suave); font-style: italic; }
.resumo-terc { font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.resumo-terc.ok { color: var(--ok); }
.resumo-terc.pend { color: var(--alerta); }
.resumo-terc.nada { color: var(--suave); font-weight: 400; }
.servico { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 0; border-bottom: 1px solid var(--linha-fraca); }
.servico:last-child { border-bottom: none; }
.servico .check { min-width: 210px; }
.segmento { display: inline-flex; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.segmento button { border: none; background: #fff; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.segmento button + button { border-left: 1px solid var(--linha); }
.segmento button.ativo.pend { background: var(--alerta-fundo); color: var(--alerta); font-weight: 600; }
.segmento button.ativo.env { background: #dff5e4; color: var(--ok); font-weight: 600; }
.servico .quando { font-size: 12px; color: var(--suave); }
.historico { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.historico li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.historico .quando { color: var(--suave); font-variant-numeric: tabular-nums; min-width: 120px; }
.historico .quem { color: var(--suave); }

/* ---------- cadastros ---------- */
.abas { display: flex; gap: 4px; width: 100%; }
.aba { border: none; background: none; padding: 6px 10px; border-radius: var(--raio); cursor: pointer; color: var(--suave); }
.aba.ativa { background: #e8eefb; color: var(--destaque); font-weight: 600; }
.cad-lista { width: 100%; border-collapse: collapse; }
.cad-lista td, .cad-lista th { padding: 6px 8px; border-bottom: 1px solid var(--linha-fraca); text-align: left; font-size: 13px; }
.cad-lista th { color: var(--suave); font-weight: 600; font-size: 12px; }
.cad-lista input[type=text] { width: 100%; }
.cad-lista .centro { text-align: center; }
.cad-novo { display: flex; gap: 8px; margin-top: 12px; }
.cad-novo input { flex: 1; }

/* ---------- notificações ---------- */
.toasts { position: fixed; right: 16px; top: 16px; display: grid; gap: 8px; z-index: 1000; }
.toast {
  background: #1f2328; color: #fff; padding: 10px 14px; border-radius: var(--raio);
  box-shadow: var(--sombra); max-width: 380px; font-size: 13px;
}
.toast.erro { background: var(--perigo); }

@media (max-width: 760px) {
  .ficha { grid-template-columns: 1fr; }
  #busca { width: 100%; }
  .filtros { width: 100%; }
  .rodape .dica { display: none; }
  #grade th:nth-child(4), #grade td:nth-child(4) { display: none; }  /* vendedor */
  .grade th, .grade td { padding-left: 8px; padding-right: 8px; }
}