/* Controle de Custos Bangkok — identidade Bauer, versão colorida & fluida (jun/2026).
   Marca navy preservada como âncora; acentos por módulo, cards com profundidade,
   ícones e microinterações para deixar o sistema mais intuitivo e menos burocrático. */

:root {
  /* Marca Bauer */
  --azul: #1f3a6b;
  --azul-escuro: #0c1f44;
  --azul-vivo: #2f6bed;          /* acento interativo (links, foco, primário) */
  --azul-vivo-2: #1e54d4;

  /* Cores por módulo (color-coding p/ orientar o olho).
     Tons calibrados p/ contraste legível (≥3:1) dos ícones sobre branco/tint. */
  --m-solic:  #2563eb;
  --m-desp:   #c2710b;
  --m-contas: #0c8378;
  --m-dash:   #7c3aed;
  --m-diario: #15803d;
  --m-cad:    #0e7d9c;
  --m-rel:    #db2777;

  /* Semânticos */
  --tinta: #16203a;
  --cinza: #59657a;
  --cinza-claro: #98a2b5;
  --ok: #15803d;     --ok-bg: #e6f6ec;     --ok-bd: #b7e4c5;
  --alerta: #b45309; --alerta-bg: #fdf2e0; --alerta-bd: #f0d49a;
  --erro: #c52a26;   --erro-bg: #fdecec;   --erro-bd: #f2bcbb;
  --info: #1e54d4;   --info-bg: #eaf1ff;   --info-bd: #c2d4fb;

  /* Neutros / superfícies */
  --linha: #e6e9f0;
  --linha-forte: #d2d8e3;
  --fundo: #f2f5fb;          /* fundo geral levemente azulado (sai do branco chapado) */
  --card: #ffffff;
  --suave: #f5f7fc;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;

  --raio: 14px;
  --raio-sm: 9px;
  --sombra-sm: 0 1px 2px rgba(12,31,68,.06), 0 1px 3px rgba(12,31,68,.05);
  --sombra: 0 6px 18px rgba(12,31,68,.08);
  --sombra-md: 0 14px 34px rgba(12,31,68,.12);

  /* tint default (sobrescrito por .tint-*) */
  --t: var(--azul-vivo);
  --t-bg: var(--info-bg);
}

