/* Paleta e tipografia seguem o Manual de Identidade Visual dos Correios (MIV):
   azul institucional (Pantone 540C/00416B) + azul de destaque (Pantone 300C/0083CA),
   amarelo Correios (Pantone 7549C/FFD400) + amarelo de apoio (Pantone 7550C/CD992B),
   cinzas de apoio (Warm Gray 3/5). Tipografia: FS Elliot é proprietária e não está
   disponível aqui, então usamos a secundária que o próprio manual autoriza como
   substituta (Trebuchet MS), com fallback de sistema. */
:root {
  --azul-escuro: #00416b; /* Pantone 540 C */
  --azul: #0083ca; /* Pantone 300 C */
  --azul-medio: #5b7c93; /* Pantone 5395 C (aproximado) */
  --amarelo: #ffd400; /* Pantone 7549 C */
  --amarelo-claro: #ffdc73; /* Pantone 7548 C (aproximado) */
  --amarelo-escuro: #cd992b; /* Pantone 7550 C */
  --vermelho: #e30613;
  --cinza-suporte: #d1ccc7;
  --cinza-suporte-escuro: #bdb4ab;
  --bg: #f7f6f4;
  --borda: #d1ccc7;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: #1a1a18;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, Arial, sans-serif;
}

/* Barra lateral fixa — navegação entre telas sem precisar voltar ao menu. */
.layout { display: flex; min-height: 100vh; align-items: stretch; }
.sidebar {
  width: 220px; flex-shrink: 0; background: var(--azul-escuro); color: #fff;
  display: flex; flex-direction: column; padding: 20px 0;
}
.sidebar-logo {
  font-weight: bold; font-size: 16px; padding: 0 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.15); margin-bottom: 10px;
}
.sidebar a {
  color: #fff; text-decoration: none; padding: 12px 20px; font-size: 14px;
  opacity: .8; border-left: 3px solid transparent;
}
.sidebar a:hover { opacity: 1; background: rgba(255,255,255,.08); }
.sidebar a.ativo {
  opacity: 1; background: rgba(255,255,255,.12); border-left-color: var(--amarelo); font-weight: bold;
}
.conteudo { flex: 1; min-width: 0; }

.topo {
  background: var(--azul-escuro);
  color: #fff;
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
  overflow: hidden;
}
/* Elemento prismático (grafismo de apoio da marca) — leve, no canto, sem
   interferir na leitura do cabeçalho, seguindo o espírito do item 30 do MIV. */
