/* Pharma — sistema visual (2026-10-25).
   Identidade própria: tinta azul-noite + verde Pharma, superfícies claras, números tabulares.
   Tokens primeiro; componentes depois; telas por último. Nenhum recurso externo (CSP: só 'self'). */

:root {
  /* Marca */
  --marca-600: #0b7a62;
  --marca-700: #08634f;
  --marca-800: #064c3d;
  --marca-50: #e9f6f1;
  --marca-100: #cfeee2;

  /* Tinta (navegação e texto) */
  --tinta-950: #0a1424;
  --tinta-900: #0f1b2d;
  --tinta-800: #18273d;
  --tinta-700: #24364f;
  --tinta-300: #9aa9bd;
  --tinta-200: #c7d1de;

  /* Neutros */
  --fundo: #f4f6f9;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;
  --borda: #e2e7ee;
  --borda-forte: #cbd3de;
  --texto: #0f1b2d;
  --texto-2: #475569;
  --texto-3: #6b7a8f;

  /* Semânticas */
  --ok: #0f7a4a;      --ok-fundo: #e8f6ee;    --ok-borda: #b7e3c8;
  --aviso: #8a5200;   --aviso-fundo: #fff5e1; --aviso-borda: #f6d9a1;
  --erro: #b42318;    --erro-fundo: #fdeeec;  --erro-borda: #f5c2bc;
  --info: #1d5fbf;    --info-fundo: #ebf2fd;  --info-borda: #c3d7f6;

  --raio-s: 6px;
  --raio: 8px;
  --raio-l: 12px;
  --sombra-1: 0 1px 2px rgba(15, 27, 45, .06), 0 1px 1px rgba(15, 27, 45, .03);
  --sombra-2: 0 8px 24px rgba(15, 27, 45, .10), 0 2px 6px rgba(15, 27, 45, .06);
  --foco: 0 0 0 3px rgba(11, 122, 98, .28);
  --largura-lateral: 248px;

  /* Compatibilidade com telas ainda não redesenhadas */
  --cor-primaria: var(--marca-600);
  --cor-primaria-escura: var(--marca-700);
  --cor-fundo: var(--fundo);
  --cor-superficie: var(--superficie);
  --cor-texto: var(--texto);
  --cor-suave: var(--texto-3);
  --cor-borda: var(--borda);
  --cor-erro: var(--erro);
  --cor-erro-fundo: var(--erro-fundo);
  --cor-ok: var(--ok);
  --cor-ok-fundo: var(--ok-fundo);
  --cor-aviso: var(--aviso);
  --cor-aviso-fundo: var(--aviso-fundo);

  font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

/* Início: estilos limitados ao dashboard, sem alterar as demais telas. */
.dashboard { max-width: 1120px; }
.dashboard .pagina-cabecalho { align-items: center; margin-bottom: 1rem; }
.dashboard-saudacao { color: var(--texto-2); font-size: .85rem; margin: 0 0 .25rem; }
.dashboard-atualizacao { display: flex; align-items: center; gap: .75rem; }
.dashboard-local { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .8rem 1rem; border: 1px solid var(--borda); background: var(--superficie); border-radius: var(--raio); }
.dashboard-local > .icone { color: var(--marca-700); }
.dashboard-local > div { flex: 1; min-width: 140px; overflow-wrap: anywhere; }
.dashboard-local strong { font-size: .78rem; color: var(--texto-2); }
.dashboard-local p { margin: .15rem 0 0; }
.dashboard-local .dashboard-local-ajuda { flex-basis: 100%; color: var(--texto-2); font-size: .82rem; }
.dashboard-secao { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; margin: 1.25rem 0 .65rem; }
.dashboard-secao h2 { margin: 0; }
.dashboard-secao p { margin: 0; }
.dashboard-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: .75rem; }
.dashboard-grade:has(> .dashboard-indicador:only-child) { grid-template-columns: minmax(0, 540px); }
.dashboard-indicador { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 1rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.dashboard-indicador h3 { margin: 0 0 .45rem; font-size: .87rem; color: var(--texto-2); }
.dashboard-valor { font-size: 2rem; line-height: 1.2; letter-spacing: -.03em; }
.dashboard-status { font-size: .8rem; color: var(--texto-2); margin-top: .3rem; }
.dashboard-status .carregando { font-size: .8rem; padding: 0; }
.dashboard-status p { margin: .25rem 0 0; overflow-wrap: anywhere; }
.dashboard-detalhe { font-size: .78rem; color: var(--texto-3); margin: .5rem 0 .85rem; }
.dashboard-indicador > a { margin-top: auto; font-size: .82rem; font-weight: 600; text-decoration: none; padding: .25rem 0; }
.dashboard-indicador > a:hover { text-decoration: underline; }
.dashboard-indicador.com-pendencia { border-top: 3px solid var(--marca-600); padding-top: calc(1rem - 2px); }
.dashboard-indicador.com-pendencia .dashboard-valor { color: var(--marca-700); }
.dashboard-indicador.com-erro { border-color: var(--erro-borda); }
.dashboard-indicador.com-erro .dashboard-status { color: var(--erro); }
.dashboard h2 { margin-top: 1.25rem; }
.dashboard .dashboard-secao h2 { margin-top: 0; }
.dashboard-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.dashboard-acoes a { display: inline-flex; align-items: center; gap: .5rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-s); padding: .65rem .8rem; text-decoration: none; font-size: .85rem; font-weight: 600; }
.dashboard-acoes a:hover { border-color: var(--marca-600); background: var(--marca-50); }
.dashboard-nota { font-size: .75rem; color: var(--texto-3); margin-top: 1rem; max-width: 100ch; }
@media (max-width: 640px) {
  .dashboard-grade { grid-template-columns: 1fr; }
  .dashboard-atualizacao { justify-content: space-between; width: 100%; }
  .dashboard-local > a { min-height: 44px; }
  .dashboard-acoes { display: grid; grid-template-columns: 1fr 1fr; }
  .dashboard-acoes a { min-height: 44px; overflow-wrap: anywhere; }
}

