/* ==========================================================================
   Mapa de Vencedores — Design System
   --------------------------------------------------------------------------
   Folha única, organizada em camadas:

     1. Tokens     — escala de espaço, tipografia, cor, raio, elevação, movimento
     2. Base       — reset e elementos
     3. Layout     — lateral, topo, conteúdo
     4. Utilitários— texto, alinhamento, empilhamento
     5. Componentes— botão, cartão, campo, tabela, etiqueta, aviso, gaveta…
     6. Responsivo

   Regras do sistema (para manter a consistência):
     • Espaçamento SEMPRE pela escala (--e-1 a --e-12), nunca px solto.
     • Cor SEMPRE por token (--cor-*), nunca hexadecimal no meio da regra.
     • Elevação só por --sombra-1..4.
     • Nada decorativo que possa ser cortado: círculos e brilhos ficam dentro
       do contêiner com overflow controlado.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* ---- Cor: marca e estados ------------------------------------------- */
  --cor-primaria-900: #0b1c3d;
  --cor-primaria-800: #12275a;
  --cor-primaria-700: #1d4ed8;
  --cor-primaria-600: #2563eb;
  --cor-primaria-500: #3b82f6;
  --cor-primaria-100: #dbeafe;
  --cor-primaria-50: #eff6ff;

  --cor-aviso-500: #f59e0b;
  --cor-aviso-100: #fef3c7;
  --cor-sucesso-600: #059669;
  --cor-sucesso-500: #10b981;
  --cor-sucesso-100: #d1fae5;
  --cor-perigo-600: #dc2626;
  --cor-perigo-100: #fee2e2;

  /* Texto sobre fundo claro colorido (contraste AA) */
  --cor-texto-sucesso: #065f46;
  --cor-texto-aviso: #92400e;
  --cor-texto-perigo: #991b1b;
  --cor-texto-primaria: #1e40af;
  --cor-perigo-200: #fecaca;

  /* Sobre a lateral escura */
  --cor-lateral-fundo: #0a1730;
  --cor-lateral-texto: #e6edff;
  --cor-lateral-suave: #c3d1ee;
  --cor-lateral-fraca: #9fb3dd;
  --cor-lateral-minima: #6c81ab;

  /* ---- Cor: neutros (tinta) ------------------------------------------- */
  --cor-tinta-900: #0f172a;
  --cor-tinta-700: #334155;
  --cor-tinta-500: #64748b;
  --cor-tinta-400: #94a3b8;
  --cor-tinta-200: #e2e8f0;
  --cor-tinta-100: #f1f5f9;
  --cor-tinta-50: #f8fafc;
  --cor-superficie: #ffffff;
  --cor-fundo: #f8fafc;

  /* Apelidos curtos (legibilidade nas regras) */
  --tinta-900: var(--cor-tinta-900);
  --tinta-700: var(--cor-tinta-700);
  --tinta-500: var(--cor-tinta-500);
  --tinta-400: var(--cor-tinta-400);
  --tinta-200: var(--cor-tinta-200);
  --tinta-100: var(--cor-tinta-100);
  --tinta-50: var(--cor-tinta-50);
  --branco: var(--cor-superficie);
  --azul-900: var(--cor-primaria-900);
  --azul-800: var(--cor-primaria-800);
  --azul-700: var(--cor-primaria-700);
  --azul-600: var(--cor-primaria-600);
  --azul-500: var(--cor-primaria-500);
  --azul-100: var(--cor-primaria-100);
  --azul-50: var(--cor-primaria-50);
  --ambar-500: var(--cor-aviso-500);
  --ambar-100: var(--cor-aviso-100);
  --verde-600: var(--cor-sucesso-600);
  --verde-100: var(--cor-sucesso-100);
  --vermelho-600: var(--cor-perigo-600);
  --vermelho-100: var(--cor-perigo-100);

  /* ---- Escala de espaço (base 4) -------------------------------------- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-7: 28px;
  --e-8: 32px;
  --e-10: 40px;
  --e-12: 48px;

  /* ---- Raio ------------------------------------------------------------ */
  --raio-xs: 6px;
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-xl: 22px;
  --raio-full: 999px;

  /* ---- Tipografia ------------------------------------------------------ */
  --fonte: "Segoe UI", system-ui, -apple-system, "Inter", Roboto, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --texto-xs: 11.5px;
  --texto-sm: 12.5px;
  --texto-base: 14.5px;
  --texto-md: 15.5px;
  --texto-lg: 17px;
  --texto-xl: 20px;
  --texto-2xl: 26px;
  --texto-3xl: 32px;

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-titulo: 700;

  /* ---- Elevação -------------------------------------------------------- */
  --sombra-1: 0 1px 2px rgba(15, 23, 42, .05);
  --sombra-2: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .05);
  --sombra-3: 0 4px 12px rgba(15, 23, 42, .07), 0 12px 28px rgba(15, 23, 42, .06);
  --sombra-4: 0 18px 48px rgba(11, 28, 61, .22);
  --sombra-sm: var(--sombra-2);
  --sombra: var(--sombra-3);
  --sombra-forte: var(--sombra-4);

  /* ---- Movimento ------------------------------------------------------- */
  --curva: cubic-bezier(.22, .8, .28, 1);
  --rapido: 140ms;
  --medio: 240ms;
  --lento: 400ms;

  /* ---- Medidas de layout ---------------------------------------------- */
  --altura-topo: 76px;
  --largura-lateral: 248px;
  --altura-controle: 42px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Com movimento desligado, o estado final precisa ser o visível. */
  .cartao, .indicador, .passo, .fornecedor, .entrada-animada, .tabela-editavel tr {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
  font-family: var(--fonte);
  font-size: var(--texto-base);
  line-height: 1.55;
  color: var(--cor-tinta-900);
  background: var(--cor-fundo);
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--peso-titulo);
  line-height: 1.25;
  letter-spacing: -.012em;
}
h1 { font-size: var(--texto-xl); }
h2 { font-size: var(--texto-lg); }
h3 { font-size: var(--texto-md); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; flex-shrink: 0; }
code {
  padding: 2px var(--e-1);
  border-radius: var(--raio-xs);
  background: var(--cor-tinta-100);
  font-family: var(--fonte-mono);
  font-size: .92em;
}
:focus-visible {
  outline: 3px solid var(--foco-forte);
  outline-offset: 2px;
  border-radius: var(--raio-xs);
}