/* Paletas de cor reutilizáveis (badges, cabeçalhos, KPIs) */
.tint-blue   { --t:#2563eb; --t-bg:#e8f0ff; }
.tint-amber  { --t:#c2710b; --t-bg:#fdf0db; }
.tint-teal   { --t:#0c8378; --t-bg:#dcf4f0; }
.tint-violet { --t:#7c3aed; --t-bg:#f0e9fe; }
.tint-green  { --t:#15803d; --t-bg:#e4f6ea; }
.tint-cyan   { --t:#0e7d9c; --t-bg:#ddf3f9; }
.tint-rose   { --t:#db2777; --t-bg:#fce6f0; }
.tint-navy   { --t:#1f3a6b; --t-bg:#e9eef7; }
.tint-slate  { --t:#475569; --t-bg:#eef1f6; }
.tint-red    { --t:#c52a26; --t-bg:#fdecec; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--fundo);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul-vivo-2); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--serif); color: var(--azul-escuro); font-weight: 600; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: 28px; letter-spacing: -.01em; }
h2 { font-size: 20px; display: flex; align-items: center; gap: 9px; }
h3 { font-size: 17px; }
.mono { font-family: var(--mono); }
.muted { color: var(--cinza); }
.small { font-size: 13px; }

/* Ícones inline */
.ico { display: inline-block; vertical-align: -.18em; flex: 0 0 auto; }
h2 .ico { vertical-align: middle; }

/* Cabeçalho de seção com selo de ícone */
.hico {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; background: var(--t-bg); color: var(--t); flex: 0 0 auto;
}

/* ---- Barra do sistema ---- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border-bottom: 1px solid var(--linha);
  box-shadow: var(--sombra-sm);
  padding: 10px 22px; position: sticky; top: 0; z-index: 40;
}
.topbar .brand { display: flex; align-items: center; gap: 11px; }
.topbar .brand .logo {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(150deg, #16306a, #0a1733);
  display: flex; align-items: center; justify-content: center; padding: 6px;
  box-shadow: var(--sombra-sm);
}
.topbar .brand .logo img { width: 100%; height: 100%; object-fit: contain; }
.topbar .brand .titulo { font-family: var(--serif); font-weight: 600; color: var(--azul-escuro); font-size: 17px; line-height: 1.05; }
.topbar .brand .sub { font-size: 10.5px; color: var(--cinza); letter-spacing: .09em; text-transform: uppercase; }
.topbar nav { display: flex; gap: 2px; margin-left: 8px; flex-wrap: wrap; }
.topbar nav a {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--tinta); padding: 8px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.topbar nav a .ico { color: var(--nav-c, var(--cinza)); transition: color .15s ease; }
.topbar nav a:hover { background: var(--suave); text-decoration: none; }
.topbar nav a:hover .ico { color: var(--nav-c, var(--azul)); }
/* Ativo: pílula navy (contraste garantido) com uma borda inferior na cor do módulo. */
.topbar nav a.ativo { background: var(--azul-escuro); color: #fff; box-shadow: inset 0 -2.5px 0 var(--nav-c, var(--azul-vivo)), var(--sombra-sm); }
.topbar nav a.ativo .ico { color: #fff; }
.topbar .user { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.topbar .user .nome { color: var(--azul-escuro); font-weight: 600; }
.topbar .user .papel { color: var(--cinza); font-size: 11.5px; }

/* ---- Layout ---- */
.wrap { max-width: 1140px; margin: 0 auto; padding: 26px 22px 70px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-head .actions { display: flex; gap: 8px; }

/* ---- Botões ---- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  border: 1px solid var(--linha-forte); background: #fff; color: var(--azul-escuro);
  padding: 8px 15px; border-radius: var(--raio-sm); line-height: 1; text-decoration: none;
  box-shadow: var(--sombra-sm);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--suave); text-decoration: none; transform: translateY(-1px); box-shadow: var(--sombra); }
.btn:active { transform: translateY(0); }
.btn .ico { color: var(--cinza); }
.btn.primary {
  background: linear-gradient(160deg, #2f6bed, #1e54d4); color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(31,84,212,.28);
}
.btn.primary:hover { background: linear-gradient(160deg, #3a76f5, #2256da); }
.btn.primary .ico { color: #fff; }
.btn.danger { border-color: var(--erro-bd); color: var(--erro); }
.btn.danger:hover { background: var(--erro-bg); }
.btn.danger .ico { color: var(--erro); }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

/* ---- Cartões / painéis ---- */
.card {
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px;
  margin-bottom: 16px; background: var(--card); box-shadow: var(--sombra-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}
.card.hover:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.card h2 { margin-top: 0; }
.card.accent { border-top: 3px solid var(--t); }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

/* ---- Tabelas ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza); font-weight: 600; }
td.num, th.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
tbody tr { transition: background .12s ease; }
tr:hover td { background: var(--suave); }
table.plain tr:hover td { background: transparent; }
table.plain td, table.plain th { border-bottom: 1px solid var(--linha); }

/* ---- Formulários ---- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--azul-escuro); margin-bottom: 5px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=datetime-local],
input[type=month], input[type=file], input[type=search], select, textarea {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--tinta);
  border: 1.5px solid var(--linha-forte); border-radius: var(--raio-sm); padding: 8px 10px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input.mono, .field-mono input { font-family: var(--mono); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul-vivo); box-shadow: 0 0 0 3px rgba(47,107,237,.15); }
textarea { min-height: 70px; resize: vertical; }
.field { margin-bottom: 14px; }
.row { display: flex; gap: 12px; }
.row > .field { flex: 1; }

/* ---- Selos de status ---- */
.selo { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--linha-forte); white-space: nowrap; }
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.selo.s-aguardando_aprovacao { color: var(--alerta); border-color: var(--alerta-bd); background: var(--alerta-bg); }
.selo.s-reprovada { color: var(--erro); border-color: var(--erro-bd); background: var(--erro-bg); }
.selo.s-aprovada { color: var(--info); border-color: var(--info-bd); background: var(--info-bg); }
.selo.s-precificada { color: #6d28d9; border-color: #d6c6f5; background: #f1ebfd; }
.selo.s-pronta_entrega { color: #0e7490; border-color: #b6e0ec; background: #e1f4f9; }
.selo.s-recebida { color: var(--ok); border-color: var(--ok-bd); background: var(--ok-bg); }

/* ---- Esteira (stepper) ---- */
.esteira { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 4px; }
.esteira .passo { font-size: 12px; color: var(--cinza-claro); font-family: var(--mono); }
.esteira .passo.feito { color: var(--azul); font-weight: 600; }
.esteira .passo.atual { color: #fff; background: linear-gradient(160deg, #2f6bed, #1e54d4); padding: 2px 9px; border-radius: 999px; }
.esteira .sep { color: var(--linha-forte); }

/* ---- Flash ---- */
.flash { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: var(--raio-sm); margin-bottom: 16px; font-size: 14px; border: 1px solid; box-shadow: var(--sombra-sm); }
.flash .ico { flex: 0 0 auto; }
.flash.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.flash.erro { background: var(--erro-bg); border-color: var(--erro-bd); color: var(--erro); }
.flash.info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info); }

/* ---- Busca de material (autocomplete) ---- */
.autocomplete { position: relative; }
.autocomplete .resultados {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 3px;
  background: #fff; border: 1.5px solid var(--linha-forte); border-radius: var(--raio-sm); max-height: 320px; overflow: auto;
  box-shadow: var(--sombra-md);
}
.autocomplete .resultados .item { padding: 8px 11px; cursor: pointer; border-bottom: 1px solid var(--linha); }
.autocomplete .resultados .item:hover, .autocomplete .resultados .item.sel { background: var(--info-bg); }
.autocomplete .resultados .item .cat { font-size: 12px; color: var(--cinza); font-family: var(--mono); }

/* ---- KPIs ---- */
.kpi { display: flex; gap: 13px; align-items: flex-start; border: 1px solid var(--linha); border-radius: var(--raio); padding: 15px 16px; background: var(--card); box-shadow: var(--sombra-sm); }
.kpi .badge-ico {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--t-bg); color: var(--t); flex: 0 0 auto;
}
.kpi .kpi-body { min-width: 0; flex: 1; }
.kpi .rotulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .045em; color: var(--cinza); font-weight: 600; }
.kpi .valor { font-family: var(--serif); font-size: 25px; color: var(--azul-escuro); margin-top: 3px; line-height: 1.1; }
.kpi .valor.mono { font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.kpi .sub { font-size: 12.5px; color: var(--cinza); margin-top: 3px; }

/* Chip de tendência */
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--suave); color: var(--cinza); }
.delta.is-bad { color: var(--erro); background: var(--erro-bg); }
.delta.is-good { color: var(--ok); background: var(--ok-bg); }
.delta.is-mut { color: var(--cinza); background: var(--suave); }
.delta .ico { width: 13px; height: 13px; }

/* Linha-valor (tabelas plain de KPI textual) com status colorido */
.stat-good { color: var(--ok); font-weight: 600; }
.stat-bad { color: var(--erro); font-weight: 600; }
.stat-warn { color: var(--alerta); font-weight: 600; }

.empty { text-align: center; color: var(--cinza); padding: 38px 20px; border: 1.5px dashed var(--linha-forte); border-radius: var(--raio); background: var(--suave); }
.empty .ico { color: var(--cinza-claro); margin-bottom: 8px; }
.tag-aviso { display: inline-flex; align-items: center; gap: 4px; background: var(--alerta-bg); border: 1px solid var(--alerta-bd); color: var(--alerta); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }

/* Recado do solicitante (observação que puxa o aprovador — B2) */
.recado { display: flex; align-items: center; gap: 8px; background: var(--alerta-bg); border: 1px solid var(--alerta-bd); color: #7a4a06; border-radius: var(--raio-sm); padding: 9px 13px; margin: 4px 0 12px; font-size: 13.5px; }
.recado .hico { flex: 0 0 auto; }
.recado-item { display: inline-flex; align-items: center; gap: 4px; color: #9a5b00; font-size: 12.5px; font-weight: 600; }

/* Miniatura nas listas */
.thumb-lista { width: 38px; height: 38px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linha); }

/* Lista de pedidos: tabela no computador, CARTÕES no celular (≤680px) */
@media (max-width: 680px) {
  .lista-pedidos, .lista-pedidos tbody, .lista-pedidos tr, .lista-pedidos td { display: block; }
  .lista-pedidos thead { display: none; }
  .lista-pedidos tr { position: relative; background: #fff; border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra-sm); padding: 12px 14px; margin-bottom: 11px; }
  .lista-pedidos td { border: none; padding: 2px 0; }
  .lista-pedidos td.col-foto { position: absolute; top: 12px; right: 12px; padding: 0; }
  .lista-pedidos td.col-foto .thumb-lista, .lista-pedidos td.col-foto .thumb-vazio { width: 46px; height: 46px; }
  .lista-pedidos td.col-num { font-size: 15.5px; font-weight: 600; padding-right: 56px; }
  .lista-pedidos td.col-status { margin: 5px 0 2px; }
  .lista-pedidos td.col-itens { color: #1a2235; padding-right: 56px; line-height: 1.35; }
  .lista-pedidos td.col-meta { display: inline-block; font-size: 12.5px; color: var(--cinza); margin: 4px 14px 0 0; }
  .lista-pedidos td.col-meta::before { content: attr(data-label) ": "; font-weight: 600; }
  .lista-pedidos td.col-abrir { margin-top: 11px; text-align: left !important; }
  .lista-pedidos td.col-abrir .btn { width: 100%; justify-content: center; padding: 9px 14px; }
}

/* Formulário de ITENS (nova solicitação): tabela no PC, CARTÕES no celular (≤680px) */
@media (max-width: 680px) {
  .itens-form, .itens-form tbody, .itens-form tr, .itens-form td { display: block; }
  .itens-form thead { display: none; }
  .itens-form tr.linha-item { position: relative; background: #fff; border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra-sm); padding: 12px 14px 14px; margin-bottom: 12px; }
  .itens-form td { border: none; padding: 8px 0 0; }
  .itens-form td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--cinza); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
  .itens-form td input, .itens-form td select { width: 100%; font-size: 16px; padding: 9px 11px; }  /* 16px evita zoom no iOS */
  .itens-form td .busca-material, .itens-form td .desc-livre { width: 100%; }
  /* Qtde e Unidade lado a lado */
  .itens-form td.td-qtde { display: inline-block; width: 46%; vertical-align: top; }
  .itens-form td.td-un { display: inline-block; width: 50%; margin-left: 4%; vertical-align: top; }
  .itens-form td.td-un .unidade { display: inline-block; padding: 9px 0; font-size: 15px; }
  /* botão remover no canto superior direito do cartão */
  .itens-form td.td-remover { position: absolute; top: 8px; right: 10px; padding: 0; }
  .itens-form td.td-remover::before { display: none; }
  .itens-form td.td-remover .remover { padding: 4px 11px; }
  /* dropdown do autocomplete ocupa a largura do cartão */
  .itens-form .autocomplete .resultados { left: 0; right: 0; width: auto; }
}

/* Miniatura vazia (sem foto) — placeholder discreto nas listas */
.thumb-vazio { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 6px; background: var(--grade, #eef1f7); color: #aab4c5; }
/* Foto de item na esteira */
.item-foto { width: 46px; height: 46px; object-fit: cover; border-radius: 7px; border: 1px solid var(--linha); cursor: zoom-in; flex: 0 0 auto; }
.foto-pick { cursor: pointer; margin: 0; }
.anexo-preview { max-width: 320px; max-height: 240px; border-radius: var(--raio-sm); border: 1px solid var(--linha); display: block; margin-top: 6px; }

hr { border: none; border-top: 1px solid var(--linha); margin: 18px 0; }

/* Galeria de fotos */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.galeria figure { margin: 0; }
.galeria img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--raio-sm); border: 1px solid var(--linha); box-shadow: var(--sombra-sm); }
.galeria figcaption { font-size: 12px; color: var(--cinza); margin: 5px 2px; }
.dropzone { border: 1.5px dashed var(--linha-forte); border-radius: var(--raio); padding: 14px 16px; background: var(--suave); }

/* Efetivo: contador com +/− (rápido no celular, sem teclado) */
.ef-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.ef-row > label { margin: 0; font-weight: 400; }
.stepper { display: inline-flex; align-items: stretch; border: 1.5px solid var(--linha-forte); border-radius: 9px; overflow: hidden; background: #fff; }
.stepper .step-btn { border: none; background: var(--suave); color: var(--azul-escuro); font-size: 22px; font-weight: 600; width: 44px; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.stepper .step-btn:hover { background: var(--info-bg); }
.stepper .step-btn:active { background: var(--info-bd); }
.stepper input.ef { width: 54px; border: none; border-left: 1px solid var(--linha); border-right: 1px solid var(--linha); border-radius: 0; text-align: center; font-size: 16px; padding: 8px 2px; box-shadow: none !important; }

/* Assinatura: preview + assinar em TELA CHEIA */
.assina-preview { border: 1.5px solid var(--linha-forte); border-radius: 9px; background: #fff; min-height: 84px; display: flex; align-items: center; justify-content: center; padding: 6px; }
.assina-preview img { max-width: 100%; max-height: 140px; }
.assina-overlay { position: fixed; inset: 0; background: rgba(12,31,68,.96); z-index: 200; display: none; flex-direction: column; padding: 12px; }
.assina-overlay.open { display: flex; }
.assina-overlay .topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: #fff; margin-bottom: 8px; }
.assina-overlay .topo strong { font-family: var(--serif); font-size: 16px; }
.assina-overlay canvas { flex: 1 1 auto; width: 100%; min-height: 0; background: #fff; border-radius: 12px; touch-action: none; }
.assina-overlay .barra { display: flex; gap: 8px; margin-top: 12px; }
.assina-overlay .barra .btn { flex: 1; justify-content: center; padding: 13px; }

/* ====================== MOBILE ====================== */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .wrap { padding: 14px 11px 60px; }
  .topbar { flex-wrap: wrap; gap: 8px; padding: 9px 12px; position: static; }
  .topbar nav { order: 4; width: 100%; margin-left: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .topbar nav a { padding: 10px 13px; }   /* alvo de toque maior na obra */
  .topbar .user { order: 3; margin-left: auto; }
  .card { overflow-x: auto; }
  .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-head .actions { flex-wrap: wrap; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .row { flex-direction: column; gap: 0; }
  form[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  input, select, textarea { font-size: 16px; min-height: 42px; }
  .btn { padding: 10px 15px; }
  .btn.sm { padding: 8px 12px; }
  table { font-size: 13px; }
  th, td { padding: 8px 7px; }
  /* Form de foto (diário) empilha p/ não espremer no celular */
  form.dropzone { flex-direction: column; align-items: stretch; }
  form.dropzone > div { width: 100%; }
  form.dropzone .btn { width: 100%; justify-content: center; }
  .galeria { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
/* Telas bem pequenas: KPI empilha o badge sobre o texto */
@media (max-width: 360px) {
  .kpi { flex-direction: column; gap: 8px; }
  .kpi .valor { font-size: 21px; }
  .galeria { grid-template-columns: 1fr 1fr; }
}