* { box-sizing: border-box; }
html { background: var(--fundo); }
body { margin: 0; background: var(--fundo); min-height: 100vh; }
a { color: var(--marca-700); text-underline-offset: 2px; }
a:hover { color: var(--marca-800); }
h1 { font-size: 1.5rem; line-height: 1.2; font-weight: 650; letter-spacing: -.015em; margin: 0 0 .25rem; }
h2 { font-size: 1rem; font-weight: 650; margin: 1.5rem 0 .75rem; letter-spacing: -.005em; }
h3 { font-size: .95rem; font-weight: 650; }
p { margin: .4rem 0; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--raio-s); }
.num, td.num, th.num { font-variant-numeric: tabular-nums; }
.icone { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.icone.p { width: 15px; height: 15px; vertical-align: -2px; }
.icone.g { width: 22px; height: 22px; }
[hidden] { display: none !important; }

/* ---------- Moldura ---------- */
.app { min-height: 100vh; }
.lateral, .topo { display: none; }
body.autenticado .app { display: grid; grid-template-columns: var(--largura-lateral) minmax(0, 1fr); }
body.autenticado .lateral {
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  background: var(--tinta-900); color: var(--tinta-200); border-right: 1px solid var(--tinta-950);
}
.marca { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.1rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.marca:hover { color: #fff; }
.marca img { border-radius: 7px; }
.marca small { display: block; font-weight: 500; font-size: .7rem; color: var(--tinta-300); letter-spacing: .02em; line-height: 1.2; }
.menu { flex: 1; overflow-y: auto; padding: .6rem .6rem 1rem; }
.menu h3 { display: flex; align-items: center; gap: .5rem; font-size: .68rem; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-300); margin: 1.1rem .55rem .3rem; }
.menu h3 .icone { width: 14px; height: 14px; opacity: .8; }
.menu a { display: flex; align-items: center; gap: .6rem; padding: .42rem .6rem .42rem 1.95rem; border-radius: var(--raio-s); text-decoration: none; color: var(--tinta-200); font-weight: 500; }
.menu a.raiz { padding-left: .6rem; }
.menu a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu a.ativo { background: rgba(46, 196, 152, .14); color: #fff; box-shadow: inset 2px 0 0 #2ec498; }
.lateral-rodape { padding: .75rem 1.1rem; font-size: .72rem; color: var(--tinta-300); border-top: 1px solid rgba(255, 255, 255, .06); }

.principal { min-width: 0; display: flex; flex-direction: column; }
body.autenticado .topo {
  display: flex; align-items: center; gap: 1rem; height: 56px; padding: 0 1.75rem; position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .94); backdrop-filter: saturate(160%) blur(6px); border-bottom: 1px solid var(--borda);
}
.alternar-menu { display: none !important; }
.contexto-atual { flex: 1; display: flex; align-items: center; gap: .45rem; color: var(--texto-2); font-size: .85rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contexto-atual .icone { color: var(--texto-3); }
.contexto-atual a { color: var(--texto-2); }
.usuario-atual { display: flex; align-items: center; gap: .65rem; font-size: .85rem; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--marca-100); color: var(--marca-800); flex: none; }
.usuario-atual .nome { font-weight: 600; color: var(--texto); }
.conteudo { width: 100%; max-width: 1360px; padding: 1.5rem 1.75rem 3rem; outline: none; }

/* ---------- Cabeçalho de página ---------- */
.pagina-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.pagina-cabecalho .subtitulo { color: var(--texto-2); margin: .3rem 0 0; max-width: 75ch; }
.pagina-cabecalho .meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; margin-top: .55rem; color: var(--texto-2); font-size: .85rem; }
.pagina-cabecalho .meta .sep { color: var(--borda-forte); }
.migalhas { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--texto-3); margin-bottom: .35rem; }
.migalhas a { color: var(--texto-3); text-decoration: none; }
.migalhas a:hover { color: var(--marca-700); text-decoration: underline; }

