/* Risk -- interface web. Identidade: vermelho alaranjado da chama, letras brancas e preto. Sem estilos embutidos (CSP). */

:root {
  color-scheme: dark;
  --fundo: #0c0d0f;
  --superficie: #141619;
  --superficie-2: #1a1d21;
  --superficie-3: #22262b;
  --borda: #2a2e34;
  --borda-forte: #3b4049;
  --texto: #f2f4f6;
  --texto-suave: #a9b0ba;
  --texto-fraco: #767e89;
  --acento: #f0391a;
  --acento-2: #ff7a1a;
  --acento-escuro: #c92a0d;
  --gradiente: linear-gradient(135deg, #d9260a 0%, #ee4a17 55%, #ff8a1f 100%);
  --ok: #38c880;
  --aviso: #f5a524;
  --erro: #ff6675;
  --info: #62adff;
  --lateral: #09090b;
  --lateral-borda: #1b1e22;
  --raio: 14px;
  --raio-p: 9px;
  --sombra: 0 0 0 1px rgba(255, 255, 255, 0.025) inset, 0 14px 30px -18px rgba(0, 0, 0, 0.75);
  --fonte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
}

[data-tema="claro"] {
  color-scheme: light;
  --fundo: #f2f3f5;
  --superficie: #ffffff;
  --superficie-2: #f7f8fa;
  --superficie-3: #eceef2;
  --borda: #dfe2e7;
  --borda-forte: #c6ccd5;
  --texto: #14161a;
  --texto-suave: #4a535e;
  --texto-fraco: #78818d;
  --acento: #d92d0e;
  --ok: #10804a;
  --aviso: #a86100;
  --erro: #d02a3c;
  --info: #1c68c9;
  --sombra: 0 1px 2px rgba(20, 22, 26, 0.06), 0 12px 28px -18px rgba(20, 22, 26, 0.25);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 13px/1.5 var(--fonte);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
p { margin: 0; }
a { color: var(--acento-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acento-2); outline-offset: 2px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--acento) 45%, transparent); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 0.92em; }
.suave { color: var(--texto-suave); }
.fraco { color: var(--texto-fraco); }

/* ---------- estrutura ---------- */
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.lateral {
  background: var(--lateral);
  border-right: 1px solid var(--lateral-borda);
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  color: #f2f4f6;
  --texto: #f2f4f6;
  --texto-suave: #a9b0ba;
  --texto-fraco: #767e89;
  --borda: #24282d;
  --superficie-2: #15181c;
  --superficie-3: #1d2126;
  --borda-forte: #2d3239;
}
.marca { display: block; padding: 4px 6px 16px; }
.marca img { display: block; height: 44px; width: auto; }
.seletor-org { margin: 0 2px 14px; }
.seletor-org label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-fraco); margin-bottom: 5px; }
.seletor-org select, .seletor-org .org-unica {
  width: 100%;
  background: #121417;
  border: 1px solid #262a30;
  border-radius: var(--raio-p);
  padding: 9px 10px;
  font-weight: 600;
}
.menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
/* departamentos recolhiveis */
.dep { display: grid; }
.dep + .dep, .menu > a + .dep, .menu > .dep + a { margin-top: 6px; }
.dep-cabeca {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; background: transparent; cursor: pointer;
  color: var(--texto-suave); font: inherit; font-weight: 650; text-align: left; border-radius: var(--raio-p);
}
.dep.nivel-1 > .dep-cabeca { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
.dep-cabeca:hover { background: #14171a; color: var(--texto); }
.dep-cabeca .seta { margin-left: auto; transition: transform 0.15s; flex: none; }
.dep.recolhido > .dep-cabeca .seta { transform: rotate(-90deg); }
.dep-itens { display: grid; gap: 2px; margin: 2px 0 0 17px; padding-left: 8px; border-left: 1px solid var(--lateral-borda); }
.dep-itens.fechado { display: none; }
.dep-itens a { padding: 8px 10px; }
.menu a svg { flex: none; }
.menu a .bloco { display: grid; gap: 1px; line-height: 1.25; }
.menu a .bloco small { font-size: 10.5px; color: var(--texto-fraco); font-weight: 500; }
.menu a.em-breve { opacity: 0.72; }
.menu a.em-breve[aria-current="page"] { opacity: 1; }
.menu-titulo { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--texto-fraco); padding: 16px 10px 6px; }
.menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--raio-p);
  color: var(--texto-suave);
  font-weight: 550;
  position: relative;
  text-decoration: none;
}
.menu a:hover { background: #14171a; color: var(--texto); text-decoration: none; }
.menu a[aria-current="page"] { background: linear-gradient(90deg, rgba(240, 57, 26, 0.18), rgba(240, 57, 26, 0.04)); color: #fff; }
.menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--acento); }
.menu a[aria-current="page"] svg { color: var(--acento-2); }
.lateral-rodape { border-top: 1px solid var(--lateral-borda); margin-top: 14px; padding-top: 14px; display: grid; gap: 10px; }
.usuario-chip { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gradiente);
  display: grid; place-items: center;
  font-weight: 700; color: #fff; flex: none;
}
.usuario-chip { text-decoration: none; color: inherit; border-radius: var(--raio-p); }
.usuario-chip:hover { background: #14171a; text-decoration: none; }
.usuario-dados { min-width: 0; }
.usuario-chip .nome { font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-chip .papel { font-size: 11px; color: var(--texto-fraco); }
.rodape-acoes { display: flex; gap: 6px; }
.rodape-acoes .botao { flex: 1; justify-content: center; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 32px;
  border-bottom: 1px solid var(--borda);
  background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: blur(8px);
  position: relative;
}
.topo h1 { font-size: 18px; }
.topo .sub { color: var(--texto-fraco); font-size: 11.5px; }
.topo .espaco { flex: 1; }
.marca .marca-mini { display: none; }
.pagina { display: contents; }
.secao-lote { display: contents; } /* lugar reservado no topo da inicial: o lote entra acima da Posicao, que ja' carrega */
.conteudo { padding: 26px 32px 60px; max-width: 1360px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; }
.conteudo > *, .pagina > * { min-width: 0; }
.cabecalho-fixo { position: sticky; top: 0; z-index: 7; }

/* menu lateral recolhido: so os icones (foguinho + R no alto); ao passar o mouse (ou navegar com o teclado) ele abre POR CIMA da tela,
   com os nomes, sem empurrar o conteudo. So em telas grandes: no celular o menu e' uma gaveta. */
.app { transition: grid-template-columns 0.18s ease; }
.marca-mini { height: 40px; width: auto; }
@media (min-width: 961px) {
  .app.recolhida { grid-template-columns: 72px minmax(0, 1fr); }
  .app.recolhida .principal { grid-column: 2; }
  .recolhida .lateral {
    position: fixed; left: 0; top: 0; bottom: 0; height: auto; width: 72px; z-index: 45; overflow-x: hidden;
    transition: width 0.18s ease 0.06s, box-shadow 0.18s ease 0.06s; scrollbar-width: none;
  }
  .recolhida .lateral::-webkit-scrollbar { display: none; }
  .recolhida .lateral:hover, .recolhida .lateral:has(:focus-visible) { width: 264px; box-shadow: 18px 0 48px rgba(0, 0, 0, 0.55); scrollbar-width: thin; }
  /* estado so-icones: vale enquanto o mouse esta fora e nada da lateral tem foco de teclado */
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) { padding: 18px 10px 14px; }
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) .marca { padding: 4px 0 14px; }
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) .marca-completa { display: none; }
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) .marca-mini { display: block; margin: 0 auto; height: 38px; }
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) :is(.seletor-org, .rotulo-menu, .usuario-dados) { display: none; }
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) .dep-cabeca { height: 1px; padding: 0; margin: 12px 8px; background: var(--lateral-borda); overflow: hidden; pointer-events: none; }
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) .dep-cabeca > * { display: none; }
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) .dep-itens { margin-left: 0; padding-left: 0; border-left: 0; }
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) .dep-itens a { padding: 11px 0; }
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) .dep + .dep,
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) .menu > a + .dep,
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) .menu > .dep + a { margin-top: 0; }
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) .menu a { justify-content: center; padding: 11px 0; }
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) .usuario-chip { justify-content: center; padding: 4px 0; }
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) .rodape-acoes { flex-direction: column; }
  /* recolhido, os grupos ficam todos abertos (so os icones); ao abrir por cima volta o que voce recolheu */
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) .dep-itens.fechado { display: grid; }
  .recolhida .lateral:not(:hover):not(:has(:focus-visible)) .veu-menu { display: none; }
}

