/* ==========================================================================
   Sistema Integrado de Gestão da Coordenadoria de Eventos
   Folha de estilo institucional

   Nenhuma fonte externa é carregada: o sistema roda na rede interna da Casa,
   muitas vezes sem acesso à internet. A tipografia usa as fontes do próprio
   sistema operacional, com Georgia nos títulos por ser universalmente
   disponível e adequada ao tom institucional.
   ========================================================================== */

:root {
  /* --- Azul institucional ------------------------------------------------ */
  --azul-950: #071829;
  --azul-900: #0B2038;
  --azul-800: #103049;
  --azul-700: #17415F;
  --azul-600: #1D5183;
  --azul-500: #2A6BB5;
  --azul-400: #5B92D0;
  --azul-200: #BCD6EF;
  --azul-100: #DDEAF8;
  --azul-50:  #F2F7FC;

  /* --- Dourado cerimonial ------------------------------------------------ */
  --ouro-700: #8A6D14;
  --ouro-600: #A8871F;
  --ouro-500: #C9A227;
  --ouro-300: #E7CE72;
  --ouro-100: #FBF3D9;

  /* --- Estados ----------------------------------------------------------- */
  --verde-700: #0E5C37; --verde-500: #167A4A; --verde-100: #E4F4EB;
  --ambar-700: #8A4108; --ambar-500: #B45309; --ambar-100: #FDF1E1;
  --rubro-700: #8E1D16; --rubro-500: #B3261E; --rubro-100: #FCEBE9;

  /* --- Neutros, levemente puxados para o azul ---------------------------- */
  --cinza-900: #12181F;
  --cinza-800: #1E262F;
  --cinza-700: #3C4652;
  --cinza-600: #55606D;
  --cinza-500: #6E7A87;
  --cinza-400: #98A3AF;
  --cinza-300: #C9D1DA;
  --cinza-200: #E1E7ED;
  --cinza-150: #EDF1F5;
  --cinza-100: #F4F7FA;
  --branco: #FFFFFF;

  /* --- Superfícies e traços ---------------------------------------------- */
  --fundo: #F1F5F9;
  --superficie: var(--branco);
  --superficie-2: var(--cinza-100);
  --traco: #DCE3EB;
  --traco-suave: #EAEFF4;

  /* --- Elevação ---------------------------------------------------------- */
  --sombra-sm: 0 1px 2px rgba(11, 32, 56, .05);
  --sombra:    0 1px 2px rgba(11, 32, 56, .05), 0 3px 10px rgba(11, 32, 56, .05);
  --sombra-md: 0 2px 4px rgba(11, 32, 56, .06), 0 10px 26px rgba(11, 32, 56, .08);
  --sombra-lg: 0 8px 16px rgba(11, 32, 56, .10), 0 24px 56px rgba(11, 32, 56, .16);
  --anel: 0 0 0 3px rgba(42, 107, 181, .18);

  /* --- Formas ------------------------------------------------------------ */
  --raio-sm: 6px;
  --raio: 10px;
  --raio-lg: 14px;
  --raio-pill: 999px;

  /* --- Tipografia -------------------------------------------------------- */
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: Georgia, "Times New Roman", "Liberation Serif", serif;
  --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* --- Ritmo ------------------------------------------------------------- */
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 20px; --esp-6: 24px; --esp-7: 32px; --esp-8: 44px;

  --lateral: 258px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  color: var(--cinza-900);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700; margin: 0; line-height: 1.25;
  color: var(--azul-800);
  letter-spacing: -.005em;
}
h1 { font-size: 23px; }
h2 { font-size: 18px; }
h3 { font-size: 15.5px; }
h4 { font-size: 14px; }

p { margin: 0 0 var(--esp-3); line-height: 1.6; }
a { color: var(--azul-600); text-decoration: none; transition: color .12s; }
a:hover { color: var(--azul-500); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--azul-500);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

/* ==========================================================================
   Estrutura
   ========================================================================== */
.aplicacao { display: flex; min-height: 100vh; }

/* ---------- Barra lateral ---------- */
.barra-lateral {
  width: var(--lateral); flex-shrink: 0;
  background: linear-gradient(180deg, var(--azul-900) 0%, var(--azul-950) 100%);
  color: #C7D6E6;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
}
.barra-lateral::-webkit-scrollbar { width: 8px; }
.barra-lateral::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); border-radius: 4px; }

