/* ==========================================================================
   CAC Redenção-PA - Área Admin - folha de estilo única
   Antes cada tela (Login/Usuarios/ConfiguracaoEmail) trazia seu próprio bloco
   <style> quase idêntico, copiado e colado. Isso foi centralizado aqui para
   que as três telas fiquem visualmente consistentes e para que um ajuste de
   cor/espaçamento não precise ser repetido em três lugares.
   ========================================================================== */

:root {
    --azul-escuro: #0f2f4f;
    --azul-medio: #1f6fa8;
    --azul-profundo: #14507f;
    --texto-principal: #1c2b39;
    --texto-titulo: #14324b;
    --texto-secundario: #6b7c8d;
    --texto-suave: #93a2b0;
    --borda: #dbe4ec;
    --fundo-pagina: #eef2f6;
    --fundo-input: #f8fafc;
    --verde-ativo-bg: #e4f7ea;
    --verde-ativo-texto: #1c7a3e;
    --cinza-inativo-bg: #f1f2f4;
    --cinza-inativo-texto: #6b7885;
    --azul-perfil-bg: #eaf1fb;
    --azul-perfil-texto: #1f5f97;
    --alerta-bg: #fdecea;
    --alerta-texto: #c0392b;

    /* Cor do painel "SISPATRI" no comparativo do Dashboard - roxo, para não se confundir com o
       azul já usado em todo o resto do admin (inclusive no painel "CAC" ao lado dele). */
    --roxo-medio: #6c3fc4;
    --roxo-profundo: #4c2a94;
    --roxo-perfil-bg: #f1eafc;
    --roxo-perfil-texto: #6c3fc4;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--fundo-pagina);
    color: var(--texto-principal);
}