.topo::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 140px;
  background: linear-gradient(115deg, transparent 50%, var(--amarelo) 50.5%);
  opacity: 0.9;
  pointer-events: none;
}
.topo h1 { font-size: 16px; margin: 0; position: relative; z-index: 1; }
.topo a { color: #fff; text-decoration: none; font-size: 13px; opacity: 0.9; position: relative; z-index: 1; }
.topo a:hover { opacity: 1; text-decoration: underline; }
.topo-usuario {
  display: flex; align-items: center; gap: 14px; position: relative; z-index: 1;
  font-size: 13px;
}
.topo-usuario select {
  width: auto; padding: 4px 8px; font-size: 12px; border-radius: 6px;
}

.wrap { max-width: 900px; margin: 24px auto; padding: 0 16px 60px; }
/* Reversas Geradas tem colunas demais (11) + até 4 ícones de ação na última —
   com os 900px padrão os ícones extrapolavam a borda branca do card. */
.wrap-largo { max-width: 1200px; }
.card {
  background: #fff; border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 18px; margin-bottom: 16px;
}
.card h2 { font-size: 15px; margin: 0 0 12px; color: var(--azul-escuro); }
/* Filho direto só — "h3" sem escopo pegava também os cards de comparação de
   modalidade (.comparacao-item h3, aninhado bem mais fundo dentro do card),
   sobrescrevendo a cor branca deles com azul-escuro e deixando o título do
   PAC/Mini Envios invisível (texto azul-escuro em cima de fundo azul-escuro/azul). */
.card > h3, .volume-extra h3, #volumeTitulo1 { font-size: 13px; margin: 0 0 4px; color: var(--azul-escuro); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
label { font-size: 12px; color: #444; margin: 8px 0 4px; display: block; }
input[type="text"], input[type="password"], input[type="number"], input[type="file"], select, textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--borda); border-radius: 8px;
  padding: 9px 10px; font-size: 14px; background: #fff; outline: none;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--azul); }
textarea { min-height: 70px; resize: vertical; }

button {
  border: 1px solid var(--azul-escuro); background: var(--azul-escuro); color: #fff;
  padding: 10px 16px; border-radius: 10px; font-size: 14px; cursor: pointer;
  font-family: inherit;
}
button:hover { background: var(--azul); border-color: var(--azul); }
button.outline { background: #fff; color: var(--azul-escuro); }
button.outline:hover { background: var(--bg); color: var(--azul-escuro); }
button.amarelo { background: var(--amarelo); color: var(--azul-escuro); border-color: var(--amarelo); font-weight: bold; }
button.amarelo:hover { background: var(--amarelo-escuro); border-color: var(--amarelo-escuro); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }

.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.menu-card {
  background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 30px 20px;
  text-align: center; text-decoration: none; color: var(--azul-escuro);
  box-shadow: 0 1px 2px rgba(0,0,0,.04); position: relative; overflow: hidden;
}
.menu-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--amarelo), var(--amarelo-escuro));
}
.menu-card:hover { border-color: var(--azul); }
.menu-card .titulo { font-size: 17px; font-weight: bold; margin: 10px 0 6px; }
.menu-card .desc { font-size: 13px; color: #555; }

.msg { font-size: 13px; padding: 10px 12px; border-radius: 8px; margin-top: 10px; }
.msg.erro { background: #fdecea; color: #9c2a20; border: 1px solid #f3c6c1; }
.msg.ok { background: #eaf7ec; color: #1e7a34; border: 1px solid #c7e9cc; }
/* Restrições da cotação (prazo adicional, CEP com condição especial) — precisa
   chamar atenção de verdade, não passar batido como um texto pequeno cinza. */
.msg.aviso { background: #fff8e1; color: #8a6100; border: 1px solid #ffe082; font-size: 14px; font-weight: 600; }

/* KPIs em destaque (Gerencial) — sempre 5 numa linha só (fonte encolhe com
   clamp() em telas estreitas em vez de quebrar pra uma segunda linha). */
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.kpi-card { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 6px; text-align: center; overflow: hidden; }
.kpi-card .valor { font-size: clamp(13px, 1.7vw, 20px); font-weight: 800; color: var(--azul-escuro); white-space: nowrap; }
.kpi-card .valor .kpi-linha2 { display: block; font-size: clamp(10px, 1.1vw, 13px); font-weight: 600; margin-top: 2px; white-space: nowrap; }
.kpi-card .rotulo { font-size: clamp(10px, 1vw, 12px); color: #666; margin-top: 4px; }

/* Botão "Ver mais" dos rankings paginados (top 5 + incremento de 10). */
.botao-ver-mais { margin-top: 6px; font-size: 12px; padding: 4px 10px; }

/* Linha "Total" fixa no topo dos rankings — clicar limpa o filtro daquela dimensão. */
tr.linha-total { font-weight: 700; border-bottom: 2px solid var(--borda); }

/* Cabeçalhos ordenáveis (Gerencial: rankings + tabelas de drill-down). */
table.lista thead th[data-campo] { cursor: pointer; user-select: none; white-space: nowrap; }
table.lista thead th[data-campo]:hover { color: var(--vermelho); }

/* Trilha de navegação do drill-down de itens (Mês → Dia → Etiquetas). */
.crumb { cursor: pointer; color: var(--azul-escuro); text-decoration: underline; }
.crumb:hover { color: var(--vermelho); }
.crumb-atual { cursor: default; font-weight: 700; text-decoration: none; color: inherit; }
.crumb-sep { color: #999; }

/* Linhas de tabela clicáveis pra filtro cruzado (Gerencial) — destaque quando
   o filtro daquela linha está ativo. */
tr.linha-filtravel { cursor: pointer; }
tr.linha-filtravel:hover { background: var(--bg); }
tr.linha-filtro-ativo { background: #e8f1f8; font-weight: 600; }

.chips-filtro { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip-filtro {
  display: inline-flex; align-items: center; gap: 4px; background: var(--azul-escuro); color: #fff;
  border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.chip-filtro:hover { background: var(--vermelho); }

.grafico-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 12px; }
.grafico-caixa { text-align: center; }
.grafico-caixa canvas { max-height: 260px; }

table.lista { width: 100%; border-collapse: collapse; font-size: 13px; }
table.lista th {
  border-bottom: 2px solid var(--azul-escuro); padding: 8px 6px; text-align: left;
  color: var(--azul-escuro);
}
table.lista td { border-bottom: 1px solid var(--borda); padding: 8px 6px; text-align: left; }
table.lista tr.erro td { color: #9c2a20; }

.fonte-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.fonte-tabs button { background: #fff; color: #444; border-color: var(--borda); font-size: 13px; padding: 7px 12px; }
.fonte-tabs button.ativo { background: var(--azul-escuro); color: #fff; border-color: var(--azul-escuro); }

.hr { height: 1px; background: var(--borda); margin: 14px 0; }
.fine { font-size: 12px; color: #777; margin-top: 8px; }

.linha-valor-declarado { display: flex; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
.linha-valor-declarado label { margin: 0; font-size: 14px; color: #1a1a18; }
.valor-estreito { width: 130px !important; }

/* Legenda flutuante (tooltip) das siglas de serviços adicionais */
.ajuda {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cinza-suporte-escuro); color: #fff;
  font-size: 11px; font-weight: bold; cursor: help;
  margin-left: 6px; vertical-align: middle;
}
.ajuda .balao {
  display: none;
  position: absolute; bottom: 22px; left: 0; z-index: 10;
  width: 240px; background: var(--azul-escuro); color: #fff;
  border-radius: 8px; padding: 10px 12px; font-size: 12px; line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.ajuda:hover .balao { display: block; }
.ajuda .balao dt { font-weight: bold; color: var(--amarelo); }
.ajuda .balao dd { margin: 0 0 6px; }

/* Comparação PAC x SEDEX lado a lado — cada card inteiro é clicável. Fundo
   branco em todos (antes cada modalidade tinha uma cor de fundo própria) —
   a identidade visual agora vem da logo do serviço + uma faixinha colorida
   no topo do card, não do card inteiro pintado. */
.comparacao { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.comparacao-item {
  position: relative; overflow: hidden;
  border: 2px solid var(--borda); border-radius: 10px; padding: 18px; text-align: center;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
  background: #fff; color: var(--azul-escuro);
}
.comparacao-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.comparacao-item:hover, .comparacao-item:focus { outline: none; border-color: var(--azul); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
/* Largura fixa (não max-width) pra todas as logos ficarem do mesmo tamanho
   entre si, já que os PNGs vêm com proporções bem diferentes — object-fit
   evita esticar/distorcer, e max-height segura logo muito "quadrada". */
.comparacao-item .logo { display: block; width: 170px; max-height: 64px; object-fit: contain; margin: 0 auto 10px; }
/* h3 continua existindo como texto alternativo — só fica visível se a logo
   daquela modalidade ainda não tiver sido configurada (ver comparacao-item .logo). */
.comparacao-item h3 { margin: 0 0 8px; font-size: 18px; }
.comparacao-item.tem-logo h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.comparacao-item .preco { font-size: 22px; font-weight: bold; }
.comparacao-item .prazo { font-size: 15px; font-weight: 600; margin: 4px 0; }
.comparacao-item .prazo-numero { font-size: 26px; font-weight: 800; color: var(--azul); }

.comparacao-sedex::before { background: var(--amarelo); }
.comparacao-pac::before { background: var(--azul-escuro); }

/* Linha de destaque (SEDEX 10/12) — cards menores, acima do SEDEX/PAC. */
.comparacao-secundaria { grid-template-columns: 1fr 1fr; margin-top: 0; margin-bottom: 12px; }
.comparacao-secundaria .comparacao-item { padding: 10px; }
.comparacao-secundaria .comparacao-item .logo { width: 120px; max-height: 46px; margin-bottom: 6px; }
.comparacao-secundaria .comparacao-item h3 { font-size: 14px; }
.comparacao-secundaria .comparacao-item .preco { font-size: 16px; }
.comparacao-secundaria .comparacao-item .prazo { font-size: 12px; }
.comparacao-secundaria .comparacao-item .prazo-numero { font-size: 18px; }

.comparacao-destaque::before { background: var(--vermelho); }
.comparacao-item .prazo-limite { color: var(--vermelho); font-weight: bold; font-size: 12px; margin-top: 2px; }

/* Mini Envios — sozinho numa linha. */
.comparacao-unica { grid-template-columns: 1fr; margin-top: 12px; }
.comparacao-mini::before { background: var(--azul); }
.comparacao-item .sufixo { font-size: 12px; margin-top: 2px; }

.comparacao-indisponivel {
  background: var(--cinza-suporte); color: #666; cursor: not-allowed;
}
.comparacao-indisponivel .preco { font-size: 15px; font-weight: 600; }

/* Campo com valor obrigatório faltando (validação antes de gerar etiqueta) —
   some sozinho assim que o operador volta a editar o campo. */
.campo-invalido { border-color: var(--vermelho) !important; background: #fdecea; }

/* Linha do tempo do rastreio (API SRO - Rastro) — eventos em ordem cronológica,
   mais recente no topo, com o último evento em destaque. */
.linha-rastreio td { background: var(--bg); padding: 12px 16px; }
.rastreio-linha-do-tempo { display: flex; flex-direction: column; gap: 10px; }
.evento-rastreio {
  border-left: 3px solid var(--cinza-suporte-escuro); padding: 4px 12px; text-align: left;
}
.evento-rastreio.evento-ultimo { border-left-color: var(--azul); background: #fff; border-radius: 0 8px 8px 0; }
.evento-data { font-size: 12px; color: #777; }
.evento-descricao { font-size: 14px; font-weight: 600; color: var(--azul-escuro); }
.evento-detalhe { font-size: 13px; color: #444; }
.evento-local { font-size: 12px; color: #777; }
.evento-badge {
  display: inline-block; margin-top: 4px; background: var(--azul); color: #fff;
  font-size: 11px; font-weight: bold; padding: 2px 8px; border-radius: 10px;
}

/* Timeline resumida (3 pontos: Postado / meio / Entregue), usada em qualquer
   tela que mostre rastreio de um objeto específico (Segunda Via, Objetos
   Postados, Reversas Geradas). Gerada via Rastreio.montarTimelineHtml. */
.rastreio-timeline { position: relative; display: flex; justify-content: space-between; margin: 16px 0 20px; padding: 0 4px; }
.rt-linha-fundo, .rt-linha-preenchida {
  position: absolute; top: 9px; height: 3px; left: calc(100% / 6); right: calc(100% / 6);
}
.rt-linha-fundo { background: var(--cinza-suporte); }
.rt-linha-preenchida { right: auto; width: 0; background: var(--azul-escuro); }
.rt-ponto { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 33.33%; text-align: center; }
.rt-dot { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--cinza-suporte); margin-bottom: 6px; }
.rt-dot-ok { border-color: var(--azul-escuro); background: var(--azul-escuro); }
.rt-dot-atencao { border-color: var(--amarelo-escuro); background: var(--amarelo-escuro); }
.rt-dot-alerta {
  border-color: var(--vermelho); background: var(--vermelho); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; line-height: 1;
}
.rt-texto { font-size: 13px; }

/* Dados de remetente/destinatário nas telas de rastreio — antes usava .fine
   (12px), pequeno demais pra informação principal da tela. */
.dados-pessoa { font-size: 15px; line-height: 1.7; color: #1a1a18; }

/* Barra de progresso — emissão de rótulo oficial (assíncrona na API dos
   Correios), enquanto o frontend fica consultando se já ficou pronto. */
.barra-progresso { background: var(--cinza-suporte); border-radius: 6px; height: 10px; overflow: hidden; margin-top: 8px; max-width: 320px; }
.barra-progresso-preenchida { background: var(--azul); height: 100%; transition: width 0.4s; }

/* Botões de ação em ícone (linhas de tabela) — SVG em currentColor pra seguir a cor
   institucional, com um tooltip ao passar o mouse (mesma ideia do balão de ajuda dos
   serviços adicionais, só que junto de um botão clicável em vez de um texto fixo). */
.acoes-icones { display: flex; gap: 6px; align-items: center; }
.btn-icone {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border-radius: 8px; border: 1px solid var(--borda); background: #fff; color: var(--azul-escuro);
  cursor: pointer;
}
.btn-icone:hover { background: var(--bg); border-color: var(--azul); color: var(--azul); }
.btn-icone.perigo:hover { color: #9c2a20; border-color: #9c2a20; background: #fdecea; }
.btn-icone:disabled { opacity: .4; cursor: not-allowed; }
.btn-icone .tooltip {
  display: none;
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  background: var(--azul-escuro); color: #fff; font-size: 11px; font-weight: normal;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap; z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.btn-icone:hover .tooltip { display: block; }

/* Impressão do card "Resumo da cotação" (individual.html/logistica-reversa.html):
   esconde só a navegação — o resto da tela (cards de preço + resumo) sai como está,
   já que "imprimir" e "tirar print" foram tratados como equivalentes no pedido. */
@media print {
  body.imprimindo-cotacao .sidebar,
  body.imprimindo-cotacao .topo {
    display: none !important;
  }
}
/* Ícone dentro de botão de texto (ex.: ações em lote) — só um respiro à esquerda. */
button .icone-inline { margin-right: 6px; vertical-align: -3px; }

/* Modal genérico (overlay sobre a própria página, sem abrir janela/aba nova) —
   hoje só usado pra imagem da entrega (frontend/js/imagemEntrega.js), mas
   escrito genérico o bastante pra outros popups futuros. */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 100; align-items: center; justify-content: center; padding: 20px;
}
.modal-caixa {
  background: #fff; border-radius: 12px; max-width: 600px; width: 100%;
  max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.modal-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--borda);
}
.modal-topo h2 { margin: 0; font-size: 16px; }
.modal-fechar {
  border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer;
  color: #666; padding: 0 4px;
}
.modal-fechar:hover { color: var(--vermelho); }
.modal-corpo { padding: 18px; overflow-y: auto; }
.modal-caixa.larga { max-width: 900px; }

.abas-modal { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 16px; }
.aba-botao {
  background: none; border: none; padding: 8px 14px; cursor: pointer;
  font-size: 14px; color: #666; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.aba-botao.ativa { color: var(--azul-escuro); border-bottom-color: var(--azul-escuro); font-weight: 600; }
.aba-painel { display: none; }
.aba-painel.ativa { display: block; }

.formato-cartoes { display: flex; gap: 10px; }
.formato-cartao {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--borda);
  border-radius: 8px; padding: 10px 14px; cursor: pointer; flex: 1;
}
.formato-cartao input { position: absolute; opacity: 0; pointer-events: none; }
.formato-cartao.ativo { border-color: var(--azul-escuro); background: #f0f6fc; }
.formato-cartao .fine { margin-top: 0; }

.detalhes-secao { margin-top: 16px; }
.detalhes-secao:first-child { margin-top: 0; }
.detalhes-secao h3 { font-size: 13px; margin: 0 0 6px; color: var(--azul-escuro); }
.imagem-entrega-item { margin-bottom: 16px; text-align: center; }
.imagem-entrega-item:last-child { margin-bottom: 0; }
.imagem-entrega-item img { max-width: 100%; border-radius: 8px; border: 1px solid var(--borda); }

/* Dropdown de autocomplete (busca de destinatário salvo em individual.html/
   lote.html, frontend/js/destinatarioBusca.js) — flutua sobre o formulário,
   não empurra o layout. */
.autocomplete-lista {
  position: absolute; z-index: 20; left: 0; right: 0; margin-top: 2px;
  background: #fff; border: 1px solid var(--borda); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto;
}
.autocomplete-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--borda); }
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: var(--bg); }
.autocomplete-item b { display: block; font-size: 13px; }
.autocomplete-item .fine { margin: 0; }

/* Aviso "N etiquetas pendentes" (frontend/js/etiquetasPendentesAviso.js) —
   banner amarelo institucional, chamativo mas não é erro. */
.aviso-pendencias {
  background: var(--amarelo-claro); border: 1px solid var(--amarelo-escuro);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px;
}
.aviso-pendencias a { color: var(--azul-escuro); font-weight: bold; text-decoration: none; }
.aviso-pendencias a:hover { text-decoration: underline; }

/* Lista de itens importados com erro (Lote — validação de XML/CSV) — cada
   item vira um miniformulário editável na hora, em vez de só um texto de erro. */
.item-erro { border: 1px solid #f3c6c1; background: #fdecea; border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.item-erro .motivos { color: #9c2a20; font-size: 12px; margin-bottom: 8px; }
.item-erro .motivos div { margin-bottom: 2px; }

/* Linha da lista de itens do lote com aviso de validação pendente (CEP editado
   não bate mais com a cidade/UF) — não bloqueia, só chama atenção até o
   operador corrigir ou confirmar mesmo assim antes de gerar. */
tr.linha-com-aviso { background: #fdf6e3; }

/* ---- Responsivo (celular/tablet, Android e iOS) ----
   O botão hambúrguer e o overlay são injetados pelo próprio auth.js (que já
   roda em toda página protegida) — não precisa mexer no HTML de cada tela. */
.btn-hamburguer {
  display: none; width: 34px; height: 34px; margin-right: 10px; padding: 0;
  border: none; background: transparent; color: #fff; font-size: 22px;
  line-height: 1; cursor: pointer; position: relative; z-index: 1;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.menu-overlay { display: none; }

@media (max-width: 768px) {
  .btn-hamburguer { display: inline-flex; }

  /* Sidebar fixa de 220px tomaria mais da metade da tela de um celular — vira
     uma gaveta que abre por cima do conteúdo em vez de empurrar tudo. */
  .layout { flex-direction: column; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 210;
    width: 260px; max-width: 82vw;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,.25);
  }
  .sidebar.aberta { transform: translateX(0); }
  .menu-overlay.aberta {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200;
  }

  .topo { padding: 12px 14px; }
  .topo h1 { font-size: 15px; }
  .topo-usuario { font-size: 12px; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .topo::after { width: 70px; } /* grafismo não pode comer o espaço do título numa tela estreita */

  .wrap, .wrap-largo { max-width: 100%; margin: 14px auto; padding: 0 12px 40px; }
  .card { padding: 14px; }
  /* Tabela larga (várias colunas + ícones) rola de lado dentro do card em vez
     de estourar a tela inteira — hover de tooltip não existe em touch mesmo,
     então não faz falta se algum balão/dropdown ficar cortado na borda. */
  .card { overflow-x: auto; }

  .row, .row-3 { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr; }
  .comparacao, .comparacao-secundaria { grid-template-columns: 1fr; }
  .formato-cartoes { flex-direction: column; }
  .row-3.kpi-grid, .kpi-grid { grid-template-columns: repeat(5, 1fr); } /* mantém 5 numa linha só, de propósito */

  .grafico-grid { grid-template-columns: 1fr; }
  table.lista { font-size: 12px; }
  .acoes-icones { flex-wrap: wrap; }

  .modal-caixa { max-height: 90vh; }
}

/* Celular bem estreito (iPhone SE, Android compacto) — aperta mais um pouco. */
@media (max-width: 400px) {
  .topo h1 { font-size: 13px; }
  .topo-usuario span { display: none; } /* nome do usuário some, "Sair" continua */
  .card { padding: 12px; }
}