.marca {
  padding: var(--esp-6) var(--esp-5) var(--esp-5);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.marca .sigla {
  font-family: var(--fonte-titulo); font-size: 25px; font-weight: 700;
  color: #fff; letter-spacing: .045em; line-height: 1;
}
.marca .sigla span { color: var(--ouro-500); }
.marca .orgao {
  font-size: 10.5px; color: #7D93AC; margin-top: 7px;
  letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
}

.menu { padding: var(--esp-3) 0 var(--esp-4); flex: 1; }
.menu-grupo {
  padding: var(--esp-5) var(--esp-5) var(--esp-2);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .13em;
  color: #61789180; font-weight: 700;
}
.menu-grupo:first-child { padding-top: var(--esp-3); }
.menu a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px var(--esp-5); margin: 1px var(--esp-3);
  border-radius: var(--raio-sm);
  color: #BACADC;
  font-size: 13.5px; font-weight: 500;
  transition: background .13s, color .13s;
}
.menu a:hover {
  background: rgba(255,255,255,.07); color: #fff; text-decoration: none;
}
.menu a.ativo {
  background: rgba(201,162,39,.15);
  color: #fff; font-weight: 600;
  box-shadow: inset 2px 0 0 var(--ouro-500);
}
.menu a .ic {
  width: 18px; text-align: center; flex-shrink: 0;
  opacity: .7; font-size: 13px;
}
.menu a.ativo .ic { opacity: 1; color: var(--ouro-300); }
.menu a .contador {
  margin-left: auto; background: var(--ouro-500); color: var(--azul-950);
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: var(--raio-pill);
}

.rodape-lateral {
  padding: var(--esp-4) var(--esp-5) var(--esp-5);
  border-top: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.14);
}
.rodape-lateral .nome { color: #fff; font-weight: 600; font-size: 13px; }
.rodape-lateral .perfil {
  color: #7D93AC; font-size: 11px; margin-bottom: var(--esp-3);
  letter-spacing: .02em;
}
.rodape-lateral .btn {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16);
  color: #D6E2EE;
}
.rodape-lateral .btn:hover:not(:disabled) {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.26); color: #fff;
}

/* ---------- Conteúdo ---------- */
.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--traco);
  padding: var(--esp-4) var(--esp-7);
  display: flex; align-items: center; gap: var(--esp-4);
  position: sticky; top: 0; z-index: 40;
}
.topo h1 { font-size: 21px; }
.topo .subtitulo { font-size: 12.5px; color: var(--cinza-500); margin-top: 3px; }
.topo .acoes { margin-left: auto; display: flex; gap: var(--esp-2); align-items: center; }

.area { padding: var(--esp-6) var(--esp-7) 72px; flex: 1; }

/* ==========================================================================
   Cartões e grades
   ========================================================================== */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--traco);
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
  margin-bottom: var(--esp-5);
  overflow: hidden;
}
.cartao-topo {
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--traco-suave);
  display: flex; align-items: center; gap: var(--esp-3);
  background: linear-gradient(180deg, var(--branco) 0%, var(--cinza-100) 100%);
}
.cartao-topo h2, .cartao-topo h3, .cartao-topo h4 { color: var(--azul-800); }
.cartao-topo .acoes { margin-left: auto; display: flex; gap: var(--esp-2); }
.cartao-corpo { padding: var(--esp-5); }
.cartao-corpo.sem-espaco { padding: 0; }

.grade { display: grid; gap: var(--esp-4); }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
/* Recepção: a tabela de credenciamento é a ferramenta principal do balcão e
   precisa da largura toda. O chat só divide a linha em telas largas. */
.grade-recepcao { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1500px) { .grade-recepcao { grid-template-columns: minmax(0, 1fr) 340px; } }

/* ==========================================================================
   Indicadores
   ========================================================================== */
.indicador {
  background: var(--superficie);
  border: 1px solid var(--traco);
  border-radius: var(--raio);
  padding: var(--esp-5);
  position: relative; overflow: hidden;
  box-shadow: var(--sombra-sm);
  transition: box-shadow .16s, transform .16s;
}
.indicador:hover { box-shadow: var(--sombra); transform: translateY(-1px); }
.indicador::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--azul-600);
}
.indicador.ouro::before     { background: var(--ouro-500); }
.indicador.verde::before    { background: var(--verde-500); }
.indicador.ambar::before    { background: var(--ambar-500); }
.indicador.vermelho::before { background: var(--rubro-500); }

