/* =============================================================
   Carta de Serviços — estilos do sistema (portal público + admin)
   Cores e fontes vêm das variáveis CSS geradas em partials/tema.php
   ============================================================= */

body {
    font-family: var(--cs-fonte-principal);
    color: var(--cs-texto);
    background-color: var(--cs-fundo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .cs-titulo {
    font-family: var(--cs-fonte-titulos);
}

a { color: var(--cs-primaria); }
a:hover { color: color-mix(in srgb, var(--cs-primaria) 80%, black); }

/* ---------- Botões tematizados ---------- */
.btn-cs-primaria {
    background-color: var(--cs-primaria);
    border-color: var(--cs-primaria);
    color: #fff;
}
.btn-cs-primaria:hover, .btn-cs-primaria:focus {
    background-color: color-mix(in srgb, var(--cs-primaria) 85%, black);
    border-color: color-mix(in srgb, var(--cs-primaria) 85%, black);
    color: #fff;
}
.btn-cs-destaque {
    background-color: var(--cs-destaque);
    border-color: var(--cs-destaque);
    color: #fff;
}
.btn-cs-destaque:hover, .btn-cs-destaque:focus {
    background-color: color-mix(in srgb, var(--cs-destaque) 85%, black);
    border-color: color-mix(in srgb, var(--cs-destaque) 85%, black);
    color: #fff;
}
.btn-cs-contorno {
    border: 1px solid var(--cs-primaria);
    color: var(--cs-primaria);
    background: transparent;
}
.btn-cs-contorno:hover {
    background-color: var(--cs-primaria);
    color: #fff;
}

.texto-primaria { color: var(--cs-primaria) !important; }
.fundo-primaria { background-color: var(--cs-primaria) !important; }
.fundo-secundaria { background-color: var(--cs-secundaria) !important; }

.form-control:focus, .form-select:focus {
    border-color: var(--cs-primaria);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--cs-primaria) 25%, transparent);
}

/* =============================================================
   Overlay de processamento
   Fundo preto 55% + blur 3px | card branco raio 14px | fade 180ms
   ============================================================= */
.cs-overlay {
    position: fixed;
    inset: 0;
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
}
.cs-overlay.ativo {
    opacity: 1;
    visibility: visible;
}
.cs-overlay-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
    padding: 2rem 2.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    transform: scale(.96);
    transition: transform 180ms ease;
}
.cs-overlay.ativo .cs-overlay-card { transform: scale(1); }
.cs-overlay-spinner {
    width: 2.6rem;
    height: 2.6rem;
    color: var(--cs-primaria);
    border-width: .3em;
}
.cs-overlay-texto {
    color: var(--cs-primaria);
    font-weight: 700;
    font-size: 1.05rem;
}

/* =============================================================
   Portal público
   ============================================================= */
/* Cabeçalho no padrão PSS: header navy sólido com sombra,
   barra superior escurecida e navegação translúcida por cima */
.cs-cabecalho {
    background: var(--cs-primaria);
    color: #fff;
    box-shadow: 0 4px 24px color-mix(in srgb, var(--cs-primaria) 25%, transparent);
}
.cs-barra-gov {
    background: color-mix(in srgb, var(--cs-primaria) 75%, black);
    color: #fff;
    padding: 7px 0;
    font-size: .78rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.cs-barra-local { color: rgba(255, 255, 255, .6); }
.cs-barra-local i { color: var(--cs-sucesso); }
.cs-cabecalho-main {
    padding: 16px 0;
    display: flex;
    align-items: center;
    gap: 16px;
}
.cs-cabecalho .cs-logo {
    height: 52px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    flex-shrink: 0;
}
.cs-logo-box {
    width: 56px;
    height: 56px;
    background: var(--cs-sucesso);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--cs-primaria);
    flex-shrink: 0;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--cs-sucesso) 40%, transparent);
}
.cs-nav {
    background: color-mix(in srgb, black 18%, var(--cs-primaria));
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.cs-nav .nav-link {
    color: rgba(255, 255, 255, .75);
    border-bottom: 3px solid transparent;
    transition: all .15s;
}
.cs-nav .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}
.cs-nav .nav-link.active {
    color: var(--cs-alerta);
    border-bottom-color: var(--cs-alerta);
}

/* Hero no padrão PSS: gradiente navy-escuro → navy → navy-claro com
   círculos decorativos verde (topo/direita) e rosa (base/esquerda).
   Os círculos são camadas de radial-gradient (não elementos), para o
   hero dispensar overflow:hidden — que recortava a lista de sugestões. */