/* ---------- Superfícies ---------- */
.cartao, .painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-l); padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--sombra-1); }
.painel { padding: 0; }
.painel > .painel-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1.25rem; border-bottom: 1px solid var(--borda); min-height: 50px; }
.painel > .painel-cabecalho h2 { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.painel > .painel-cabecalho h2 .icone { color: var(--texto-3); }
.painel > .painel-corpo { padding: 1.1rem 1.25rem; }
.painel > .painel-corpo.sem-recuo { padding: 0; }
.painel > .painel-rodape { padding: .85rem 1.25rem; border-top: 1px solid var(--borda); background: var(--superficie-2); border-radius: 0 0 var(--raio-l) var(--raio-l); }
.cartao > h2:first-child, .cartao > form > h2:first-child { margin-top: 0; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.cartoes a.cartao { text-decoration: none; color: inherit; display: block; transition: border-color .12s, box-shadow .12s; }
.cartoes a.cartao:hover { border-color: var(--marca-600); box-shadow: var(--sombra-2); }
.cartao .titulo { font-weight: 650; margin-bottom: .3rem; }
.suave { color: var(--texto-3); font-size: .85rem; }
.decisao { border-top: 1px solid var(--borda); margin-top: 1rem; padding-top: 1rem; }

.grade-2 { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }
.coluna-principal { min-width: 0; }
.coluna-lateral { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 72px; }
.coluna-lateral > * { margin-bottom: 0; }

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; margin: 0; }
dl.kv dt { color: var(--texto-3); font-size: .82rem; }
dl.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .78rem; color: var(--texto-3); }

/* ---------- Formulários ---------- */
.campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; min-width: 0; }
.linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 .9rem; }
label { font-weight: 600; font-size: .82rem; color: var(--texto-2); }
input, select, textarea {
  font: inherit; color: var(--texto); padding: .45rem .65rem; min-height: 36px; width: 100%;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-s); background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: #98a4b5; }
input:hover, select:hover, textarea:hover { border-color: #b3bdca; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca-600); box-shadow: var(--foco); }
input:disabled, select:disabled, textarea:disabled { background: var(--superficie-2); color: var(--texto-3); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--marca-600); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--erro); }
input[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .18); }
.erro-campo { color: var(--erro); font-size: .8rem; font-weight: 500; }
.erro-campo:empty { display: none; }
textarea { min-height: 72px; resize: vertical; }
input.qtd { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
input.desconto { width: 6rem; text-align: right; font-variant-numeric: tabular-nums; }
input.valor { max-width: 10rem; }
label.marcar { display: flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--texto); cursor: pointer; margin: .2rem 0 .6rem; }
label.marcar input { margin: 0; }
.acoes-campo { align-self: end; }
.campo-busca { position: relative; }
.campo-busca > .icone { position: absolute; left: .7rem; bottom: 9px; color: var(--texto-3); pointer-events: none; }
.campo-busca input { padding-left: 2.2rem; }
details { margin: .75rem 0; }
details > summary { cursor: pointer; color: var(--marca-700); font-weight: 600; padding: .35rem 0; }