.indicador .valor {
  font-family: var(--fonte-titulo); font-size: 32px; font-weight: 700;
  color: var(--azul-800); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.indicador.verde .valor    { color: var(--verde-700); }
.indicador.ambar .valor    { color: var(--ambar-700); }
.indicador.vermelho .valor { color: var(--rubro-700); }
.indicador.ouro .valor     { color: var(--ouro-700); }
.indicador .rotulo {
  font-size: 10.5px; color: var(--cinza-500); text-transform: uppercase;
  letter-spacing: .09em; margin-top: 9px; font-weight: 600;
}
.indicador .nota { font-size: 12px; color: var(--cinza-500); margin-top: 5px; }

/* ==========================================================================
   Tabelas
   ========================================================================== */
table.dados { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.dados th {
  background: var(--cinza-100);
  text-align: left; padding: 11px var(--esp-4);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--cinza-500); font-weight: 700; white-space: nowrap;
  border-bottom: 1px solid var(--traco);
  position: sticky; top: 0; z-index: 2;
}
table.dados td {
  padding: 12px var(--esp-4);
  border-bottom: 1px solid var(--traco-suave);
  vertical-align: middle;
}
table.dados tbody tr { transition: background .1s; }
table.dados tbody tr:hover { background: var(--azul-50); }
table.dados tbody tr:last-child td { border-bottom: 0; }
table.dados tbody tr.clicavel { cursor: pointer; }
table.dados tbody tr.clicavel:hover .acoes-celula { color: var(--azul-600); }
table.dados td.acoes-celula { text-align: right; white-space: nowrap; color: var(--cinza-400); }
table.dados .destaque { font-weight: 600; color: var(--azul-800); }
/* nomes próprios não devem quebrar em colunas estreitas */
table.dados td .destaque { text-wrap: balance; }
table.dados .mono { font-size: 12.5px; letter-spacing: -.01em; }
table.dados td.centro, table.dados th.centro { text-align: center; }
table.dados .mono, table.dados td.direita { font-variant-numeric: tabular-nums; }
.tabela-rolagem { max-height: 64vh; overflow: auto; }

/* ==========================================================================
   Etiquetas
   ========================================================================== */
.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--raio-pill);
  font-size: 11px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  background: var(--cinza-150); color: var(--cinza-700);
  border: 1px solid transparent;
}
.etiqueta.azul     { background: var(--azul-100);  color: var(--azul-700);  }
.etiqueta.verde    { background: var(--verde-100); color: var(--verde-700); }
.etiqueta.ambar    { background: var(--ambar-100); color: var(--ambar-700); }
.etiqueta.vermelha { background: var(--rubro-100); color: var(--rubro-700); }
.etiqueta.ouro     { background: var(--ouro-100);  color: var(--ouro-700);  }
.etiqueta.cinza    { background: var(--cinza-150); color: var(--cinza-600); }

.selo-vip {
  display: inline-flex; align-items: center;
  background: linear-gradient(180deg, var(--ouro-500), var(--ouro-600));
  color: var(--azul-950);
  font-size: 9.5px; font-weight: 800; padding: 2px 7px;
  border-radius: var(--raio-sm); letter-spacing: .11em;
  box-shadow: 0 1px 2px rgba(138,109,20,.35);
}

/* ==========================================================================
   Botões
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--raio-sm);
  border: 1px solid var(--traco);
  background: var(--branco); color: var(--cinza-800);
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--sombra-sm);
  transition: background .13s, border-color .13s, box-shadow .13s, transform .08s;
}
.btn:hover:not(:disabled) { background: var(--cinza-100); border-color: var(--cinza-300); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn.primario {
  background: linear-gradient(180deg, var(--azul-700), var(--azul-800));
  border-color: var(--azul-800); color: #fff;
}
.btn.primario:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--azul-600), var(--azul-700));
  border-color: var(--azul-700);
}
.btn.ouro {
  background: linear-gradient(180deg, var(--ouro-500), var(--ouro-600));
  border-color: var(--ouro-600); color: var(--azul-950);
}
.btn.ouro:hover:not(:disabled) { filter: brightness(1.06); }
.btn.perigo {
  background: var(--rubro-500); border-color: var(--rubro-500); color: #fff;
}
.btn.perigo:hover:not(:disabled) { background: var(--rubro-700); border-color: var(--rubro-700); }
.btn.discreto {
  border-color: transparent; background: transparent;
  color: var(--azul-600); box-shadow: none;
}
.btn.discreto:hover:not(:disabled) { background: var(--azul-50); border-color: transparent; }

.btn.pequeno { padding: 5px 11px; font-size: 12.5px; }
.btn.grande  { padding: 13px 26px; font-size: 15px; }
.btn.bloco   { width: 100%; }

/* ==========================================================================
   Formulários
   ========================================================================== */