/* Fundo decorativo: fica ATRÁS do conteúdo e não gera rolagem. */
.brilho-fundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(50% 40% at 18% 0%, var(--brilho-primaria), transparent 70%),
    radial-gradient(40% 35% at 88% 4%, var(--brilho-aviso), transparent 70%);
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

/* ---- Lateral ---------------------------------------------------------- */
.lateral {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--largura-lateral);
  padding: var(--e-5) var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
  overflow-y: auto;
  color: var(--cor-lateral-texto);
  background: linear-gradient(168deg, var(--cor-primaria-900) 0%, var(--cor-primaria-800) 52%, var(--cor-lateral-fundo) 100%);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2);
  border-radius: var(--raio-md);
  transition: background var(--rapido) linear;
}
.marca:hover { background: var(--cor-vidro-1); }

.marca-icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--raio-md);
  color: var(--cor-superficie);
  background: linear-gradient(140deg, var(--cor-primaria-500), var(--cor-primaria-700));
  box-shadow: 0 6px 18px var(--sombra-icone);
}
.marca-icone svg { width: 22px; height: 22px; }

.marca-texto { display: flex; flex-direction: column; min-width: 0; }
.marca-texto strong { font-size: var(--texto-base); }
.marca-texto small {
  font-size: var(--texto-xs);
  line-height: 1.35;
  color: var(--cor-lateral-fraca);
}

.menu { display: flex; flex-direction: column; gap: var(--e-1); }

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  border-radius: var(--raio-md);
  font-size: var(--texto-base);
  font-weight: var(--peso-forte);
  line-height: 1.2;
  color: var(--cor-lateral-suave);
  transition: background var(--rapido) linear, color var(--rapido) linear;
}
.menu-item > svg { width: 18px; height: 18px; }
.menu-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: var(--raio-full);
  background: var(--cor-aviso-500);
  transform: translateY(-50%);
  transition: height var(--medio) var(--curva);
}
.menu-item:hover { background: var(--cor-vidro-2); color: var(--cor-superficie); }
.menu-item.ativo { background: var(--vidro-primaria-2); color: var(--cor-superficie); }
.menu-item.ativo::before { height: 20px; }

.lateral-rodape {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.atalho-dica {
  padding: var(--e-3);
  border: 1px solid var(--cor-vidro-3);
  border-radius: var(--raio-md);
  background: var(--cor-vidro-1);
  font-size: var(--texto-sm);
  line-height: 1.5;
  color: var(--cor-lateral-suave);
}
.atalho-dica strong { display: block; margin-bottom: var(--e-1); color: var(--cor-superficie); }
.atalho-dica em { color: var(--cor-aviso-500); font-style: normal; font-weight: var(--peso-forte); }

.versao {
  font-size: var(--texto-xs);
  text-align: center;
  color: var(--cor-lateral-minima);
}

/* ---- Conteúdo --------------------------------------------------------- */
.conteudo {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  margin-left: var(--largura-lateral);
  display: flex;
  flex-direction: column;
}

.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: var(--altura-topo);
  padding: var(--e-4) var(--e-7);
  border-bottom: 1px solid var(--cor-tinta-200);
  background: var(--cor-topo-vidro);
  backdrop-filter: blur(14px);
}