.cs-hero {
    background:
        radial-gradient(circle 160px at calc(100% - 100px) 100px,
            color-mix(in srgb, var(--cs-sucesso) 7%, transparent) 0 159px, transparent 160px),
        radial-gradient(circle 130px at 90px calc(100% - 50px),
            color-mix(in srgb, var(--cs-destaque) 8%, transparent) 0 129px, transparent 130px),
        linear-gradient(135deg,
            color-mix(in srgb, var(--cs-primaria) 75%, black) 0%,
            var(--cs-primaria) 55%,
            color-mix(in srgb, var(--cs-primaria) 80%, white) 100%);
    color: #fff;
    padding: 64px 0 52px;
    position: relative;
}
.cs-hero h1 { font-weight: 800; }
.cs-busca-caixa {
    max-width: 640px;
    position: relative;
}
.cs-busca-caixa .form-control {
    height: 3.4rem;
    border-radius: 12px 0 0 12px;
    border: 0;
    font-size: 1.02rem;
}
.cs-busca-caixa .btn {
    border-radius: 0 12px 12px 0;
    padding-inline: 1.4rem;
    font-weight: 700;
}
.cs-sugestoes {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
    overflow-y: auto;
    max-height: 340px;
    text-align: left;
}
.cs-sugestoes .cs-sugestoes-contador {
    padding: 6px 14px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    border-bottom: 1px solid #f0f4f8;
    position: sticky;
    top: 0;
    background: #fff;
}
.cs-sugestoes button {
    display: flex;
    width: 100%;
    gap: .6rem;
    align-items: center;
    border: 0;
    background: none;
    padding: .68rem 1rem;
    text-align: left;
    color: var(--cs-texto);
}
.cs-sugestoes button:hover { background: color-mix(in srgb, var(--cs-primaria) 8%, white); }
.cs-sugestoes .badge { font-size: .68rem; }

/* Cards de categoria */
.cs-card-categoria {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .06);
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: pointer;
    height: 100%;
    border-top: 4px solid var(--cat-cor, var(--cs-primaria));
}
.cs-card-categoria:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .12);
}
.cs-card-categoria .cs-icone {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    background-color: var(--cat-cor, var(--cs-primaria));
}
.cs-card-categoria .cs-cat-nome {
    font-size: 2em;
    font-weight: 700;
    line-height: 1.15;
    color: var(--cs-texto);
}
.cs-card-categoria .cs-cat-numero {
    font-size: 1.5em;
    font-weight: 800;
    font-family: var(--cs-fonte-titulos);
}

/* Cards de serviço */
.cs-card-servico {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}
.cs-card-servico:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}
.cs-card-servico .card-title { font-weight: 700; color: var(--cs-primaria); }
.cs-etiqueta {
    font-size: .7rem;
    font-weight: 700;
    padding: .3em .65em;
    border-radius: 20px;
    color: #fff;
}
.cs-meta {
    font-size: .82rem;
    color: color-mix(in srgb, var(--cs-texto) 62%, white);
}

/* Secretarias */
.cs-card-secretaria {
    border: 0;
    border-radius: 14px;
    border-left: 5px solid var(--cs-primaria);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}
.cs-card-secretaria:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

/* Perguntas Frequentes (accordion da home) */
.cs-faq .accordion-item {
    border: 0;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    margin-bottom: .6rem;
    overflow: hidden;
}
.cs-faq .accordion-button {
    font-weight: 600;
    color: var(--cs-primaria);
    background: #fff;
    padding: 1rem 1.2rem;
}
.cs-faq .accordion-button:not(.collapsed) {
    background: color-mix(in srgb, var(--cs-primaria) 8%, white);
    color: var(--cs-primaria);
    box-shadow: none;
}
.cs-faq .accordion-button:focus {
    border-color: var(--cs-primaria);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--cs-primaria) 25%, transparent);
}
.cs-faq .accordion-body {
    background: #fff;
    color: var(--cs-texto);
}
.cs-faq .accordion-body p:last-child { margin-bottom: 0; }

.cs-secao-titulo {
    font-weight: 800;
    color: var(--cs-primaria);
    position: relative;
    display: inline-block;
    margin-bottom: 1.6rem;
}
.cs-secao-titulo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 46%;
    height: 4px;
    border-radius: 4px;
    background: var(--cs-destaque);
}