.campo { margin-bottom: var(--esp-4); }
.campo label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--cinza-700); margin-bottom: 6px;
}
.campo label .obrigatorio { color: var(--rubro-500); margin-left: 1px; }
.campo .ajuda { font-size: 12px; color: var(--cinza-500); margin-top: 5px; line-height: 1.5; }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=datetime-local], input[type=date], input[type=tel], input[type=search],
select, textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--cinza-300); border-radius: var(--raio-sm);
  font-size: 14px; font-family: inherit;
  background: var(--branco); color: var(--cinza-900);
  transition: border-color .13s, box-shadow .13s;
}
input::placeholder, textarea::placeholder { color: var(--cinza-400); }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--cinza-400);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul-500); box-shadow: var(--anel);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--cinza-100); color: var(--cinza-500); cursor: not-allowed;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E7A87' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  padding-right: 34px;
}
textarea { resize: vertical; min-height: 92px; line-height: 1.6; }

.linha-campos {
  display: grid; gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.caixa-selecao {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: var(--esp-3);
  padding: 10px 12px; border-radius: var(--raio-sm);
  background: var(--cinza-100); border: 1px solid var(--traco-suave);
}
.caixa-selecao input { width: auto; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--azul-600); }
.caixa-selecao label { margin: 0; font-weight: 500; font-size: 13.5px; cursor: pointer; }

/* ==========================================================================
   Abas
   ========================================================================== */
.abas {
  display: flex; gap: 2px; overflow-x: auto;
  background: var(--superficie);
  border-bottom: 1px solid var(--traco);
  padding: 0 var(--esp-5);
}
.abas::-webkit-scrollbar { height: 0; }
.abas button {
  padding: 13px var(--esp-4); border: 0; background: transparent;
  font-size: 13.5px; font-weight: 600; color: var(--cinza-500);
  cursor: pointer; border-bottom: 2.5px solid transparent;
  white-space: nowrap; font-family: inherit;
  transition: color .13s, border-color .13s;
}
.abas button:hover { color: var(--azul-700); }
.abas button.ativa { color: var(--azul-800); border-bottom-color: var(--ouro-500); }

/* ==========================================================================
   Modal
   ========================================================================== */
.fundo-modal {
  position: fixed; inset: 0;
  background: rgba(7,24,41,.52);
  backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center;
  z-index: 200; padding: 40px 16px; overflow-y: auto;
}
.fundo-modal.aberto { display: flex; }
.modal {
  background: var(--superficie); border-radius: var(--raio-lg);
  width: 100%; max-width: 640px;
  box-shadow: var(--sombra-lg);
  animation: surgir .18s cubic-bezier(.2,.8,.3,1);
  overflow: hidden;
}
.modal.largo { max-width: 980px; }
@keyframes surgir { from { opacity: 0; transform: translateY(-12px) scale(.99); } }

.modal-topo {
  padding: var(--esp-5) var(--esp-6);
  border-bottom: 1px solid var(--traco-suave);
  display: flex; align-items: center; gap: var(--esp-3);
  background: linear-gradient(180deg, var(--branco), var(--cinza-100));
}
.modal-topo h2 { font-size: 18px; }
.modal-topo .fechar {
  margin-left: auto; border: 0; background: transparent;
  font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--cinza-400); padding: 2px 6px; border-radius: var(--raio-sm);
  transition: background .12s, color .12s;
}
.modal-topo .fechar:hover { color: var(--cinza-900); background: var(--cinza-150); }
.modal-corpo { padding: var(--esp-6); max-height: 68vh; overflow-y: auto; }
.modal-rodape {
  padding: var(--esp-4) var(--esp-6);
  border-top: 1px solid var(--traco-suave);
  display: flex; justify-content: flex-end; gap: var(--esp-2);
  background: var(--cinza-100);
}

/* ==========================================================================
   Avisos
   ========================================================================== */