.topo-titulo { min-width: 0; flex: 1; }
.topo-titulo h1 {
  font-size: var(--texto-xl);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topo-titulo p {
  margin-top: 2px;
  font-size: var(--texto-sm);
  color: var(--cor-tinta-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topo-acoes {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.principal {
  padding: var(--e-6) var(--e-7) var(--e-12);
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

/* ---- Grades ----------------------------------------------------------- */
.grade { display: grid; gap: var(--e-5); align-items: start; }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* Dentro da grade, cartões da mesma linha ficam com a mesma altura. */
.grade > .cartao { height: 100%; display: flex; flex-direction: column; }
.grade > .cartao > .cartao-corpo { flex: 1; }

/* ==========================================================================
   4. UTILITÁRIOS
   ========================================================================== */
.entre { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.entre > .direita { margin-left: auto; }
.empilhar { display: flex; flex-direction: column; gap: var(--e-1); }
.pilha { display: flex; flex-direction: column; gap: var(--e-6); }
.direita { margin-left: auto; }
.mudo { color: var(--cor-tinta-500); font-size: var(--texto-sm); }
.mono { font-variant-numeric: tabular-nums; }
.escondido { display: none !important; }
.apenas-mobile { display: none; }
.centro { text-align: center; }
.numero { text-align: right; font-variant-numeric: tabular-nums; }
.pontilhado { width: 100%; border-top: 1px dashed var(--cor-tinta-200); }

/* ==========================================================================
   5. COMPONENTES
   ========================================================================== */

/* ---- Botão ------------------------------------------------------------ */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--altura-controle);
  padding: 0 var(--e-4);
  border: 1px solid transparent;
  border-radius: var(--raio-md);
  font-size: var(--texto-base);
  font-weight: var(--peso-forte);
  white-space: nowrap;
  cursor: pointer;
  background: var(--cor-superficie);
  color: var(--cor-tinta-700);
  box-shadow: var(--sombra-1);
  transition: background var(--rapido) linear, color var(--rapido) linear,
              border-color var(--rapido) linear, box-shadow var(--medio) var(--curva),
              transform var(--rapido) var(--curva);
}
.botao svg { width: 17px; height: 17px; }
.botao:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }
.botao:active { transform: translateY(0); box-shadow: var(--sombra-1); }
.botao[disabled], .botao.carregando { opacity: .6; pointer-events: none; }

.botao-primario { background: linear-gradient(140deg, var(--cor-primaria-600), var(--cor-primaria-700)); color: var(--cor-superficie); }
.botao-primario:hover { box-shadow: 0 8px 20px var(--sombra-primaria); }
.botao-sucesso { background: linear-gradient(140deg, var(--cor-sucesso-500), var(--cor-sucesso-600)); color: var(--cor-superficie); }
.botao-sucesso:hover { box-shadow: 0 8px 20px var(--sombra-sucesso); }
.botao-perigo { background: var(--cor-perigo-100); color: var(--cor-texto-perigo); }
.botao-perigo:hover { background: var(--cor-perigo-200); }
.botao-fantasma { background: transparent; border-color: var(--cor-tinta-200); box-shadow: none; }
.botao-fantasma:hover { background: var(--cor-superficie); border-color: var(--cor-tinta-400); box-shadow: var(--sombra-1); }
.botao-pequeno { min-height: 34px; padding: 0 var(--e-3); font-size: var(--texto-sm); border-radius: var(--raio-sm); }

.botao-icone {
  display: inline-grid;
  place-items: center;
  width: var(--altura-controle);
  height: var(--altura-controle);
  flex-shrink: 0;
  border: none;
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  color: var(--cor-tinta-700);
  cursor: pointer;
  box-shadow: var(--sombra-1);
  transition: background var(--rapido) linear, color var(--rapido) linear,
              transform var(--rapido) var(--curva);
}
.botao-icone:hover { background: var(--cor-primaria-50); color: var(--cor-primaria-700); transform: translateY(-1px); }

.botao-icone-pequeno {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-tinta-400);
  cursor: pointer;
  transition: background var(--rapido) linear, color var(--rapido) linear,
              border-color var(--rapido) linear;
}
.botao-icone-pequeno svg { width: 16px; height: 16px; }
.botao-icone-pequeno:hover {
  background: var(--cor-superficie);
  border-color: var(--cor-tinta-200);
  color: var(--cor-primaria-700);
}
.botao-icone-pequeno.perigo:hover {
  background: var(--cor-perigo-100);
  border-color: var(--cor-perigo-200);
  color: var(--cor-texto-perigo);
}

/* ---- Cartão ----------------------------------------------------------- */
.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-tinta-200);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  /* overflow controlado: nada decorativo escapa e vira "sujeira" na tela */
  overflow: hidden;
}
.cartao-topo {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--cor-tinta-100);
}
.cartao-topo h2 { font-size: var(--texto-md); }
.cartao-topo p { margin-top: 2px; font-size: var(--texto-sm); color: var(--cor-tinta-500); }
.cartao-topo .direita { display: flex; align-items: center; gap: var(--e-2); }
.cartao-corpo { padding: var(--e-5); }
.cartao-corpo.sem-espaco { padding: 0; }