/* ---------- Botões ---------- */
button, a.botao {
  font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 36px; padding: .45rem .95rem; border-radius: var(--raio-s); cursor: pointer; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--marca-700); background: var(--marca-600); color: #fff; box-shadow: 0 1px 0 rgba(15, 27, 45, .08);
  transition: background .12s, border-color .12s, box-shadow .12s, color .12s;
}
button:hover, a.botao:hover { background: var(--marca-700); color: #fff; }
button.secundario, a.botao.secundario { background: #fff; color: var(--texto); border-color: var(--borda-forte); }
button.secundario:hover, a.botao.secundario:hover { background: var(--superficie-2); border-color: #b3bdca; color: var(--texto); }
button.perigo { background: #fff; color: var(--erro); border-color: var(--erro-borda); }
button.perigo:hover { background: var(--erro-fundo); color: var(--erro); border-color: var(--erro); }
button.perigo-forte { background: var(--erro); border-color: #8f1c13; color: #fff; }
button.perigo-forte:hover { background: #8f1c13; color: #fff; }
button.link { background: none; border: none; box-shadow: none; color: var(--marca-700); padding: 0; min-height: 0; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
button.link:hover { background: none; color: var(--marca-800); }
button.icone-so { background: transparent; border-color: transparent; box-shadow: none; color: var(--texto-3); padding: .35rem; min-height: 30px; }
button.icone-so:hover { background: var(--erro-fundo); color: var(--erro); }
button.fantasma { background: transparent; border-color: transparent; box-shadow: none; color: var(--texto-2); }
button.fantasma:hover { background: var(--superficie-2); color: var(--texto); }
button.grande { min-height: 44px; font-size: .95rem; width: 100%; }
button:disabled { opacity: .55; cursor: not-allowed; }
.acoes { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.acoes.direita { justify-content: flex-end; }

/* ---------- Avisos ---------- */
.aviso { display: flex; gap: .65rem; align-items: flex-start; padding: .75rem .9rem; border-radius: var(--raio); margin-bottom: 1rem; border: 1px solid; font-size: .9rem; }
.aviso > .icone { margin-top: 1px; }
.aviso .aviso-texto { flex: 1; min-width: 0; }
.aviso.erro { background: var(--erro-fundo); color: #7a1a12; border-color: var(--erro-borda); }
.aviso.erro > .icone { color: var(--erro); }
.aviso.ok { background: var(--ok-fundo); color: #0b5a37; border-color: var(--ok-borda); }
.aviso.ok > .icone { color: var(--ok); }
.aviso.info { background: var(--aviso-fundo); color: #6b4000; border-color: var(--aviso-borda); }
.aviso.info > .icone { color: var(--aviso); }
.aviso ul { margin: .35rem 0 0; padding-left: 1.1rem; }

/* ---------- Tabelas ---------- */
.tabela { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-l); margin-bottom: 1rem; box-shadow: var(--sombra-1); }
.painel .tabela { border: none; border-radius: 0; box-shadow: none; margin: 0; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
thead th { background: var(--superficie-2); font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #fafbfd; }
tbody tr.clicavel { cursor: pointer; }
tbody tr.clicavel:hover td { background: var(--marca-50); }
td.num, th.num { text-align: right; white-space: nowrap; }
td .sub { display: block; color: var(--texto-3); font-size: .78rem; margin-top: 1px; }
td a.id-venda { font-weight: 650; text-decoration: none; font-variant-numeric: tabular-nums; }
td a.id-venda:hover { text-decoration: underline; }
td.forte { font-weight: 600; }
.vazio { padding: 1.75rem 1rem; color: var(--texto-3); text-align: center; margin: 0; }
.estado-vazio { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 2.5rem 1rem; text-align: center; color: var(--texto-3); }
.estado-vazio > .icone { width: 30px; height: 30px; color: var(--borda-forte); margin-bottom: .25rem; }
.estado-vazio strong { color: var(--texto); font-weight: 600; }

/* ---------- Selos ---------- */
.selo { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; background: #eef2f6; color: var(--texto-2); border: 1px solid var(--borda); line-height: 1.5; }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.selo.pendente { background: var(--aviso-fundo); color: var(--aviso); border-color: var(--aviso-borda); }
.selo.aprovada, .selo.ativo, .selo.quitada { background: var(--ok-fundo); color: var(--ok); border-color: var(--ok-borda); }
.selo.rejeitada, .selo.inativo { background: var(--erro-fundo); color: var(--erro); border-color: var(--erro-borda); }
.selo.info { background: var(--info-fundo); color: var(--info); border-color: var(--info-borda); }
.selos { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }

/* ---------- Abas e filtros ---------- */
.abas { display: flex; gap: .15rem; border-bottom: 1px solid var(--borda); margin-bottom: 1rem; overflow-x: auto; }
.abas button { background: none; border: none; box-shadow: none; color: var(--texto-2); border-radius: 0; padding: .55rem .8rem; min-height: 40px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas button:hover { background: none; color: var(--texto); }
.abas button[aria-selected="true"] { color: var(--marca-700); border-bottom-color: var(--marca-600); }
.abas .contagem { display: inline-block; min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: #eef2f6; color: var(--texto-2); font-size: .72rem; line-height: 1.35rem; text-align: center; font-variant-numeric: tabular-nums; }
.abas button[aria-selected="true"] .contagem { background: var(--marca-100); color: var(--marca-800); }
.barra-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--borda); }
.barra-filtros .campo { margin: 0; }
.barra-filtros .campo-busca { flex: 1 1 280px; }
.barra-filtros .campo.data { width: 158px; }
.barra-filtros label.marcar { margin: 0 0 .55rem; }
.resumo-lista { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--texto-3); font-size: .8rem; padding: .6rem 1rem; border-top: 1px solid var(--borda); background: var(--superficie-2); border-radius: 0 0 var(--raio-l) var(--raio-l); }
.paginacao { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.paginacao button { min-height: 30px; padding: .25rem .7rem; }

/* ---------- Carregamento ---------- */
.carregando { display: flex; align-items: center; gap: .55rem; color: var(--texto-3); padding: .5rem 0; margin: 0; }
.carregando::before { content: ""; width: 16px; height: 16px; border: 2px solid var(--borda); border-top-color: var(--marca-600); border-radius: 50%; animation: girar .8s linear infinite; flex: none; }
.painel .carregando { padding: 1.25rem; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .carregando::before { animation: none; } }

/* ---------- Confirmação de ação irreversível ---------- */
.confirmacao { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .75rem .9rem; margin-top: .75rem; border: 1px solid var(--erro-borda); background: var(--erro-fundo); border-radius: var(--raio); color: #7a1a12; }
.confirmacao p { margin: 0; flex: 1 1 240px; font-weight: 500; }

/* ---------- Linha do tempo (etapas da venda) ---------- */
ol.etapas { list-style: none; padding: 0; margin: 0; }
ol.etapas li { position: relative; padding: 0 0 1rem 1.6rem; font-size: .88rem; }
ol.etapas li:last-child { padding-bottom: 0; }
ol.etapas li::before { content: ""; position: absolute; left: 0; top: .22rem; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--borda-forte); box-sizing: border-box; z-index: 1; }
ol.etapas li::after { content: ""; position: absolute; left: 5px; top: 1rem; bottom: -.1rem; width: 2px; background: var(--borda); }
ol.etapas li:last-child::after { display: none; }
ol.etapas li strong { font-weight: 600; }
ol.etapas li .suave { font-size: .82rem; }
ol.etapas li.feita::before { background: var(--ok); border-color: var(--ok); }
ol.etapas li.feita::after { background: var(--ok-borda); }
ol.etapas li.atual::before { background: #fff; border-color: var(--aviso); box-shadow: 0 0 0 3px var(--aviso-fundo); }
ol.etapas li.interrompida::before { background: var(--erro); border-color: var(--erro); }
ol.etapas li.futura, ol.etapas li.nao-implementada { color: var(--texto-3); }
ol.etapas li.nao-implementada::before { border-style: dashed; }

/* ---------- Login ---------- */
.login { max-width: 400px; margin: 9vh auto 2rem; padding: 0 1rem; }
.login .cartao { padding: 1.75rem; box-shadow: var(--sombra-2); }
.login h1 { font-size: 1.2rem; margin-bottom: 1rem; }
.login .marca-login { display: flex; align-items: center; justify-content: center; gap: .6rem; font-weight: 750; font-size: 1.3rem; letter-spacing: -.02em; color: var(--tinta-900); margin-bottom: 1.25rem; }
.login button[type="submit"] { width: 100%; min-height: 40px; }
.segredo { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 1.05rem; letter-spacing: .08em; word-break: break-all; background: var(--superficie-2); border: 1px solid var(--borda); padding: .6rem; border-radius: var(--raio-s); }

/* ---------- Telas ainda no padrão anterior ---------- */
section { margin-top: 1.5rem; }
.alerta-margem { color: var(--aviso); font-weight: 600; }
.lista-busca { list-style: none; padding: 0; margin: .25rem 0 .75rem; }
.lista-busca li { padding: .2rem 0; }
.total-venda { font-size: 1.1rem; font-weight: 700; margin: .75rem 0; font-variant-numeric: tabular-nums; }
.pedido-logistica h3 { margin: 0 0 .4rem; font-size: 1rem; }
.pedido-logistica ul { margin: .3rem 0 .8rem; padding-left: 1.2rem; }
.pedido-logistica li.cancelada { text-decoration: line-through; color: var(--texto-3); }
.lancamento { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; align-items: end; }

/* ---------- Venda: registro ---------- */
.cliente-linha { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 0 .75rem; align-items: end; }
.cliente-linha > button { margin-bottom: .9rem; }
.cliente-encontrado { display: flex; align-items: center; gap: .75rem; padding: .65rem .85rem; border: 1px solid var(--ok-borda); background: var(--ok-fundo); border-radius: var(--raio); margin-bottom: .9rem; }
.cliente-encontrado .avatar { background: #fff; }
.cliente-encontrado .mono { display: block; }
.candidatos { display: grid; gap: .5rem; margin-bottom: .9rem; }
.candidato { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.candidato .cliente-encontrado { flex: 1 1 18rem; margin-bottom: 0; background: var(--fundo); border-color: var(--borda); }
.resultados-busca { position: relative; }
.resultados-busca > * { position: absolute; z-index: 30; left: 0; right: 0; top: -.6rem; margin: 0; background: #fff; border: 1px solid var(--borda-forte); border-radius: var(--raio); box-shadow: var(--sombra-2); }
.resultados-busca .lista-busca { padding: .3rem; max-height: 320px; overflow-y: auto; }
.resultados-busca .lista-busca li { padding: 0; }
.resultados-busca .lista-busca button { display: flex; width: 100%; justify-content: space-between; gap: 1rem; text-align: left; text-decoration: none; padding: .55rem .65rem; border-radius: var(--raio-s); color: var(--texto); font-weight: 500; }
.resultados-busca .lista-busca button:hover, .resultados-busca .lista-busca li:first-child button { background: var(--marca-50); }
.resultados-busca .sku { color: var(--texto-3); font-size: .78rem; font-family: ui-monospace, "Cascadia Mono", monospace; }
.itens-venda td { padding-top: .45rem; padding-bottom: .45rem; }
.itens-venda select { min-width: 150px; }
.disponivel.baixo { color: var(--erro); font-weight: 700; }
.resumo-venda .linha-resumo { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.resumo-venda .linha-resumo strong { color: var(--texto); font-weight: 600; }
.resumo-venda .total-destaque { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75rem 0 .1rem; margin-top: .4rem; border-top: 1px solid var(--borda); }
.resumo-venda .total-destaque > span:first-child { font-weight: 600; color: var(--texto-2); }
.resumo-venda [data-teste="total"] { font-size: 1.65rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tinta-900); }
.resumo-venda .cotacao { font-size: .78rem; color: var(--texto-3); margin: .15rem 0 .9rem; text-align: right; }

/* ---------- Venda: ficha ---------- */
.totais { display: grid; justify-content: end; grid-template-columns: auto auto; gap: .3rem 2rem; padding: .9rem 1.25rem; margin: 0; border-top: 1px solid var(--borda); font-variant-numeric: tabular-nums; }
.totais dt { color: var(--texto-3); text-align: right; }
.totais dd { margin: 0; text-align: right; font-weight: 600; }
.totais .total { font-size: 1.1rem; font-weight: 750; color: var(--texto); }
.revisao-rodape { padding: .65rem 1.25rem; border-top: 1px solid var(--borda); color: var(--texto-3); font-size: .8rem; }
.financeiro-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .9rem; }
.financeiro-numeros div { padding: .55rem .7rem; border-radius: var(--raio); background: var(--superficie-2); border: 1px solid var(--borda); }
.financeiro-numeros span { display: block; font-size: .68rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 650; }
.financeiro-numeros strong { font-size: .98rem; font-variant-numeric: tabular-nums; }

/* ---------- Responsivo ---------- */
@media (max-width: 1180px) { .grade-2 { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 1000px) {
  .grade-2 { grid-template-columns: 1fr; }
  .coluna-lateral { position: static; }
}
@media (max-width: 860px) {
  body.autenticado .app { grid-template-columns: 1fr; }
  body.autenticado .lateral { position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 50; transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--sombra-2); }
  body.menu-aberto .lateral { transform: none; }
  body.menu-aberto .principal::after { content: ""; position: fixed; inset: 0; background: rgba(10, 20, 36, .45); z-index: 40; }
  body.autenticado .alternar-menu { display: inline-flex !important; }
  body.autenticado .topo { padding: 0 1rem; }
  .usuario-atual .nome { display: none; }
  .conteudo { padding: 1rem 1rem 2.5rem; }
  .cliente-linha { grid-template-columns: 1fr 1fr; }
  .cliente-linha > button { grid-column: 1 / -1; }
  .financeiro-numeros { grid-template-columns: 1fr; }
  h1 { font-size: 1.3rem; }
}
.painel-secao { padding: .9rem 1.25rem; }
.painel-secao.so-avisos:has(> div:empty) { display: none; }
.painel-secao > .campo:last-child { margin-bottom: 0; }
.painel-secao .aviso:last-child { margin-bottom: 0; }
.itens-venda .col-produto { min-width: 190px; }
.itens-venda select { min-width: 0; width: 150px; }
.itens-venda input.qtd { width: 4.75rem; }
.itens-venda input.desconto { width: 5rem; }
.itens-venda th, .itens-venda td { padding-left: .55rem; padding-right: .55rem; }
.itens-venda td:first-child, .itens-venda th:first-child { padding-left: 1.25rem; }
body.autenticado .app { background: linear-gradient(to right, var(--tinta-900) var(--largura-lateral), var(--fundo) var(--largura-lateral)); }
@media (max-width: 860px) { body.autenticado .app { background: var(--fundo); } }
.painel .col-produto { min-width: 180px; }

/* Tabela responsiva: no celular cada linha vira um cartão com rótulos. */
@media (max-width: 640px) {
  .tabela.responsiva thead { display: none; }
  .tabela.responsiva tr { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--borda); }
  .tabela.responsiva tbody tr:last-child { border-bottom: none; }
  .tabela.responsiva td { display: block; padding: 0; border: none; text-align: left; white-space: normal; }
  .tabela.responsiva td.num { text-align: left; }
  .tabela.responsiva td::before { content: attr(data-rotulo); display: block; font-size: .66rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
  .tabela.responsiva td.ocultar-celular { display: none; }
  .tabela.responsiva tbody tr:hover td { background: none; }
  .pagina-cabecalho > .acoes { width: 100%; }
  .pagina-cabecalho > .acoes a.botao { flex: 1; }
  .barra-filtros .campo.data { width: calc(50% - .4rem); }
  .rotulo-celular { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* F6.1: visualização de evidência autenticada; não usa estilos inline. */
.motoboy-evidencia { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; margin: 1rem auto; }