.aviso {
  padding: 12px 15px; border-radius: var(--raio-sm);
  font-size: 13.5px; margin-bottom: var(--esp-4);
  border: 1px solid transparent; border-left-width: 3px;
  line-height: 1.55;
}
.aviso.info    { background: var(--azul-50);   border-color: var(--azul-200);  border-left-color: var(--azul-600);  color: var(--azul-800); }
.aviso.sucesso { background: var(--verde-100); border-color: #BFE3CE;          border-left-color: var(--verde-500); color: var(--verde-700); }
.aviso.alerta  { background: var(--ambar-100); border-color: #F6D9B4;          border-left-color: var(--ambar-500); color: var(--ambar-700); }
.aviso.erro    { background: var(--rubro-100); border-color: #F5C7C3;          border-left-color: var(--rubro-500); color: var(--rubro-700); }

/* ==========================================================================
   Notificações flutuantes
   ========================================================================== */
#notificacoes {
  position: fixed; top: var(--esp-5); right: var(--esp-5); z-index: 500;
  display: flex; flex-direction: column; gap: 10px; max-width: 390px;
}
.notificacao {
  background: var(--superficie); border-radius: var(--raio);
  box-shadow: var(--sombra-lg); border: 1px solid var(--traco);
  padding: 13px 16px; border-left: 4px solid var(--azul-600);
  animation: entrar .22s cubic-bezier(.2,.8,.3,1);
  font-size: 13.5px; line-height: 1.5;
}
.notificacao.sucesso { border-left-color: var(--verde-500); }
.notificacao.erro    { border-left-color: var(--rubro-500); }
.notificacao.alerta  { border-left-color: var(--ambar-500); }
.notificacao.vip {
  border-left-color: var(--ouro-500);
  background: linear-gradient(100deg, var(--ouro-100), var(--branco) 70%);
}
.notificacao .titulo { font-weight: 700; margin-bottom: 3px; color: var(--azul-800); }
@keyframes entrar { from { opacity: 0; transform: translateX(28px); } }

/* ==========================================================================
   Estados e utilitários
   ========================================================================== */
.vazio { text-align: center; padding: 56px 24px; color: var(--cinza-500); }
.vazio .icone {
  font-size: 34px; opacity: .3; margin-bottom: var(--esp-3);
  color: var(--azul-600);
}
.vazio h3 { color: var(--cinza-700); margin-bottom: 6px; }
.vazio p { font-size: 13.5px; max-width: 440px; margin: 0 auto var(--esp-4); }

.carregando { text-align: center; padding: 48px; color: var(--cinza-500); font-size: 13.5px; }
.carregando::before {
  content: ''; display: block; width: 28px; height: 28px; margin: 0 auto var(--esp-3);
  border: 2.5px solid var(--cinza-200); border-top-color: var(--azul-600);
  border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.barra-progresso {
  height: 7px; background: var(--cinza-200);
  border-radius: var(--raio-pill); overflow: hidden;
}
.barra-progresso div {
  height: 100%; border-radius: var(--raio-pill);
  background: linear-gradient(90deg, var(--azul-600), var(--azul-500));
  transition: width .3s cubic-bezier(.2,.8,.3,1);
}
.barra-progresso.completa div { background: linear-gradient(90deg, var(--verde-500), #229160); }

.silencioso { color: var(--cinza-500); font-size: 12.5px; }
.mono { font-family: var(--fonte-mono); font-size: 12.5px; }
.direita { text-align: right; } .centro { text-align: center; }
.nowrap { white-space: nowrap; }
.flex { display: flex; align-items: center; gap: var(--esp-2); }
.flex-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.espaco { flex: 1; }
.oculto { display: none !important; }
.pilha { display: flex; flex-direction: column; gap: 3px; }
.pilha strong { font-variant-numeric: tabular-nums; }

.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li {
  padding: 11px 0; border-bottom: 1px solid var(--traco-suave); font-size: 13.5px;
}
.lista-simples li:last-child { border-bottom: 0; }

.filtros {
  display: flex; gap: var(--esp-3); flex-wrap: wrap; align-items: flex-end;
  margin-bottom: var(--esp-5);
  padding: var(--esp-4) var(--esp-5);
  background: var(--superficie); border: 1px solid var(--traco);
  border-radius: var(--raio); box-shadow: var(--sombra-sm);
}
.filtros .campo { margin-bottom: 0; min-width: 170px; }
.filtros .campo.busca { flex: 1; min-width: 240px; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 960px) {
  .aplicacao { flex-direction: column; }
  .barra-lateral { width: 100%; height: auto; position: static; }
  .marca { padding: var(--esp-4) var(--esp-5); }
  .menu { display: flex; overflow-x: auto; padding: 0; }
  .menu-grupo { display: none; }
  .menu a {
    border-radius: 0; margin: 0; padding: 12px var(--esp-4);
    box-shadow: none; border-bottom: 3px solid transparent;
  }
  .menu a.ativo { box-shadow: none; border-bottom-color: var(--ouro-500); }
  .rodape-lateral { display: flex; align-items: center; gap: var(--esp-3); }
  .rodape-lateral .btn { width: auto; margin: 0 !important; }
  .area, .topo { padding-left: var(--esp-4); padding-right: var(--esp-4); }
  .topo { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .barra-lateral, .topo .acoes, .filtros { display: none !important; }
  .cartao { break-inside: avoid; box-shadow: none; }
}