/* ---- Indicador (número grande) ---------------------------------------
   Sem círculo decorativo: o destaque vem do próprio número. Foi o círculo
   cortado no canto que deixava o bloco com cara de quebrado. */
.indicador {
  position: relative;
  padding: var(--e-5);
  border: 1px solid var(--cor-tinta-200);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-1);
  transition: border-color var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.indicador:hover { border-color: var(--cor-primaria-100); box-shadow: var(--sombra-2); }
.indicador-rotulo {
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cor-tinta-500);
}
.indicador-valor {
  margin-top: var(--e-2);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-titulo);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.indicador-nota {
  margin-top: var(--e-2);
  font-size: var(--texto-sm);
  color: var(--cor-tinta-500);
}

/* ---- Passos ("Como funciona") ----------------------------------------
   Número e texto alinhados no topo, com o círculo do tamanho do texto. */
.passos { display: flex; flex-direction: column; gap: var(--e-2); }

.passo {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--cor-tinta-100);
  border-radius: var(--raio-md);
  background: var(--cor-tinta-50);
  transition: border-color var(--rapido) linear, background var(--rapido) linear;
}
.passo:hover { border-color: var(--cor-primaria-100); background: var(--cor-primaria-50); }

.passo-numero {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--raio-full);
  background: var(--cor-primaria-600);
  color: var(--cor-superficie);
  font-size: var(--texto-sm);
  font-weight: var(--peso-titulo);
  font-variant-numeric: tabular-nums;
}
.passo > div { min-width: 0; }
.passo strong {
  display: block;
  font-size: var(--texto-base);
  font-weight: var(--peso-forte);
  line-height: 1.35;
}
.passo span {
  display: block;
  margin-top: 2px;
  font-size: var(--texto-sm);
  line-height: 1.5;
  color: var(--cor-tinta-500);
}
.passo.feito .passo-numero { background: var(--cor-sucesso-600); }