/* identificacao visual: Fundador/Co-fundador vendo os dados de uma empresa (LGPD) */
.faixa-fundador {
  display: flex; align-items: center; gap: 10px; padding: 8px 32px; min-height: 44px;
  background: linear-gradient(90deg, #8f1d0b, #c2410c); color: #fff; font-size: 12px;
}
.faixa-fundador .texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.faixa-fundador svg { flex: none; }
.faixa-fundador .botao { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.faixa-fundador .botao:hover { background: rgba(255, 255, 255, 0.26); }
.modo-fundador .lateral { box-shadow: inset 3px 0 0 #c2410c; }
@media (max-width: 960px) {
  .faixa-fundador { flex-wrap: wrap; padding: 8px 18px; }
  .cabecalho-fixo { position: static; }
}

/* Controle e paginas "em desenvolvimento" */
.desenvolvimento { display: flex; gap: 22px; align-items: flex-start; padding: 8px 4px; }
.desenvolvimento-icone { flex: none; width: 68px; height: 68px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: var(--gradiente); }
.desenvolvimento h2 { font-size: 18px; }
.lista-simples { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--texto-suave); }
.linha-cenario { display: flex; align-items: center; gap: 10px; }
.linha-cenario .espaco { flex: 1; }
.numero-grande { font-size: 29px; line-height: 1; font-variant-numeric: tabular-nums; }
.espaco-topo { margin-top: 10px; }
.centro { text-align: center; }

.botao.fechar-lateral, .veu-menu { display: none; }

/* posicao da carteira (painel inicial) */
.filtros-posicao { display: grid; grid-template-columns: minmax(200px, 260px) minmax(220px, 1fr); gap: 14px; align-items: end; }
.filtro-datas { grid-column: 1 / -1; }
.filtro-datas input { width: auto; min-width: 150px; }
.resumo-linha { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.faixa-linha { display: grid; gap: 5px; }
.faixa-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.faixa-topo .fraco { flex: 1; min-width: 0; }
.barra > span.atrasado { background: linear-gradient(90deg, #d9260a, #ff5a3a); }
.barra > span.a-vencer { background: linear-gradient(90deg, #2f80ed, #62adff); }
.cabeca-secao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.cabeca-secao .espaco { flex: 1; }
/* de quando e' o numero ("foto do lote de...", "base de..."): perto do titulo de cada secao da inicial */
.carimbo { font-size: 11.5px; font-weight: 500; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.cartao > header h2 .carimbo { margin-left: 10px; }
.detalhe-cliente { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--texto-suave); }
.detalhe-cliente span { display: inline-flex; align-items: center; gap: 6px; }
/* ordenar a lista de clientes pelo titulo da coluna (tarefa 37, etapa 2); em tela estreita, por um seletor */
th button.ordenar { background: none; border: 0; padding: 0; margin: 0; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; color: inherit; }
th button.ordenar:hover, th button.ordenar.ativa { color: var(--texto); }
th button.ordenar:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
.ordenar-estreito { display: none; align-items: center; gap: 8px; }
.ordenar-estreito select { width: auto; flex: 1; min-width: 0; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td, tr.clicavel:focus td { background: color-mix(in srgb, var(--acento) 7%, transparent); }
.nome-cliente { font-weight: 600; }
.pequeno-texto { font-size: 11px; }
.texto-erro { color: var(--erro); font-weight: 600; }
td.num, th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ajuda-numeros { border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 10px 14px; background: var(--superficie-2); }
.ajuda-numeros summary { cursor: pointer; font-weight: 600; color: var(--texto-suave); }
.ajuda-numeros .lista-simples { margin-top: 10px; }
@media (max-width: 700px) {
  .filtros-posicao { grid-template-columns: 1fr; }
  .filtro-datas input { flex: 1; min-width: 130px; }
}

/* logo da empresa no cabecalho e abertura depois do login */
.logo-org-placa { display: inline-flex; align-items: center; flex: none; height: 40px; padding: 4px 6px; border-radius: 9px; }
/* a logo fica sobre o fundo transparente; so ganha uma placa quando sumiria no tema (escura no escuro, clara no claro) */
:root:not([data-tema="claro"]) .tom-escuro { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
:root[data-tema="claro"] .tom-claro { background: #1b1e22; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.logo-org-placa.tom-escuro, .logo-org-placa.tom-claro { padding: 4px 10px; }
.logo-organizacao { display: block; height: 30px; max-width: 160px; width: auto; object-fit: contain; }
.oculto-na-abertura { visibility: hidden; }
.abertura { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; outline: none; cursor: pointer; }
.abertura-fundo { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(240, 57, 26, 0.13), transparent 60%), var(--fundo); }
.abertura-palco { position: relative; display: grid; justify-items: center; gap: 6px; padding: 24px; text-align: center; }
.abertura-risk { height: 96px; width: auto; transform-origin: 0 0; }
.abertura .fogo { transition: opacity 0.25s; }
.abertura .fogo.some, .abertura-nome.some { opacity: 0; }
.abertura-empresa { display: grid; justify-items: center; gap: 10px; min-height: 108px; margin-top: 4px; }
.abertura-org { padding: 6px 10px; border-radius: 14px; opacity: 0; transform-origin: 0 0; }
.abertura-org.tom-escuro, .abertura-org.tom-claro { padding: 10px 20px; }
.abertura-org img { display: block; height: 54px; max-width: 250px; width: auto; object-fit: contain; }
.abertura-nome { color: var(--texto-suave); font-size: 13px; opacity: 0; }
.abertura-org.aparece, .abertura-nome.aparece { animation: aparecer 0.7s ease forwards; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .logo-org-placa { height: 32px; padding: 3px 8px; }
  .logo-organizacao { height: 24px; max-width: 96px; }
  .abertura-risk { height: 72px; }
}

/* ---------- componentes ---------- */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.cartao > header { display: flex; align-items: center; gap: 10px; padding: 16px 20px 0; }
.cartao > header h2 { font-size: 13.5px; }
.cartao > header .espaco { flex: 1; }
.cartao .corpo { padding: 16px 20px 20px; }
.cartao.destaque { position: relative; overflow: hidden; }
.cartao.destaque::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gradiente); }
.grade { display: grid; gap: 18px; }
.grade.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* seis blocos: 3+3, e 2+2+2 em tela estreita -- nunca um sozinho na linha. Seis lado a lado nao cabem: com a largura maxima
   do conteudo, cada bloco ficaria estreito demais para um valor na casa do milhao */
.grade.c6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade.alinhar-topo { align-items: start; }
.grade.principal-lateral { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.pilha { display: grid; gap: 12px; }
.linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.linha .espaco { flex: 1; }

.botao {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--borda-forte);
  background: var(--superficie-2);
  color: var(--texto);
  padding: 8px 14px;
  border-radius: var(--raio-p);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s, filter 0.15s;
  white-space: nowrap;
}
.botao:hover { background: var(--superficie-3); }
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: 0.5; cursor: not-allowed; }
.botao.primario { background: var(--gradiente); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -10px rgba(240, 57, 26, 0.8); }
.botao.primario:hover { filter: brightness(1.08); background: var(--gradiente); }
.botao.perigo { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 40%, var(--borda)); background: transparent; }
.botao.perigo:hover { background: color-mix(in srgb, var(--erro) 12%, transparent); }
.botao.fantasma { background: transparent; border-color: transparent; color: var(--texto-suave); }
.botao.fantasma:hover { background: var(--superficie-2); color: var(--texto); }
.botao.pequeno { padding: 5px 10px; font-size: 11.5px; }
.botao.icone { padding: 7px; }
.botao.grande { padding: 11px 20px; font-size: 13.5px; }

label.campo { display: grid; gap: 6px; }
label.campo > .rotulo { font-size: 11.5px; font-weight: 600; color: var(--texto-suave); }
.dica { font-size: 11px; color: var(--texto-fraco); }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="search"], input[type="time"], select, textarea {
  width: 100%;
  background: var(--superficie-2);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  padding: 9px 11px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { resize: vertical; min-height: 84px; font-family: inherit; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--acento-2) 45%, var(--borda-forte)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento-2) 28%, transparent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--acento); width: 16px; height: 16px; margin: 0; }
input.interruptor[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 40px; height: 23px; border-radius: 999px; background: var(--superficie-3); border: 1px solid var(--borda-forte); position: relative; cursor: pointer; transition: background 0.15s; flex: none; }
input.interruptor[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--texto-suave); transition: transform 0.15s, background 0.15s; }
input.interruptor[type="checkbox"]:checked { background: var(--gradiente); border-color: transparent; }
input.interruptor[type="checkbox"]:checked::after { transform: translateX(17px); background: #fff; }
input.interruptor[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }
input[type="color"] { width: 42px; height: 38px; padding: 2px; border-radius: var(--raio-p); background: var(--superficie-2); border: 1px solid var(--borda-forte); cursor: pointer; }
.escolha { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--borda); border-radius: var(--raio-p); cursor: pointer; background: var(--superficie-2); }
.escolha:hover { border-color: var(--borda-forte); }
.escolha input { margin-top: 3px; }
.escolha .titulo { font-weight: 600; }
.escolha .descricao { font-size: 11px; color: var(--texto-fraco); }
.escolha.marcada { border-color: color-mix(in srgb, var(--acento) 60%, var(--borda)); background: color-mix(in srgb, var(--acento) 8%, var(--superficie-2)); }
.segmentos { display: inline-flex; flex-wrap: wrap; max-width: 100%; background: var(--superficie-2); border: 1px solid var(--borda-forte); border-radius: var(--raio-p); padding: 3px; gap: 2px; }
.segmentos button { border: 0; background: transparent; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-weight: 600; color: var(--texto-suave); }
.segmentos button[aria-pressed="true"] { background: var(--gradiente); color: #fff; }

.selo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.6;
  background: var(--superficie-3); color: var(--texto-suave);
  border: 1px solid transparent;
  white-space: nowrap;
}
.selo.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.selo.aviso { background: color-mix(in srgb, var(--aviso) 16%, transparent); color: var(--aviso); }
.selo.erro { background: color-mix(in srgb, var(--erro) 16%, transparent); color: var(--erro); }
.selo.info { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); }
.selo.marca { background: color-mix(in srgb, var(--acento) 16%, transparent); color: var(--acento-2); }