/* ---------- Topbar (Usuarios / ConfiguracaoEmail) ---------- */
.topbar {
    background: linear-gradient(135deg, var(--azul-escuro) 0%, var(--azul-medio) 100%);
    color: #fff;
    padding: 22px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.topbar .brand { display: flex; align-items: center; gap: 12px; }
.topbar .brand-badge {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px;
}
.topbar h1 { font-size: 18px; margin: 0; }
.topbar .subtitle { font-size: 12.5px; color: #cfe3f2; margin-top: 2px; }
.topbar a.sair {
    color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 600;
    padding: 9px 16px; border-radius: 8px; background: rgba(255,255,255,0.12);
    transition: background .15s ease;
}
.topbar a.sair:hover { background: rgba(255,255,255,0.22); }
.topbar .quem { display: flex; align-items: center; gap: 14px; }
.topbar .quem span { font-size: 13px; color: #dfeefb; }
.topbar nav { display: flex; gap: 22px; }
.topbar nav a {
    color: #dfeefb; text-decoration: none; font-size: 13px; font-weight: 600; opacity: 0.8;
}
.topbar nav a:hover { opacity: 1; text-decoration: underline; }
.topbar nav a.ativo { color: #fff; opacity: 1; }

/* ---------- Layout ---------- */
.container { max-width: 1040px; margin: 0 auto; padding: 28px 24px 60px; }

.panel {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(20, 40, 60, 0.06);
    padding: 24px 26px;
    margin-bottom: 26px;
}
.panel h2 {
    font-size: 15px; margin: 0; color: var(--texto-titulo);
    display: flex; align-items: center; gap: 8px;
}
.panel .descricao { font-size: 12.5px; color: var(--texto-secundario); margin: 6px 0 18px; }

.panel-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 20px;
}
.panel-header-titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel-header-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.contagem-pill {
    background: var(--azul-perfil-bg); color: var(--azul-perfil-texto);
    font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px;
}

/* ---------- Busca ---------- */
.busca-usuario { position: relative; }
.busca-usuario svg {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--texto-suave);
}
.busca-usuario input {
    padding: 9px 14px 9px 34px; border: 1.5px solid var(--borda); border-radius: 9px;
    font-size: 13.5px; background: var(--fundo-input); width: 230px; color: var(--texto-principal);
    transition: border-color .15s ease, background .15s ease;
}
.busca-usuario input:focus { outline: none; border-color: var(--azul-medio); background: #fff; }

/* Envelope de rolagem horizontal para grades largas (ex.: Admin\ConsultaDeclaracoesDec.aspx,
   com 9 colunas de dados + 1 de ação) - evita a tabela espremer/quebrar layout em telas
   estreitas; em telas largas não muda nada visualmente (não há overflow para rolar). */
.grid-scroll { overflow-x: auto; }

/* ---------- Grade de usuários ---------- */
table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.grid th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: #8b98a5; font-weight: 700; padding: 0 12px 12px; border-bottom: 2px solid #eef2f6;
}
table.grid td { padding: 14px 12px; border-bottom: 1px solid #eef2f6; vertical-align: middle; }
table.grid tr:last-child td { border-bottom: none; }
table.grid tr:hover td { background: #f8fbfd; }

.usuario-cel { display: flex; align-items: center; gap: 12px; }
.avatar-wrap { position: relative; width: 36px; height: 36px; flex-shrink: 0; }
.avatar-wrap .avatar { position: absolute; inset: 0; }
.avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700; color: #fff; letter-spacing: .02em;
}
.avatar.cor-1 { background: #1f6fa8; }
.avatar.cor-2 { background: #7c5cbf; }
.avatar.cor-3 { background: #c0783b; }
.avatar.cor-4 { background: #3ba37a; }
.avatar.cor-5 { background: #c0517a; }
.avatar.cor-6 { background: #5c8bbf; }
/* Foto do usuário: só aparece por cima do avatar de iniciais depois de carregar com sucesso
   (classe "carregada", ligada via onload no <img> - ver Usuarios.aspx). Se não houver foto,
   o handler Admin/FotoUsuario.ashx devolve 404, o <img> nunca chega a mostrar (onerror), e o
   avatar de iniciais por baixo continua visível normalmente. */
.avatar-foto {
    position: absolute; inset: 0; z-index: 1;
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    display: none; border: 1px solid rgba(15, 47, 79, 0.08);
}
.avatar-foto.carregada { display: block; }
.usuario-nome { font-weight: 600; color: #16324a; font-size: 13.5px; line-height: 1.3; }
.usuario-login { font-size: 11.5px; color: var(--texto-suave); margin-top: 1px; }

.entidade-cel { font-size: 13px; color: #4c6478; }

/* Célula "Entidade" da grade de Admin\ConsultaEntidade.aspx: a linha inteira do usuario-cel vira
   um link para a lista de agentes daquela entidade (Admin\Consulta.aspx?entidade=), então o texto
   não pode parecer um link comum - só um leve deslocamento/realce no hover avisa que dá para clicar,
   sem poluir a tabela com sublinhado ou azul de link em toda linha. */
.entidade-link { text-decoration: none; color: inherit; border-radius: 8px; padding: 4px 6px; margin: -4px -6px; transition: background .15s ease, transform .15s ease; }
.entidade-link:hover { background: #f2f6fa; transform: translateX(2px); }
.entidade-link:hover .usuario-nome { color: var(--azul-medio); }

/* Aviso "não localizado no SISPATRI" na célula "Agente" de Admin\ConsultaDeclaracoesDec.aspx -
   substitui a linha .usuario-login (CPF) quando o CPF da declaração .DEC não corresponde a
   nenhum agente do cadastro do SISPATRI (ver Repositorio.ConsultarDeclaracoesDec). */
.aviso-sispatri-linha { display: flex; align-items: center; gap: 4px; color: var(--alerta-texto); font-size: 11px; margin-top: 2px; }
.aviso-sispatri-linha svg { flex-shrink: 0; }

.badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.badge-perfil { background: var(--azul-perfil-bg); color: var(--azul-perfil-texto); }
.badge-ativo { background: var(--verde-ativo-bg); color: var(--verde-ativo-texto); }
.badge-inativo { background: var(--cinza-inativo-bg); color: var(--cinza-inativo-texto); }
.badge-alerta { background: var(--alerta-bg); color: var(--alerta-texto); }
.badge-roxo { background: var(--roxo-perfil-bg); color: var(--roxo-perfil-texto); }

/* ---------- Comparativo entre Períodos (Admin\ComparativoDeclaracoes.aspx) ---------- */
/* Um bloco por categoria do Anexo III (Imóveis/Veículo/Participações/Aplicações/Outros) -
   mesmo cartão branco arredondado do resto do admin, com o rótulo de status sugerido no
   cabeçalho (nunca decidido sozinho pelo sistema - ver comentário em Modelo\ComparadorDeclaracoes.cs).
   A tabela de bens reaproveita "table.grid" já usada em Consulta/Relatório. */
.comparativo-categoria { background: #fff; border: 1.5px solid var(--borda); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.comparativo-categoria-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.comparativo-categoria-cabecalho h3 { margin: 0; font-size: 15px; color: var(--texto-titulo); }
.comparativo-categoria-vazio { padding: 10px 0 2px; font-size: 12.5px; color: var(--texto-suave); }
.comparativo-valor-atual { font-weight: 600; }
.comparativo-valor-anterior { color: var(--texto-suave); font-size: 12px; }
.comparativo-variacao-positiva { color: var(--verde-ativo-texto); font-weight: 600; }
.comparativo-variacao-negativa { color: var(--alerta-texto); font-weight: 600; }
.resumo-card-alerta { border-color: #f3c6c0; }
.resumo-card-alerta .resumo-valor { color: var(--alerta-texto); }

.tentativas-ok { color: #c3ccd4; }
.tentativas-alerta {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    background: var(--alerta-bg); color: var(--alerta-texto); font-weight: 700; font-size: 12px;
}

.acoes-icones { display: flex; gap: 6px; }
.icone-acao {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f2f6fa; color: #4c6478; cursor: pointer; text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.icone-acao:hover { background: #e2edf6; color: var(--azul-medio); }
.icone-acao.perigo:hover { background: var(--alerta-bg); color: var(--alerta-texto); }
.icone-acao svg { pointer-events: none; }

/* Cadeado exibido no lugar dos ícones de ação, nas linhas de OUTROS usuários, para o perfil
   "Entidades" (que só pode gerenciar a própria conta - ver PodeGerenciar/RowDataBound em
   Admin\Usuarios.aspx.cs). Só aparece quando os ícones de ação são escondidos, então a linha
   não fica com uma célula vazia sem explicação. */
.acoes-bloqueadas {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--texto-suave); cursor: help;
}

.grid-vazio {
    text-align: center; padding: 48px 20px; color: var(--texto-suave); font-size: 13.5px;
}
.grid-vazio svg { color: #c7d2db; margin-bottom: 12px; }

/* ---------- Paginação da grade de usuários ---------- */
/* Puramente client-side (ver AtualizarPaginacaoUsuarios em Usuarios.aspx): a grade continua
   trazendo todas as linhas do servidor, só a exibição de 10 em 10 é feita no navegador - assim
   a busca (FiltrarUsuarios) e a paginação convivem sem precisar de postback a cada tecla digitada. */
.grid-rodape {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px;
    border-top: 1px solid #eef2f6;
}
.grid-rodape-info { font-size: 12.5px; color: var(--texto-secundario); }
.grid-paginacao { display: flex; align-items: center; gap: 4px; }
.pag-numeros { display: flex; align-items: center; gap: 4px; }
.pag-botao, .pag-numero {
    min-width: 30px; height: 30px; padding: 0 6px; border: none; border-radius: 7px;
    background: #f2f6fa; color: #4c6478; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.pag-botao:hover:not(:disabled), .pag-numero:hover:not(.ativo) { background: #e2edf6; color: var(--azul-medio); }
.pag-botao:disabled { opacity: 0.4; cursor: not-allowed; }
.pag-numero.ativo { background: var(--azul-medio); color: #fff; cursor: default; }

/* ---------- Formulários ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }
.field { display: flex; flex-direction: column; }
.field.span-2 { grid-column: span 2; }
.field label {
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
    color: var(--texto-secundario); margin-bottom: 7px;
}
.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field input[type="email"],
.field select {
    padding: 10px 12px; border: 1.5px solid var(--borda); border-radius: 9px;
    font-size: 14px; color: #16324a; background: var(--fundo-input);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--azul-medio); background: #fff; }
.field input[readonly] { background: var(--cinza-inativo-bg); color: var(--texto-secundario); cursor: not-allowed; }
.field .hint { margin-top: 6px; font-size: 11.5px; color: var(--texto-suave); }
/* Aviso de validação client-side (ex.: CNPJ com dígito verificador errado, ver
   Admin\DadosPrefeitura.aspx) - mesmo tamanho/posição de ".hint", só na cor de alerta já usada
   em outros pontos do admin (--alerta-texto) para diferenciar de uma dica neutra. */
.field .hint-erro { margin-top: 6px; font-size: 11.5px; color: var(--alerta-texto); font-weight: 600; }
/* Campos exclusivos da criação de usuário (senha inicial, e-mail, entidade do SISPATRI) - no
   modo de edição ficam com display:none (ver camposCriacao em Usuarios.aspx/.cs). "contents" faz
   este wrapper não contar como uma célula a mais no .form-grid, então os .field de dentro dele
   continuam se encaixando nas duas colunas do grid normalmente. */
.campos-criacao { display: contents; }
.field-checkbox { display: flex; align-items: center; gap: 8px; padding-top: 26px; }
.field-checkbox label {
    font-size: 13.5px; font-weight: 600; color: #16324a; text-transform: none;
}

/* ---------- Filtros de consulta (Admin/Consulta.aspx) ---------- */
/* Mesma aparência de campo/label do .form-grid (reaproveita as regras ".field" acima), só que em
   linha (flex) em vez de grade de 2 colunas fixas - os filtros de uma consulta têm tamanhos bem
   diferentes entre si (nome pede mais espaço que CPF), então cada campo cresce só o que precisa
   em vez de dividir a tela ao meio. */
.filtros-consulta {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 18px; margin-bottom: 20px;
}
.filtros-consulta .field { min-width: 200px; flex: 1 1 200px; }
.filtros-consulta .field.campo-cpf { min-width: 170px; flex: 0 1 170px; }
.filtros-consulta-acoes { display: flex; gap: 10px; padding-bottom: 1px; }
.aviso-limite-consulta {
    display: block; margin: -8px 0 16px; font-size: 12px; color: #9a6b12;
    background: #fdf6e8; border: 1px solid #f1e0b0; border-radius: 8px; padding: 8px 12px;
}

/* Cabeçalho do resultado do Relatório (badge "Todas as entidades" / "N - Nome da entidade",
   mesmo estilo de badge de perfil já usado em outras telas) e os 3 cartões de resumo
   (Admin\Relatorio.aspx) - total/com vínculo ativo/sem vínculo ativo, reaproveitando as MESMAS
   cores de badge-ativo/badge-inativo para o número ficar visualmente ligado ao que ele conta,
   sem introduzir paleta nova. */
.resultado-relatorio-cabecalho { margin-bottom: 16px; }
.resumo-relatorio { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.resumo-card {
    flex: 1 1 170px; background: #fff; border: 1.5px solid var(--borda); border-radius: 12px;
    padding: 14px 18px; display: flex; flex-direction: column; gap: 4px;
    box-shadow: 0 2px 10px rgba(20, 40, 60, 0.05);
}
.resumo-valor { font-size: 27px; font-weight: 700; color: var(--texto-titulo); line-height: 1.15; }
.resumo-rotulo { font-size: 11.5px; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.resumo-card-ativo { border-color: #bfe6cc; }
.resumo-card-ativo .resumo-valor { color: var(--verde-ativo-texto); }
.resumo-card-inativo { border-color: #dfe2e6; }
.resumo-card-inativo .resumo-valor { color: var(--cinza-inativo-texto); }

/* ---------- Dashboard (Admin\Dashboard.aspx) ---------- */
/* Cabeçalho da seção "Comparativo por sistema" - mesmo espaçamento do panel-header usado no
   resto do admin, só que fora de um ".panel" (os dois painéis do comparativo, logo abaixo, é
   que são os cartões desta seção, não a seção inteira). Sem parágrafo de descrição embaixo
   (removido a pedido do usuário) - por isso a margem inferior é maior que a do panel-header
   comum, para dar um respiro até os cartões do comparativo. */
.comparativo-header { margin-top: 6px; margin-bottom: 18px; }

/* Os dois sistemas lado a lado, cada um no seu próprio ".panel" (mesmo cartão branco
   arredondado do resto do admin) - largura igual para os dois, porque nenhum é "mais
   importante" que o outro; quebra para empilhado bem antes do breakpoint geral de mobile
   (960px, não 720px) porque cada coluna já carrega bastante coisa (mini resumo + ranking +
   gráfico) para caber espremida ao lado da outra numa tela média. */
.dashboard-comparativo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

/* Uma faixa colorida à esquerda do cartão identifica de cara qual sistema é qual, mesmo com as
   duas colunas rolando para fora da tela ao mesmo tempo - azul para o CAC (a cor que já é usada
   em todo o resto do admin, por ser "a casa"), roxo para o SISPATRI (só para diferenciar, sem
   reaproveitar verde/vermelho já reservados para ativo/alerta). */
.sistema-painel { border-left: 4px solid transparent; }
.sistema-cac { border-left-color: var(--azul-medio); }
.sistema-sispatri { border-left-color: var(--roxo-medio); }

.sistema-cabecalho { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.sistema-icone {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.sistema-cac .sistema-icone { background: var(--azul-perfil-bg); color: var(--azul-perfil-texto); }
.sistema-sispatri .sistema-icone { background: var(--roxo-perfil-bg); color: var(--roxo-perfil-texto); }
.sistema-titulos h3 { margin: 0; font-size: 14.5px; color: var(--texto-titulo); }
.sistema-titulos p { margin: 3px 0 0; font-size: 11.5px; color: var(--texto-secundario); }
.sistema-subtitulo { margin: 22px 0 12px; font-size: 12px; font-weight: 700; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: .03em; }

/* Mini versão do ".resumo-card" da "Visão geral" acima - 4 números por coluna num grid 2x2,
   pequenos o bastante para caber ao lado do ranking e do gráfico sem competir com eles. */
.mini-resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mini-resumo-card {
    background: var(--fundo-input); border-radius: 10px; padding: 10px 8px;
    display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
.mini-resumo-valor { font-size: 18px; font-weight: 700; color: var(--texto-titulo); line-height: 1.1; }
.mini-resumo-rotulo { font-size: 9.5px; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .02em; }

.grid-vazio-compacto { padding: 22px 12px; }

/* Ranking "usuários que mais acessam" - uma barra horizontal por usuário, sempre relativa ao
   1º colocado (100%, ver Repositorio.ObterTopUsuariosAcesso) - mais fácil de comparar de
   relance do que só uma coluna de números. Os 3 primeiros lugares ganham a mesma cor de
   "medalha" (ouro/prata/bronze) só no círculo da posição, para o topo do ranking ficar visível
   sem precisar ler os números. */
.ranking-lista { display: flex; flex-direction: column; gap: 16px; }
.ranking-lista-compacta { gap: 12px; }
.ranking-item { display: flex; align-items: flex-start; gap: 12px; }
.ranking-posicao {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
    background: var(--azul-perfil-bg); color: var(--azul-perfil-texto);
    font-size: 12.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.ranking-item:nth-child(1) .ranking-posicao { background: #fbeec4; color: #96700a; }
.ranking-item:nth-child(2) .ranking-posicao { background: #e9ebee; color: #57626d; }
.ranking-item:nth-child(3) .ranking-posicao { background: #f3e0d1; color: #9c5a26; }
.ranking-info { flex: 1; min-width: 0; }
.ranking-cabecalho { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ranking-nome { font-size: 13.5px; font-weight: 600; color: var(--texto-principal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-valor { font-size: 12px; font-weight: 700; color: var(--azul-medio); white-space: nowrap; }
.ranking-barra-fundo { height: 8px; background: var(--fundo-input); border-radius: 5px; overflow: hidden; }
.ranking-barra { height: 100%; background: linear-gradient(90deg, var(--azul-medio), var(--azul-profundo)); border-radius: 5px; }
.ranking-barra-cac { background: linear-gradient(90deg, var(--azul-medio), var(--azul-profundo)); }
.ranking-barra-sispatri { background: linear-gradient(90deg, var(--roxo-medio), var(--roxo-profundo)); }
.ranking-ultimo { display: block; margin-top: 5px; font-size: 11px; color: var(--texto-suave); }

/* Mini gráfico "acessos por dia" - barras verticais, altura sempre relativa ao dia de pico do
   período (ver Repositorio.ObterAcessosPorDia), com o número exato acima de cada barra (não só
   a altura) para não depender de "olhômetro" para saber quanto foi cada dia. Versão "-compacto"
   um pouco mais baixa, para os dois painéis do comparativo não ficarem enormes lado a lado. */
.grafico-dias { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 18px; }
.grafico-dias-compacto { height: 120px; }
.grafico-barra-coluna { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.grafico-barra-numero { font-size: 10.5px; font-weight: 700; color: var(--texto-secundario); margin-bottom: 4px; }
.grafico-barra-valor { width: 100%; max-width: 22px; background: linear-gradient(180deg, var(--azul-medio), var(--azul-perfil-bg)); border-radius: 4px 4px 0 0; min-height: 3px; }
.grafico-barra-cac { background: linear-gradient(180deg, var(--azul-medio), var(--azul-perfil-bg)); }
.grafico-barra-sispatri { background: linear-gradient(180deg, var(--roxo-medio), var(--roxo-perfil-bg)); }
.grafico-dia-rotulo { margin-top: 7px; font-size: 9.5px; color: var(--texto-suave); white-space: nowrap; }

/* Botões de exportação (CSV/XLS/PDF) - mesmas 3 cores já usadas em outros pontos do admin
   (verde de badge-ativo, dourado da aba "integração" em Configuração, vermelho de alerta), só
   que sólidas com texto branco - assim a barra de exportação não introduz cor nova nenhuma na
   paleta, e ainda fica fácil identificar cada formato à distância. */
.exportar-bar { display: flex; align-items: center; gap: 10px; margin: -6px 0 20px; flex-wrap: wrap; }
.exportar-bar .exportar-rotulo { font-size: 12.5px; font-weight: 600; color: var(--texto-secundario); }

/* Barra de seleção/exclusão em massa (04/09/2026, Admin\ConsultaDeclaracoesDec.aspx) - só
   aparece (via JS, AtualizarSelecaoDeclaracoes) quando a grade tem ao menos uma linha, e o botão
   "Excluir selecionadas" só habilita quando alguma linha está marcada, para não sugerir uma ação
   que ainda não faz nada. */
.barra-selecao-declaracoes {
    display: flex; align-items: center; gap: 16px; margin: -6px 0 16px; padding: 10px 14px;
    background: var(--azul-perfil-bg); border-radius: 9px; flex-wrap: wrap;
}
.chk-todas-rotulo { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--texto-secundario); cursor: pointer; }
.chk-todas-rotulo input { width: 15px; height: 15px; cursor: pointer; }
.contagem-selecao-declaracoes { font-size: 12.5px; color: var(--texto-secundario); flex: 1 1 auto; }
/* .chk-selecionar-declaracao pode cair tanto no <input type="checkbox"> quanto num <span> que o
   envolve, dependendo de como o .NET Framework decide renderizar um <asp:CheckBox> sem Text (ver
   comentário completo em Admin\ConsultaDeclaracoesDec.aspx, ObterCheckboxesDeclaracoes) - por
   isso o seletor cobre os dois casos, para o quadradinho sempre ficar do mesmo tamanho não
   importa qual dos dois aconteça. */
.chk-selecionar-declaracao,
.chk-selecionar-declaracao input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }
.btn-exportar {
    display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 8px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: #fff; text-decoration: none;
    transition: filter .15s ease, transform .05s ease;
}
.btn-exportar:hover { filter: brightness(1.08); }
.btn-exportar:active { transform: translateY(1px); }
.btn-exportar-csv { background: var(--verde-ativo-texto); }
.btn-exportar-xls { background: #b8860b; }
.btn-exportar-pdf { background: var(--alerta-texto); }

/* ---------- Foto do usuário (modal "Novo usuário") ---------- */
.foto-picker { display: flex; align-items: center; gap: 18px; }
.foto-preview {
    width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--fundo-input); border: 1.5px dashed var(--borda);
    color: var(--texto-suave); cursor: pointer; overflow: hidden;
    transition: border-color .15s ease, background .15s ease;
}
.foto-preview:hover { border-color: var(--azul-medio); background: #eef4fa; }
.foto-preview img { width: 100%; height: 100%; object-fit: cover; display: none; }
.foto-picker-info { display: flex; flex-direction: column; gap: 7px; }
.foto-picker-info .foto-input { font-size: 12px; color: var(--texto-secundario); max-width: 280px; }
.link-remover-foto {
    align-self: flex-start; border: none; background: none; padding: 0;
    color: var(--azul-medio); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline;
}
.link-remover-foto:hover { color: var(--azul-profundo); }

.password-wrapper { position: relative; }
.password-wrapper input { padding-right: 44px !important; }
.toggle-senha {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 8px; color: #8a99a8; cursor: pointer; padding: 0;
}
.toggle-senha:hover { color: var(--azul-medio); background: rgba(31, 111, 168, 0.1); }
.toggle-senha svg { pointer-events: none; }

/* ---------- Botões ---------- */
.btn-primary {
    padding: 12px 22px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, var(--azul-medio), var(--azul-profundo));
    color: #fff; font-size: 14.5px; font-weight: 600; cursor: pointer;
    transition: filter .15s ease, transform .05s ease;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary.largura-total { width: 100%; padding: 13px 14px; font-size: 15px; }
.btn-primary.acao-formulario { grid-column: span 2; justify-self: start; margin-top: 4px; }

.btn-secundario {
    padding: 11px 22px; border: 1.5px solid var(--azul-medio); border-radius: 9px;
    background: #fff; color: var(--azul-medio); font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .15s ease;
}
.btn-secundario:hover { background: var(--azul-perfil-bg); }

/* Ação destrutiva (04/09/2026, "Excluir selecionadas" de Admin\ConsultaDeclaracoesDec.aspx) -
   mesma paleta de perigo já usada em .icone-acao.perigo/.badge-alerta (--alerta-bg/--alerta-texto),
   nunca uma cor nova, para o vermelho continuar significando sempre a mesma coisa no sistema. */
.btn-perigo {
    padding: 9px 18px; border: 1.5px solid var(--alerta-texto); border-radius: 9px;
    background: #fff; color: var(--alerta-texto); font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: background .15s ease;
}

/* Mini formulário "Substituir anexo" por linha da grade "Isenções já registradas" - redesenhado
   em 08/09/2026 a pedido do usuário ("os botões salvar e cancelar tão não gostei, elabora algo
   que seja mais fácil e muito mais bonito"; a primeira versão usava .btn-secundario/.btn-mini
   com texto "Salvar"/"Cancelar", removidos - .btn-mini ficou sem nenhum outro uso no projeto e
   foi removida junto). Escondido até clicar no ícone de substituir (ou no X de cancelar), sem
   postback nenhum para abrir/fechar (só JS puro, AlternarSubstituirAnexoIsencao) - só o clique
   no ícone de confirmar (check verde) dispara postback de verdade, trocando só o arquivo, sem
   tocar em nome/ano/entidade (ver Admin\IsencoesDeclaracoesDec.aspx.cs,
   gvIsencoesRegistradas_RowCommand). Borda tracejada + fundo suave deixam claro que é uma ação
   "em andamento", ainda não confirmada - mesma linguagem visual de um rascunho.  */
.mini-substituir-anexo {
    display: none; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px;
    background: var(--azul-perfil-bg); border: 1.5px dashed var(--azul-medio); border-radius: 10px;
}
.mini-substituir-anexo.aberto { display: flex; animation: apareceAba .15s ease; }

/* Campo de arquivo nativo restilizado - sem truque de <label for> com o ClientID gerado dentro
   da GridView (mudaria por linha); só o botão embutido do próprio navegador ganha a cara dos
   outros botões do sistema (::file-selector-button é o padrão atual, ::-webkit-file-upload-button
   cobre versões mais antigas do Chrome/Edge - mesmo motor, mesmo público-alvo deste sistema). */
.mini-substituir-anexo-input {
    flex: 1 1 200px; min-width: 0; font-size: 12.5px; color: var(--texto-secundario);
}
.mini-substituir-anexo-input::file-selector-button,
.mini-substituir-anexo-input::-webkit-file-upload-button {
    padding: 7px 14px; margin-right: 10px; border: none; border-radius: 7px;
    background: linear-gradient(135deg, var(--azul-medio), var(--azul-profundo));
    color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: filter .15s ease;
}
.mini-substituir-anexo-input:hover::file-selector-button,
.mini-substituir-anexo-input:hover::-webkit-file-upload-button { filter: brightness(1.08); }

.mini-substituir-anexo-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.icone-acao-confirmar, .icone-acao-cancelar {
    width: 30px; height: 30px; border-radius: 8px; border: none;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .15s ease, filter .15s ease;
}
.icone-acao-confirmar {
    background: linear-gradient(135deg, var(--verde-ativo-texto), #145c2d); color: #fff;
}
.icone-acao-confirmar:hover { filter: brightness(1.1); }
.icone-acao-cancelar { background: #fff; color: var(--texto-secundario); border: 1.5px solid var(--borda); }
.icone-acao-cancelar:hover { background: var(--alerta-bg); color: var(--alerta-texto); border-color: var(--alerta-texto); }
.icone-acao-confirmar svg, .icone-acao-cancelar svg { pointer-events: none; }

.btn-perigo:hover { background: var(--alerta-bg); }
.btn-perigo:disabled { opacity: .5; cursor: not-allowed; }
.btn-perigo:disabled:hover { background: #fff; }

.btn-novo {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border: none; border-radius: 9px;
    background: linear-gradient(135deg, var(--azul-medio), var(--azul-profundo));
    color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer;
    text-decoration: none; transition: filter .15s ease;
}
.btn-novo:hover { filter: brightness(1.08); }

/* ---------- Modal (usado no cadastro de novo usuário) ---------- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(10, 20, 35, 0.5);
    display: none; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px; opacity: 0; transition: opacity .18s ease;
}
.modal-overlay.aberto { display: flex; opacity: 1; }
.modal-card {
    background: #fff; border-radius: 16px; width: 100%; max-width: 660px;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 30px 70px rgba(5, 15, 30, 0.35);
    transform: translateY(10px); transition: transform .18s ease;
}
.modal-overlay.aberto .modal-card { transform: translateY(0); }
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 26px; border-bottom: 1px solid #eef2f6; position: sticky; top: 0; background: #fff;
}
.modal-header h3 { margin: 0; font-size: 16px; color: var(--texto-titulo); }
.modal-fechar {
    width: 32px; height: 32px; border-radius: 8px; border: none; background: #f2f6fa;
    color: var(--texto-secundario); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.modal-fechar:hover { background: var(--alerta-bg); color: var(--alerta-texto); }
.modal-body { padding: 24px 26px 28px; }

/* ---------- Overlay de "processando" para operações demoradas (04/09/2026, Admin\Controles\
   OverlayProcessando.ascx) - mesma linguagem visual do .modal-overlay acima (fundo escurecido,
   cartão branco centralizado), só que travando a tela inteira em vez de abrir um formulário. A
   barra em si é indeterminada (não tem como saber o percentual real de um postback comum) - o
   ::after andando de um lado para o outro é o que comunica "ainda trabalhando", sem prometer um
   número que o sistema não tem como calcular. */
.overlay-processando {
    position: fixed; inset: 0; background: rgba(10, 20, 35, 0.55);
    display: none; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px;
}
.overlay-processando.ativo { display: flex; }
.overlay-processando-caixa {
    background: #fff; border-radius: 16px; padding: 30px 36px; min-width: 300px; max-width: 90vw;
    box-shadow: 0 30px 70px rgba(5, 15, 30, 0.35); text-align: center;
}
.overlay-processando-texto { font-size: 14.5px; font-weight: 600; color: var(--texto-principal); margin: 0 0 16px; }
.overlay-processando-barra { width: 100%; height: 8px; border-radius: 6px; background: var(--azul-perfil-bg); overflow: hidden; }
.overlay-processando-barra::after {
    content: ""; display: block; height: 100%; width: 40%; border-radius: 6px;
    background: linear-gradient(135deg, var(--azul-medio), var(--azul-profundo));
    animation: overlay-processando-mover 1.1s ease-in-out infinite;
}
@keyframes overlay-processando-mover {
    0% { margin-left: -40%; }
    100% { margin-left: 100%; }
}

/* ---------- Página de login ---------- */
.pagina-login {
    height: 100%;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background-image:
        linear-gradient(180deg, rgba(10,20,35,0.35) 0%, rgba(10,20,35,0.55) 100%),
        url('/Admin/Images/login-bg.jpg');
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.pagina-login .dev-credit {
    background: rgba(10, 20, 35, 0.35);
    backdrop-filter: blur(4px);
}
.login-card {
    width: 100%; max-width: 380px; background: rgba(255, 255, 255, 0.94);
    border-radius: 16px; box-shadow: 0 25px 60px rgba(5, 15, 30, 0.45);
    padding: 40px 36px 32px; backdrop-filter: blur(6px);
}
.login-card h1 { font-size: 20px; margin: 0; color: var(--texto-titulo); }
.login-card .subtitle { font-size: 13px; color: var(--texto-secundario); margin: 4px 0 28px; }
.login-card .field { margin-bottom: 22px; }
.footer-note { margin-top: 28px; text-align: center; font-size: 11.5px; color: var(--texto-suave); }
.aviso-primeiro-acesso {
    margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(147, 162, 176, 0.4);
}
.aviso-primeiro-acesso a { color: var(--azul-medio); font-weight: 600; text-decoration: none; }
.aviso-primeiro-acesso a:hover { text-decoration: underline; }

/* ---------- Crédito do desenvolvedor ---------- */
.dev-credit {
    position: fixed; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(10, 20, 35, 0.75);
    opacity: 0.85; transition: opacity .15s ease;
}
.dev-credit:hover { opacity: 1; }
.dev-credit img { height: 18px; display: block; }
.dev-credit span { font-size: 10.5px; color: #eef3f8; letter-spacing: .01em; }

/* ---------- Configuração de Conexão (Admin\Configuracao.aspx) ---------- */
.topo-autenticado { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.aviso-banner {
    display: flex; align-items: flex-start; gap: 14px;
    background: #fff7e6; border: 1.5px solid #f3d38a; color: #7a5a12;
    border-radius: 12px; padding: 16px 18px; margin-bottom: 22px; font-size: 13px; line-height: 1.5;
}
.aviso-banner svg { flex-shrink: 0; margin-top: 1px; color: #b8860b; }
.aviso-banner strong { display: block; margin-bottom: 3px; font-size: 13.5px; }
.aviso-banner-detalhe-tecnico {
    display: block; margin-top: 8px; font-size: 11.5px; color: #9a7a2e;
    font-family: Consolas, "Courier New", monospace; word-break: break-word;
}

.status-strip {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 16px; background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(20, 40, 60, 0.06);
    padding: 16px 22px; margin-bottom: 22px;
}
.status-strip-titulo { display: flex; flex-direction: column; gap: 2px; }
.status-strip-titulo strong { font-size: 13.5px; color: var(--texto-titulo); }
.status-strip-titulo span { font-size: 11.5px; color: var(--texto-suave); }

.status-linha { display: flex; gap: 28px; flex-wrap: wrap; }
.status-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--texto-secundario); }

/* Abas de Banco do CAC / Banco do SISPATRI / Integração - cada uma com uma cor de destaque
   própria (--cor-aba), reaproveitando tons já usados no resto da tela (azul da marca, verde do
   badge "Conectado", dourado do aviso de primeira configuração) em vez de inventar uma paleta
   nova. A troca em si é só JavaScript (ver Configuracao.aspx) - nenhuma dá postback. */
.tabs-nav {
    display: flex; gap: 6px; padding: 6px; background: #e3eaf1;
    border-radius: 14px 14px 0 0; flex-wrap: wrap;
}
.tab-botao {
    display: flex; align-items: center; gap: 9px; padding: 12px 20px; border: none;
    background: transparent; cursor: pointer; border-radius: 10px; font-size: 13.5px;
    font-weight: 600; color: var(--texto-secundario);
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tab-botao svg { flex-shrink: 0; opacity: .7; transition: opacity .15s ease; }
.tab-botao:hover { color: var(--texto-titulo); background: rgba(255,255,255,0.6); }
.tab-botao[data-aba="cac"] { --cor-aba: var(--azul-medio); }
.tab-botao[data-aba="sispatri"] { --cor-aba: var(--verde-ativo-texto); }
.tab-botao[data-aba="integracao"] { --cor-aba: #b8860b; }
.tab-botao[data-aba="servidor"] { --cor-aba: var(--azul-medio); }
.tab-botao[data-aba="teste"] { --cor-aba: var(--verde-ativo-texto); }
.tab-botao[data-aba="prefeitura"] { --cor-aba: var(--azul-medio); }
.tab-botao[data-aba="declaracoes"] { --cor-aba: var(--roxo-medio); }
.tab-botao[data-aba="periodoantigo"] { --cor-aba: var(--azul-medio); }
.tab-botao[data-aba="periodorecente"] { --cor-aba: var(--verde-ativo-texto); }
.tab-botao[data-aba="comparativo"] { --cor-aba: var(--roxo-medio); }
.tab-botao[data-aba="registrar"] { --cor-aba: var(--azul-medio); }
.tab-botao[data-aba="registradas"] { --cor-aba: var(--verde-ativo-texto); }
.tab-botao.ativo {
    background: #fff; color: var(--cor-aba, var(--azul-medio));
    box-shadow: 0 2px 10px rgba(20, 40, 60, 0.10);
}
.tab-botao.ativo svg { opacity: 1; }

.tabs-corpo {
    background: #fff; border-radius: 0 0 14px 14px; box-shadow: 0 4px 18px rgba(20, 40, 60, 0.06);
    margin-bottom: 26px; overflow: hidden;
}
.tab-painel {
    display: none; padding: 26px 26px 28px; border-top: 3px solid var(--cor-aba, var(--azul-medio));
}
.tab-painel.ativo { display: block; animation: apareceAba .2s ease; }
.tab-painel[data-aba="cac"] { --cor-aba: var(--azul-medio); }
.tab-painel[data-aba="sispatri"] { --cor-aba: var(--verde-ativo-texto); }
.tab-painel[data-aba="integracao"] { --cor-aba: #b8860b; }
.tab-painel[data-aba="servidor"] { --cor-aba: var(--azul-medio); }
.tab-painel[data-aba="teste"] { --cor-aba: var(--verde-ativo-texto); }
.tab-painel[data-aba="prefeitura"] { --cor-aba: var(--azul-medio); }
.tab-painel[data-aba="declaracoes"] { --cor-aba: var(--roxo-medio); }
.tab-painel[data-aba="periodoantigo"] { --cor-aba: var(--azul-medio); }
.tab-painel[data-aba="periodorecente"] { --cor-aba: var(--verde-ativo-texto); }
.tab-painel[data-aba="comparativo"] { --cor-aba: var(--roxo-medio); }
.tab-painel[data-aba="registrar"] { --cor-aba: var(--azul-medio); }
.tab-painel[data-aba="registradas"] { --cor-aba: var(--verde-ativo-texto); }
.tab-painel h2 { font-size: 15px; margin: 0; color: var(--texto-titulo); display: flex; align-items: center; gap: 8px; }
.tab-painel .descricao { font-size: 12.5px; color: var(--texto-secundario); margin: 6px 0 18px; }
@keyframes apareceAba {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

.rodape-tecnico {
    font-size: 11.5px; color: var(--texto-suave); text-align: center; margin: -6px 0 90px;
}
.rodape-tecnico code {
    background: #e8eef4; color: #4c6478; padding: 1px 7px; border-radius: 5px; font-size: 11px;
}

/* ==========================================================================
   Menu lateral (sidebar) retrátil - Admin\Controles\MenuLateral.ascx
   Substitui o antigo <nav> horizontal fixo no topo das telas autenticadas.
   Estrutura de layout: .app-shell (flex) > .sidebar + .app-main (o .container
   de cada página continua igual, só passou a viver dentro de .app-main).
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.sidebar {
    width: 264px; flex-shrink: 0; display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--azul-escuro) 0%, #0c2438 100%);
    color: #eaf1f8; transition: width .2s ease;
}
.sidebar.recolhida { width: 78px; }

.sidebar-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-marca { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sidebar-marca-badge {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    background: rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}
.sidebar-marca-texto { display: flex; flex-direction: column; overflow: hidden; white-space: nowrap; }
.sidebar-marca-texto strong { font-size: 13.5px; color: #fff; }
.sidebar-marca-texto span { font-size: 11px; color: #a9c1d6; }
.sidebar.recolhida .sidebar-marca-texto { display: none; }
.sidebar.recolhida .sidebar-topo { justify-content: center; }
.sidebar.recolhida .sidebar-recolher { transform: rotate(180deg); }

.sidebar-recolher {
    width: 30px; height: 30px; flex-shrink: 0; border: none; border-radius: 8px;
    background: rgba(255,255,255,0.1); color: #dfeefb; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .15s ease, transform .2s ease;
}
.sidebar-recolher:hover { background: rgba(255,255,255,0.2); }
.sidebar.recolhida .sidebar-topo .sidebar-marca { display: none; }

.sidebar-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 14px 12px; }
.sidebar-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sidebar-item { position: relative; }

.sidebar-link {
    display: flex; align-items: center; gap: 13px; width: 100%;
    padding: 11px 13px; border-radius: 10px; border: none; background: transparent;
    color: #cddeea; font-size: 13.8px; font-weight: 600; text-decoration: none; cursor: pointer;
    font-family: inherit; text-align: left; transition: background .15s ease, color .15s ease;
}
.sidebar-link:hover { background: rgba(255,255,255,0.09); color: #fff; }
.sidebar-link.ativo { background: rgba(255,255,255,0.16); color: #fff; box-shadow: inset 3px 0 0 #4fb0e8; }
.sidebar-icone { flex-shrink: 0; opacity: .9; }
.sidebar-texto { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-seta { flex-shrink: 0; transition: transform .2s ease; opacity: .7; }
.sidebar-item.aberto > .sidebar-link-pai .sidebar-seta { transform: rotate(180deg); }

.sidebar-submenu {
    list-style: none; margin: 2px 0 4px; padding: 0; max-height: 0; overflow: hidden;
    transition: max-height .2s ease; display: flex; flex-direction: column; gap: 2px;
}
/* ---------- Linha recem-alterada numa grade ----------
   Marca a isencao que a pessoa acabou de corrigir, ao voltar de Admin\AlteracaoIsencaoDec.aspx.
   A borda a esquerda carrega o destaque; o fundo e so um realce suave, para a linha continuar
   legivel - e nao um bloco verde que competiria com os badges de status que ja moram nas celulas.
   O destaque some sozinho no primeiro postback que refaca a grade (ver IsencaoAlterada). */
.grid tr.linha-alterada > td {
    background: var(--verde-ativo-bg);
}
.grid tr.linha-alterada > td:first-child {
    box-shadow: inset 3px 0 0 var(--verde-ativo-texto);
}

/* Este valor NAO e enfeite: o submenu abre por transicao de max-height, entao ele precisa de um
   numero fixo, e qualquer item que passe dele fica escondido SEM erro nenhum - parece bug de
   menu ou de rota. "Declaracoes" e o maior submenu: 9 itens + 3 separadores ~= 420px em
   10/09/2026. Os 720px atuais deixam folga para uns 6 itens novos; ao chegar perto, aumente
   aqui ANTES de adicionar o item. */
.sidebar-item.aberto > .sidebar-submenu { max-height: 720px; }
.sidebar-submenu .sidebar-link { padding-left: 40px; font-size: 13px; font-weight: 500; }
.sidebar-submenu .sidebar-icone { width: 16px; height: 16px; }

/* Linha que agrupa itens dentro de um submenu. Recuo a esquerda alinhado com o texto dos itens
   (40px do .sidebar-link), para a linha separar os rotulos e nao atravessar a barra inteira. */
.sidebar-separador {
    height: 1px; margin: 5px 14px 5px 40px; padding: 0;
    background: rgba(255, 255, 255, 0.12); flex: none;
}

/* ---------- Sidebar recolhida (só ícones) ---------- */
.sidebar.recolhida .sidebar-texto,
.sidebar.recolhida .sidebar-seta { display: none; }
.sidebar.recolhida .sidebar-link { justify-content: center; padding: 12px 0; }
.sidebar.recolhida .sidebar-submenu { max-height: none; overflow: visible; }
.sidebar.recolhida .sidebar-item:hover > .sidebar-submenu,
.sidebar.recolhida .sidebar-item.aberto:hover > .sidebar-submenu {
    position: absolute; left: calc(100% + 8px); top: 0; width: 224px; z-index: 60;
    background: #163752; border-radius: 10px; padding: 8px; box-shadow: 0 12px 30px rgba(5,15,30,0.4);
    display: flex;
}
.sidebar.recolhida .sidebar-submenu:not(:hover) { display: none; }
.sidebar.recolhida .sidebar-item:hover .sidebar-submenu .sidebar-texto { display: inline; }
.sidebar.recolhida .sidebar-submenu .sidebar-link { padding-left: 13px; justify-content: flex-start; }

/* ---------- Rodapé do menu: entidade + usuário logado + sair ---------- */
.sidebar-rodape { border-top: 1px solid rgba(255,255,255,0.08); padding: 14px 12px; }
.sidebar-badge-entidade {
    display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600;
    color: #a9c1d6; background: rgba(255,255,255,0.06); border-radius: 8px;
    padding: 7px 10px; margin-bottom: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.sidebar.recolhida .sidebar-badge-entidade span { display: none; }
.sidebar-usuario { display: flex; align-items: center; gap: 10px; }
.sidebar-usuario-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--azul-medio), #4fb0e8);
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff;
}
.sidebar-usuario-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sidebar-usuario-nome { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-usuario-perfil { font-size: 11px; color: #93aec4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-sair {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; color: #cddeea; text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.sidebar-sair:hover { background: rgba(255,255,255,0.12); color: #fff; }
.sidebar.recolhida .sidebar-usuario-info { display: none; }
.sidebar.recolhida .sidebar-usuario { justify-content: center; }
.sidebar.recolhida .sidebar-sair { display: none; }

/* ---------- Toggle/backdrop mobile ---------- */
.sidebar-toggle-mobile {
    display: none; position: fixed; top: 14px; left: 14px; z-index: 1300;
    width: 40px; height: 40px; border-radius: 10px; border: none; cursor: pointer;
    background: var(--azul-escuro); color: #fff; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(5,15,30,0.3);
}
.sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(8, 16, 28, 0.5); z-index: 1100;
}
.sidebar-backdrop.visivel { display: block; }

/* Comparativo CAC/SISPATRI (Admin\Dashboard.aspx) quebra para empilhado bem antes do
   breakpoint geral de mobile - cada coluna carrega mini resumo + ranking + gráfico, aperta
   demais lado a lado numa tela de tablet. */
@media (max-width: 960px) {
    .dashboard-comparativo { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
    .sidebar-toggle-mobile { display: flex; }
    .sidebar, .sidebar.recolhida {
        position: fixed; top: 0; left: 0; height: 100vh; width: 270px; z-index: 1200;
        transform: translateX(-100%); transition: transform .25s ease;
    }
    .sidebar.aberta-mobile { transform: translateX(0); }
    /* Em telas estreitas o menu vira uma gaveta que desliza por cima do conteúdo (drawer) -
       sempre no tamanho "expandido" com texto, mesmo que o admin tenha deixado "recolhida"
       marcada no desktop (ver AlternarSidebar em MenuLateral.ascx). */
    .sidebar.recolhida { width: 270px; }
    .sidebar.recolhida .sidebar-texto { display: inline; }
    .sidebar.recolhida .sidebar-seta { display: inline-block; }
    .sidebar.recolhida .sidebar-marca-texto { display: flex; }
    .sidebar.recolhida .sidebar-usuario-info { display: flex; }
    .sidebar.recolhida .sidebar-usuario { justify-content: flex-start; }
    .sidebar.recolhida .sidebar-sair { display: flex; }
    .sidebar.recolhida .sidebar-badge-entidade span { display: inline; }
    .sidebar.recolhida .sidebar-link { justify-content: flex-start; padding: 11px 13px; }
    .sidebar.recolhida .sidebar-item:hover > .sidebar-submenu { position: static; box-shadow: none; background: transparent; padding: 0; width: auto; }
    .app-main { width: 100%; padding-top: 58px; }
}

/* ---------- Responsivo (telas estreitas) ---------- */
@media (max-width: 720px) {
    .mini-resumo { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: 1fr; }
    .field.span-2, .btn-primary.acao-formulario { grid-column: span 1; }
    .busca-usuario input { width: 160px; }
    .panel-header { flex-direction: column; align-items: stretch; }
    .panel-header-acoes { justify-content: space-between; }
    .foto-picker { flex-direction: column; align-items: flex-start; }
    .grid-rodape { justify-content: center; text-align: center; }
    .status-linha { flex-direction: column; gap: 12px; }
    .status-strip { flex-direction: column; align-items: stretch; }
    .topo-autenticado { flex-direction: column; align-items: flex-start; gap: 12px; }
    .tabs-nav { padding: 5px; }
    .tab-botao { flex: 1 1 auto; justify-content: center; padding: 12px 10px; font-size: 12.5px; }
    .tab-painel { padding: 20px 18px 22px; }
}