/* ---- Formulário ------------------------------------------------------- */
.formulario { display: flex; flex-direction: column; gap: var(--e-4); }
.linha-campos { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.campo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.campo > label {
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  color: var(--cor-tinta-700);
}
.campo .ajuda { font-size: var(--texto-xs); line-height: 1.45; color: var(--cor-tinta-500); }

.entrada, .selecao, .area {
  width: 100%;
  min-height: var(--altura-controle);
  padding: var(--e-2) var(--e-3);
  border: 1.5px solid var(--cor-tinta-200);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  transition: border-color var(--rapido) linear, box-shadow var(--rapido) linear;
}
.entrada::placeholder, .area::placeholder { color: var(--cor-tinta-400); }
.entrada:hover, .selecao:hover, .area:hover { border-color: var(--cor-tinta-400); }
.entrada:focus, .selecao:focus, .area:focus {
  outline: none;
  border-color: var(--cor-primaria-500);
  box-shadow: 0 0 0 4px var(--foco-primaria);
}
.area {
  min-height: 132px;
  resize: vertical;
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  line-height: 1.6;
}

/* ---- Etiqueta -------------------------------------------------------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 3px var(--e-2);
  border-radius: var(--raio-full);
  font-size: var(--texto-xs);
  font-weight: var(--peso-titulo);
  white-space: nowrap;
  background: var(--cor-tinta-100);
  color: var(--cor-tinta-700);
}
.etiqueta-ativo { background: var(--cor-sucesso-100); color: var(--cor-texto-sucesso); }
.etiqueta-suspenso { background: var(--cor-aviso-100); color: var(--cor-texto-aviso); }
.etiqueta-impedido, .etiqueta-ausente { background: var(--cor-perigo-100); color: var(--cor-texto-perigo); }
.etiqueta-azul { background: var(--cor-primaria-100); color: var(--cor-texto-primaria); }

/* ---- Tabela ---------------------------------------------------------- */
.rolagem { overflow: auto; }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--texto-sm); }
.tabela th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--e-3) var(--e-3);
  text-align: left;
  font-size: var(--texto-xs);
  font-weight: var(--peso-titulo);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cor-tinta-500);
  background: var(--cor-tinta-50);
  border-bottom: 1px solid var(--cor-tinta-200);
  white-space: nowrap;
}
.tabela td {
  padding: var(--e-3);
  border-bottom: 1px solid var(--cor-tinta-100);
  vertical-align: middle;
}
.tabela tbody tr { transition: background var(--rapido) linear; }
.tabela tbody tr:hover { background: var(--cor-primaria-50); }
.tabela .acoes, .tabela .centro { text-align: center; }
.tabela .acoes { white-space: nowrap; }
.tabela .numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .quebra { max-width: 320px; }
.tabela .truncar {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Tabela editável do mapa ----------------------------------------
   A tabela É o formulário: célula vira campo, então o campo não tem borda em
   repouso (a tabela fica limpa) e ganha contorno no foco. */
.tabela-mapa { min-width: 100%; }
.tabela-mapa td, .tabela-mapa th { white-space: nowrap; }
.rolagem-mapa { max-height: 62vh; overflow: auto; }

.tabela-editavel { table-layout: fixed; }
.tabela-editavel td { padding: var(--e-1) var(--e-2); vertical-align: top; }
.tabela-editavel tr:focus-within { background: var(--cor-primaria-50); box-shadow: inset 3px 0 0 var(--cor-primaria-600); }
.tabela-editavel tr.linha-pendente { box-shadow: inset 3px 0 0 var(--cor-aviso-500); }

.entrada-celula {
  width: 100%;
  padding: var(--e-2);
  border: 1.5px solid transparent;
  border-radius: var(--raio-sm);
  background: transparent;
  font: inherit;
  font-size: var(--texto-sm);
  color: var(--cor-tinta-900);
  transition: border-color var(--rapido) linear, background var(--rapido) linear,
              box-shadow var(--rapido) linear;
}
.entrada-celula:hover { border-color: var(--cor-tinta-200); background: var(--cor-superficie); }
.entrada-celula:focus {
  outline: none;
  border-color: var(--cor-primaria-500);
  background: var(--cor-superficie);
  box-shadow: 0 0 0 3px var(--foco-primaria);
}
.entrada-celula::placeholder { color: var(--cor-tinta-400); }
textarea.entrada-celula { resize: none; overflow: hidden; min-height: 34px; font-family: inherit; line-height: 1.45; }
.entrada-celula.numero { text-align: right; font-variant-numeric: tabular-nums; }
.entrada-celula.centro { text-align: center; }

.celula-numero { text-align: right; }
.celula-curta { text-align: center; }
.celula-larga { min-width: 0; }
.celula-nota {
  display: block;
  padding: 0 var(--e-2) var(--e-1);
  font-size: var(--texto-xs);
  color: var(--cor-tinta-500);
  font-variant-numeric: tabular-nums;
}
.celula-total {
  padding-top: var(--e-4) !important;
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.celula-fornecedor { min-width: 0; }
.campo-fornecedor { display: flex; align-items: center; gap: 2px; }
.campo-fornecedor .entrada-celula { flex: 1; min-width: 0; }

.botao-busca-celula {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-tinta-400);
  cursor: pointer;
  transition: background var(--rapido) linear, color var(--rapido) linear;
}
.botao-busca-celula svg { width: 16px; height: 16px; }
.botao-busca-celula:hover { background: var(--cor-primaria-100); color: var(--cor-primaria-700); }

.etiqueta-celula {
  display: inline-block;
  margin: 2px 0 0 var(--e-2);
  padding: 2px var(--e-2);
  border-radius: var(--raio-full);
  font-size: 10.5px;
  font-weight: var(--peso-titulo);
  background: var(--cor-tinta-100);
  color: var(--cor-tinta-500);
}
.etiqueta-celula.etiqueta-ativo { background: var(--cor-sucesso-100); color: var(--cor-texto-sucesso); }
.etiqueta-celula.etiqueta-ausente,
.etiqueta-celula.etiqueta-impedido { background: var(--cor-perigo-100); color: var(--cor-texto-perigo); }
.etiqueta-celula.etiqueta-suspenso { background: var(--cor-aviso-100); color: var(--cor-texto-aviso); }

.celula-acoes { text-align: right; white-space: nowrap; padding-top: var(--e-2) !important; }
.sinal-salvo {
  display: inline-block;
  min-width: 54px;
  margin-right: var(--e-1);
  font-size: 10.5px;
  font-weight: var(--peso-forte);
  color: var(--cor-sucesso-600);
  vertical-align: middle;
}
.sinal-salvo[data-estado="salvando"] { color: var(--cor-tinta-400); }
.sinal-salvo[data-estado="erro"] { color: var(--cor-perigo-600); }

/* ---- Faixa de dica de teclado ---------------------------------------- */
.dica-teclado {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  padding: var(--e-3) var(--e-4);
  font-size: var(--texto-sm);
  color: var(--cor-tinta-700);
  background: var(--cor-primaria-50);
  border-bottom: 1px solid var(--cor-primaria-100);
}
.dica-teclado strong { color: var(--cor-primaria-700); }

.tecla {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--e-1);
  border: 1px solid var(--cor-tinta-200);
  border-bottom-width: 2px;
  border-radius: var(--raio-xs);
  background: var(--cor-superficie);
  font-size: 11px;
  font-weight: var(--peso-titulo);
  color: var(--cor-tinta-500);
}

