:root {
  --tinta: #1d2026;
  --tinta-2: #626a78;
  --fundo: #f4f5f7;
  --papel: #fff;
  --linha: #e3e6eb;
  --acento: #0787f5;
  --acento-suave: #eaf4ff;
  --ok: #168254;
  --aviso: #9a6500;
  --aviso-fundo: #fff4dc;
  --erro: #cc4d58;
  --erro-fundo: #fff0f1;
  --sombra: 0 2px 4px rgba(22, 31, 44, .05), 0 10px 24px rgba(22, 31, 44, .06);
  --sombra-hover: 0 5px 10px rgba(22, 31, 44, .08), 0 16px 30px rgba(22, 31, 44, .10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tarja {
  position: fixed;
  z-index: 5;
  inset: 0 0 auto;
  height: 3px;
  padding: 0;
  overflow: hidden;
  color: transparent;
  font-size: 0;
}
.tarja--sim, .tarja--hom, .tarja--prod { background: var(--acento); }
.modo-publico { width: max-content; max-width: calc(100% - 32px); margin: 22px auto -38px; padding: 5px 10px; border-radius: 999px; background: var(--acento-suave); color: var(--acento); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-align: center; text-transform: uppercase; }
.modo-publico--hom { background: var(--aviso-fundo); color: var(--aviso); }
.modo-publico--prod { background: var(--erro-fundo); color: var(--erro); }

.app-frame { min-height: 100vh; display: flex; }
.barra-lateral {
  position: fixed; inset: 3px auto 0 0; z-index: 2;
  display: flex; flex-direction: column; width: 248px; padding: 28px 14px 16px;
  background: rgba(255, 255, 255, .96); border-right: 1px solid var(--linha);
  backdrop-filter: blur(18px);
}
.marca { display: block; padding: 0 12px; color: var(--tinta); font-size: 19px; font-weight: 760; letter-spacing: -.035em; text-decoration: none; }
.marca span { color: var(--acento); }
.marca-subtitulo { margin: 3px 12px 30px; color: var(--tinta-2); font-size: 12px; }
.navegacao { display: grid; gap: 7px; }
.navegacao a {
  padding: 10px 13px;
  border: 1px solid #edf1f5;
  border-radius: 999px;
  background: #f8fafc;
  color: var(--tinta-2);
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}
.navegacao a.ativo { background: var(--acento); border-color: var(--acento); color: #fff; box-shadow: 0 5px 12px rgba(7, 135, 245, .20); }
.navegacao a:hover { background: var(--acento-suave); border-color: #c5dcf7; color: var(--acento); transform: translateY(-1px); }
.navegacao a.ativo:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
.area-app { min-width: 0; flex: 1; margin-left: 248px; }
.topo { display: flex; align-items: center; justify-content: space-between; padding: 23px 32px 0; }
.topo p { margin: 0; color: var(--tinta-2); font-size: 13px; }
.modo-mini {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid #beddff;
  border-radius: 999px;
  background: var(--acento-suave);
  box-shadow: 0 2px 6px rgba(7, 135, 245, .08);
  color: var(--acento);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.modo-mini--hom { background: var(--aviso-fundo); border-color: #e4cf9f; box-shadow: 0 2px 6px rgba(142, 96, 0, .07); color: var(--aviso); }
.modo-mini--prod { background: var(--erro-fundo); border-color: #e8bfbb; box-shadow: 0 2px 6px rgba(190, 62, 55, .07); color: var(--erro); }
.conta { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 9px; align-items: center; margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--linha); }
.avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #123b77; color: #fff; font-size: 13px; font-weight: 750; }
.quem { min-width: 0; color: var(--tinta-2); font-size: 12px; line-height: 1.25; }
.quem strong, .quem small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem strong { color: var(--tinta); font-size: 13px; }
.quem small { margin-top: 2px; color: var(--tinta-2); }
.conta .link { grid-column: 2; justify-self: start; }
.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--acento); font-size: 12px; font-weight: 650; text-decoration: none;
}
.link:hover { text-decoration: underline; }

main { max-width: 1480px; margin: 0 auto; padding: 25px 32px 64px; }
.auth-shell main { max-width: 480px; padding: 64px 24px; }

.caixa {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 24px;
  padding: 26px;
  box-shadow: var(--sombra);
}
.caixa--estreita { max-width: 420px; margin: 48px auto; }

h1 { font-size: 1.75rem; margin: 0 0 8px; letter-spacing: -.04em; line-height: 1.15; }
.texto { color: var(--tinta-2); }

.form { display: grid; gap: 16px; }
.pagina-formulario { max-width: 1120px; }
.pagina-novo-pedido { max-width: none; }
.pagina-importacao { max-width: 1240px; }
.pagina-importacao-envio { max-width: none; }
.cabeca-formulario { max-width: 72ch; margin: 0 0 24px; }
.cabeca-formulario h1 { margin-bottom: 9px; }
.cabeca-formulario .texto { margin: 0; }
.formulario-painel { padding: 26px; border: 1px solid var(--linha); border-radius: 24px; background: var(--papel); box-shadow: var(--sombra); }
.formulario-painel--compacto { max-width: 620px; }
.importacao-grade { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(360px, 1fr); gap: 22px; align-items: stretch; }
.formulario-painel--importacao { max-width: none; min-width: 0; height: 100%; gap: 18px; }
.cabeca-cartao-importacao h2, .guia-importacao h2 { margin: 0 0 5px; font-size: 1.05rem; letter-spacing: -.015em; }
.cabeca-cartao-importacao .texto, .guia-importacao > .texto { margin: 0; line-height: 1.45; }
.importacao-periodo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guia-importacao { height: 100%; padding: 26px; border: 1px solid var(--linha); border-radius: 24px; background: var(--papel); box-shadow: var(--sombra); }
.guia-importacao > .texto { margin-bottom: 16px; }
.guia-etapa { border: 1px solid #e6e9ee; background: #f7f8fa; }
.guia-etapa:first-of-type { border-radius: 18px 18px 0 0; }
.guia-etapa:last-of-type { border-radius: 0 0 18px 18px; }
.guia-etapa + .guia-etapa { border-top: 0; }
.guia-etapa summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--tinta); font-size: 14px; font-weight: 650; cursor: pointer; list-style: none; }
.guia-etapa summary::-webkit-details-marker { display: none; }
.guia-etapa summary::after { content: '⌄'; margin-left: auto; color: var(--tinta-2); font-size: 17px; font-weight: 500; transition: transform .16s ease; }
.guia-etapa[open] summary::after { transform: rotate(180deg); }
.guia-etapa-numero { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 50%; background: var(--acento); color: #fff; font-size: 13px; font-weight: 700; }
.guia-etapa-conteudo { padding: 0 18px 14px 54px; border-top: 1px solid #e6e9ee; color: var(--tinta-2); font-size: 13px; line-height: 1.45; }
.pagina-novo-pedido .formulario-painel { gap: 20px; }
.pagina-novo-pedido fieldset { min-width: 0; padding: 19px 20px 21px; }
.pagina-novo-pedido fieldset > .linha + .linha,
.pagina-novo-pedido fieldset > label + .linha,
.pagina-novo-pedido fieldset > .linha + label { margin-top: 15px; }
.pagina-novo-pedido fieldset > label { min-width: 0; }

/* O <label> precisa ser BLOCO, nao grid: com grid, cada no de texto vira
   uma linha propria e o rotulo se separa do campo — foi o que fez
   "Numero" aparecer longe do input, com a dica solta no meio, e induziu
   o operador a digitar o numero no campo de logradouro. */
.form label {
  display: block;
  font-size: 13px;
  color: var(--tinta-2);
  line-height: 1.4;
}
.form label > input,
.form label > select,
.form label > textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
}
.form label .dica { display: inline; margin: 0; }

/* Campos de larguras diferentes alinham pela base, para os inputs
   ficarem numa linha so mesmo quando um rotulo ocupa duas linhas. */
.linha { align-items: end; }

.form input {
  padding: 11px 13px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: 15px;
  background: #fff;
  color: var(--tinta);
}
.form input:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }

.botao {
  display: inline-block;
  padding: 11px 18px;
  background: var(--acento);
  color: #fff;
  border: 1px solid var(--acento);
  border-radius: 999px;
  box-shadow: 0 5px 12px rgba(7, 135, 245, .20);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.botao:hover { filter: brightness(1.04); box-shadow: 0 8px 17px rgba(7, 135, 245, .27); transform: translateY(-2px); }
.botao:active { transform: translateY(0); }
.botao--fantasma { background: #fff; color: var(--acento); border-color: #beddff; box-shadow: none; }
.botao--fantasma:hover { background: var(--acento-suave); box-shadow: none; }

.alerta { padding: 11px 14px; border-radius: 6px; font-size: 14px; margin: 0 0 16px; }
.alerta--erro { background: var(--erro-fundo); color: var(--erro); }
.alerta--aviso { background: var(--aviso-fundo); color: var(--aviso); }
.alerta--ok { background: #def0e6; color: var(--ok); }

/* ── layout de páginas ─────────────────────────────────────── */
.cabeca { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.cabeca h1 { margin: 0; }
.cabeca .botao, .cabeca .link-voltar { margin-left: auto; }
.link-voltar { color: var(--acento); text-decoration: none; font-size: 14px; }

.colunas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
.coluna-principal { display: grid; min-width: 0; gap: 22px; }
.lateral { display: grid; gap: 22px; align-content: start; }
.lateral > .caixa { align-self: start; }
@media (max-width: 860px) { .colunas { grid-template-columns: minmax(0, 1fr); } }

.subtitulo { font-size: 1rem; margin: 0 0 14px; letter-spacing: -.01em; }
.subtitulo.peq { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); margin-top: 22px; }
.resumo { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.divisoria { border: 0; border-top: 1px solid var(--linha); margin: 18px 0; }

/* ── tabelas ───────────────────────────────────────────────── */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--linha); border-radius: 22px; background: var(--papel); box-shadow: var(--sombra); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.tabela th, .tabela td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela thead th { font-size: 11px; color: var(--tinta-2); background: #fafbfc; white-space: nowrap; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background .16s ease; }
.tabela tbody tr:hover { background: #fbfdff; }
.tabela--compacta { min-width: 0; font-size: 13px; }
.tabela .dir { text-align: right; }
.tabela tr.inativa { opacity: .55; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; }
.campo-link-fiscal {
  padding: 9px 13px;
  border: 1px solid #beddff;
  border-radius: 999px;
  background: var(--acento-suave);
  color: var(--tinta);
}
.campo-link-fiscal:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.peq { font-size: 12px; color: var(--tinta-2); }
.quebra { word-break: break-all; }

/* ── selos de status ───────────────────────────────────────── */
.selo {
  display: inline-block; padding: 4px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
  background: #eef2f1; color: var(--tinta-2); border: 1px solid var(--linha);
}
.selo--aguardando, .selo--nao_emitida, .selo--pendente { background: #f1f3f2; color: #5a6866; }
.selo--confirmado, .selo--autorizada { background: #def0e6; color: var(--ok); border-color: #b9dfc9; }
.selo--processando, .selo--reservada, .selo--provisorio, .selo--indeterminada {
  background: var(--aviso-fundo); color: var(--aviso); border-color: #e4cf9f;
}
.selo--rejeitada, .selo--erro, .selo--cancelado, .selo--cancelada {
  background: var(--erro-fundo); color: var(--erro); border-color: #e8bfbb;
}

/* ── formulários ───────────────────────────────────────────── */
.form--largo { max-width: none; }
fieldset { border: 1px solid var(--linha); border-radius: 18px; padding: 18px 20px 20px; margin: 0 0 18px; background: var(--papel); }
.formulario-painel fieldset { margin: 0; background: #fbfcfe; border-color: #e8ecf1; }
legend { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-2); padding: 0 6px; }
.linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.pagina-novo-pedido .linha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.pagina-novo-pedido .linha--pedido { grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr); }
.pagina-novo-pedido .linha--endereco-principal { grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr); }
.pagina-novo-pedido .linha--tripla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(130px, .72fr); }
.form select {
  padding: 10px 12px; border: 1px solid var(--linha); border-radius: 999px;
  font-size: 15px; background: #fff; color: var(--tinta);
}
.form select:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.pagina-novo-pedido label.seletor-pilula { position: relative; }
.pagina-novo-pedido label.seletor-pilula::after {
  content: '⌄';
  position: absolute;
  right: 15px;
  bottom: 10px;
  color: var(--tinta-2);
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}
.pagina-novo-pedido label.seletor-pilula > select {
  height: 46px;
  min-height: 46px;
  padding: 10px 40px 10px 13px;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
}
.form input[type="file"] {
  padding: 6px 10px 6px 7px;
  border: 1px dashed #bbd8fb;
  border-radius: 999px;
  background: var(--acento-suave);
  color: var(--tinta-2);
}
.form input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 12px;
  border: 1px solid #c5dcf7;
  border-radius: 999px;
  background: #fff;
  color: var(--tinta);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.form input[type="file"]::file-selector-button:hover { background: #f6faff; border-color: var(--acento); transform: translateY(-1px); }
.dica { font-size: 12px; color: var(--tinta-2); margin: 6px 0 0; font-weight: 400; }
.form label.check, .check {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14px; color: var(--tinta);
}
.form label.check > input { display: inline-block; width: auto; margin-top: 3px; }
.check input { margin-top: 3px; }
.acoes { display: flex; gap: 12px; align-items: center; }

/* ── listas de bloqueio ────────────────────────────────────── */
.lista-bloqueios, .lista-avisos { margin: 0 0 18px; padding-left: 18px; display: grid; gap: 10px; }
.lista-bloqueios li { line-height: 1.45; }
.lista-bloqueios .remedio { display: block; font-size: 13px; color: var(--tinta-2); margin-top: 2px; }
.lista-bloqueios .campo { display: block; font-size: 11px; color: #8a9694; margin-top: 2px; }

/* ── definições ────────────────────────────────────────────── */
.dados { margin: 0; display: grid; gap: 0; }
.dados > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding: 8px 0; border-bottom: 1px dotted var(--linha); }
.dados > div:last-child { border-bottom: 0; }
.dados dt { font-size: 12px; color: var(--tinta-2); margin: 0; }
.dados dd { margin: 0; font-size: 14px; }

/* ── edição inline de parâmetros ───────────────────────────── */
.tabela--params td { vertical-align: top; }
.form-inline, .form-confirmar { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; }
.campo-valor, .campo-nota {
  padding: 5px 10px; border: 1px solid var(--linha); border-radius: 999px;
  font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #fff; color: var(--tinta); width: 100%; max-width: 220px;
}
.campo-nota { font-family: inherit; max-width: 150px; }
.campo-valor:focus, .campo-nota:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.botao-mini {
  padding: 5px 10px; border: 1px solid var(--acento); background: var(--acento);
  color: #fff; border-radius: 999px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.botao-mini:hover { filter: brightness(1.08); }
.acoes-celula { min-width: 200px; }
.acoes-celula form { margin-bottom: 6px; }
.dica.bloco { display: block; margin-top: 4px; max-width: 34ch; line-height: 1.4; }

.cabeca-secao { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.cabeca-secao .subtitulo { margin: 0; }
.link-editar { margin-left: auto; font-size: 13px; color: var(--acento); text-decoration: none; }
.link-editar:hover { text-decoration: underline; }
.resultado-acoes { margin: 22px 0 0; }

/* Resumos laterais: os estados confirmados ocupam uma linha, sem altura ociosa. */
.status-resumo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.status-resumo > * { margin: 0; }
.status-resumo > form { flex-basis: 100%; width: 100%; }
.caixa-status { padding-top: 28px; padding-bottom: 26px; }
.caixa-status .subtitulo { margin-bottom: 13px; }
.caixa-simulacao .lista-bloqueios { margin-top: 14px; }
.secoes-emissoes { margin-top: 22px; }

/* ── andamento do pedido ──────────────────────────────────── */
.andamento .cabeca-secao { margin-bottom: 20px; }
.andamento .dica { margin: 4px 0 0; }
.andamento-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.andamento-etapa { position: relative; min-width: 0; padding: 50px 16px 2px; border-left: 1px solid var(--linha); }
.andamento-etapa:first-child { padding-left: 0; border-left: 0; }
.andamento-etapa:last-child { padding-right: 0; }
.andamento-etapa:not(:last-child)::after { content: ''; position: absolute; top: 16px; left: 44px; right: -1px; height: 2px; background: #dce5e2; }
.andamento-etapa--concluida:not(:last-child)::after { background: #55b884; }
.andamento-etapa--pendente:not(:last-child)::after, .andamento-etapa--atencao:not(:last-child)::after { background: #efce91; }
.andamento-icone {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 16px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 2px solid #c9d0d4;
  border-radius: 50%;
  background: #fff;
  color: #8c969c;
  box-shadow: 0 2px 5px rgba(23, 37, 48, .07);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.andamento-etapa:first-child .andamento-icone { left: 0; }
.andamento-icone--concluida { border-color: #55b884; background: #eff9f3; color: #228356; }
.andamento-icone--pendente, .andamento-icone--atencao { border-color: #e7a126; background: #fff9ed; color: #d88600; }
.andamento-icone--bloqueada { border-color: #c9d0d4; background: #fafbfc; color: #8c969c; }
.andamento-titulo { margin: 0 0 8px; color: var(--tinta); font-size: 14px; font-weight: 700; }
.andamento-data { min-height: 20px; margin: 12px 0 5px; color: var(--tinta-2); font-size: 12px; }
.andamento-descricao { margin: 0; color: var(--tinta-2); font-size: 12px; line-height: 1.45; }
.andamento-etapa--pendente .andamento-titulo { color: var(--aviso); }
.andamento-etapa--atencao .andamento-titulo { color: var(--erro); }
.andamento-etapa--bloqueada { opacity: .8; }

@media (max-width: 760px) {
  .app-frame { display: block; }
  .barra-lateral { position: static; width: auto; min-height: auto; padding: 18px 16px 14px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .marca-subtitulo { margin-bottom: 16px; }
  .navegacao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .navegacao a { text-align: center; font-size: 13px; }
  .conta { display: none; }
  .area-app { margin-left: 0; }
  .topo { padding: 16px 20px 0; }
  main { padding: 20px 16px 40px; }
  .caixa { border-radius: 20px; padding: 20px; }
  .formulario-painel { padding: 18px; border-radius: 20px; }
  .importacao-grade { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .guia-importacao { padding: 20px; border-radius: 20px; }
  .importacao-periodo { grid-template-columns: minmax(0, 1fr); }
  .pagina-novo-pedido .formulario-painel { gap: 18px; }
  .pagina-novo-pedido fieldset { padding: 17px 16px 19px; }
  .pagina-novo-pedido .linha,
  .pagina-novo-pedido .linha--pedido,
  .pagina-novo-pedido .linha--endereco-principal,
  .pagina-novo-pedido .linha--tripla { grid-template-columns: minmax(0, 1fr); }
  .cabeca { align-items: flex-start; flex-direction: column; gap: 12px; }
  .cabeca .botao, .cabeca .link-voltar { margin-left: 0; }
  .status-resumo { align-items: flex-start; flex-direction: column; gap: 8px; }
  .andamento-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .andamento-etapa { padding-top: 48px; }
  .andamento-etapa::after { display: none; }
  .andamento-etapa:nth-child(odd) { padding-left: 0; border-left: 0; }
  .andamento-etapa:nth-child(even) { padding-right: 0; }
  .andamento-etapa:nth-child(odd) .andamento-icone { left: 0; }
}