/* =========================================================
   RASTREIO SEGURO — estilo.css
   Visual clássico de portal de rastreio (web antiga).
   Sem cantos arredondados, sem sombras, fontes de sistema.
   ========================================================= */

:root {
  --azul: #003c71;          /* azul institucional */
  --azul-escuro: #002b52;
  --azul-claro: #e8f0f8;
  --amarelo: #ffcc00;       /* faixa amarela */
  --fundo: #cccccc;         /* cinza clássico de página */
  --papel: #ffffff;         /* fundo de conteúdo */
  --tinta: #000000;
  --cinza: #666666;
  --cinza-claro: #999999;
  --linha: #999999;
  --linha-suave: #cccccc;
  --link: #0000cc;
  --link-visitado: #551a8b;
  --verde: #008000;
  --vermelho: #990000;
  --sans: Verdana, Arial, Helvetica, sans-serif;
  --mono: "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: none;
}

a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--link-visitado); }
a:hover { color: #cc0000; }

button { font-family: var(--sans); cursor: pointer; }
input, textarea, select { font-family: var(--sans); border-radius: 0; }

/* ---- faixa amarela institucional ---- */
.faixa-amarela { height: 4px; background: var(--amarelo); }

/* ---- barra superior azul ---- */
.topbar { background: var(--azul); border-bottom: 3px solid var(--amarelo); }
.topbar-inner {
  max-width: 780px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 6px;
}
.brand { font-size: 22px; font-weight: bold; color: #ffffff; letter-spacing: 0.5px; }
.brand .amarelo { color: var(--amarelo); }
.slogan { font-size: 11px; color: #cfe0f0; }

/* ---- conteúdo ---- */
.wrap { max-width: 780px; margin: 0 auto; padding: 14px 16px 30px; }

.migalha { font-size: 11px; color: var(--cinza); margin: 0 0 10px; }

h1 { font-size: 18px; font-weight: bold; color: var(--azul); margin: 0 0 6px; }

.intro { font-size: 12px; color: #333333; margin: 0 0 14px; line-height: 1.5; }

/* ---- caixa de busca ---- */
.caixa-busca { border: 1px solid var(--linha); background: var(--papel); margin-bottom: 14px; }
.cb-titulo {
  background: var(--azul); color: #ffffff; font-size: 12px; font-weight: bold;
  padding: 6px 10px;
}
.cb-corpo { padding: 12px; }
.cb-linha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-linha label { font-size: 12px; }
.cb-linha input {
  flex: 1 1 200px; min-width: 0;
  font-family: var(--mono); font-size: 13px;
  border: 1px solid #7f7f7f; background: #ffffff; color: #000000;
  padding: 4px 6px;
}
.cb-linha input:focus { outline: 1px solid var(--azul); }
.cb-dica { font-size: 10px; color: var(--cinza); margin: 8px 0 0; }

/* ---- captcha: a confirmação antes da consulta ---- */
.captcha { background: #f2f2f2; border: 1px solid var(--linha-suave); padding: 10px; }
.captcha-titulo {
  font-size: 11px; font-weight: bold; color: var(--azul);
  border-bottom: 1px solid var(--linha-suave); padding-bottom: 6px; margin-bottom: 10px;
}
.captcha-corpo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.captcha-estado { font-size: 11px; color: var(--cinza); min-height: 15px; }
/* O widget do Google precisa de espaço próprio: ele é um iframe de tamanho
   fixo, e sem altura reservada o botão pula para cima dele enquanto carrega. */
#captchaWidget { min-height: 78px; }

/* ---- botões ---- */
.btn {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 11px;
  background: var(--azul); color: #ffffff;
  border: 1px solid var(--azul-escuro);
  padding: 4px 14px;
  cursor: pointer;
}
.btn:hover { background: var(--azul-escuro); }
.btn:disabled { background: var(--cinza-claro); color: #eeeeee; cursor: default; }
.btn.ghost {
  background: #d4d0c8; color: #000000;
  border: 1px solid #808080;
  border-color: #f5f5f5 #404040 #404040 #f5f5f5; /* relevo */
}
.btn.ghost:active { border-color: #404040 #f5f5f5 #f5f5f5 #404040; }
.btn.sm { padding: 2px 8px; font-size: 11px; }

/* ---- resultado ---- */
.rt-result { margin-bottom: 14px; }
.rt-result .loading, .rt-result .error {
  font-size: 12px; padding: 10px;
  border: 1px solid var(--linha); background: var(--papel);
}
.rt-result .error { color: var(--vermelho); border-color: var(--vermelho); background: #fdeaea; }

.rt-card { border: 1px solid var(--linha); background: var(--papel); padding: 10px 12px; margin-bottom: 10px; }
.rt-sep { border-top: 1px solid var(--linha-suave); margin-top: 8px; padding-top: 8px; }
.info-label { font-size: 10px; color: var(--cinza); text-transform: uppercase; letter-spacing: 0.04em; }
.info-value { font-size: 13px; font-weight: bold; color: #000000; margin-top: 1px; }

/* ---- linha do tempo ---- */
.timeline-title {
  font-size: 11px; font-weight: bold; color: var(--azul);
  border-bottom: 1px solid var(--linha); padding-bottom: 4px; margin-bottom: 8px;
}
.timeline { margin: 0; padding: 0; list-style: none; }
.step { padding: 6px 0 6px 16px; position: relative; border-bottom: 1px dotted var(--linha-suave); }
.step:last-child { border-bottom: 0; }
.step-dot { position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; background: #999999; border: 1px solid #666666; }
.step.done .step-dot { background: var(--verde); border-color: #004d00; }
/* A etapa atual é também uma etapa concluída: fica verde, como as outras, e
   só o anel azul por fora diz qual delas é a mais recente. Pintá-la de azul a
   faria parecer não concluída. */
.step.atual .step-dot { box-shadow: 0 0 0 2px var(--azul); }
.step-title { font-size: 12px; font-weight: bold; color: #000000; }
.step.pending .step-title { color: var(--cinza); font-weight: normal; }
.step-desc { font-size: 11px; color: var(--cinza); margin-top: 1px; }
.step-time { font-size: 11px; color: var(--cinza); margin-top: 1px; }
.badge { font-size: 10px; font-weight: bold; margin-left: 4px; }
.badge-done { color: var(--verde); }
.badge-atual { color: var(--azul); }
.badge-pendente { color: var(--cinza-claro); }

/* ---- aviso do pedido (greve, atenção) ---- */
.aviso-pedido {
  border: 1px solid; padding: 8px 10px; margin-bottom: 10px;
  font-size: 11px; line-height: 1.5;
}
.aviso-pedido strong { display: block; font-size: 12px; margin-bottom: 2px; }
.aviso-pedido.amarelo { border-color: #cc9900; background: #ffffcc; color: #4d3a00; }
.aviso-pedido.amarelo strong { color: #7a5c00; }
.aviso-pedido.vermelho { border-color: #cc0000; background: #fdeaea; color: #660000; }
.aviso-pedido.vermelho strong { color: #990000; }

/* ---- aviso de contato ---- */
.aviso-contato {
  border: 1px solid #cc0000; background: #fdeaea; color: #660000;
  padding: 8px 10px; margin-bottom: 10px; font-size: 11px; line-height: 1.5;
}
.aviso-contato .ac-topo { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.aviso-contato svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: #cc0000; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aviso-contato strong { font-size: 12px; }
.aviso-contato p { margin: 0; }
.aviso-contato-link { color: #660000; text-decoration: underline; word-break: break-all; }

/* ---- transportadora ---- */
.transp-box {
  border: 1px solid var(--linha); background: #f2f2f2; padding: 8px 10px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.transp-box .t-info { min-width: 0; }
.transp-box .t-code { font-family: var(--mono); font-size: 13px; font-weight: bold; word-break: break-all; }
.transp-box .t-name { font-size: 11px; color: var(--cinza); margin-top: 1px; }

/* ---- rota: origem / destino ---- */
.rt-card.rota { background: var(--azul-claro); }
.rota-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rota-ponto { min-width: 0; flex: 1 1 auto; }
.rota-cidade { font-size: 12px; font-weight: bold; color: #000000; }
.rota-seta { color: var(--cinza); font-size: 13px; flex: 0 0 auto; }
.rota-previsao { font-size: 11px; color: #333333; border-top: 1px solid var(--linha-suave); margin-top: 8px; padding-top: 6px; }
.rota-previsao strong { color: #000000; }

/* ---- trajeto ----
   Os pontos por onde o pacote passou, na ordem. A linha vertical e as bolinhas
   são o que faz o olho ler como percurso, e não como lista. */
.trajeto { list-style: none; margin: 0; padding: 0; }
.trajeto .tj-ponto {
  position: relative; padding: 0 0 12px 18px;
  border-left: 2px solid var(--linha-suave); margin-left: 4px;
}
.trajeto .tj-ponto:last-child { border-left-color: transparent; padding-bottom: 0; }
.trajeto .tj-ponto::before {
  content: ""; position: absolute; left: -6px; top: 3px;
  width: 8px; height: 8px; background: var(--papel);
  border: 2px solid var(--linha); border-radius: 50%;
}
.trajeto .tj-local { font-size: 12px; font-weight: bold; color: #000000; }
.trajeto .tj-quando { font-size: 11px; color: var(--cinza); margin-top: 1px; }
.trajeto .tj-origem::before { border-color: var(--azul); background: var(--azul-claro); }
.trajeto .tj-destino::before { border-color: var(--azul); background: var(--azul); }
.trajeto .tj-entregue::before { border-color: var(--verde); background: var(--verde); }
.trajeto .tj-entregue .tj-local { color: var(--verde); }

/* ---- rodapé ---- */
.foot { border-top: 1px solid var(--linha); margin-top: 20px; padding: 12px 0 20px; font-size: 11px; color: var(--cinza); text-align: center; }
.foot a { color: var(--cinza); text-decoration: underline; }

/* =========================================================
   PAINEL ADMINISTRATIVO
   ========================================================= */

/* banner do painel (só nesta página) */
body.pag-painel::before {
  content: "RASTREIO SEGURO — PAINEL ADMINISTRATIVO";
  display: block; background: var(--azul); color: #ffffff;
  font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: bold;
  padding: 10px 16px; border-bottom: 3px solid var(--amarelo);
}

.painel { max-width: 780px; margin: 0 auto; padding: 16px 16px 40px; }
.painel h1 { font-size: 16px; }
.painel .sub { color: var(--cinza); font-size: 11px; margin: 0 0 16px; }

.box { background: var(--papel); border: 1px solid var(--linha); padding: 12px; margin-bottom: 14px; }
.box h2 {
  font-size: 11px; font-weight: bold; color: var(--azul); text-transform: uppercase;
  border-bottom: 1px solid var(--linha); padding-bottom: 5px; margin: 0 0 10px;
}
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid .full { grid-column: 1 / -1; }
.campo label { display: block; font-size: 11px; color: #333333; margin-bottom: 3px; font-weight: bold; }
.campo input, .campo select, .campo textarea {
  width: 100%; border: 1px solid #7f7f7f; background: #ffffff; color: #000000;
  padding: 4px 6px; font-size: 12px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 1px solid var(--azul); }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

.pedido { background: var(--papel); border: 1px solid var(--linha); padding: 12px; margin-bottom: 12px; }
.pedido .p-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pedido .p-cod { font-family: var(--mono); font-size: 14px; font-weight: bold; }
.pedido .p-meta { font-size: 11px; color: var(--cinza); margin-top: 3px; }
.pedido .p-end { font-size: 11px; color: var(--cinza-claro); margin-top: 2px; line-height: 1.5; }
.tag { display: inline-block; font-size: 10px; font-weight: bold; border: 1px solid var(--cinza-claro); padding: 1px 5px; background: #f2f2f2; color: #333333; }
.tag.ok { color: var(--verde); border-color: var(--verde); background: #eaf7ea; }
.tag.andamento { color: var(--azul); border-color: var(--azul); background: var(--azul-claro); }
.tag.aviso-amarelo { color: #7a5c00; border-color: #cc9900; background: #ffffcc; }
.tag.aviso-vermelho { color: #990000; border-color: #cc0000; background: #fdeaea; }

/* O mesmo aviso, dentro do cartão do painel. */
.aviso-painel { border: 1px solid; padding: 6px 8px; margin-top: 8px; font-size: 11px; line-height: 1.45; }
.aviso-painel.amarelo { border-color: #cc9900; background: #ffffcc; color: #4d3a00; }
.aviso-painel.vermelho { border-color: #cc0000; background: #fdeaea; color: #660000; }

.form-aviso { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; padding: 8px 0 4px; }
.form-aviso .campo { flex: 1 1 190px; min-width: 0; }
.form-aviso .campo.wide { flex: 2 1 260px; }
.form-aviso select { width: 100%; border: 1px solid #7f7f7f; background: #ffffff; padding: 4px 6px; font-size: 12px; }
.form-tirar-aviso { padding-bottom: 6px; }

.linha-etapa { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dotted var(--linha-suave); flex-wrap: wrap; }
.linha-etapa:last-child { border-bottom: 0; }
.linha-etapa .e-txt { min-width: 0; flex: 1 1 auto; }
.linha-etapa .e-nome { font-size: 12px; }
.linha-etapa .e-quando { font-size: 11px; color: var(--cinza); margin-top: 1px; }
.linha-etapa.feita .e-nome { font-weight: bold; }
/* Quem leva o destaque é a etapa ATUAL — a última marcada, onde o pedido
   está. Antes o fundo azul ficava na etapa seguinte ("Próxima etapa"), que é
   só um palpite sobre o que vem depois: o olho ia para a linha errada, e era
   o mesmo engano que a tela do cliente cometia. A próxima continua nomeada,
   mas sem fundo, para não disputar a atenção. */
.linha-etapa.atual { position: relative; background: var(--azul-claro); }
.linha-etapa.atual::before {
  content: ""; position: absolute; left: -7px; top: 0; bottom: 0;
  width: 3px; background: var(--azul);
}
.linha-etapa .e-atual { color: var(--azul); font-weight: bold; font-size: 10px; }

.form-etapa { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.form-etapa .quando {
  border: 1px solid #7f7f7f; background: #ffffff; color: #000000;
  padding: 2px 4px; font-size: 11px; font-family: var(--sans);
}
.form-etapa .quando:focus { outline: 1px solid var(--azul); }
.form-etapa .local {
  width: 170px; border: 1px solid #7f7f7f; background: #ffffff; color: #000000;
  padding: 2px 4px; font-size: 11px; font-family: var(--sans);
}
.form-etapa .local:focus { outline: 1px solid var(--azul); }
.linha-etapa .e-local {
  flex: 1 1 100%; font-size: 11px; color: var(--azul); margin-top: 2px;
}
.linha-etapa .e-local::before { content: "◉ "; }
@media (max-width: 560px) {
  .form-etapa { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; }
  .form-etapa .quando, .form-etapa .local { flex: 1 1 auto; min-width: 0; width: auto; }
}

.check-etapa { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 0; font-weight: normal; }
.check-etapa input { width: auto; margin: 0; }

/* ---------- Marcação em lote ----------
   A barra age nos pedidos que estiverem com a caixinha marcada na lista.
   Fica logo acima dela, com fundo próprio, para não se confundir com o
   formulário de criar pedido nem com os cartões. */
.lote {
  background: #eef4fa; border: 1px solid var(--azul); padding: 10px 12px;
  margin-bottom: 14px; position: sticky; top: 0; z-index: 10;
}
.lote-linha { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.lote-linha + .lote-linha { margin-bottom: 8px; }
.lote .campo { flex: 1 1 190px; min-width: 0; }
.lote .campo label { font-size: 11px; }
.lote-sel { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: bold; }
.lote-sel input { width: auto; margin: 0; }
.lote-conta { font-size: 11px; color: var(--cinza); }
.lote-cascata { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--cinza); white-space: nowrap; margin: 0; font-weight: normal; }
.lote-cascata input { width: auto; margin: 0; }

/* ---------- Em todos os pedidos ----------
   Os dois casos que valem para a base inteira: postar a leva toda de uma vez
   e pendurar o mesmo aviso em todos. Fica dentro da caixa de Novo pedido,
   separado por uma linha, porque é outro escopo: o lote acima age no que
   está marcado na lista, este age em tudo. */
.todos {
  border-top: 1px solid var(--linha-suave); margin-top: 16px; padding-top: 12px;
}
.todos h2 { font-size: 0.95rem; margin: 0 0 8px; }
.todos-sel {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; font-weight: bold; margin: 0 0 10px;
}
.todos-sel input { width: auto; margin: 0; }
.todos-conta { font-size: 11px; font-weight: normal; color: var(--cinza); }
.todos-bloco { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.todos-form {
  flex: 1 1 268px; min-width: 0; background: #f2f6fa;
  border: 1px solid var(--linha-suave); padding: 10px 12px;
}
.todos-form strong { display: block; font-size: 12px; margin-bottom: 8px; }
.todos-form .campo { margin-bottom: 8px; }
.todos-form .btn { max-width: 100%; }
@media (max-width: 560px) {
  .todos-bloco { gap: 10px; }
  .todos-form { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .lote-linha { gap: 8px; }
  .lote .campo { flex: 1 1 100%; }
}

/* A caixinha do lote em cada pedido, à esquerda do código. */
.pedido .p-sel { flex: 0 0 auto; padding-top: 2px; }
.pedido .p-sel input { width: 16px; height: 16px; margin: 0; }

.form-envio { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: end; padding: 8px 0 4px; }
@media (max-width: 640px) { .form-envio { grid-template-columns: 1fr; } }

.link-caixa { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.link-caixa a { flex: 1 1 auto; min-width: 0; }

/* Mensagem pronta para mandar ao cliente. A caixa de texto é o centro: é
   dela que o texto sai, então ela precisa caber a mensagem inteira sem
   rolagem e mostrar as quebras de linha exatamente como o cliente vai ler. */
.msg-cliente { margin-bottom: 14px; }
.msg-cliente h2 { font-size: 13px; color: var(--azul); margin: 0 0 4px; }
.mc-dica { font-size: 11px; color: var(--cinza); margin: 0 0 8px; }
.msg-box textarea, .msg-cliente textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #7f7f7f; background: #fbfbfb;
  padding: 8px; font-family: var(--mono); font-size: 12px; line-height: 1.5;
  color: #222222; resize: vertical;
}
.mc-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }

.etapas { margin-top: 10px; border-top: 1px solid var(--linha); }
.etapas > summary { list-style: none; cursor: pointer; font-size: 11px; font-weight: bold; color: var(--azul); padding: 6px 0; }
.etapas > summary::-webkit-details-marker { display: none; }
.etapas > summary .resumo { color: var(--cinza); font-weight: normal; margin-left: 6px; }

.progresso { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.progresso .barra { flex: 1 1 auto; height: 10px; border: 1px solid var(--cinza-claro); background: #f2f2f2; }
.progresso .barra i { display: block; height: 100%; background: var(--verde); }
.progresso .pct { flex: 0 0 auto; font-size: 11px; color: var(--cinza); }

.link-linha { margin-top: 8px; font-size: 11px; }
.link-linha .rotulo { display: block; font-size: 10px; color: var(--cinza); text-transform: uppercase; }
.link-linha a { font-family: var(--mono); word-break: break-all; }

.filtros { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.filtro { font-size: 12px; color: var(--link); text-decoration: underline; }
.filtro:hover { color: #cc0000; }
.filtro.on { font-weight: bold; color: var(--azul); text-decoration: none; }
.filtro .n { color: var(--cinza); font-weight: normal; }

/* ---------- Abas de etapa ----------
   A segunda fileira. Mostra onde cada pedido está (a última etapa marcada),
   e fica logo abaixo do recorte geral — separada por uma linha, porque
   responde a outra pergunta. As abas com zero pedido ficam apagadas: elas
   ocupam lugar o tempo todo, e o número é o que diz se vale clicar. */
.abas-etapa {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
  border-top: 1px solid var(--linha-suave); padding-top: 8px; margin: -4px 0 12px;
}
.abas-rotulo { font-size: 11px; font-weight: bold; color: var(--cinza); }
.abas-etapa .filtro { font-size: 11px; }
.abas-etapa .filtro .n { font-size: 10px; }
.abas-etapa .filtro.zerada { color: var(--cinza-claro); }
.abas-etapa .filtro.zerada:hover { color: var(--cinza); }
.abas-etapa .filtro.on.zerada { color: var(--azul); }

/* A etiqueta de etapa em cada cartão. ".fim" é o pedido entregue, que é o
   único estado terminal — o verde marca isso sem precisar de legenda. */
.p-etapa { color: var(--azul); font-weight: bold; }
.p-etapa.fim { color: var(--verde); }

/* ---- busca ---- */
.busca { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.busca input[type="search"] {
  flex: 1 1 240px; min-width: 0;
  border: 1px solid #7f7f7f; background: #ffffff; color: #000000;
  padding: 4px 6px; font-size: 12px; font-family: var(--sans);
}
.busca input[type="search"]:focus { outline: 1px solid var(--azul); }
.busca-resumo { font-size: 11px; color: var(--cinza); margin: 0 0 10px; }

/* ---- popup de edição ----
   Quem manda no abre/fecha é a classe .aberto, posta pelo JavaScript — assim
   o comportamento é o mesmo em qualquer navegador. O servidor já entrega o
   popup do pedido com .aberto quando a página volta de um POST, e o botão
   "Editar rastreio" abre pelo #editar-ID do endereço. */
.modal { display: none; position: fixed; inset: 0; z-index: 50; }
.modal.aberto { display: block; }
.modal-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.modal-caixa {
  position: relative; background: var(--papel); border: 1px solid var(--azul-escuro);
  max-width: 640px; margin: 24px auto; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
}
.modal-topo {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  background: var(--azul); color: #ffffff; padding: 8px 10px; border-bottom: 3px solid var(--amarelo);
}
.modal-topo .mp-id { font-size: 13px; }
.modal-topo .mp-id strong { font-family: var(--mono); font-size: 15px; color: var(--amarelo); }
.modal-topo .mp-cod { font-family: var(--mono); font-size: 12px; margin-top: 3px; }
.modal-topo .mp-meta { font-size: 11px; color: #cfe0f0; margin-top: 2px; }
.modal-x {
  color: #ffffff; text-decoration: none; font-size: 20px; line-height: 1;
  font-weight: bold; padding: 0 4px; flex: 0 0 auto;
}
.modal-x:hover { color: var(--amarelo); }
.modal-corpo { overflow-y: auto; padding: 10px 12px; }
.mp-sec { border-top: 1px solid var(--linha); padding-top: 8px; margin-top: 10px; }
.mp-sec:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.mp-sec h3 {
  font-size: 11px; font-weight: bold; color: var(--azul); text-transform: uppercase;
  margin: 0 0 4px;
}
.mp-sec h3 .resumo { color: var(--cinza); font-weight: normal; text-transform: none; margin-left: 6px; }
.mp-sec textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #7f7f7f; background: #fbfbfb;
  padding: 8px; font-family: var(--mono); font-size: 12px; line-height: 1.5;
  color: #222222; resize: vertical;
}
.modal-rodape {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  border-top: 1px solid var(--linha); background: #f2f2f2; padding: 8px 10px;
}
@media (max-width: 560px) {
  .modal-caixa { margin: 0; max-height: 100vh; height: 100%; border: 0; }
}

.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: flex-start; }
.espera { position: relative; }
.espera > summary { list-style: none; cursor: pointer; display: inline-block; }
.espera > summary::-webkit-details-marker { display: none; }
.espera[open] { flex: 1 1 100%; }
.form-espera { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.form-espera input {
  flex: 1 1 180px; min-width: 0;
  border: 1px solid #7f7f7f; padding: 4px 6px; font-size: 12px; background: #ffffff;
}
.form-espera input:focus { outline: 1px solid var(--azul); }

.flash { border: 1px solid; padding: 8px 10px; margin-bottom: 12px; font-size: 12px; }
.flash.ok { color: #004d00; background: #eaf7ea; border-color: var(--verde); }
.flash.erro { color: #660000; background: #fdeaea; border-color: var(--vermelho); }

.login-box { max-width: 360px; margin: 40px auto; background: var(--papel); border: 1px solid var(--linha); padding: 16px; }
.login-box h1 { font-size: 16px; }
.login-box p { color: var(--cinza); font-size: 11px; margin: 0 0 12px; }

.cep-aviso { font-size: 10px; color: var(--cinza); margin-top: 3px; line-height: 1.4; }
.cep-aviso.ok { color: var(--verde); }
.cep-aviso.erro { color: var(--vermelho); }
.campo-dica { font-size: 10px; color: var(--cinza); margin-top: 3px; line-height: 1.4; }