/* ---- Barra de ação do mapa / progresso -------------------------------- */
.barra-mapa {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--cor-tinta-200);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-1);
}
.barra-mapa .resumo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  font-size: var(--texto-sm);
  color: var(--cor-tinta-700);
}
.barra-mapa .progresso { width: 100%; margin-top: var(--e-1); }
.barra-mapa .direita { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }

.barra-progresso {
  height: 8px;
  border-radius: var(--raio-full);
  background: var(--cor-tinta-100);
  overflow: hidden;
}
.barra-progresso > span {
  display: block;
  height: 100%;
  border-radius: var(--raio-full);
  background: linear-gradient(90deg, var(--cor-primaria-500), var(--cor-sucesso-600));
  transition: width var(--lento) var(--curva);
}

/* ---- Estado vazio ---------------------------------------------------- */
.vazio {
  padding: var(--e-12) var(--e-5);
  text-align: center;
  color: var(--cor-tinta-500);
}
.vazio-icone {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto var(--e-4);
  border-radius: var(--raio-full);
  background: var(--cor-primaria-50);
  color: var(--cor-primaria-600);
}
.vazio-icone svg { width: 30px; height: 30px; }
.vazio h3 { margin-bottom: var(--e-1); font-size: var(--texto-md); color: var(--cor-tinta-900); }
.vazio p { max-width: 46ch; margin: 0 auto var(--e-4); font-size: var(--texto-sm); line-height: 1.6; }

/* ---- Lista de fornecedores ------------------------------------------- */
.lista-fornecedores { display: flex; flex-direction: column; max-height: 468px; overflow-y: auto; }

.fornecedor {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-1) var(--e-4);
  align-items: center;
  width: 100%;
  padding: var(--e-3) var(--e-4);
  border: none;
  border-bottom: 1px solid var(--cor-tinta-100);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--rapido) linear, box-shadow var(--rapido) linear;
}
.fornecedor:hover, .fornecedor.marcado { background: var(--cor-primaria-50); }
.fornecedor.marcado { box-shadow: inset 3px 0 0 var(--cor-primaria-600); }
.fornecedor-nome { font-size: var(--texto-sm); font-weight: var(--peso-forte); color: var(--cor-tinta-900); }
.fornecedor-detalhe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  font-size: var(--texto-xs);
  color: var(--cor-tinta-500);
  font-variant-numeric: tabular-nums;
}
.fornecedor-detalhe b { font-weight: var(--peso-forte); color: var(--cor-tinta-700); }

/* ---- Sobreposição / janela (modal) ---------------------------------- */
.sobreposicao {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: start center;
  padding: 8vh var(--e-4) var(--e-6);
  background: var(--cor-veu);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--medio) var(--curva), visibility var(--medio) linear;
}
.sobreposicao.aberta { opacity: 1; visibility: visible; }

.janela {
  width: min(760px, 100%);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--raio-xl);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-4);
  overflow: hidden;
  transform: translateY(16px);
  opacity: 0;
  transition: transform var(--lento) var(--curva), opacity var(--lento) var(--curva);
}
.sobreposicao.aberta .janela { transform: translateY(0); opacity: 1; }

.janela-topo {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-5) var(--e-5) var(--e-3);
}
.janela-topo h2 { font-size: var(--texto-md); }
.janela-topo p { margin-top: 2px; font-size: var(--texto-sm); color: var(--cor-tinta-500); }
.janela-topo .botao-icone { margin-left: auto; }

.janela-busca { padding: 0 var(--e-5) var(--e-3); }
.janela-busca .entrada { min-height: 48px; font-size: var(--texto-lg); border-radius: var(--raio-lg); }

.janela-info {
  padding: var(--e-2) var(--e-5);
  font-size: var(--texto-sm);
  color: var(--cor-tinta-500);
  background: var(--cor-tinta-50);
  border-top: 1px solid var(--cor-tinta-100);
  border-bottom: 1px solid var(--cor-tinta-100);
}
.janela-rodape {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  border-top: 1px solid var(--cor-tinta-100);
}
.janela-rodape .dica { font-size: var(--texto-xs); color: var(--cor-tinta-500); }
.janela-rodape .botoes { display: flex; gap: var(--e-2); }

