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

/* ---- 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%; }
.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; }
.rc-rot { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-weight: 700;
          font-size: 11px; border-right: 1px solid #999; width: 22px; padding: 2px; }
.quebra-pagina { break-before: page; }
@media print { .quebra-pagina { break-before: page; } }