/* ==== DC-Folha — design system (visual "Salus": sidebar clara, cards suaves) ==== */
:root {
    --azul: #2563eb;          /* primária (azul do mockup) */
    --azul-vivo: #3b82f6;
    --azul-escuro: #1e40af;
    --azul-claro: #eff4ff;
    --verde: #1e7d46;
    --vermelho: #b03030;
    --ambar-fundo: #fff6e0;
    --ambar-borda: #eadfb8;
    --cinza: #5a6570;
    --cinza-claro: #8a94a0;
    --borda: #d5dce3;
    --borda-suave: #e7ebf0;
    --fundo: #f0f3f7;
    --sombra: 0 1px 3px #12365510, 0 4px 14px #1236550d;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--fundo);
    color: #22292f;
    font-size: 15px;
}

h1 { font-size: 22px; margin: 0 0 6px; color: var(--azul-escuro); font-weight: 800; }
h1:focus { outline: none; }
h2 { font-size: 16px; margin: 20px 0 8px; color: var(--azul-escuro); }
a { color: var(--azul); }
p.subtitulo, .subtitulo { color: var(--cinza); font-size: 14px; }

/* ---- layout com menu lateral (claro) ---- */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: 235px; flex-shrink: 0;
    background: #fff; color: #3a4550;
    border-right: 1px solid var(--borda-suave);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .marca {
    padding: 14px 16px 10px; display: flex; align-items: center; gap: 10px;
}
.logo-quadrado {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--azul-vivo), var(--azul));
    color: #fff; font-weight: 800; font-size: 19px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 8px #2563eb55;
}
.marca-nome { line-height: 1.15; }
.marca-nome b { display: block; font-size: 16.5px; color: #1c2733; letter-spacing: .01em; }
.marca-nome small {
    font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
    color: var(--azul); text-transform: uppercase;
}
.menu-busca { padding: 4px 12px 10px; }
.menu-busca input {
    width: 100%; padding: 7px 12px; border-radius: 9px; font-size: 13px;
    background: var(--fundo); border: 1px solid transparent;
}
.menu-busca input:focus { background: #fff; border-color: var(--azul); outline: none; }
.menu-titulo {
    padding: 4px 18px 2px; font-size: 10px; font-weight: 700;
    letter-spacing: .14em; color: var(--cinza-claro); text-transform: uppercase;
}
/* menu no estilo do mockup: ícone SÓ no grupo; itens indentados com linha vertical */
.menu-nav { flex: 1; overflow-y: auto; padding: 2px 10px 8px; }
.menu-nav svg { width: 18px; height: 18px; flex-shrink: 0; color: #64748b; }
a.item-solto, .sidebar details.grupo summary {
    list-style: none; display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; font-size: 13.5px; font-weight: 600;
    color: #3f4a56; cursor: pointer; user-select: none; border-radius: 9px;
    text-decoration: none; margin: 1px 0;
}
.sidebar details.grupo summary::-webkit-details-marker { display: none; }
.sidebar details.grupo summary .nome { flex: 1; }
.sidebar details.grupo summary::after { content: "›"; font-size: 14px; color: var(--cinza-claro); transition: transform .15s; }
.sidebar details.grupo[open] summary::after { transform: rotate(90deg); }
a.item-solto:hover, .sidebar details.grupo summary:hover { background: var(--fundo); }
a.item-solto.ativo, .sidebar details.grupo.ativo > summary {
    background: var(--azul); color: #fff; box-shadow: 0 3px 10px #2563eb4d;
}
a.item-solto.ativo svg, .sidebar details.grupo.ativo > summary svg { color: #fff; }
.sidebar details.grupo.ativo > summary::after { color: #cfe0ff; }
.sidebar .itens {
    margin: 3px 0 5px 20px; padding-left: 9px;
    border-left: 2px solid #e2e8f0;
    display: flex; flex-direction: column;
}
.sidebar .itens a {
    display: block; margin: 1px 0; padding: 6px 10px;
    color: #5b6673; text-decoration: none; font-size: 13px;
    border-radius: 7px;
}
.sidebar .itens a:hover { background: var(--fundo); color: var(--azul-escuro); }
.sidebar .itens a.ativo { background: var(--azul-claro); color: var(--azul); font-weight: 700; }

/* botão Recolher fixado na base do menu */
.sidebar .recolher {
    margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px; background: none; color: var(--cinza); font-size: 13px; font-weight: 600;
    border-top: 1px solid var(--borda-suave); border-radius: 0; cursor: pointer;
}
.sidebar .recolher:hover { background: var(--fundo); color: var(--azul); }
.sidebar .recolher .seta-rec { font-size: 15px; }

/* estado recolhido: trilho estreito só com os ícones dos grupos
   (.app no seletor: ganha das larguras dos temas compacto/médio, declaradas depois) */
html.menu-recolhido .app .sidebar { width: 64px; }
html.menu-recolhido .marca { justify-content: center; padding-left: 8px; padding-right: 8px; }
html.menu-recolhido .marca-nome, html.menu-recolhido .menu-busca, html.menu-recolhido .menu-titulo { display: none; }
html.menu-recolhido .menu-nav { padding: 2px 9px 8px; }
html.menu-recolhido a.item-solto .nome, html.menu-recolhido .sidebar details.grupo summary .nome { display: none; }
html.menu-recolhido .sidebar details.grupo summary::after { display: none; }
html.menu-recolhido .sidebar .itens { display: none; }
html.menu-recolhido a.item-solto, html.menu-recolhido .sidebar details.grupo summary { justify-content: center; padding: 10px 0; }
html.menu-recolhido .sidebar .recolher .nome { display: none; }
html.menu-recolhido .sidebar .recolher .seta-rec { transform: rotate(180deg); }

/* ---- topo ---- */
.principal { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topo {
    background: #fff; border-bottom: 1px solid var(--borda-suave);
    padding: 9px 22px; display: flex; align-items: center; gap: 14px;
}
.busca-global { flex: 1; max-width: 430px; }
.busca-global input {
    width: 100%; padding: 8px 14px 8px 36px; border-radius: 20px; font-size: 13.5px;
    background: var(--fundo); border: 1px solid transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238a94a0' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 12px center;
}
.busca-global input:focus { background-color: #fff; border-color: var(--azul); outline: none; }
.topo .cliente {
    font-weight: 700; color: var(--azul-escuro); font-size: 13.5px;
    border: 1px solid var(--borda); border-radius: 9px; padding: 6px 14px;
    margin-left: auto; white-space: nowrap;
}
.menu-usuario { position: relative; }
.menu-usuario summary {
    list-style: none; display: flex; align-items: center; gap: 9px; cursor: pointer;
    padding: 3px 6px; border-radius: 9px; user-select: none;
}
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario summary:hover { background: var(--fundo); }
.avatar {
    width: 33px; height: 33px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--azul-vivo), var(--azul));
    color: #fff; font-weight: 700; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.usuario-nome { line-height: 1.15; text-align: left; }
.usuario-nome b { display: block; font-size: 13px; color: #1c2733; }
.usuario-nome small { font-size: 11px; color: var(--cinza-claro); }
.menu-usuario .dropdown {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
    background: #fff; border: 1px solid var(--borda-suave); border-radius: 12px;
    box-shadow: 0 10px 34px #12365526; padding: 8px; min-width: 220px;
}
.menu-usuario .dropdown .cabeca { padding: 8px 10px 10px; border-bottom: 1px solid var(--borda-suave); margin-bottom: 6px; }
.menu-usuario .dropdown .cabeca b { display: block; font-size: 13.5px; color: #1c2733; }
.menu-usuario .dropdown .cabeca small { font-size: 11.5px; color: var(--cinza-claro); }
.menu-usuario .dropdown a.item {
    display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none;
    color: #1c2733; font-weight: 600; font-size: 13.5px;
}
.menu-usuario .dropdown a.item:hover { background: var(--fundo); }
.menu-usuario .dropdown .separa { height: 1px; background: var(--borda-suave); margin: 6px 4px; }
.menu-usuario .dropdown button.sair {
    width: 100%; text-align: left; background: none; color: var(--vermelho);
    padding: 8px 10px; border-radius: 8px; font-weight: 600; font-size: 13.5px;
}
.menu-usuario .dropdown button.sair:hover { background: #fbeaea; }

.breadcrumb {
    background: #fff; border-bottom: 1px solid var(--borda-suave);
    padding: 8px 26px; font-size: 13px; color: var(--cinza);
    display: flex; gap: 8px; align-items: center;
}
.breadcrumb a { color: var(--azul); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: #b7c1cb; }
.breadcrumb .atual { color: var(--azul-escuro); font-weight: 700; }

main.conteudo { padding: 22px 26px 50px; max-width: 1150px; width: 100%; }

/* ---- cartões / fieldsets ---- */
fieldset, .cartao {
    border: 1px solid var(--borda-suave); border-radius: 12px;
    padding: 16px 18px; background: #fff; margin: 0 0 16px;
    box-shadow: var(--sombra);
}
legend {
    font-weight: 700; color: var(--azul-escuro); font-size: 13.5px;
    padding: 0 8px; text-transform: uppercase; letter-spacing: .03em;
}

/* ---- dashboard (Home) ---- */
.dash-alertas { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
.dash-alerta {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    border-radius: 10px; padding: 10px 16px; font-size: 13.5px;
    background: var(--ambar-fundo); border: 1px solid var(--ambar-borda); color: #6b5200;
}
.dash-alerta .ver { margin-left: auto; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.dash-alerta.erro { background: #fdf0ef; border-color: #f2c8c4; color: #9c2b21; }
.dash-alerta.erro .ver { color: #b03030; }
.dash-alerta.aviso { background: #fff8e6; border-color: #ecd9a0; color: #7a5d00; }
.dash-alerta.aviso .ver { color: #8a6a00; }
.dash-alerta.info { background: #eef4fe; border-color: #c4d7f7; color: #1e4fa3; }
.dash-alerta.info .ver { color: var(--azul); }

/* cards de estatística com selo de ícone e tendência (mockup) */
.stat-card .chip {
    position: absolute; top: 13px; right: 14px;
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.chip.azul { background: #e5edff; }
.chip.verde { background: #e3f5e9; }
.chip.roxo { background: #efeafd; }
.chip.vermelho { background: #fdecea; }
.stat-card .tendencia { font-size: 12px; font-weight: 700; margin-top: 5px; }
.tendencia.sobe { color: #178048; }
.tendencia.desce { color: #b03030; }
.tendencia.neutra { color: var(--cinza-claro); }

/* barras horizontais (folha por departamento) */
.dash-barras { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.dash-barra { display: grid; grid-template-columns: 132px 1fr 62px; gap: 10px; align-items: center; font-size: 12px; }
.dash-barra .nome { color: var(--cinza); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-barra .trilho { background: #eef2f7; border-radius: 6px; height: 15px; overflow: hidden; }
.dash-barra .preenchido { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--azul-vivo), var(--azul)); }
.dash-barra .valor { font-weight: 700; color: #1c2733; white-space: nowrap; }

/* últimas movimentações (admissões / desligamentos) */
.mov-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mov-tabela th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza-claro); padding: 5px 8px; border-bottom: 1px solid var(--borda-suave); }
.mov-tabela td { padding: 6px 8px; border-bottom: 1px solid #f1f4f8; }
.mov-badge { font-size: 10.5px; font-weight: 700; border-radius: 9px; padding: 2px 9px; white-space: nowrap; }
.mov-badge.adm { background: #e3f5e9; color: #178048; }
.mov-badge.des { background: #fdecea; color: #b03030; }
.mov-badge.niver { background: #fff3d6; color: #8a6a00; }
.dash-rodape-link { display: block; text-align: right; margin-top: 8px; font-size: 12.5px; font-weight: 600; }
.dash-demandas {
    background: #fff; border: 1px solid var(--borda-suave); border-radius: 12px;
    box-shadow: var(--sombra); padding: 14px 16px; margin-bottom: 14px;
}
.dash-demandas h3 { margin: 0 0 2px; font-size: 14.5px; color: #1c2733; }
.dash-demandas .grade-demandas {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px; margin-top: 10px;
}
a.demanda {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    border: 1px solid var(--borda-suave); border-radius: 10px; padding: 11px 14px;
    color: #2c3742; background: #fff;
}
a.demanda:hover { border-color: var(--azul); background: var(--azul-claro); }
a.demanda .texto { flex: 1; line-height: 1.25; }
a.demanda .texto b { display: block; font-size: 13.5px; }
a.demanda .texto small { color: var(--cinza-claro); font-size: 11.5px; }
a.demanda .qtd { font-size: 20px; font-weight: 800; color: var(--vermelho); }
a.demanda .qtd.ok { color: var(--verde); }

.dash-stats {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px; margin-bottom: 14px;
}
.stat-card {
    background: #fff; border: 1px solid var(--borda-suave); border-radius: 12px;
    box-shadow: var(--sombra); padding: 14px 16px; position: relative;
}
.stat-card .rotulo { font-size: 13px; color: var(--cinza); font-weight: 600; }
.stat-card .valor { font-size: 27px; font-weight: 800; color: #1c2733; margin: 3px 0 1px; }
.stat-card .detalhe { font-size: 12px; color: var(--cinza-claro); }
.stat-card .icone {
    position: absolute; top: 13px; right: 14px;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    background: var(--azul-claro);
}
.dash-graficos { display: grid; grid-template-columns: 1fr 340px; gap: 12px; align-items: start; }
.grafico-card {
    background: #fff; border: 1px solid var(--borda-suave); border-radius: 12px;
    box-shadow: var(--sombra); padding: 14px 16px;
}
.grafico-card h3 { margin: 0; font-size: 14.5px; color: #1c2733; }
.grafico-card .sub { font-size: 11.5px; color: var(--cinza-claro); margin-bottom: 8px; }
@media (max-width: 1000px) { .dash-graficos { grid-template-columns: 1fr; } }

/* ---- formulários ---- */
label { font-size: 13px; font-weight: 600; color: var(--cinza); }
input, select, textarea {
    font: inherit; padding: 8px 10px;
    border: 1px solid var(--borda); border-radius: 7px; background: #fff;
    color: #22292f;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--azul); outline-offset: -1px; border-color: var(--azul);
}
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--azul); }
input[type="date"] { padding: 7px 8px; }
input:disabled, select:disabled { background: var(--fundo); color: var(--cinza); }

/* ---- botões ---- */
button, .btn {
    font: inherit; font-weight: 600; cursor: pointer;
    padding: 9px 20px; border: none; border-radius: 8px;
    background: var(--azul); color: #fff; text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: var(--azul-escuro); }
button:disabled { opacity: .55; cursor: default; }
.btn-verde { background: var(--verde); }
.btn-verde:hover { background: #166136; }
.btn-perigo { background: #fff; color: var(--vermelho); border: 1px solid var(--vermelho); }
.btn-perigo:hover { background: #fbeaea; }
.btn-sec { background: #fff; color: var(--azul); border: 1px solid var(--azul); }
.btn-sec:hover { background: var(--azul-claro); }
.btn-link { background: none; color: var(--azul); padding: 4px 8px; font-weight: 600; cursor: pointer; }
.btn-link:hover { background: var(--azul-claro); }

/* ---- ações de linha de tabela: só o ícone, sem moldura ----
   Numa lista com muitas linhas, seis botões emoldurados por linha viram um bloco que compete
   com os dados. Sem moldura (ela aparece no hover) a coluna vira uma barra discreta; o que a
   ação faz está no title de cada botão. */
.acoes-linha { display: flex; gap: 2px; align-items: center; white-space: nowrap; }
.acoes-linha > .acao {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 28px; padding: 0; font-size: 15px; line-height: 1;
    background: none; border: 1px solid transparent; border-radius: 7px;
    color: var(--azul); text-decoration: none; cursor: pointer;
}
.acoes-linha > .acao:hover { background: var(--azul-claro); border-color: #c4d7f7; }
.acoes-linha > .acao.perigo { color: var(--vermelho); }
.acoes-linha > .acao.perigo:hover { background: #fbeaea; border-color: #ecc8c8; }
.acoes-linha > .acao:disabled { opacity: .4; cursor: default; background: none; border-color: transparent; }
/* separa as ações que destroem das do dia a dia */
.acoes-linha > .separador { width: 1px; height: 18px; background: var(--borda); margin: 0 5px; }

/* ---- tabelas ---- */
table { border-collapse: collapse; }
.tabela { width: 100%; background: #fff; }
.tabela th {
    text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--cinza); border-bottom: 2px solid var(--borda); padding: 9px 10px;
}
.tabela td { padding: 8px 10px; border-bottom: 1px solid #eef1f4; }
.tabela tbody tr:hover td { background: var(--azul-claro); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- impressão: só o conteúdo (sem menu lateral, topo, breadcrumb e botões) ---- */
@media print {
    .sidebar, .topo, .breadcrumb, #blazor-error-ui { display: none !important; }
    .app { display: block; }
    .principal { display: block; }
    main.conteudo { max-width: none; width: auto; padding: 0; }
    body { background: #fff; }
    button, .btn, .btn-sec, .btn-verde, .btn-perigo, .btn-link { display: none !important; }
    a { text-decoration: none; color: inherit; }
    fieldset, .cartao { break-inside: avoid; box-shadow: none; }
    .tabela tbody tr { break-inside: avoid; }
}

/* ---- tema compacto (botão "Aa" no topo; classe no <html>) ---- */
.btn-tema {
    background: #fff; color: var(--azul); border: 1px solid var(--borda);
    border-radius: 8px; padding: 4px 10px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.btn-tema:hover { background: var(--azul-claro); }

/* nível intermediário ("normal") */
html.medio body { font-size: 14px; }
html.medio h1 { font-size: 20px; }
html.medio h2 { font-size: 15px; margin: 16px 0 7px; }
html.medio label { font-size: 12.5px; }
html.medio input, html.medio select, html.medio textarea { padding: 6px 9px; }
html.medio button, html.medio .btn { padding: 7px 17px; }
html.medio fieldset, html.medio .cartao { padding: 13px 16px; margin-bottom: 13px; }
html.medio .tabela th { padding: 7px 9px; font-size: 11.5px; }
html.medio .tabela td { padding: 6px 9px; }
html.medio main.conteudo { padding: 18px 22px 40px; }
html.medio .sidebar { width: 220px; }
html.medio .sidebar .itens a { padding: 5px 9px; font-size: 12.5px; }

/* nível compacto (PADRÃO) */
html.compacto body { font-size: 13px; }
html.compacto h1 { font-size: 18px; margin-bottom: 4px; }
html.compacto h2 { font-size: 14px; margin: 14px 0 6px; }
html.compacto .subtitulo { font-size: 12.5px; }
html.compacto label { font-size: 12px; }
html.compacto input, html.compacto select, html.compacto textarea { padding: 4px 8px; border-radius: 6px; }
html.compacto button, html.compacto .btn { padding: 6px 14px; border-radius: 7px; }
html.compacto .btn-tema { padding: 3px 8px; }
html.compacto fieldset, html.compacto .cartao { padding: 10px 14px; margin-bottom: 10px; }
html.compacto legend { font-size: 12px; }
html.compacto .tabela th { padding: 6px 8px; font-size: 11px; }
html.compacto .tabela td { padding: 4px 8px; }
html.compacto main.conteudo { padding: 14px 20px 34px; }
html.compacto .topo { padding: 6px 16px; }
html.compacto .breadcrumb { padding: 5px 18px; font-size: 12px; }
html.compacto .sidebar { width: 208px; }
html.compacto .sidebar .marca { padding: 11px 12px 7px; }
html.compacto .logo-quadrado { width: 33px; height: 33px; font-size: 16.5px; border-radius: 9px; }
html.compacto .marca-nome b { font-size: 14.5px; }
html.compacto .sidebar .itens a { padding: 4px 9px; font-size: 12px; }
html.compacto a.item-solto, html.compacto .sidebar details.grupo summary { padding: 7px 10px; font-size: 12.5px; }
html.compacto .menu-nav svg { width: 16px; height: 16px; }
html.compacto .stat-card .valor { font-size: 23px; }
html.compacto .grade-2, html.compacto .grade-3, html.compacto .grade-4 { gap: 8px; }
html.compacto .campo { gap: 2px; }

/* ---- árvore de lotações (estilo patrimônio) ---- */
.arvore-linha {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-bottom: 1px solid #eef1f4;
}
.arvore-linha:hover { background: var(--azul-claro); }
.arvore-linha.sel { background: var(--azul-claro); box-shadow: inset 3px 0 0 var(--azul); }
.arvore-toggle { color: var(--cinza); width: 14px; text-align: center; user-select: none; }
.arvore-toggle.clicavel { cursor: pointer; }
.arvore-nome { font-weight: 700; color: #22292f; cursor: pointer; font-size: 13.5px; }
.arvore-editar { cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.arvore-editar:hover { background: var(--azul); color: #fff; text-decoration: none; }
.arvore-nome.inativa { color: #9aa4ad; font-weight: 500; }
.badge-cod {
    color: var(--azul); font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.pill {
    border: 1px solid var(--azul); color: var(--azul); border-radius: 12px;
    padding: 1px 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.pill.vazia { border-color: #b7c1cb; color: #8a94a0; }

/* ---- badges de quantidade (tela eSocial) ---- */
.btn-evento { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.badge-qtd {
    background: var(--azul); color: #fff; border-radius: 11px;
    padding: 1px 9px; font-size: 11.5px; font-weight: 700;
    min-width: 26px; text-align: center; line-height: 17px;
}
.badge-qtd.zero { background: #b7c1cb; }

/* ---- alertas ---- */
.alerta-ok, .alerta-erro {
    padding: 10px 14px; border-radius: 8px; margin: 0 0 14px; font-size: 14px;
}
.alerta-ok { color: var(--verde); background: #e8f6ee; border: 1px solid #bfe3cd; }
.alerta-erro { color: var(--vermelho); background: #fbeaea; border: 1px solid #ecc8c8; }

/* ---- grades utilitárias ---- */
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grade-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grade-rotulo { display: grid; grid-template-columns: auto 150px; gap: 8px 14px; align-items: center; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo input, .campo select { width: 100%; }
/* checkbox não estica: a largura total é para campo de texto e lista. Num checkbox ela virava
   uma caixa larga com o rótulo espremido e quebrando ao lado ("Tem RPPS" em duas linhas) */
.campo input[type="checkbox"] { width: auto; flex: none; }
.linha { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }

/* ---- tela de vigências (Previdência / IRRF / Sal. Família) ---- */
.vigencias-layout { display: grid; grid-template-columns: 230px 1fr; gap: 16px; align-items: start; max-width: 920px; }
.lista-vigencias { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.lista-vigencias button {
    text-align: left; padding: 7px 10px; border-radius: 6px; font-weight: 500;
    background: transparent; color: #22292f; display: flex; justify-content: space-between; gap: 6px;
}
.lista-vigencias button:hover { background: var(--azul-claro); }
.lista-vigencias button.sel { background: var(--azul); color: #fff; }
.selo-vigente {
    font-size: 10px; background: var(--verde); color: #fff;
    border-radius: 8px; padding: 1px 7px; align-self: center; font-weight: 700;
}

/* ---- login (card central estilo "Salus") ---- */
.login-pagina {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--fundo); padding: 24px;
}
.login-card {
    width: 430px; max-width: 100%; background: #fff;
    border: 1px solid var(--borda-suave); border-radius: 16px;
    border-top: 5px solid var(--azul);
    padding: 34px 38px 26px;
    box-shadow: 0 18px 50px #12365522;
}
.login-card .logo-quadrado {
    width: 60px; height: 60px; font-size: 27px; border-radius: 15px; margin: 0 auto 12px;
}
.login-card h1 { text-align: center; font-size: 25px; margin: 0; }
.login-card .produto {
    text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .18em;
    color: var(--azul); text-transform: uppercase; margin: 2px 0 6px;
}
.login-card .instrucao { text-align: center; color: var(--cinza); font-size: 13.5px; margin: 0 0 20px; }
.login-card .orgao {
    text-align: center; background: var(--azul-claro); color: var(--azul-escuro);
    border-radius: 9px; padding: 8px; font-weight: 700; margin: 0 0 16px; font-size: 14px;
}
.login-card label { display: block; margin-bottom: 4px; color: #2c3742; }
.login-card input { width: 100%; padding: 11px 13px; border-radius: 10px; font-size: 14.5px; }
.login-card .campo-login { margin-bottom: 14px; }
.login-card button[type="submit"] {
    width: 100%; padding: 12px; font-size: 15px; border-radius: 10px;
    background: linear-gradient(90deg, var(--azul-vivo), var(--azul));
    box-shadow: 0 6px 16px #2563eb40; margin-top: 4px;
}
.login-card button[type="submit"]:hover { background: var(--azul-escuro); }
.login-card .rodape { text-align: center; margin-top: 16px; font-size: 12px; color: var(--cinza-claro); }

/* ---- validação Blazor / erros ---- */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }
#blazor-error-ui { display: none; }
.blazor-error-boundary { background: #b32121; padding: 1rem; color: #fff; border-radius: 8px; }
.blazor-error-boundary::after { content: "Ocorreu um erro."; }

/* ===== resumo contábil dos relatórios de folha (RelResumoContabil) ===== */
.rc-bloco { width: 100%; border-collapse: collapse; font-size: 12px; }
.rc-bloco td { padding: 2px 8px; }
.rc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Rótulo vertical do bloco (RESUMO / PREVIDÊNCIA...). Sem writing-mode nem rotate: o
   html2canvas, que gera o PDF exportado, não os renderiza — pintava o texto na horizontal,
   espelhado e sobreposto ao conteúdo. As letras vêm empilhadas do próprio componente. */
.rc-rot { text-align: center; font-weight: 700; font-size: 10px; line-height: 1.05;
          border-right: 1px solid #999; width: 26px; padding: 4px 2px; vertical-align: middle;
          letter-spacing: 0; color: #333; }
.rc-rot span { display: block; }
.rc-rot .rc-esp { height: 6px; }
/* Quebra de página — uma classe só, para impressão E para o PDF do navegador.
   O `page-break-before` legado não é enfeite: o html2pdf lê o estilo COMPUTADO procurando
   as duas grafias, e navegador que só expõe uma delas faria o PDF sair emendado enquanto a
   impressão sai certa — que é justamente o tipo de divergência difícil de achar. */
.quebra-pagina { break-before: page; page-break-before: always; }
@media print { .quebra-pagina { break-before: page; page-break-before: always; } }

/* aviso de banco em versão anterior — some quando o cliente é reimportado */
.aviso-versao {
    margin: 8px 22px 0; padding: 9px 14px; border-radius: 8px; font-size: 13px;
    background: #fdecec; border: 1px solid #ecc8c8; color: #8a1f1f;
}
.aviso-versao a { color: #8a1f1f; font-weight: 600; margin-left: 6px; }

/* tela que falhou (ErrorBoundary do layout) */
.erro-tela {
    background: #fff; border: 1px solid var(--borda); border-left: 4px solid var(--vermelho);
    border-radius: 10px; padding: 18px 22px; max-width: 720px;
}
.erro-tela h2 { margin: 0 0 8px; color: var(--vermelho); }
.erro-tela code { background: var(--fundo); padding: 1px 6px; border-radius: 5px; }

/* Busca nas listas de seleção (ver App.razor). O painel mora no <body>, fora da árvore do
   Blazor, e por isso precisa de z-index acima de tudo — inclusive do menu do usuário (60). */
.dc-busca-sel {
    position: fixed; z-index: 200; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--borda); border-radius: 10px;
    box-shadow: 0 12px 34px #12365533; overflow: hidden;
}
.dc-busca-sel .topo {
    display: flex; align-items: center; gap: 8px; padding: 8px;
    border-bottom: 1px solid var(--borda-suave); background: #f7f9fc;
}
.dc-busca-sel .topo input {
    flex: 1; padding: 7px 10px; border: 1px solid var(--borda); border-radius: 7px;
    font: inherit; font-size: 13.5px; min-width: 0;
}
.dc-busca-sel .conta { font-size: 11.5px; color: var(--cinza-claro); white-space: nowrap; }
.dc-busca-sel .opcoes { overflow-y: auto; padding: 4px; }
.dc-busca-sel .opcao {
    padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-busca-sel .opcao.ativa { background: var(--azul); color: #fff; }
.dc-busca-sel .opcao.escolhida { font-weight: 700; }
.dc-busca-sel .opcao.escolhida::after { content: "  ✓"; }
.dc-busca-sel .opcao.ativa.escolhida { color: #fff; }
.dc-busca-sel .vazio { padding: 12px 10px; font-size: 13px; color: var(--cinza-claro); }

/* ==== aparência do menu: "colorida" (opcional; o padrão continua o sóbrio) ====
   Só mexe na MOLDURA — menu lateral, topo e trilha. O conteúdo fica igual nas duas:
   relatório e folha precisam sair iguais na tela e no papel, e a impressão já esconde
   a moldura inteira.
   Cada grupo tem a sua cor, como as pastas de favoritos do navegador. A cor vem do
   data-grupo, nunca da ordem: os grupos somem conforme o perfil de quem entrou, e
   pela ordem o Relatórios de um usuário teria a cor do Tabelas de outro. */
html.colorido {
    --menu-fundo: #dfe9fb;
    --menu-borda: #c6d8f2;
    --menu-texto: #33425a;
}
html.colorido .sidebar { background: var(--menu-fundo); border-right: none; }
html.colorido .logo-quadrado { border-radius: 13px; }
html.colorido .menu-busca input { background: #fff; border-color: transparent; border-radius: 999px; }
html.colorido .menu-titulo { color: #5f7191; }
html.colorido .menu-nav svg { color: inherit; }

/* a cor do grupo, herdada pelo cabeçalho e pela linha dos itens */
html.colorido .sidebar details.grupo { --cor: #1a73e8; --cor-texto: #fff; }
html.colorido .sidebar details.grupo[data-grupo="tabelas"] { --cor: #1e8e3e; --cor-texto: #fff; }
html.colorido .sidebar details.grupo[data-grupo="processamento"] { --cor: #e8a30c; --cor-texto: #3d2f00; }
html.colorido .sidebar details.grupo[data-grupo="relatorios"] { --cor: #8430ce; --cor-texto: #fff; }

html.colorido .sidebar details.grupo > summary {
    background: var(--cor); color: var(--cor-texto);
    border-radius: 10px; margin: 5px 0 2px; box-shadow: 0 1px 2px #0f2b5226;
}
html.colorido .sidebar details.grupo > summary:hover { filter: brightness(1.07); }
html.colorido .sidebar details.grupo > summary::after { color: var(--cor-texto); opacity: .8; }
html.colorido .sidebar details.grupo.ativo > summary {
    box-shadow: 0 3px 11px color-mix(in srgb, var(--cor) 50%, transparent);
}
html.colorido .sidebar .itens {
    margin-left: 16px; padding-left: 10px; border-left: 3px solid var(--cor);
}
html.colorido .sidebar .itens a { color: var(--menu-texto); border-radius: 8px; }
html.colorido .sidebar .itens a:hover { background: #ffffffcc; color: #1c2733; }
html.colorido .sidebar .itens a.ativo {
    background: #fff; color: var(--cor); font-weight: 700; box-shadow: 0 1px 3px #0f2b521f;
}

html.colorido a.item-solto { background: #ffffff8c; color: var(--menu-texto); border-radius: 10px; }
html.colorido a.item-solto:hover { background: #fff; }
html.colorido a.item-solto.ativo { background: #2f3b4e; color: #fff; box-shadow: 0 2px 8px #2f3b4e59; }

html.colorido .sidebar .recolher { border-top: 1px solid var(--menu-borda); color: #4a5a72; }
html.colorido .sidebar .recolher:hover { background: #ffffffa6; color: var(--azul-escuro); }

html.colorido .topo { border-bottom-color: var(--menu-borda); }
html.colorido .busca-global input { background: #eef3fb; border-radius: 999px; }
html.colorido .topo .cliente { background: #eaf1fd; border-color: var(--menu-borda); border-radius: 999px; }
html.colorido .breadcrumb { background: #f6f9fe; border-bottom-color: #e3ebf7; }

/* escolha da aparência, dentro do menu do usuário */
.escolha-aparencia { padding: 2px 4px 4px; }
.escolha-aparencia .rotulo {
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--cinza-claro); padding: 2px 6px 6px;
}
.escolha-aparencia .opcoes { display: flex; gap: 6px; }
.escolha-aparencia button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 7px 6px; border: 1px solid var(--borda); border-radius: 9px;
    background: #fff; color: var(--cinza); font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.escolha-aparencia button:hover { border-color: var(--azul-vivo); }
/* a escolha atual se marca pela classe do <html> — sem JS para sincronizar */
html:not(.colorido) .escolha-aparencia button[data-aparencia="sobrio"],
html.colorido .escolha-aparencia button[data-aparencia="colorido"] {
    border-color: var(--azul); background: var(--azul-claro); color: var(--azul-escuro);
}
/* miniatura: mostra o que o botão faz, em vez de pedir para o usuário adivinhar */
.escolha-aparencia .amostra {
    width: 100%; height: 24px; border-radius: 6px; display: flex; gap: 3px; padding: 4px;
}
.escolha-aparencia .amostra i { flex: 1; border-radius: 3px; }
.amostra.sobrio { background: #fff; border: 1px solid var(--borda-suave); }
.amostra.sobrio i { background: #ccd6e1; }
.amostra.sobrio i:first-child { background: var(--azul); }
.amostra.colorida { background: #dfe9fb; border: 1px solid #c3d6f2; }
.amostra.colorida i:nth-child(1) { background: #1a73e8; }
.amostra.colorida i:nth-child(2) { background: #1e8e3e; }
.amostra.colorida i:nth-child(3) { background: #e8a30c; }

/* ---- o tema colorido no CONTEÚDO ----
   Só o menu colorido deixava o sistema com cara de dois: moldura arredondada e viva,
   telas quadradas e cinzas. Aqui o resto acompanha — fundo levemente azulado, cartão e
   tabela com canto redondo, campo preenchido em vez de emoldurado, botão em cápsula.
   O que NÃO muda: cor de texto, tamanho, alinhamento e o que cada número quer dizer.
   O papel também não muda — a impressão desfaz o arredondado e o fundo mais abaixo. */
html.colorido {
    /* redefinir aqui basta para o fundo da página, o campo desabilitado e os hovers
       neutros andarem juntos — todos já liam --fundo */
    --fundo: #e9f0fa;
    --borda-suave: #dde7f5;
    --sombra: 0 1px 2px #1b3c6b12, 0 6px 18px #1b3c6b0f;
}
html.colorido fieldset, html.colorido .cartao, html.colorido .dash-demandas,
html.colorido .stat-card, html.colorido .grafico-card {
    border-radius: 16px; border-color: transparent;
}
html.colorido a.demanda, html.colorido .dash-alerta { border-radius: 12px; }

/* campo preenchido: a moldura de cada campo somada vira um emaranhado de linhas;
   o preenchido separa o campo do fundo sem desenhar nada */
html.colorido input:not([type="checkbox"]), html.colorido select, html.colorido textarea {
    /* preenchido, mas COM moldura: sem ela o campo some quando o fundo atras ja e claro
       -- foi o que aconteceu no bloco do TCE, azul sobre azul */
    background: #f4f8fe; border-color: #cbd9ee; border-radius: 10px;
}
html.colorido input:not([type="checkbox"]):focus, html.colorido select:focus, html.colorido textarea:focus {
    background: #fff;
}
html.colorido input:disabled, html.colorido select:disabled { background: #e4ebf6; }

html.colorido button, html.colorido .btn { border-radius: 999px; }
html.colorido .acoes-linha > .acao { border-radius: 50%; }
/* a escolha da aparência tem miniatura dentro: em cápsula ficaria torta */
html.colorido .escolha-aparencia button { border-radius: 9px; }

/* a tabela vira um cartão: é o elemento que mais ocupa a tela, e quadrada ela
   sozinha já denunciava o descompasso com o menu */
html.colorido .tabela {
    border-collapse: separate; border-spacing: 0;
    border-radius: 14px; overflow: hidden; box-shadow: var(--sombra);
}
html.colorido .tabela th { background: #e8f0fc; color: #46586f; border-bottom-color: #cfdef3; }
html.colorido .tabela tbody tr:last-child td { border-bottom: none; }
/* dentro de um cartão a sombra dobraria */
html.colorido .cartao .tabela, html.colorido fieldset .tabela { box-shadow: none; border-radius: 10px; }

html.colorido .alerta-ok, html.colorido .alerta-erro, html.colorido .aviso-versao { border-radius: 12px; }
html.colorido .erro-tela { border-radius: 16px; }

/* no papel o tema não existe: sem fundo, sem canto redondo, sem sombra */
@media print {
    html.colorido .tabela { box-shadow: none; border-radius: 0; }
    html.colorido .tabela th { background: transparent; }
    html.colorido fieldset, html.colorido .cartao { border-radius: 0; border-color: var(--borda); }
}

/* ---- bloco dos campos que o TCE exige, dentro de um editor ----
   Destaca o grupo sem esconder o campo: o fundo do bloco é claro, então os campos
   de dentro vão a BRANCO com moldura — preenchidos, como no resto do tema colorido,
   eles sumiriam contra o azul e o usuário não acha onde digitar. */
.bloco-tce {
    background: var(--azul-claro); border: 1px solid #c8d9f6;
    border-radius: 12px; padding: 12px 14px; margin: 6px 0 2px;
}
.bloco-tce .titulo {
    font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--azul-escuro); margin-bottom: 9px;
}
.bloco-tce input, .bloco-tce select, .bloco-tce textarea,
html.colorido .bloco-tce input, html.colorido .bloco-tce select, html.colorido .bloco-tce textarea {
    background: #fff; border: 1px solid #a9c2e8; border-radius: 8px; width: 100%;
}
.bloco-tce input:focus, .bloco-tce textarea:focus, .bloco-tce select:focus,
html.colorido .bloco-tce input:focus, html.colorido .bloco-tce textarea:focus {
    background: #fff; border-color: var(--azul);
}
.bloco-tce textarea { font: inherit; resize: vertical; min-height: 64px; }
.bloco-tce label.campo { margin-top: 9px; }
/* o contador de caracteres fica colado no campo, não solto no bloco */
.bloco-tce label.campo > span.subtitulo { margin-top: 3px; }

/* textarea dentro de .campo também ocupa a largura toda — a regra antiga só pegava
   input e select, e o texto longo é justamente quem mais precisa de espaço */
.campo textarea { width: 100%; }