/* ---- Gaveta lateral (formulário completo do item) -------------------- */
.gaveta {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 55;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--cor-superficie);
  box-shadow: var(--sombra-4);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform var(--lento) var(--curva), visibility var(--lento) linear;
}
.gaveta.aberta { transform: translateX(0); visibility: visible; }

.gaveta-topo {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-5);
  border-bottom: 1px solid var(--cor-tinta-100);
}
.gaveta-topo h2 { font-size: var(--texto-md); }
.gaveta-topo p { margin-top: 2px; font-size: var(--texto-sm); color: var(--cor-tinta-500); }
.gaveta-topo .botao-icone { margin-left: auto; }

.gaveta-corpo {
  flex: 1;
  overflow-y: auto;
  padding: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.gaveta-rodape {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-5);
  border-top: 1px solid var(--cor-tinta-100);
  background: var(--cor-tinta-50);
}
.gaveta-rodape .direita { display: flex; gap: var(--e-2); }

.caixa-busca-fornecedor {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-4);
  border: 1px dashed var(--cor-tinta-200);
  border-radius: var(--raio-md);
  background: var(--cor-tinta-50);
}
.caixa-busca-fornecedor .linha-wls { display: flex; gap: var(--e-2); }
.caixa-busca-fornecedor .linha-wls .entrada { flex: 1; min-width: 0; }

.previa-total {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--cor-primaria-100);
  border-radius: var(--raio-md);
  background: var(--cor-primaria-50);
}
.previa-total strong {
  margin-left: auto;
  font-size: var(--texto-lg);
  color: var(--cor-primaria-700);
  font-variant-numeric: tabular-nums;
}

/* ---- Área de envio de arquivo --------------------------------------- */
.area-solta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-8) var(--e-5);
  border: 2px dashed var(--cor-tinta-200);
  border-radius: var(--raio-lg);
  background: var(--cor-tinta-50);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--medio) var(--curva), background var(--medio) linear,
              box-shadow var(--medio) var(--curva);
}
.area-solta:hover { border-color: var(--cor-primaria-500); background: var(--cor-primaria-50); box-shadow: var(--sombra-2); }
.area-solta.arrastando { border-color: var(--cor-primaria-600); background: var(--cor-primaria-100); box-shadow: var(--sombra-3); }
.area-solta.carregado { border-style: solid; border-color: var(--cor-sucesso-600); background: var(--cor-sucesso-100); }
.area-solta strong { font-size: var(--texto-md); }
.area-solta-icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--raio-full);
  background: var(--cor-superficie);
  color: var(--cor-primaria-600);
  box-shadow: var(--sombra-1);
  transition: background var(--rapido) linear, color var(--rapido) linear, transform var(--medio) var(--curva);
}
.area-solta:hover .area-solta-icone { transform: translateY(-2px); }
.area-solta.arrastando .area-solta-icone { background: var(--cor-primaria-600); color: var(--cor-superficie); }
.area-solta.carregado .area-solta-icone { background: var(--cor-sucesso-600); color: var(--cor-superficie); }

/* Campos compactos das tabelas de revisão (colagem/TR) */
.entrada-tabela {
  border-width: 1px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  border-radius: var(--raio-sm);
  font-size: var(--texto-sm);
  min-height: 32px;
  transition: border-color var(--rapido) linear, background var(--rapido) linear;
}
.entrada-tabela:hover { border-color: var(--cor-tinta-200); background: var(--cor-superficie); }
.entrada-tabela:focus {
  border-color: var(--cor-primaria-500);
  background: var(--cor-superficie);
  box-shadow: 0 0 0 3px var(--foco-primaria-fraco);
}
textarea.entrada-tabela { resize: vertical; line-height: 1.45; font-family: inherit; }

/* ---- Cadastro rápido dentro da busca de fornecedor -------------------
   Aparece quando o fornecedor não está no cadastro. É onde o usuário descobre
   que falta, então é aqui que ele precisa poder cadastrar. */
.cadastro-rapido {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5) var(--e-5);
  border-top: 1px solid var(--cor-primaria-100);
  background: var(--cor-primaria-50);
  max-height: 46vh;
  overflow-y: auto;
}
.cadastro-rapido-topo strong { display: block; font-size: var(--texto-base); }
.cadastro-rapido-topo .mudo { display: block; margin-top: 2px; }
.cadastro-rapido .linha-campos { gap: var(--e-3); }
.cadastro-rapido .campo > label { font-size: var(--texto-xs); }
.cadastro-rapido .entrada { min-height: 38px; font-size: var(--texto-sm); }
.cadastro-rapido .campo-largo { grid-column: 1 / -1; }