/* Rodapé no padrão PSS */
.cs-rodape {
    background: color-mix(in srgb, var(--cs-primaria) 75%, black);
    color: rgba(255, 255, 255, .65);
    padding: 40px 0 20px;
    margin-top: 56px;
}
.cs-rodape h6 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 12px;
}
.cs-rodape a {
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
}
.cs-rodape a:hover { color: var(--cs-sucesso); }
.cs-rodape-acento { color: var(--cs-sucesso); }
.cs-rodape-seta {
    color: var(--cs-sucesso);
    font-size: .7rem;
}
.cs-rodape-nota {
    font-size: .82rem;
    opacity: .75;
}
.cs-rodape-fim {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 16px;
    margin-top: 24px;
    text-align: center;
    font-size: .78rem;
}
.cs-rodape-fim-link {
    color: rgba(255, 255, 255, .6);
    font-size: .8rem;
}
.cs-rodape-fim-link:hover { color: #fff; }

/* Link em forma de botão (rodapé) */
.cs-btn-link {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* ── Cookies LGPD (padrão PSS) ── */
.cs-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    background: color-mix(in srgb, color-mix(in srgb, var(--cs-primaria) 60%, black) 97%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 18px 24px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .3);
}
.cs-cookie-banner-conteudo {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.cs-cookie-banner-conteudo p {
    flex: 1;
    min-width: 260px;
    font-size: .85rem;
    line-height: 1.6;
}
.cs-cookie-banner-conteudo p a {
    color: var(--cs-sucesso);
    text-decoration: none;
    font-weight: 600;
}
.cs-cookie-banner-botoes { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.cs-cookie-btn-recusar {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .4);
    color: rgba(255, 255, 255, .8);
    padding: 8px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
}
.cs-cookie-btn-aceitar {
    background: var(--cs-sucesso);
    border: none;
    color: #0a4035;
    padding: 8px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
}

.cs-cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 9995;
    background: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs-cookie-modal[hidden] { display: none; }
.cs-cookie-modal-card {
    background: #fff;
    border-radius: 16px;
    max-width: 520px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.cs-cookie-modal-cabecalho {
    background: var(--cs-primaria);
    color: #fff;
    padding: 20px 24px;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cs-cookie-modal-cabecalho h5 { font-size: 1rem; font-weight: 700; }
.cs-cookie-modal-cabecalho button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}
.cs-cookie-modal-corpo { padding: 24px; }
.cs-cookie-descricao { font-size: .85rem; color: #555; margin-bottom: 20px; }
.cs-cookie-categoria {
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
}
.cs-cookie-categoria-inativa { opacity: .6; margin-bottom: 20px; }
.cs-cookie-categoria-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.cs-cookie-categoria .titulo { font-weight: 700; font-size: .875rem; color: #1e2a38; }
.cs-cookie-categoria .pill { padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.cs-cookie-categoria .pill-ativo { background: #dcfce7; color: #15803d; }
.cs-cookie-categoria .pill-inativo { background: #f1f5f9; color: #64748b; }
.cs-cookie-categoria p { font-size: .8rem; color: #6b7a8d; margin: 0; }
.cs-cookie-categoria .nomes { margin-top: 10px; font-size: .75rem; color: #94a3b8; }
.cs-cookie-modal-acoes { display: flex; gap: 10px; }
.cs-cookie-modal-acoes button { flex: 1; padding: 10px; border-radius: 8px; font-size: .875rem; }
.cs-cookie-btn-fechar {
    background: #f1f5f9;
    border: none;
    color: #475569;
    cursor: pointer;
    font-weight: 600;
}
.cs-cookie-rodape { text-align: center; margin: 14px 0 0; font-size: .78rem; }
.cs-cookie-rodape a { color: var(--cs-primaria); text-decoration: none; }

/* Ícones de redes sociais no rodapé (padrão PSS) */
.cs-rede {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff !important;
    text-decoration: none;
    font-size: 1rem;
    margin: 0 6px 8px 0;
    transition: background .2s;
}
.cs-rede-facebook:hover  { background: #1877f2; }
.cs-rede-instagram:hover { background: #e1306c; }
.cs-rede-youtube:hover   { background: #ff0000; }
.cs-rede-twitter:hover   { background: #000; }
.cs-rede-whatsapp:hover  { background: #25d366; }
.cs-rede-tiktok:hover    { background: #010101; }
.cs-rede-linkedin:hover  { background: #0a66c2; }
.cs-rede-telegram:hover  { background: #26a5e4; }

/* Detalhe do serviço (modal e página) */
.cs-detalhe-bloco h6 {
    color: var(--cs-primaria);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .4rem;
}
.cs-detalhe-bloco { margin-bottom: 1.15rem; }
.cs-detalhe-bloco p, .cs-detalhe-bloco div.cs-pre {
    margin: 0;
    white-space: pre-line;
}
.cs-info-pill {
    background: color-mix(in srgb, var(--cs-primaria) 8%, white);
    border-radius: 10px;
    padding: .65rem .9rem;
    font-size: .88rem;
    white-space: pre-line;
}

/* ---------- Menu de acessibilidade ---------- */
.cs-btn-acess {
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 0;
    background: transparent;
}
.cs-btn-acess:hover, .cs-btn-acess:focus { color: #fff; opacity: .85; }
.cs-acess-wrap { position: relative; }
.cs-acess-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .75);
    font-size: .78rem;
    border-radius: 6px;
    transition: background .2s;
}
.cs-acess-btn:hover { background: rgba(255, 255, 255, .1); }
.cs-acess-btn img { width: 22px; height: 22px; opacity: .9; }
.cs-acess-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
    min-width: 210px;
    z-index: 9000;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.cs-acess-titulo {
    padding: 8px 14px;
    font-size: .68rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid #f0f4f8;
}
.cs-acess-item {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 16px;
    font-size: .85rem;
    color: #1e2a38;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.cs-acess-item:hover { background: #f8fafc; color: #1e2a38; }
.cs-acess-item i {
    color: var(--cs-primaria);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.cs-acess-divisor { border-top: 1px solid #f0f4f8; }
.cs-acess-item-borda { border-top: 1px solid #f0f4f8; }

/* Link "Área restrita" na barra superior */
.cs-link-restrito {
    color: var(--cs-alerta, #FFD166);
    font-weight: 600;
}
.cs-link-restrito:hover, .cs-link-restrito:focus {
    color: var(--cs-alerta, #FFD166);
    opacity: .85;
    text-decoration: underline !important;
}

/* ── Alto contraste (idêntico ao portal PSS) ─────────────── */
.alto-contraste,
.alto-contraste body {
    background: #000 !important;
    color: #fff !important;
}
.alto-contraste * {
    background-color: transparent !important;
    color: #fff !important;
    border-color: #555 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
/* Fundo preto em elementos com fundo próprio */
.alto-contraste header,
.alto-contraste footer,
.alto-contraste nav,
.alto-contraste .cs-barra-gov,
.alto-contraste .cs-cabecalho,
.alto-contraste .cs-nav,
.alto-contraste .cs-hero,
.alto-contraste .cs-rodape,
.alto-contraste .card,
.alto-contraste .modal-content,
.alto-contraste .modal-header,
.alto-contraste .modal-body,
.alto-contraste .modal-footer,
.alto-contraste .alert,
.alto-contraste .badge,
.alto-contraste section,
.alto-contraste div,
.alto-contraste form,
.alto-contraste input,
.alto-contraste select,
.alto-contraste textarea,
.alto-contraste button,
.alto-contraste label,
.alto-contraste table,
.alto-contraste thead,
.alto-contraste tbody,
.alto-contraste tr,
.alto-contraste td,
.alto-contraste th {
    background-color: #000 !important;
    background-image: none !important;
}
/* Links amarelos para destaque */
.alto-contraste a,
.alto-contraste a:visited,
.alto-contraste a:hover {
    color: #ff0 !important;
    text-decoration: underline !important;
}
/* Botões com borda visível */
.alto-contraste button,
.alto-contraste .btn,
.alto-contraste input[type="submit"],
.alto-contraste input[type="button"] {
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    outline: none !important;
}
.alto-contraste button:hover,
.alto-contraste .btn:hover {
    background-color: #333 !important;
}
/* Inputs com borda branca */
.alto-contraste input,
.alto-contraste select,
.alto-contraste textarea {
    background-color: #000 !important;
    color: #fff !important;
    border: 1.5px solid #aaa !important;
}
.alto-contraste input::placeholder,
.alto-contraste textarea::placeholder {
    color: #aaa !important;
}
/* Imagens em escala de cinza */
.alto-contraste img {
    filter: grayscale(100%) contrast(1.2) !important;
    opacity: .85 !important;
}
/* Linha divisória visível */
.alto-contraste hr {
    border-color: #555 !important;
}
/* Scrollbar */
.alto-contraste ::-webkit-scrollbar-track { background: #000 !important; }
.alto-contraste ::-webkit-scrollbar-thumb { background: #555 !important; }

/* Sublinhar links */
.sublinhar-links a { text-decoration: underline !important; }

/* =============================================================
   Painel administrativo — padrão PSS (prosel)
   Variáveis derivadas da paleta do tema, como o prosel deriva
   ============================================================= */
:root {
    --c1:     var(--cs-primaria);
    --c1-dk:  color-mix(in srgb, var(--cs-primaria) 75%, black);
    --c1-dkk: color-mix(in srgb, var(--cs-primaria) 50%, black);
    --c1-lt:  color-mix(in srgb, var(--cs-primaria) 75%, white);
    --c1-ltt: color-mix(in srgb, var(--cs-primaria) 25%, white);
    --c1-xlt: color-mix(in srgb, var(--cs-primaria) 12.5%, white);
    --c2:     var(--cs-destaque);
    --c2-dk:  color-mix(in srgb, var(--cs-destaque) 75%, black);
    --c2-lt:  color-mix(in srgb, var(--cs-destaque) 25%, white);
    --c3:     var(--cs-alerta);
    --c3-dk:  color-mix(in srgb, var(--cs-alerta) 87.5%, black);
    --c3-lt:  color-mix(in srgb, var(--cs-alerta) 25%, white);
    --c4:     var(--cs-sucesso);
    --c4-dk:  color-mix(in srgb, var(--cs-sucesso) 75%, black);
    --c4-lt:  color-mix(in srgb, var(--cs-sucesso) 25%, white);

    --sidebar-w:   262px;
    --topbar-h:    62px;
    --adm-bg:      color-mix(in srgb, color-mix(in srgb, var(--cs-primaria) 30%, black) 8%, white);
    --card-shadow: 0 2px 12px rgba(38, 84, 124, .10);
}

/* Toda página do admin carrega data-pagina no body */
body[data-pagina] {
    background: var(--adm-bg);
    color: #1D3F5E;
    min-height: 100vh;
}

/* ── SIDEBAR ── */
#sidebar {
    width: var(--sidebar-w);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1040;
    background: linear-gradient(175deg, var(--c1-dkk) 0%, var(--c1-dk) 55%, var(--c1) 100%);
    display: flex;
    flex-direction: column;
    transition: width .25s ease, transform .3s;
    overflow: hidden;
    box-shadow: 3px 0 16px rgba(38, 84, 124, .18);
}
#sidebar.collapsed { width: 56px; }
#sidebar.collapsed .sidebar-footer-text,
#sidebar.collapsed .nav-section,
#sidebar.collapsed .nav-divider,
#sidebar.collapsed .nav-item a span.nav-label,
#sidebar.collapsed .sidebar-header .nav-label,
#sidebar.collapsed .sidebar-prefnome { display: none !important; }
#sidebar.collapsed .sidebar-logo-text { display: none; }
#sidebar.collapsed .sidebar-header { padding: 12px 8px; display: flex; align-items: center; justify-content: center; }
#sidebar.collapsed .sidebar-header > div { text-align: center; padding: 0; }
#sidebar.collapsed .sidebar-logo-img { max-width: 36px; max-height: 36px; }
#sidebar.collapsed .nav-item a { justify-content: center; padding: 11px 0; border-left: none; }
#sidebar.collapsed .nav-item a i { width: auto; font-size: 1rem; margin: 0; opacity: .85; }
#sidebar.collapsed .sidebar-footer { justify-content: center; }
body.sidebar-collapsed #topbar { left: 56px; }
body.sidebar-collapsed #main { margin-left: 56px; }

.sidebar-header {
    padding: 20px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    flex-shrink: 0;
    background: rgba(0, 0, 0, .12);
}
.sidebar-prefnome {
    display: block;
    margin-top: 8px;
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    letter-spacing: .01em;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    padding: 0 6px;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 2px; }

.sidebar-footer {
    padding: 10px 18px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    background: rgba(0, 0, 0, .12);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.sidebar-footer-text { font-size: .65rem; color: rgba(255, 255, 255, .45); line-height: 1.4; }
.sidebar-toggle-btn {
    background: rgba(255, 255, 255, .08);
    border: none;
    color: rgba(255, 255, 255, .6);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background .15s;
    font-size: .8rem;
    flex-shrink: 0;
}
.sidebar-toggle-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }

#sidebar .nav-section {
    padding: 16px 18px 4px;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .35);
}
#sidebar .nav-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-size: .845rem;
    transition: all .16s;
    border-left: 3px solid transparent;
}
#sidebar .nav-item a i { width: 18px; text-align: center; font-size: .88rem; opacity: .75; flex-shrink: 0; }
#sidebar .nav-item a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
    border-left-color: var(--c3);
}
#sidebar .nav-item a:hover i { opacity: 1; }
#sidebar .nav-item a.active {
    color: #fff;
    background: color-mix(in srgb, var(--cs-primaria) 35%, transparent);
    border-left-color: var(--c4);
    font-weight: 600;
}
#sidebar .nav-item a.active i { opacity: 1; color: var(--c4); }
#sidebar .nav-divider { border-top: 1px solid rgba(255, 255, 255, .07); margin: 6px 14px; }

/* ── TOPBAR ── */
#topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 0;
    height: var(--topbar-h);
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid #DDE4EE;
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 14px;
    box-shadow: 0 2px 10px rgba(38, 84, 124, .07);
    transition: left .25s ease;
}
.topbar-toggle { display: none; }
.topbar-title { font-weight: 700; color: var(--c1); font-size: 1rem; letter-spacing: -.01em; }
.topbar-spacer { flex: 1; }
.topbar-user { display: flex; align-items: center; gap: 8px; font-size: .85rem; cursor: pointer; }
.topbar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c1), var(--c1-lt));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    box-shadow: 0 2px 6px rgba(38, 84, 124, .25);
}

/* ── CONTEÚDO ── */
#main {
    margin-left: var(--sidebar-w);
    margin-top: var(--topbar-h);
    padding: 28px 28px 40px;
    min-height: calc(100vh - var(--topbar-h));
    transition: margin-left .25s ease;
}

/* ── CARDS ── */
body[data-pagina] .card {
    border: none;
    border-radius: 14px;
    box-shadow: var(--card-shadow);
}
body[data-pagina] .card-header {
    background: #fff;
    border-bottom: 1px solid #E8EEF5;
    border-radius: 14px 14px 0 0 !important;
    padding: 14px 20px;
    font-weight: 600;
    color: var(--c1-dk);
}
body[data-pagina] .card-body { padding: 20px; }

/* ── STAT CARDS ── */
.stat-card {
    border-radius: 16px;
    padding: 20px 22px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    right: -24px;
    top: -24px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}
.stat-card::after {
    content: '';
    position: absolute;
    right: 10px;
    bottom: -30px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}
.stat-card .stat-icon { font-size: 2rem; opacity: .9; }
.stat-card .stat-value { font-size: 2.2rem; font-weight: 800; font-family: var(--cs-fonte-titulos); }
.stat-card .stat-label { font-size: .8rem; opacity: .85; }
.bg-smj-blue   { background: linear-gradient(135deg, var(--c1-dk) 0%, var(--c1-lt) 100%); }
.bg-smj-green  { background: linear-gradient(135deg, var(--c4-dk) 0%, var(--c4) 100%); }
.bg-smj-gold   { background: linear-gradient(135deg, var(--c3-dk) 0%, var(--c3) 100%); }
.bg-smj-danger { background: linear-gradient(135deg, var(--c2-dk) 0%, var(--c2) 100%); }

/* ── TABELAS ── */
body[data-pagina] .table { font-size: .875rem; }
body[data-pagina] .table thead th {
    background: var(--c1-xlt);
    font-weight: 600;
    color: var(--c1-dk);
    border-bottom: 2px solid var(--c1-ltt);
    padding: 10px 14px;
    font-size: .8rem;
    letter-spacing: .01em;
}
body[data-pagina] .table td { padding: 10px 14px; vertical-align: middle; border-color: #EEF2F7; }
body[data-pagina] .table tbody tr:hover { background: var(--c1-xlt); }

/* ── BOTÕES ── */
body[data-pagina] .btn { border-radius: 8px; font-size: .85rem; font-weight: 500; }
body[data-pagina] .btn-sm { font-size: .78rem; }
body[data-pagina] .btn-cs-primaria {
    background: linear-gradient(135deg, var(--c1), var(--c1-lt));
    border: none;
    color: #fff;
}
body[data-pagina] .btn-cs-primaria:hover,
body[data-pagina] .btn-cs-primaria:focus {
    background: linear-gradient(135deg, var(--c1-lt), var(--c1));
    color: #fff;
}
body[data-pagina] .btn-cs-destaque {
    background: linear-gradient(135deg, var(--c2-dk), var(--c2));
    border: none;
    color: #fff;
}
body[data-pagina] .btn-cs-destaque:hover { filter: brightness(1.08); color: #fff; }

/* ── FORMULÁRIOS ── */
body[data-pagina] .form-control,
body[data-pagina] .form-select {
    border-radius: 8px;
    border-color: #C8D5E3;
    font-size: .875rem;
    padding: .375rem .75rem;
    background: #FAFCFF;
}
body[data-pagina] .form-control:focus,
body[data-pagina] .form-select:focus {
    border-color: var(--c1-lt);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-primaria) 12%, transparent);
    background: #fff;
}
body[data-pagina] .form-label {
    font-weight: 600;
    font-size: .82rem;
    margin-bottom: 4px;
    color: var(--c1-dk);
}
body[data-pagina] .form-check-input:checked { background-color: var(--c1); border-color: var(--c1); }
body[data-pagina] .form-check-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-primaria) 15%, transparent); }
body[data-pagina] .form-switch .form-check-input:checked { background-color: var(--c4); border-color: var(--c4); }

/* ── MODAIS ── */
body[data-pagina] .modal-content {
    border-radius: 14px;
    border: none;
    box-shadow: 0 12px 48px rgba(38, 84, 124, .22);
}
body[data-pagina] .modal-header {
    background-image: linear-gradient(135deg, var(--c1-dk), var(--c1));
    color: #fff;
    border-radius: 12px 12px 0 0;
}
body[data-pagina] .modal-header .btn-close { filter: invert(1); }
body[data-pagina] .modal-header-danger {
    background-image: linear-gradient(135deg, var(--c2-dk), var(--c2)) !important;
}
body[data-pagina] .modal-footer { border-top: 1px solid #E8EEF5; }

/* ── ALERTAS, BADGES, BREADCRUMB, PAGINAÇÃO ── */
body[data-pagina] .alert { border-radius: 10px; border: none; font-size: .875rem; }
body[data-pagina] .alert-info    { background: var(--c1-xlt); color: var(--c1-dk); }
body[data-pagina] .alert-success { background: var(--c4-lt); color: var(--c4-dk); }
body[data-pagina] .alert-warning { background: var(--c3-lt); color: #7A5000; }
body[data-pagina] .alert-danger  { background: var(--c2-lt); color: var(--c2-dk); }

body[data-pagina] .badge.bg-primary { background: var(--c1) !important; }
body[data-pagina] .badge.bg-success { background: var(--c4) !important; }
body[data-pagina] .badge.bg-warning { background: var(--c3) !important; color: var(--c1-dkk) !important; }
body[data-pagina] .badge.bg-danger  { background: var(--c2) !important; }

body[data-pagina] .breadcrumb { font-size: .82rem; background: none; padding: 0; margin-bottom: 6px; }
body[data-pagina] .breadcrumb-item a { color: var(--c1); text-decoration: none; }
body[data-pagina] .breadcrumb-item.active { color: var(--c1-dk); }

body[data-pagina] .pagination .page-link {
    border-radius: 8px !important;
    margin: 0 2px;
    font-size: .82rem;
    color: var(--c1);
    border-color: #DDE4EE;
}
body[data-pagina] .pagination .page-link:hover { background: var(--c1-xlt); border-color: var(--c1-ltt); }
body[data-pagina] .pagination .page-item.active .page-link {
    background: var(--c1);
    border-color: var(--c1);
    color: #fff;
}

.fw-600 { font-weight: 600; }

/* ── Meu Perfil ── */
.cs-perfil-foto-wrap {
    width: 120px;
    height: 120px;
    position: relative;
}
.cs-perfil-foto,
.cs-perfil-inicial {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(38, 84, 124, .25);
}
.cs-perfil-inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c1), var(--c1-lt));
    color: #fff;
    font-size: 2.6rem;
    font-weight: 800;
    font-family: var(--cs-fonte-titulos);
}
.topbar-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* ── Config. sistema: abas ── */
.cs-abas-config { border-bottom: 2px solid var(--c1-ltt); gap: 4px; }
.cs-abas-config .nav-link {
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    color: #6b7a8d;
    font-weight: 600;
    font-size: .875rem;
    padding: 10px 18px;
    margin-bottom: -2px;
}
.cs-abas-config .nav-link:hover { color: var(--c1); background: var(--c1-xlt); }
.cs-abas-config .nav-link.active {
    color: var(--c1);
    background: var(--c1-xlt);
    border-bottom-color: var(--c1);
}

/* ── Auditoria ── */
.cs-badge-acao {
    font-size: .72rem;
    font-weight: 700;
    padding: .3em .7em;
    border-radius: 20px;
    white-space: nowrap;
}
.cs-badge-acao.acao-criar     { background: color-mix(in srgb, var(--c4) 20%, white); color: var(--c4-dk); }
.cs-badge-acao.acao-atualizar { background: color-mix(in srgb, var(--c1) 14%, white); color: var(--c1-dk); }
.cs-badge-acao.acao-excluir   { background: color-mix(in srgb, var(--c2) 18%, white); color: var(--c2-dk); }
.cs-badge-acao.acao-login     { background: color-mix(in srgb, var(--c4) 20%, white); color: var(--c4-dk); }
.cs-badge-acao.acao-logout    { background: #e2e8f0; color: #475569; }
.cs-badge-acao.acao-falha     { background: color-mix(in srgb, var(--c3) 30%, white); color: #7A5000; }
.cs-badge-acao.acao-outro     { background: #eef2f6; color: #475569; }

.cs-diff {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e8eef5;
}
.cs-diff table { width: 100%; margin: 0; font-size: .84rem; }
.cs-diff th, .cs-diff td { padding: 8px 12px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
.cs-diff th { background: var(--c1-xlt); color: var(--c1-dk); text-align: left; font-weight: 600; width: 26%; }
.cs-diff .val-antes { color: var(--c2-dk); background: color-mix(in srgb, var(--c2) 6%, white); text-decoration: line-through; }
.cs-diff .val-depois { color: var(--c4-dk); background: color-mix(in srgb, var(--c4) 8%, white); }
.cs-diff tr:last-child th, .cs-diff tr:last-child td { border-bottom: 0; }

.cs-info-linha { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f0f4f8; font-size: .9rem; }
.cs-info-linha:last-child { border-bottom: 0; }
.cs-info-linha .rot { min-width: 130px; color: #8a94a6; font-weight: 600; }

/* ── RESPONSIVO ── */
@media (max-width: 768px) {
    #sidebar { transform: translateX(-100%); }
    #sidebar.show { transform: translateX(0); }
    #topbar { left: 0; }
    #main { margin-left: 0; padding: 18px; }
    .topbar-toggle { display: block; }
}

/* Amostras de cor (aparência) */
.cs-amostra-cor {
    width: 100%;
    height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .12);
    cursor: pointer;
    padding: 0;
}
.cs-paleta-sugestao {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
    cursor: pointer;
    transition: transform .12s ease;
}
.cs-paleta-sugestao:hover { transform: scale(1.15); }

.cs-preview-quadro {
    border: 1px dashed color-mix(in srgb, var(--cs-texto) 25%, white);
    border-radius: 14px;
    overflow: hidden;
}

/* Login do painel (padrão PSS) */
.cs-login-pagina {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c1-dkk) 0%, var(--c1-dk) 50%, var(--c1-lt) 100%);
}
.cs-login-pagina .login-wrapper { width: 100%; max-width: 420px; padding: 16px; }
.cs-login-pagina .login-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 36px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.cs-login-pagina .login-logo { text-align: center; margin-bottom: 28px; }
.cs-login-pagina .login-logo .logo-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--c1), var(--c1-lt));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.8rem;
    color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--c1) 40%, transparent);
}
.cs-login-pagina .login-logo .logo-img {
    max-height: 80px;
    max-width: 200px;
    object-fit: contain;
    margin: 0 auto 12px;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .2));
}
.cs-login-pagina .login-logo h4 {
    font-family: var(--cs-fonte-titulos);
    font-weight: 800;
    color: var(--c1);
    margin-bottom: 2px;
}
.cs-login-pagina .login-logo small { color: #888; font-size: .8rem; }
.cs-login-pagina .form-control {
    border-radius: 10px;
    padding: 10px 14px;
    border-color: #ddd;
    font-size: 1rem;
}
.cs-login-pagina .form-control:focus {
    border-color: var(--c1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1) 15%, transparent);
}
.cs-login-pagina .input-group-text {
    border-radius: 10px 0 0 10px;
    background: #f5f5f5;
    border-color: #ddd;
    color: #888;
}
.cs-login-pagina .btn-toggle-senha { border-radius: 0 10px 10px 0; }
.cs-login-pagina .btn-login {
    background: linear-gradient(135deg, var(--c1), var(--c1-lt));
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-weight: 600;
    font-size: 1rem;
    width: 100%;
    transition: all .2s;
}
.cs-login-pagina .btn-login:hover:not(:disabled) {
    opacity: .9;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--c1) 35%, transparent);
}
.cs-login-pagina .alert { border-radius: 10px; font-size: .875rem; }
.cs-login-pagina .login-link { color: var(--c1); font-size: .85rem; text-decoration: none; }
.cs-login-pagina .footer-text {
    text-align: center;
    color: rgba(255, 255, 255, .5);
    font-size: .75rem;
    margin-top: 20px;
}

/* =============================================================
   Escala tipográfica — mesmos tamanhos, pesos e entrelinhas
   do Portal PSS (prosel), no portal público e no painel admin
   ============================================================= */

/* ---------- Portal público ---------- */
.cs-barra-gov { font-size: .78rem; }

.cs-site-nome {
    font-family: var(--cs-fonte-titulos);
    font-weight: 900;
    font-size: 1.1rem;
    line-height: 1.2;
    margin: 0;
    color: #fff;
}
.cs-site-sub {
    font-size: .75rem;
    color: rgba(255, 255, 255, .65);
}

.cs-nav .nav-link {
    font-size: .855rem;
    font-weight: 500;
    padding: 11px 16px;
}

.cs-rodape { font-size: .84rem; }
.cs-rodape h5, .cs-rodape h6 { font-weight: 700; }
.cs-rodape .small { font-size: .78rem; }

.form-control, .form-select {
    font-size: .9rem;
    padding: 10px 14px;
}
.form-label {
    font-weight: 500;
    font-size: .86rem;
    margin-bottom: 5px;
}

.cs-etiqueta {
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 12px;
}

.cs-secao-titulo {
    font-size: 1.65rem;
    font-weight: 900;
}

.alert { font-size: .875rem; }

/* A escala tipográfica do painel administrativo está incorporada
   ao bloco "Painel administrativo — padrão PSS" acima. */

/* Modais roláveis: o <form> que envolve corpo + rodapé precisa participar
   do flex do .modal-content, senão o rodapé (botão Salvar) é clipado */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
    min-height: 0;
}

/* Utilidades */
.cursor-pointer { cursor: pointer; }
.cs-fade-in { animation: csFadeIn .25s ease; }
@keyframes csFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}