/* Base visual dos sistemas da Impulsamos. Extraída de SRV Impulsamos/frontend/painel/estilo.css em 2026-10-05.
Estrutura do kit UI8, marca Impulsamos. Leia o README.md desta pasta antes de usar. */
:root {
/* Marca Impulsamos (kit-listaespera.html) */
--ink: #181818;
--ink-82: rgba(24,24,24,.82);
--ink-soft: rgba(24,24,24,.66);
--ink-mute: rgba(24,24,24,.46);
--blue: #A4BDF8;
--blue-soft: #B9CEFF;
--blue-deep: #93ABE8;
--blue-ink: #3E5FC4;
--blue-wash: #E6EDFE;
--canvas: #F7F8FB;
--surface: #FFFFFF;
--line: rgba(24,24,24,.07);
--line-strong: rgba(24,24,24,.14);
--hover: rgba(24,24,24,.04);
--warning: #805B00;
/* Estados: tons claros que conversam com o azul da marca. Texto sempre tinta. */
--st-aberto: #DCE6FD;
--st-ok: #D6EFE0;
--st-espera: #FBEFD9;
--st-alerta: #F7D9E3;
--positive: #2F7A52;
--negative: #A8435F;
--font-display: "DM Sans", Arial, sans-serif;
--font-body: "Inter", Arial, sans-serif;
--r: 12px; /* um só arredondamento em toda a interface */
--shadow-card: 0 1px 2px rgba(24,24,24,.04), 0 10px 28px -18px rgba(62,95,196,.28);
--shadow-pop: 0 24px 60px -24px rgba(62,95,196,.35), 0 2px 6px rgba(24,24,24,.06);
--shadow-focus: 0 0 0 4px rgba(164,189,248,.65);
--ease: cubic-bezier(.4,0,.2,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-smooth: cubic-bezier(.65,0,.35,1);
--motif-star: url('data:image/svg+xml;utf8,');
--icon-arrow: url("data:image/svg+xml,");
--icon-download: url("data:image/svg+xml,");
--icon-upload: url("data:image/svg+xml,");
}
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-width: thin; scrollbar-color: var(--blue) transparent; }
/* Só a página mostra barra; tudo que rola dentro dela (listas, tabelas largas, caixas de texto, menus, janelas) rola sem barra, vertical e horizontal. */
body * { scrollbar-width: none; }
body *::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 13px/1.5 var(--font-body); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--blue); }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 450; letter-spacing: -.04em; line-height: 1.05; }
.num { font-family: var(--font-display); font-weight: 450; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
svg.i { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* ------------------------------------------------------------------ marca */
.logo { display: block; fill: currentColor; flex: none; }
.marca { display: flex; align-items: center; gap: 10px; }
.marca .logo { width: 92px; height: 20.7px; }
.marca .divisor { width: 1px; height: 18px; background: var(--line-strong); }
.marca .nome { font: 600 12px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-ink); }
/* ------------------------------------------------------------------ casca */
.casca { max-width: 1440px; margin: 0 auto; display: flex; gap: 20px; padding: 0 20px; }
.lateral { width: 240px; flex: none; position: sticky; top: 0; height: 100vh; padding: 20px 0; }
.lateral-painel { height: 100%; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-card); padding: 20px 12px 12px; }
.lateral .marca { padding: 0 10px 20px; }
.nav { flex: 1; overflow-y: auto; scrollbar-width: none; }
.nav-rotulo { padding: 18px 12px 6px; font: 600 10.5px/1.5 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.nav a { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r); font-size: 13.5px; font-weight: 500; color: var(--ink-soft); transition: background-color .15s var(--ease), color .15s var(--ease); }
.nav a:hover { background: var(--hover); color: var(--ink); }
.nav a.ativo { background: var(--ink); color: #fff; box-shadow: 0 8px 20px -10px rgba(24,24,24,.6); }
.nav .contagem { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r); display: grid; place-items: center; background: var(--blue-soft); color: var(--ink); font-size: 10.5px; font-weight: 600; }
.nav a.ativo .contagem { background: var(--blue); }
.conta { margin-top: 12px; padding: 12px 4px 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); font: 600 12px var(--font-display); box-shadow: 0 0 0 2px #fff; flex: none; }
.conta strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.25; }
/* Atalhos abaixo de um item da lateral (no SRV: os links em aberto), com bolinha de situação */
.nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 4px 0 0; }
.nav .nav-sub a { gap: 9px; padding: 6px 10px; font-size: 12.5px; }
.nav .nav-sub a.ativo { background: var(--hover); color: var(--ink); box-shadow: none; font-weight: 600; }
.nav-sub .nome-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ponto-s { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(24,24,24,.12); }
/* Nome da situação ao passar o mouse na bolinha (data-situacao) */
.ponto-s::before { content: ""; position: absolute; inset: -6px; }
.ponto-s::after { content: attr(data-situacao); position: absolute; z-index: 50; left: calc(100% + 8px); top: 50%; transform: translate(-4px, -50%); padding: 5px 9px; border-radius: 8px; background: var(--ink); color: #fff; font: 500 11px/1.2 var(--font-body); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s var(--ease), transform .15s var(--ease); }
.ponto-s:hover::after { opacity: 1; transform: translate(0, -50%); }
.ponto-s.aberto { background: var(--st-aberto); } .ponto-s.ok { background: var(--st-ok); }
.ponto-s.espera { background: var(--st-espera); } .ponto-s.alerta { background: var(--st-alerta); }
/* Perfil: o bloco inteiro (foto, nome, e-mail) abre o menu da conta */
.conta { position: relative; display: block; }
.conta-botao { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border: 0; border-radius: var(--r); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color .15s var(--ease); }
.conta-botao:hover, .conta-botao[aria-expanded="true"] { background: var(--hover); }
.conta-nome { min-width: 0; flex: 1; }
.conta-nome span { display: block; font-size: 11px; color: var(--ink-mute); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-botao > .i { color: var(--ink-mute); width: 15px; height: 15px; }
.conta .menu-conta { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; width: auto; padding: 6px; }
.menu-conta a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.menu-conta a:hover, .menu-conta a:focus-visible { background: var(--hover); color: var(--ink); }
.menu-conta a.separa { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); }
/* Menu de escolha no visual do sistema (select[data-combo], ver comum.js) */
.combo { position: relative; }
.combo-botao { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 190px; height: 34px; padding: 0 10px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); font: 500 12.5px var(--font-body); color: var(--ink); cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.combo-botao:hover { border-color: var(--ink-mute); }
.combo-botao.aberto { border-color: var(--blue-ink); box-shadow: var(--shadow-focus); }
.combo-botao .i { width: 14px; height: 14px; color: var(--ink-mute); transition: transform .15s var(--ease); }
.combo-botao.aberto .i { transform: rotate(180deg); }
.combo .combo-lista { top: calc(100% + 6px); left: 0; right: auto; width: auto; min-width: 100%; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.combo-lista[hidden] { display: none; }
.combo-item { padding: 8px 10px; border: 0; border-radius: var(--r); background: none; font: 400 12.5px var(--font-body); color: var(--ink-soft); text-align: left; white-space: nowrap; cursor: pointer; }
.combo-item:hover { background: var(--hover); color: var(--ink); }
.combo-item.escolhido { background: var(--blue-wash); color: var(--ink); font-weight: 500; }
.principal { flex: 1; min-width: 0; padding: 20px 0 40px; }
.topo { position: sticky; top: 0; z-index: 30; isolation: isolate; margin: -20px -20px 16px; padding: 36px 20px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Fundo em degradê que some para baixo, como o menu da landing de Novas Empresas; só aparece depois de rolar (comum.js põe .rolou). */
.topo::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -1.5rem; background: linear-gradient(180deg, rgba(247,248,251,.9), rgba(247,248,251,0)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.topo.rolou::before { opacity: 1; }
.topo .titulo { flex: 1; min-width: 240px; }
.topo h1 { font-size: 38px; }
.topo .meta { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-mute); }
.topo .meta .sep { width: 1px; height: 12px; background: var(--line-strong); }
.busca { position: relative; }
.busca input { height: 38px; width: 220px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 0 14px 0 38px; font: 13px var(--font-body); color: var(--ink); }
.busca input:focus { outline: none; border-color: var(--line-strong); box-shadow: var(--shadow-focus); }
.busca svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-mute); }
.redondo { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); cursor: pointer; position: relative; }
.redondo .ponto { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-ink); box-shadow: 0 0 0 2px #fff; }
/* ---------------------------------------------------------------- botões */
/* Botão da marca: estrela azul que abre do centro e seta que avança (LP) */
.botao { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; --pad: 18px; padding: 0 calc(var(--pad) + 1em + 6px) 0 var(--pad); border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--ink); color: #fff; font: 600 12.5px/1 var(--font-body); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: border-color .6s, transform .18s var(--ease-out); }
.botao::before { position: absolute; z-index: 0; inset: 0; background: var(--blue); content: ""; -webkit-mask: var(--motif-star) center / 0% 0% no-repeat; mask: var(--motif-star) center / 0% 0% no-repeat; transition: -webkit-mask-size .7s var(--ease-smooth), mask-size .7s var(--ease-smooth); }
.botao::after { position: absolute; z-index: 1; right: var(--pad); width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat; content: ""; transition: right .8s var(--ease-out), background-color .8s; }
.botao span { position: relative; z-index: 1; transition: color .8s var(--ease-out); }
.botao:hover::before, .botao:focus-visible::before { -webkit-mask-size: 1600% 1600%; mask-size: 1600% 1600%; }
.botao:hover span, .botao:focus-visible span { color: var(--ink); }
.botao:hover::after, .botao:focus-visible::after { background: var(--ink); right: calc(var(--pad) - 4px); }
.botao:active { transform: scale(.97); }
/* Botão da marca com ícone de baixar/subir no lugar da seta; no hover o ícone desce/sobe em vez de avançar. */
.botao.baixa::after { -webkit-mask-image: var(--icon-download); mask-image: var(--icon-download); }
.botao.sobe::after { -webkit-mask-image: var(--icon-upload); mask-image: var(--icon-upload); }
.botao.baixa:hover::after, .botao.baixa:focus-visible::after, .botao.sobe:hover::after, .botao.sobe:focus-visible::after { right: var(--pad); }
.botao.baixa:hover::after { transform: translateY(2px); }
.botao.sobe:hover::after { transform: translateY(-2px); }
.dica[hidden] { display: none; }
.botao.cheio { width: 100%; height: 46px; }
.fantasma { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); font: 500 12.5px/1 var(--font-body); color: var(--ink); cursor: pointer; transition: background-color .15s var(--ease); white-space: nowrap; }
.fantasma:hover { background: var(--hover); }
.fantasma:disabled { opacity: .45; cursor: not-allowed; background: var(--surface); }
.fantasma svg.i { width: 15px; height: 15px; }
.icone { width: 32px; height: 32px; border: 0; border-radius: var(--r); background: none; display: grid; place-items: center; color: var(--ink-mute); cursor: pointer; }
.icone:hover { background: var(--hover); color: var(--ink); }
/* ---------------------------------------------------------------- cartões */
.cartao { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-card); padding: 20px; }
.cartao-titulo { font: 450 21px/1.1 var(--font-display); letter-spacing: -.035em; }
.cartao-cabeca { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cartao-cabeca .sub { width: 100%; margin-top: -4px; font-size: 12px; color: var(--ink-mute); }
.cartao-cabeca .acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.indicadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.indicador { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.disco { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.disco svg.i { width: 18px; height: 18px; }
.indicador .rotulo { font-size: 11.5px; color: var(--ink-mute); }
.indicador .valor { font-size: 26px; line-height: 1; margin-top: 4px; }
.indicador .valor small { font: 500 11.5px var(--font-body); color: var(--positive); letter-spacing: 0; margin-left: 6px; }
/* Faixa "Precisa de atenção": o banner de sugestões do kit, com o degradê azul da LP e a estrela */
.atencao { position: relative; overflow: hidden; border-radius: var(--r); padding: 16px; margin-bottom: 16px; background: linear-gradient(120deg, #EEF3FF 0%, #DCE6FD 45%, #F3F6FE 100%); border: 1px solid rgba(255,255,255,.7); }
.atencao::before, .atencao::after { content: ""; position: absolute; border-radius: 50%; filter: blur(40px); opacity: .9; pointer-events: none; }
.atencao::before { width: 380px; height: 380px; left: -80px; top: -200px; background: #B9CEFF; }
.atencao::after { width: 320px; height: 320px; right: -60px; bottom: -220px; background: #A4BDF8; }
.atencao-vidro { position: relative; z-index: 1; border-radius: var(--r); background: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(255,255,255,.75); padding: 14px; }
.atencao-topo { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; font-size: 13px; font-weight: 500; }
.estrela { width: 16px; height: 16px; flex: none; background: var(--blue-ink); -webkit-mask: var(--motif-star) center / contain no-repeat; mask: var(--motif-star) center / contain no-repeat; }
.atencao-topo button { margin-left: 6px; padding: 0 0 0 12px; border: 0; border-left: 1px solid var(--line-strong); background: none; color: var(--blue-ink); font-weight: 500; cursor: pointer; }
.atencao-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.aviso { background: rgba(255,255,255,.88); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.aviso strong { font: 600 14px/1.3 var(--font-body); }
.aviso p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
/* Cada aviso é um link inteiro; as ações ficam na página de destino */
a.aviso { transition: background-color .15s var(--ease), box-shadow .15s var(--ease); }
a.aviso:hover, a.aviso:focus-visible { background: #fff; box-shadow: 0 0 0 1.5px var(--blue-ink), var(--shadow-card); }
.aviso .abrir { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--blue-ink); }
.aviso .abrir::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat; transition: transform .3s var(--ease-out); }
a.aviso:hover .abrir::after { transform: translateX(4px); }
/* Sino: painel suspenso de notificações (.popover + .notif) */
.sino { position: relative; }
.popover { position: absolute; z-index: 40; right: 0; top: calc(100% + 8px); width: 360px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); padding: 6px; }
.popover-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.popover-topo strong { font: 450 16px/1.1 var(--font-display); letter-spacing: -.03em; }
.popover-topo button { border: 0; background: none; padding: 0; color: var(--blue-ink); font-size: 12px; font-weight: 500; cursor: pointer; }
.notif { display: flex; gap: 10px; padding: 10px; border-radius: var(--r); transition: background-color .15s var(--ease); }
.notif::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--blue-ink); }
.notif.lida::before { background: transparent; }
.notif:hover, .notif:focus-visible { background: var(--hover); }
.notif strong { display: block; font-size: 13px; font-weight: 600; }
.notif p { margin: 2px 0 4px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.notif time, .notif-vazio { font-size: 11.5px; color: var(--ink-mute); }
.notif-vazio { margin: 0; padding: 14px 10px; }
/* ---------------------------------------------------------------- tabela */
.filtros { display: flex; align-items: center; gap: 8px; margin: 12px -4px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.filtros .busca { margin-left: auto; }
.chip { padding: 6px 14px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); font-size: 12.5px; font-weight: 500; color: var(--ink-soft); cursor: pointer; white-space: nowrap; transition: background-color .15s var(--ease); }
.chip:hover { background: var(--hover); color: var(--ink); }
.chip.ativo { background: var(--ink); color: #fff; border-color: transparent; }
.chip .n { margin-left: 6px; opacity: .55; }
table { width: 100%; border-collapse: collapse; text-align: left; }
thead tr { border-bottom: 1px solid var(--line); }
th { padding: 8px 12px 8px 0; font: 600 10.5px/1.5 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
tbody tr { border-bottom: 1px solid var(--line); cursor: pointer; transition: background-color .15s var(--ease); }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover { background: rgba(164,189,248,.12); }
td { padding: 14px 12px 14px 0; font-size: 12.5px; color: var(--ink-soft); vertical-align: middle; }
td:first-child, th:first-child { padding-left: 16px; }
td:last-child, th:last-child { padding-right: 16px; text-align: right; }
td .primario { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; }
td .secundario { margin-top: 2px; font-size: 11.5px; color: var(--ink-mute); }
/* Ações da linha (igual à lista de links do SRV): na última coluna, `.icone` com
`i-mais` (três pontos na horizontal) abre um `.popover.menu-linha` fixo, alinhado
à direita do botão. Recuo da lista: célula sem respiro à esquerda, 12px à direita,
e a última coluna encosta na borda direita do cartão. */
td:last-child .icone { display: inline-grid; vertical-align: middle; margin-left: 6px; }
.menu-linha { position: fixed; top: 0; left: 0; right: auto; width: 200px; max-height: calc(100vh - 16px); }
.menu-linha [role^=menuitem] { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r); background: none; font: 500 13px var(--font-body); color: var(--ink-soft); text-align: left; cursor: pointer; }
.menu-linha [role^=menuitem]:hover, .menu-linha [role^=menuitem]:focus-visible { background: var(--hover); color: var(--ink); box-shadow: none; }
.menu-linha [aria-checked=true] { background: var(--blue-wash); color: var(--ink); }
.codigo { font: 500 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-mute); }
.barra-prog { display: flex; align-items: center; gap: 10px; }
.barra-prog .trilho { width: 90px; height: 6px; border-radius: var(--r); background: var(--blue-wash); overflow: hidden; }
.barra-prog .trilho i { display: block; height: 100%; border-radius: var(--r); background: var(--blue-ink); }
.pilula { display: inline-block; padding: 4px 10px; border-radius: var(--r); font-size: 11px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.pilula.aberto { background: var(--st-aberto); }
.pilula.ok { background: var(--st-ok); }
.pilula.espera { background: var(--st-espera); }
.pilula.alerta { background: var(--st-alerta); }
.pilula.arquivado { background: rgba(24,24,24,.06); color: var(--ink-soft); }
.dica { margin-top: 10px; display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--ink-mute); }
.zona { margin-top: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 26px 16px; border: 1.5px dashed rgba(62,95,196,.35); border-radius: var(--r); background: rgba(185,206,255,.14); cursor: pointer; transition: background-color .15s var(--ease); }
.zona:hover { background: rgba(185,206,255,.26); }
.zona .disco { background: #fff; box-shadow: var(--shadow-card); color: var(--blue-ink); }
.zona strong { margin-top: 10px; font-size: 13px; font-weight: 500; }
.zona span { font-size: 11.5px; color: var(--ink-mute); }
.rodape-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.rodape-numeros span { font-size: 11.5px; color: var(--ink-mute); }
.rodape-numeros .num { display: block; font-size: 22px; margin-top: 4px; color: var(--ink); }
.abas { display: flex; gap: 6px; margin-bottom: 16px; }
/* ----------------------------------------------------------------- entrar */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; }
.entrar-grade { width: min(1180px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.vitrine { position: relative; overflow: hidden; min-height: 580px; border-radius: var(--r); background: var(--ink); color: #fff; padding: 36px; display: flex; flex-direction: column; justify-content: space-between; }
.vitrine .mancha { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.vitrine > *:not(.mancha) { position: relative; }
.vitrine .marca .logo { fill: #fff; width: 120px; height: 27px; }
.vitrine .marca .divisor { height: 24px; }
.vitrine .marca .nome { font-size: 15px; }
.vitrine .marca .divisor { background: rgba(255,255,255,.3); }
.vitrine .marca .nome { color: var(--blue-soft); }
.vitrine h2 { font-size: 40px; line-height: 1.08; max-width: 15ch; }
.vitrine ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.vitrine li { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(255,255,255,.8); }
.vitrine li .disco { width: 30px; height: 30px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.vitrine li svg.i { width: 15px; height: 15px; }
.vitrine .numeros { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px; border-radius: var(--r); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter: blur(8px); }
.vitrine .numeros span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.vitrine .numeros .num { display: block; font-size: 28px; margin-top: 4px; color: #fff; }
.vitrine .estrela-grande { opacity: .55; position: absolute; right: -110px; top: 50%; width: 260px; height: 260px; transform: translateY(-50%); background: linear-gradient(135deg, rgba(185,206,255,.5), rgba(164,189,248,.08)); -webkit-mask: var(--motif-star) center / contain no-repeat; mask: var(--motif-star) center / contain no-repeat; }
.cartao-entrar { padding: 32px; }
.cartao-entrar h1 { font-size: 34px; margin-bottom: 24px; }
.cartao-entrar p { margin: 10px 0 24px; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 48px; border-radius: var(--r); border: 1px solid var(--line-strong); background: #fff; font: 600 13.5px var(--font-body); color: var(--ink); cursor: pointer; transition: box-shadow .2s var(--ease), border-color .2s; }
.google:hover { border-color: var(--blue); box-shadow: var(--shadow-focus); }
.google svg { width: 18px; height: 18px; }
.nota { margin-top: 18px; display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--blue-wash); font-size: 12px; color: var(--ink-82); line-height: 1.5; }
.nota svg.i { color: var(--blue-ink); margin-top: 1px; }
.rodape-entrar { margin-top: 16px; text-align: center; font-size: 11.5px; color: var(--ink-mute); }
/* ---------------------------------------------------------------- telas menores */
@media (max-width: 1280px) { .indicadores { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) {
.lateral { display: none; }
.entrar-grade { grid-template-columns: 1fr; max-width: 480px; }
.vitrine { display: none; }
.col-esconde { display: none; }
}
@media (max-width: 640px) {
.casca { padding: 0 12px; }
.topo { margin: -20px -12px 12px; padding: 28px 12px 12px; }
.topo h1 { font-size: 30px; }
.busca, .busca input { width: 100%; }
.indicadores { grid-template-columns: 1fr; }
.filtros { flex-wrap: wrap; }
.cartao { padding: 16px; }
}
/* Campos: rótulo em cima, campo de 40px, foco azul */
.campo { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 12px; color: var(--ink-mute); }
.campo input, .campo textarea, textarea.campo-texto { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); padding: 8px 12px; font: 13px/1.5 var(--font-body); color: var(--ink); resize: vertical; }
.campo input { height: 40px; }
.campo input:focus, .campo textarea:focus, textarea.campo-texto:focus { outline: none; border-color: var(--blue-ink); box-shadow: var(--shadow-focus); }
.campo input[readonly] { background: var(--canvas); color: var(--ink-mute); }
.campo .erro { font-size: 11.5px; color: var(--negative); }
.chip svg.i { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.filtros .direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.filtros .total, .acoes .total { font-size: 12px; color: var(--ink-mute); white-space: nowrap; }
.barra-filtros { flex-wrap: wrap; overflow: visible; margin: 14px 0; padding: 8px; gap: 8px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); }
.barra-filtros .quebra { flex-basis: 100%; height: 1px; margin: 2px 0; background: var(--line); }
.barra-filtros .busca { margin-left: auto; }
.barra-filtros.uma-linha { flex-wrap: nowrap; align-items: center; }
.barra-filtros.uma-linha .combo-botao { min-width: 0; }
.barra-filtros.uma-linha .busca { margin-left: 0; flex: 1; min-width: 120px; }
.barra-filtros.uma-linha .busca input { width: 100%; }
.barra-filtros .total { margin-left: auto; padding: 0 6px; font-size: 12px; color: var(--ink-mute); white-space: nowrap; }
/* Explicação ao passar o mouse: em volta do botão
(o ::before e o ::after do .botao já são a estrela e a seta). */
.com-dica { position: relative; display: inline-flex; }
.com-dica::after { content: attr(data-dica); position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; width: 260px; padding: 10px 12px; border-radius: var(--r); background: var(--ink); color: #fff; font: 400 12px/1.45 var(--font-body); text-align: left; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s var(--ease), transform .15s var(--ease); }
.com-dica:hover::after, .com-dica:focus-within::after { opacity: 1; transform: translateY(0); }
/* Caixa de marcar no visual do sistema (tinta, cantos de 6px, check da Lucide).
O traço 3 no viewBox de 24 sai com 1,5px na caixa de 12px. */
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: none; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--surface) center / 12px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s; }
input[type=checkbox]:hover { border-color: var(--ink-mute); }
input[type=checkbox]:checked { background-color: var(--ink); border-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
input[type=checkbox]:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* Alternar Grade | Lista: dois botões num trilho só */
.alternar { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); }
.alternar button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 9px; background: none; font: 500 12.5px var(--font-body); color: var(--ink-soft); cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.alternar button:hover { color: var(--ink); background: var(--hover); }
.alternar button.ativo { background: var(--ink); color: #fff; }
.alternar .i { width: 14px; height: 14px; }
/* Lateral recolhida (botão à direita da marca, comum.js): só ícones, 72px */
.lateral .marca .recolher { margin-left: auto; width: 30px; height: 30px; }
.lateral { transition: width .2s var(--ease); }
.lateral-recolhida .lateral { width: 72px; }
.lateral-recolhida .lateral-painel { padding-left: 8px; padding-right: 8px; }
.lateral-recolhida .lateral .marca { justify-content: center; padding: 0 0 20px; }
.lateral-recolhida .lateral .marca > :not(.recolher) { display: none; }
.lateral-recolhida .lateral .marca .recolher { margin: 0; }
.lateral-recolhida .nav a { justify-content: center; gap: 0; padding: 9px 0; font-size: 0; }
.lateral-recolhida .nav .contagem, .lateral-recolhida .nav-sub .nome-link { display: none; }
.lateral-recolhida .nav-sub { align-items: stretch; }
.lateral-recolhida .nav .nav-sub a { padding: 10px 0; }
.lateral-recolhida .conta-botao { justify-content: center; padding: 6px 0; }
.lateral-recolhida .conta-nome, .lateral-recolhida .conta-botao > .i { display: none; }
.lateral-recolhida .conta .menu-conta { right: auto; width: 200px; }
/* Foto de perfil grande (configurações) */
.avatar.grande { width: 56px; height: 56px; font-size: 18px; }
.avatar.com-foto { background-size: cover; background-position: center; }
/* Autor: foto (ou iniciais) + nome de exibição; o e-mail vai no title.
IPNome
Remetente automático (formulário, sistema):