.tabela-caixa { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-fraco); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
td { padding: 12px 14px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--texto) 3%, transparent); }
td.acoes { text-align: right; white-space: nowrap; }
/* tabelas em telas estreitas: cada linha vira um cartao, com o rotulo da coluna ao lado do valor */
@media (max-width: 700px) {
  .tabela-caixa table, .tabela-caixa tbody, .tabela-caixa tr, .tabela-caixa td { display: block; width: 100%; }
  .tabela-caixa thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-caixa tr { padding: 10px 4px; border-bottom: 1px solid var(--borda-forte); }
  .tabela-caixa td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 5px 10px; border-bottom: 0; text-align: right; }
  .tabela-caixa td::before { content: attr(data-rotulo); flex: none; max-width: 42%; text-align: left; color: var(--texto-fraco); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
  .tabela-caixa td:not([data-rotulo])::before { content: none; }
  .tabela-caixa td > * { min-width: 0; }
  .tabela-caixa td.acoes { justify-content: flex-end; }
  .ordenar-estreito { display: flex; }
  /* lista de clientes no celular: so o essencial (a linha inteira abre o detalhe) */
  .tabela-clientes td:nth-child(2), .tabela-clientes td:nth-child(5), .tabela-clientes td:nth-child(6), .tabela-clientes td:nth-child(7) { display: none; }
  .tabela-clientes td:first-child { text-align: left; }
  .tabela-clientes td:first-child::before { content: none; }
  .etapas .selo, .tabela-caixa td .selo { white-space: normal; }
}