.aviso-campo {
  padding: var(--e-3);
  border-radius: var(--raio-md);
  border-left: 3px solid var(--cor-tinta-200);
  background: var(--cor-superficie);
  font-size: var(--texto-sm);
  line-height: 1.5;
}
.aviso-campo.atencao { border-left-color: var(--cor-aviso-500); background: var(--cor-aviso-100); color: var(--cor-texto-aviso); }
.aviso-campo.erro { border-left-color: var(--cor-perigo-600); background: var(--cor-perigo-100); color: var(--cor-texto-perigo); }
.aviso-campo.sucesso { border-left-color: var(--cor-sucesso-600); background: var(--cor-sucesso-100); color: var(--cor-texto-sucesso); }

/* ---- Aviso flutuante (toast) ---------------------------------------- */
.aviso-flutuante {
  position: fixed;
  right: var(--e-5);
  bottom: var(--e-5);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  align-items: flex-end;
  pointer-events: none;
}
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  width: min(380px, calc(100vw - var(--e-8)));
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio-md);
  border-left: 4px solid var(--cor-primaria-600);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-3);
  pointer-events: auto;
  animation: entrar-aviso var(--lento) var(--curva) both;
}
.aviso.saindo { animation: sair-aviso var(--medio) var(--curva) both; }
.aviso.sucesso { border-left-color: var(--cor-sucesso-600); }
.aviso.erro { border-left-color: var(--cor-perigo-600); }
.aviso.atencao { border-left-color: var(--cor-aviso-500); }
.aviso strong { display: block; font-size: var(--texto-sm); }
.aviso p { margin-top: 2px; font-size: var(--texto-sm); line-height: 1.5; color: var(--cor-tinta-500); }
.aviso-icone {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--raio-full);
  color: var(--cor-superficie);
  font-size: var(--texto-sm);
  font-weight: var(--peso-titulo);
}
.aviso.sucesso .aviso-icone { background: var(--cor-sucesso-600); }
.aviso.erro .aviso-icone { background: var(--cor-perigo-600); }
.aviso.atencao .aviso-icone { background: var(--cor-aviso-500); }
.aviso.info .aviso-icone { background: var(--cor-primaria-600); }

/* ---- Esqueleto de carregamento -------------------------------------- */
.esqueleto {
  height: 52px;
  border-radius: var(--raio-md);
  background: linear-gradient(90deg, var(--cor-tinta-100) 25%, var(--cor-tinta-50) 50%, var(--cor-tinta-100) 75%);
  background-size: 200% 100%;
  animation: brilhar 1.4s linear infinite;
}

/* ---- Animações ------------------------------------------------------- */
@keyframes surgir {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes deslizar {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes entrar-aviso {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes sair-aviso {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(24px); }
}
@keyframes brilhar {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@keyframes pulsar {
  0%, 100% { box-shadow: 0 0 0 0 var(--pulso-forte); }
  50% { box-shadow: 0 0 0 10px var(--pulso-fraco); }
}

.entrada-animada { animation: surgir var(--lento) var(--curva) both; }

/* ==========================================================================
   6. RESPONSIVO
   ========================================================================== */
@media (max-width: 1080px) {
  .lateral {
    transform: translateX(-100%);
    transition: transform var(--lento) var(--curva);
    box-shadow: none;
  }
  .lateral.aberta { transform: translateX(0); box-shadow: var(--sombra-4); }
  .conteudo { margin-left: 0; }
  .apenas-mobile { display: inline-grid; }
  .topo { padding: var(--e-3) var(--e-4); }
  .principal { padding: var(--e-4) var(--e-4) var(--e-12); }
  .cartao-topo, .cartao-corpo { padding: var(--e-4); }
}

@media (max-width: 720px) {
  body { font-size: 14px; }
  .topo { flex-wrap: wrap; min-height: auto; }
  .topo-titulo { flex-basis: 100%; }
  .topo-titulo h1 { font-size: var(--texto-lg); white-space: normal; }
  .topo-titulo p { display: none; }
  .topo-acoes { width: 100%; justify-content: stretch; }
  .topo-acoes .botao { flex: 1; }
  .indicador-valor { font-size: var(--texto-2xl); }
  .passo { grid-template-columns: 24px 1fr; }
  .tabela-editavel { table-layout: auto; }
  .aviso-flutuante { left: var(--e-4); right: var(--e-4); align-items: stretch; }
  .aviso { width: auto; }
}

/* ==========================================================================
   7. IMPRESSÃO
   ========================================================================== */
@media print {
  .lateral, .topo, .aviso-flutuante, .sobreposicao, .gaveta, .barra-mapa { display: none !important; }
  .conteudo { margin: 0; }
  .principal { padding: 0; }
  .cartao { border: none; box-shadow: none; }
}