/* =============================================================================
   Visual Munus — design system da DC Soluções
   Sidebar clara com grupos recolhíveis, cartões suaves, tabelas densas.
   Copiado do Munus (folha de pagamento) para servir de base aos demais sistemas.
   Não depende de framework: é CSS puro sobre a estrutura descrita no SKILL.md.
   ============================================================================= */
: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;
    --largura-conteudo: 1500px;
    --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; }

/*
 * Largura do conteúdo.
 *
 * 1150px sobrava meia tela em monitor largo, e as tabelas desta aplicação têm
 * uma coluna de texto corrido (a discriminação do serviço) que se espreme.
 *
 * O conteúdo NÃO é centralizado de propósito: a trilha de navegação é uma
 * barra de largura total, com fundo e borda próprios, e centralizar só o
 * <main> desalinharia o começo do texto do começo da trilha. Alinhados à
 * esquerda, os dois partem da mesma margem.
 *
 * O texto corrido continua limitado à parte: linha de 150 caracteres cansa de
 * ler, por mais espaço que haja.
 */
main.conteudo { padding: 22px 26px 50px; max-width: var(--largura-conteudo); width: 100%; }
main.conteudo > p,
main.conteudo > .alerta-ok,
main.conteudo > .alerta-erro,
main.conteudo > .alerta-atencao { max-width: 110ch; }

/* ---- 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; }

/* ---- 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."; }

/* 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; } }

/* 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; }
.nsa-mostra {
    display: inline-block; min-width: 72px; padding: 8px 12px; text-align: center;
    border: 1px solid var(--borda); border-radius: 8px; background: #f7f9fb;
    font-size: 17px; font-weight: 700; color: var(--azul); letter-spacing: .02em;
}

.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 .alerta-atencao { border-radius: 12px; }

/* 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); }
}

/* o contador de caracteres fica colado no campo, não solto no bloco */

/* 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%; }