.vazio { text-align: center; padding: 34px 20px; color: var(--texto-fraco); display: grid; gap: 8px; justify-items: center; }
.vazio svg { color: var(--texto-fraco); opacity: 0.7; }
.aviso-caixa { display: flex; gap: 12px; padding: 13px 16px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--superficie-2); align-items: flex-start; }
.aviso-caixa.aviso { border-color: color-mix(in srgb, var(--aviso) 45%, var(--borda)); background: color-mix(in srgb, var(--aviso) 9%, var(--superficie)); }
.aviso-caixa.erro { border-color: color-mix(in srgb, var(--erro) 45%, var(--borda)); background: color-mix(in srgb, var(--erro) 9%, var(--superficie)); }
.aviso-caixa.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--borda)); background: color-mix(in srgb, var(--ok) 9%, var(--superficie)); }
.aviso-caixa.info { border-color: color-mix(in srgb, var(--info) 45%, var(--borda)); background: color-mix(in srgb, var(--info) 9%, var(--superficie)); }
.aviso-caixa svg { flex: none; margin-top: 2px; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); overflow-x: auto; }
.abas button { border: 0; background: transparent; padding: 10px 14px; cursor: pointer; color: var(--texto-suave); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas button:hover { color: var(--texto); }
.abas button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--acento); }

/* foguinho de carregamento: a chama se acende de baixo para cima, de 0 a 100% */
.fogo { display: grid; place-items: center; gap: 14px; padding: 48px 20px; color: var(--texto-fraco); text-align: center; }
.fogo.pequeno { grid-auto-flow: column; justify-content: start; padding: 14px 4px; gap: 12px; }
.fogo-chama { position: relative; width: 76px; height: 76px; }
.fogo.pequeno .fogo-chama { width: 38px; height: 38px; }
.fogo-chama img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fogo-base { filter: grayscale(1) brightness(0.5); opacity: 0.5; }
.fogo-cheio { clip-path: inset(calc(100% - var(--p, 0%)) 0 0 0); transition: clip-path 0.12s linear; }
.fogo-legenda { display: grid; gap: 2px; justify-items: center; }
.fogo.pequeno .fogo-legenda { justify-items: start; }
.fogo-numero { font-size: 18px; color: var(--texto); font-variant-numeric: tabular-nums; line-height: 1.1; }
.girando { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--borda-forte); border-top-color: var(--acento-2); animation: gira 0.8s linear infinite; display: inline-block; }
@keyframes gira { to { transform: rotate(360deg); } }
.carregando { display: grid; place-items: center; padding: 60px; gap: 12px; color: var(--texto-fraco); }
.esqueleto { background: linear-gradient(90deg, var(--superficie-2), var(--superficie-3), var(--superficie-2)); background-size: 200% 100%; animation: brilho 1.4s infinite; border-radius: 8px; height: 18px; }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- modal e avisos ---------- */
.veu { position: fixed; inset: 0; background: rgba(4, 5, 6, 0.66); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; z-index: 50; animation: aparece 0.15s; }
@keyframes aparece { from { opacity: 0; } }
.janela { background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: 16px; width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); animation: sobe 0.18s; }
.janela.larga { width: min(860px, 100%); }
@keyframes sobe { from { transform: translateY(10px); opacity: 0; } }
.janela header { display: flex; align-items: center; gap: 10px; padding: 18px 22px 0; }
.janela header h2 { font-size: 15.5px; flex: 1; }
.janela .corpo { padding: 16px 22px; overflow-y: auto; display: grid; gap: 14px; }
.janela footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--borda); }
.avisos { position: fixed; right: 20px; bottom: 88px; display: grid; gap: 10px; z-index: 60; width: min(380px, calc(100vw - 40px)); }
.aviso-flutuante { background: var(--superficie-3); border: 1px solid var(--borda-forte); border-left: 4px solid var(--info); border-radius: 10px; padding: 12px 14px; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.7); animation: sobe 0.2s; display: flex; gap: 10px; }
.aviso-flutuante.ok { border-left-color: var(--ok); }
.aviso-flutuante.erro { border-left-color: var(--erro); }
.aviso-flutuante.aviso { border-left-color: var(--aviso); }

/* ---------- hall ---------- */
.saudacao h1 { font-size: 23.5px; }
.saudacao p { color: var(--texto-suave); margin-top: 4px; }
/* O valor encolhe so' o quanto o numero pede (pedido do dono, 2026-10-17): o tamanho e' a largura do bloco (container
   query, cqi) dividida pelo numero de caracteres do valor (--caracteres, contado pela tela em app.js) x 0,52em -- a media
   medida nesta fonte e' 0,48em por caractere (12 digitos, "R$ 9.999.999.999,99", medem 9,1em), com folga para fonte mais
   larga de outro sistema. Numero curto fica no tamanho original (o teto do clamp); quanto mais digitos, menor, aos poucos */
.kpi { padding: 18px 20px; display: grid; gap: 8px; container-type: inline-size; }
.kpi .rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-fraco); font-weight: 600; }
.kpi .valor { font-size: clamp(11px, calc(100cqi / (var(--caracteres, 13) * 0.52)), 23.5px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi.alerta .valor { color: var(--erro); }
.variacao { font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.variacao.sobe-bom, .variacao.desce-bom { color: var(--ok); }
.variacao.sobe-mau, .variacao.desce-mau { color: var(--erro); }
.variacao.neutra { color: var(--texto-fraco); }
.barra { height: 8px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: 999px; background: var(--gradiente); }
.cenario { padding: 18px 20px; display: grid; gap: 10px; container-type: inline-size; }
.cenario .cabeca { display: flex; align-items: center; gap: 10px; }
.cenario .nome { font-weight: 700; font-size: 14.5px; }
.cenario .valor { font-size: clamp(11px, calc(100cqi / (var(--caracteres, 13) * 0.52)), 20px); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cenario .linha-dados { display: flex; gap: 18px; color: var(--texto-suave); font-size: 11.5px; }
.cenario.d-2 { border-top: 3px solid var(--erro); }
.cenario.d0 { border-top: 3px solid var(--aviso); }
.cenario.d1 { border-top: 3px solid var(--ok); }
.lista { display: grid; }
.lista .item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--borda); }
.lista .item:last-child { border-bottom: 0; }
.lista .item .texto { flex: 1; min-width: 0; }
.lista .item .titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .item .detalhe { font-size: 11px; color: var(--texto-fraco); }
.atalhos { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- lotes e arquivos ---------- */
.lotes-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.lote-item { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; cursor: pointer; background: var(--superficie); text-align: left; width: 100%; }
.lote-item:hover { border-color: var(--borda-forte); background: var(--superficie-2); }
.lote-item[aria-current="true"] { border-color: color-mix(in srgb, var(--acento) 65%, var(--borda)); background: color-mix(in srgb, var(--acento) 8%, var(--superficie)); }
.lote-item .data { font-weight: 700; }
.etapas { display: flex; gap: 5px; flex-wrap: wrap; }
.arquivo-linha { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; }
.arquivo-linha:hover { background: var(--superficie-2); }
.arquivo-linha .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.previa { width: 100%; height: 640px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; }
.previa-imagem { width: 100%; border-radius: 10px; border: 1px solid var(--borda); background: #fff; }
.previa-texto { white-space: pre-wrap; font-family: var(--mono); font-size: 11.5px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px; padding: 14px; max-height: 480px; overflow: auto; }
.andamento { background: #0a0b0d; border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; font-family: var(--mono); font-size: 11px; max-height: 240px; overflow: auto; color: #cfd5dc; white-space: pre-wrap; }

/* ---------- dossie ---------- */
.secoes-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ---------- configuracao ---------- */
.config-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.config-nav { position: sticky; top: 92px; display: grid; gap: 2px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 4px; }
.config-nav button { border: 0; background: transparent; text-align: left; padding: 8px 12px; border-radius: 9px; cursor: pointer; color: var(--texto-suave); font-weight: 550; display: flex; justify-content: space-between; gap: 8px; }
.config-nav button:hover { background: var(--superficie-2); color: var(--texto); }
.config-nav button[aria-current="true"] { background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--texto); }
.config-nav .contagem { color: var(--texto-fraco); font-size: 11px; }
.config-nav .titulo-area { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--texto-fraco); padding: 14px 12px 4px; }
.campo-config { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--borda); }
.campo-config:last-child { border-bottom: 0; }
.campo-config .cabeca { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.campo-config .titulo { font-weight: 600; }
.campo-config .chave { font-family: var(--mono); font-size: 11px; color: var(--texto-fraco); }
.campo-config.alterado { box-shadow: -3px 0 0 var(--acento-2); padding-left: 12px; }
.campo-config .controle { display: flex; gap: 8px; align-items: center; }
.campo-config .controle > :first-child { flex: 1; }
.cor-amostra { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--borda-forte); flex: none; background-image: linear-gradient(45deg, #888 25%, transparent 25%, transparent 75%, #888 75%), linear-gradient(45deg, #888 25%, transparent 25%, transparent 75%, #888 75%); background-size: 8px 8px; background-position: 0 0, 4px 4px; position: relative; overflow: hidden; }
.cor-amostra > span { position: absolute; inset: 0; }
.barra-salvar { position: sticky; bottom: 16px; z-index: 6; display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: var(--superficie-3); border: 1px solid var(--borda-forte); border-radius: 14px; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.8); }
.miniatura { height: 54px; max-width: 160px; object-fit: contain; background: repeating-conic-gradient(#2a2e34 0 25%, #1a1d21 0 50%) 0 0 / 14px 14px; border-radius: 8px; border: 1px solid var(--borda); padding: 4px; }

/* ---------- entrar ---------- */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1000px 500px at 50% -10%, rgba(240, 57, 26, 0.16), transparent 60%), var(--fundo); }
.entrar-caixa { width: min(440px, 100%); display: grid; gap: 22px; }
.entrar-caixa .marca-grande { text-align: center; }
.entrar-caixa .marca-grande img { height: 96px; width: auto; }
/* as letras da logo sao brancas: no tema claro ficam sobre uma placa escura, como no menu lateral */
:root[data-tema="claro"] .entrar-caixa .marca-grande img { background: var(--lateral); padding: 16px 30px; border-radius: 18px; box-sizing: content-box; margin: 0 auto; }
.entrar-caixa .marca-grande p { color: var(--texto-fraco); margin-top: 8px; font-size: 11.5px; }
.entrar-cartao { padding: 26px; display: grid; gap: 16px; }
.entrar-cartao h2 { font-size: 17px; }
.links-entrar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 11.5px; }
.links-entrar button { border: 0; background: none; padding: 0; color: var(--acento-2); cursor: pointer; font-weight: 600; }
.links-entrar button:hover { text-decoration: underline; }
.campo-codigo input { font-size: 23.5px; letter-spacing: 0.4em; text-align: center; font-family: var(--mono); }

/* ---------- responsivo ---------- */
/* ---------- Painel da Diretoria ---------- */
.kpi.clicavel { cursor: pointer; }
.kpi.clicavel:hover { border-color: var(--borda-forte); }
.kpi-grave .valor { color: var(--erro); }
.kpi-medio .valor { color: var(--aviso); }
.kpi-leve .valor { color: var(--info); }
.barra-filtros { margin: 26px 0 14px; }
.titulo-secao { font-size: 15.5px; }
.barra-filtros input[type="search"] { width: 220px; }
.cheia { grid-column: 1 / -1; }
.org-cartao { border-left: 3px solid var(--borda); }
.org-cartao.nivel-grave { border-left-color: var(--erro); }
.org-cartao.nivel-medio { border-left-color: var(--aviso); }
.org-cartao.nivel-leve { border-left-color: var(--info); }
.org-cabeca { display: flex; align-items: center; gap: 10px; }
.org-cabeca .espaco { flex: 1; }
.org-nome { font-size: 14.5px; font-weight: 700; }
.org-papeis { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11.5px; color: var(--texto-suave); }
.org-papeis .org-papel { display: inline-flex; align-items: center; gap: 6px; }
.org-papeis svg { flex: none; }
.uso-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 10px; }
.uso-item { display: grid; align-content: start; gap: 1px; padding: 10px 12px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-p); }
.uso-item .valor { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.uso-item .rotulo { font-size: 11px; color: var(--texto-suave); }
.uso-item .fraco, .kpi > .fraco { font-size: 11px; }
.ocorrencias { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ocorrencia { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--superficie-2); }
.ocorrencia.grave { border-color: color-mix(in srgb, var(--erro) 40%, var(--borda)); }
.ocorrencia.medio { border-color: color-mix(in srgb, var(--aviso) 40%, var(--borda)); }
.ocorrencia .selo { flex: none; margin-top: 1px; }
.ocorrencia .titulo { font-weight: 600; }
.ocorrencia .detalhe { font-size: 11px; color: var(--texto-fraco); overflow-wrap: anywhere; }
.ok-texto { display: flex; align-items: center; gap: 7px; color: var(--ok); margin: 0; }

/* ---------- governança do produto ---------- */
.barra-filtros select { width: auto; min-width: 190px; max-width: 100%; }
.gov-titulo-bloco { margin: 26px 0 14px; }
.gov-frente { border-left: 3px solid var(--borda); min-width: 0; }
.gov-frente.com-pendencia { border-left-color: var(--aviso); }
.gov-cabeca { display: flex; align-items: center; gap: 12px; }
.gov-cabeca .espaco { flex: 1; }
.gov-icone { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento-2); }
.gov-nome h3 { font-size: 14.5px; }
.gov-percentual { display: grid; justify-items: end; line-height: 1.25; }
.gov-percentual strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.gov-percentual span { white-space: nowrap; }
.gov-descricao { margin: 0; }
.gov-contagens { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.gov-contagem { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; }
.gov-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gov-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--superficie-2); }
.gov-item.estado-autorizacao { border-color: color-mix(in srgb, var(--aviso) 45%, var(--borda)); }
.gov-item.estado-decisao { border-color: color-mix(in srgb, var(--acento) 40%, var(--borda)); }
.gov-item.estado-bloqueado { border-color: color-mix(in srgb, var(--erro) 40%, var(--borda)); }
.gov-item.estado-cancelado { opacity: 0.65; }
.gov-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gov-item textarea, .gov-frente textarea { width: 100%; }
.gov-subdepartamentos { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--borda); gap: 8px; }
.gov-secao { border: 1px solid var(--borda); border-left: 3px dashed var(--borda); border-radius: var(--raio-p); background: var(--superficie-2, transparent); min-width: 0; }
.gov-secao.com-pendencia { border-left-color: var(--aviso); }
.gov-secao > summary { list-style: none; cursor: pointer; padding: 9px 12px; border-radius: var(--raio-p); }
.gov-secao > summary::-webkit-details-marker { display: none; }
.gov-secao > summary:hover { background: color-mix(in srgb, var(--acento) 6%, transparent); }
.gov-secao > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.gov-secao .gov-icone { width: 30px; height: 30px; border-radius: 8px; }
.gov-secao .gov-nome h3 { font-size: 13.5px; }
.gov-secao .gov-percentual strong { font-size: 15px; }
.gov-seta { flex: none; display: grid; place-items: center; color: var(--texto-fraco); transition: transform 0.15s; }
.gov-secao[open] > summary .gov-seta { transform: rotate(180deg); }
.gov-secao-corpo { padding: 4px 12px 12px; }
.gov-subdepartamentos .gov-frente { border-left-style: dashed; }
.gov-marca { flex: none; margin-top: 1px; color: var(--texto-fraco); }
.estado-feito .gov-marca { color: var(--ok); }
.estado-andamento .gov-marca { color: var(--info); }
.estado-autorizacao .gov-marca { color: var(--aviso); }
.estado-decisao .gov-marca { color: var(--acento-2); }
.estado-bloqueado .gov-marca { color: var(--erro); }
.gov-texto { min-width: 0; display: grid; gap: 3px; }
.gov-titulo { font-weight: 600; overflow-wrap: anywhere; }
.gov-texto .fraco { font-size: 11.5px; overflow-wrap: anywhere; }
.gov-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.gov-proximo { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--raio-p); background: color-mix(in srgb, var(--acento) 8%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--acento) 25%, var(--borda)); }
.gov-proximo svg { flex: none; margin-top: 2px; transform: rotate(-90deg); color: var(--acento-2); }
.gov-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; font-size: 11px; }
.gov-ref { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; overflow-wrap: anywhere; font-size: 11px; }
.gov-ref svg { flex: none; }
.gov-sub { margin: 0; }
.gov-topo-bloco { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.gov-topo-bloco .gov-proximo { flex: 1 1 260px; min-width: 0; }
.gov-topo-bloco > .botao { flex: none; }
.gov-limite { font-size: 11.5px; }
.gov-itens.limitada { overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-gutter: stable; }
.gov-itens.limitada:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--raio-p); }
.gov-responsavel { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--texto-suave); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--borda); }
.gov-execucoes { border-top: 1px dashed var(--borda); padding-top: 8px; display: grid; gap: 4px; }
.gov-execucoes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gov-execucoes li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; font-size: 11.5px; color: var(--texto-suave); }
.gov-execucoes .gov-texto-exec { overflow-wrap: anywhere; }
.gov-execucoes strong { color: var(--texto); font-weight: 600; }
.gov-execucoes em { font-style: normal; color: var(--texto); }
.gov-espera { border-top: 3px solid var(--aviso); }
.gov-espera-grade { margin-top: 18px; }
.gov-subtitulo { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-fraco); margin-top: 4px; }
.gov-linha-do-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.gov-linha-do-tempo li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px 0 10px 14px; border-left: 2px solid var(--borda); position: relative; }
.gov-linha-do-tempo li::before { content: ""; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--gradiente); }
.gov-data { font-size: 11.5px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }

@media (max-width: 1180px) {
  .grade.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade.c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade.principal-lateral { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: 282px; transform: translateX(-102%); transition: transform 0.2s; box-shadow: 30px 0 60px rgba(0, 0, 0, 0.6); }
  .lateral.aberta { transform: none; }
  .botao.fechar-lateral { display: inline-flex; position: absolute; top: 12px; right: 12px; z-index: 2; }
  .lateral.aberta + .veu-menu { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, 0.55); }
  .topo, .conteudo { padding-left: 18px; padding-right: 18px; }
  .lotes-layout, .config-layout { grid-template-columns: 1fr; }
  .config-nav { position: static; max-height: none; grid-auto-flow: column; overflow-x: auto; }
  .grade.c3, .grade.c2 { grid-template-columns: 1fr; }
  .gov-linha-do-tempo li { grid-template-columns: 1fr; gap: 2px; }
  .gov-execucoes li { grid-template-columns: 1fr; gap: 0; }
  .barra-filtros input[type="search"] { width: 100%; }
  .grade.c5, .grade.c6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secoes-grade { grid-template-columns: 1fr; }
  .topo { flex-wrap: wrap; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .kpi { padding: 14px; }
  .kpi .valor { font-size: clamp(11px, calc(100cqi / (var(--caracteres, 13) * 0.52)), 17px); }
  .saudacao h1 { font-size: 20px; }
  .cenario .valor { font-size: clamp(11px, calc(100cqi / (var(--caracteres, 13) * 0.52)), 17px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- funcionalidades, pedidos e membros da Administração ---------- */
.selo-menu { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--acento); color: #fff; font-size: 10.5px; font-weight: 700; text-align: center; }
.lateral.recolhida:not(:hover) .selo-menu { display: none; }
.matriz-caixa { overflow-x: auto; }
.matriz { width: 100%; border-collapse: collapse; font-size: 12px; }
.matriz th, .matriz td { padding: 9px 10px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: middle; }
.matriz thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-fraco); position: sticky; top: 0; background: var(--superficie); }
.matriz td.celula { min-width: 150px; }
.matriz select { width: 100%; min-width: 120px; }
.matriz .org-col { font-weight: 600; white-space: nowrap; }
.pedido-item { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--superficie-2); }
.pedido-item.pendente { border-color: color-mix(in srgb, var(--aviso) 45%, var(--borda)); }
.pedido-item .justificativa { margin: 0; padding: 8px 10px; border-left: 3px solid var(--borda-forte); color: var(--texto-suave); background: var(--superficie); border-radius: 0 6px 6px 0; overflow-wrap: anywhere; }
.catalogo-item { display: grid; gap: 10px; }
.catalogo-item h3 { font-size: 14.5px; }
.delegacao-linha { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie-2); }
.delegacao-linha.ligada { border-color: color-mix(in srgb, var(--acento) 40%, var(--borda)); }
.delegacao-linha .opcoes { display: none; gap: 10px; flex-wrap: wrap; }
.delegacao-linha.ligada .opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.checagens { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.checagens label { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; }
@media (max-width: 960px) { .matriz td.celula { min-width: 130px; } }

/* slogan da entrada: aparece com a logo e some sozinho */
.slogan { margin: 10px 0 0; height: 20px; line-height: 20px; color: var(--texto-suave); font-size: 13px; letter-spacing: 0.05em; animation: aparecer 0.9s ease; transition: opacity 1.2s ease; }
.slogan.some { opacity: 0; animation: none; }  /* so a opacidade muda: a altura fica reservada e nada se mexe */
.versao-rodape { text-align: center; font-size: 11px; }

/* saida suave da entrada: so o foguinho pequeno carregando */
.entrando-carga { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; opacity: 0; pointer-events: none; }
.entrar-caixa { position: relative; }
.abertura-risk.escondida { opacity: 0; }
.abertura-palco { animation: aparecer-abertura 0.4s ease both; }  /* o fundo cobre o painel de imediato; so o conteudo surge devagar */
@keyframes aparecer-abertura { from { opacity: 0; } to { opacity: 1; } }

/* horario de acesso */
.faixa-horario { display: flex; align-items: center; gap: 10px; padding: 9px 18px; background: color-mix(in srgb, var(--aviso) 16%, var(--superficie)); border-bottom: 1px solid color-mix(in srgb, var(--aviso) 45%, var(--borda)); color: var(--texto); font-size: 12.5px; }
.faixa-horario[hidden] { display: none; }
.faixa-horario svg { flex: none; color: var(--aviso); }
.editor-semanal .grade-semana { display: grid; gap: 8px; }
.dia-semana { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie-2); }
.dia-nome { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; padding-top: 6px; }
.janelas-do-dia { display: grid; gap: 6px; }
.janela-linha { display: flex; align-items: center; gap: 8px; }
.janela-linha input { width: 110px; }
@media (max-width: 700px) { .dia-semana { grid-template-columns: 1fr; } }