/* CSS de plataforma — page-shell/page-card/page-action-bar/pf-topbar.
   Ver docs/DESIGN_SYSTEM_REFERENCE.md §4 e §7 (técnica de dark-mode remap).

   Variáveis `--ins-*` (não `--bs-*`) porque o tema vendorizado em
   `vendor/inspinia-theme.min.css` é um rebuild do Bootstrap com essas
   variáveis renomeadas (paleta real do tema Inspinia/Sistema de
   Contratos) — carregar `--bs-*` aqui resolveria para nada, já que esse
   arquivo não declara mais essas variáveis.

   Classe renomeada de `.app-topbar` para `.pf-topbar`: o tema vendorizado
   já define seu próprio `.app-topbar` (pensado para o layout com sidenav
   do Sistema de Contratos — `margin-left: var(--ins-sidenav-width)`, que
   quebraria nosso topo simples de navbar única, sem sidenav). */

:root {
    --pf-card-border: var(--ins-border-color);
    --pf-card-header-primary-bg: var(--ins-primary-bg-subtle);
    --pf-card-header-primary-fg: var(--ins-primary-text-emphasis);
    --pf-card-header-warning-bg: var(--ins-warning-bg-subtle);
    --pf-card-header-warning-fg: var(--ins-warning-text-emphasis);
    --pf-card-header-success-bg: var(--ins-success-bg-subtle);
    --pf-card-header-success-fg: var(--ins-success-text-emphasis);
    --pf-card-header-info-bg: var(--ins-info-bg-subtle);
    --pf-card-header-info-fg: var(--ins-info-text-emphasis);
    --pf-card-header-danger-bg: var(--ins-danger-bg-subtle);
    --pf-card-header-danger-fg: var(--ins-danger-text-emphasis);
}

/* --- Identidade institucional Ceasa-CE propagada a todo o tema — não só ao
   login (onde já era usada desde a rodada de redesign "padrão Sistema de
   Contratos"). `--ins-primary` e seus tokens derivados (`-rgb`,
   `-text-emphasis`, `-bg-subtle`, `-border-subtle`) são recalculados a
   partir da única cor-fonte (`--pf-ceasa-verde-principal`) via
   `color-mix()`, nunca hex cravado — qualquer ajuste futuro de tom muda um
   valor só. Isso substitui o teal de fábrica do tema Inspinia (`#1ab394`)
   em botões primários, links, badges, topbar e qualquer componente do tema
   vendorizado que use `--ins-primary` (é a maioria). Precisa vir depois de
   `--pf-ceasa-verde-principal` já estar declarado (bloco de auth mais
   abaixo neste arquivo também o declara — mesmo valor, sem conflito). */

:root {
    --pf-ceasa-verde-principal: #2e8b57;
    --ins-primary: var(--pf-ceasa-verde-principal);
    --ins-primary-rgb: 46, 139, 87;
    --ins-primary-text-emphasis: color-mix(in srgb, var(--pf-ceasa-verde-principal) 85%, black);
    --ins-primary-bg-subtle: color-mix(in srgb, var(--pf-ceasa-verde-principal) 12%, white);
    --ins-primary-border-subtle: color-mix(in srgb, var(--pf-ceasa-verde-principal) 40%, white);
}

[data-bs-theme=dark] {
    --ins-primary-text-emphasis: color-mix(in srgb, var(--pf-ceasa-verde-principal) 70%, white);
    --ins-primary-bg-subtle: color-mix(in srgb, var(--pf-ceasa-verde-principal) 20%, transparent);
    --ins-primary-border-subtle: color-mix(in srgb, var(--pf-ceasa-verde-principal) 55%, black);
}

/* Cinza neutro pro donut de "Carteira por situação" (Cancelado) — achado
   da Procuradoria, 2026-09-24: vermelho (`--ins-danger`) parecia "urgente",
   mas Cancelado é só um estado final, sem pendência. Variável própria, não
   reaproveita `--ins-secondary`: nesse tema vendorizado "secondary" é AZUL
   (`#1c84c6`, herdado do Inspinia de fábrica), não cinza — achado ao
   investigar essa mudança (Arquivado, que usa `--ins-secondary` no mesmo
   donut, também é azul, não cinza como parecia). Um tom só (sem variante
   `[data-bs-theme=dark]`): cinza médio-claro tem contraste suficiente
   tanto no card branco do modo claro quanto no card escuro do modo escuro. */
:root {
    --pf-cinza-cancelado: #adb5bd;
}

/* Ponto sólido da legenda do calendário (Cancelado) — reaproveita a MESMA
   variável acima, não `bg-dark`/`bg-secondary` (achado do usuário,
   2026-09-24: o ponto preto/escuro chamava mais atenção que os estados
   realmente importantes, como Vencido). */
.bg-cinza-cancelado {
    background-color: var(--pf-cinza-cancelado) !important;
}

/* Badge (pílula) do Cancelado na Agenda — mesmo achado acima, mas aqui é
   um tom "subtle" (fundo bem claro + texto cinza escuro), pro mesmo peso
   visual pastel dos outros badges de urgência (`bg-warning-subtle`,
   `bg-danger-subtle`...); `bg-dark-subtle` (usado antes) tem fundo sólido
   `#ced4da`, mais saturado que os badges pastel ao lado, por isso parecia
   ter mais destaque que os outros. Ver `agenda.models.CompromissoAgenda.
   badge_urgencia`. */
.badge-cinza-cancelado {
    background-color: color-mix(in srgb, var(--pf-cinza-cancelado) 25%, white) !important;
    color: color-mix(in srgb, var(--pf-cinza-cancelado) 75%, black) !important;
}

/* `position: sticky` propositalmente reintroduzido aqui: o tema
   vendorizado já tinha isso no `.app-topbar` original (junto com
   `.topnav { position: sticky; top: var(--ins-topbar-height) }`, ver
   vendor/inspinia-theme.min.css), mas só o `background`/`color`/`padding`
   foram portados quando a classe virou `.pf-topbar` — por isso tudo
   rolava junto (barra + menu + conteúdo), em vez de barra e menu
   ficarem fixos no topo. `min-height` fixo em `--ins-topbar-height`
   garante que o `.topnav` (que gruda logo abaixo, nesse mesmo valor)
   encoste sem gap nem sobreposição, não importa o conteúdo do topo. */

.pf-topbar {
    position: sticky;
    top: 0;
    z-index: 1001;
    min-height: var(--ins-topbar-height);
    display: flex;
    align-items: center;
    /* Mesmo gradiente cravado do Sistema de Contratos (`static/css/base.css`
       `.app-topbar`) — não deriva de `--ins-primary` porque lá também não
       deriva: é a identidade visual fixa da barra superior, igual em claro
       e escuro (o sistema de referência não tem variante dark pra ela). */
    background: linear-gradient(100deg, rgb(0, 132, 66) 0%, rgba(36, 166, 55, 1) 0%, rgba(83, 189, 191, 1) 100%);
    color: #fff;
    padding: 0.5rem 1rem;
}

.pf-topbar .navbar-brand,
.pf-topbar .nav-link {
    color: #fff;
}

/* Achado real na revisão mobile 2026-09-18: o ícone padrão do
   `.navbar-toggler` do Bootstrap é escuro (pensado pra barra clara) —
   em cima do gradiente verde da `.pf-topbar` ficava praticamente
   invisível, sem indicação nenhuma de como abrir o menu no celular. */
.pf-topbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.4);
    padding: 0.25rem 0.5rem;
}

.pf-topbar .navbar-toggler-icon {
    /* O tema vendorizado usa `--ins-navbar-toggler-icon-bg` (namespace
       próprio), não a variável padrão `--bs-*` do Bootstrap. */
    --ins-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.pf-topbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35);
}

.pf-topbar-logo {
    height: 40px;
    width: auto;
}

/* Ícone colado no nome do item de menu — achado real, 2026-08-28: o
   `.nav-link` do tema vendorizado é `display: flex`, e um flex container
   descarta nó de texto que só tem espaço em branco (é assim que
   `<i class="ti ti-home"></i> <span>Início</span>` perde o espaço entre
   ícone e rótulo — o espaço nunca vira caixa própria no layout flex).
   Afeta todo item de nível 1 e todo `dropdown-toggle` do menu (9 ocorrências
   confirmadas via inspeção de layout, não é caso isolado do item "Ajuda").
   Corrigido com margem explícita no ícone em vez de depender do espaço em
   branco do HTML — os itens *dentro* de cada dropdown já usam `.me-2`
   (margem, não nó de texto) e por isso nunca tiveram esse problema. */
.topnav .nav-link > i.ti,
.btn > i.ti:first-child:not(.me-1):not(.me-2):not(.me-3) {
    margin-right: 0.4rem;
}
/* `.btn` do tema tem o mesmo `display: inline-flex` — mesma causa, mesma
   correção (ex.: os botões "Acesso Rápido" da tela Início,
   `administracao/home.html`). `:not(.me-*)` evita dobrar o espaçamento nos
   poucos botões que já resolviam isso na marra com uma classe de margem
   explícita no ícone. */

.pf-topbar-subtitle {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.85);
}

.page-shell {
    padding-top: 0.5rem;
}

/* `--ins-card-spacer-x/-y` só são declaradas dentro da regra `.card` do
   tema vendorizado (não em `:root`) — como `.page-card` nunca leva a
   classe `.card` junto (é nosso próprio componente), qualquer `.card-body`
   Bootstrap puro aninhado dentro de um `.page-card` herdava essas
   variáveis indefinidas: `padding: var(--ins-card-spacer-y) var(--ins-card-spacer-x)`
   ficava inválido e o card-body renderizava sem nenhum espaçamento lateral
   — em toda tela de cadastro/listagem/visualização do sistema, não só nos
   forms. Redeclarar aqui, com o mesmo valor que o tema usa em `.card`
   (1.25rem), resolve na origem sem precisar tocar em cada template. */
.page-card {
    --ins-card-spacer-x: 1.25rem;
    --ins-card-spacer-y: 1.25rem;
    border: 1px solid var(--pf-card-border);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--ins-body-bg);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}

.page-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--pf-card-border);
}

.page-card-header--primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ins-primary) 14%, transparent) 0%, color-mix(in srgb, var(--ins-primary) 7%, transparent) 100%);
    color: var(--pf-card-header-primary-fg);
}

.page-card-header--warning {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ins-warning) 18%, transparent) 0%, color-mix(in srgb, var(--ins-warning) 8%, transparent) 100%);
    color: var(--pf-card-header-warning-fg);
}

.page-card-header--success {
    background: var(--pf-card-header-success-bg);
    color: var(--pf-card-header-success-fg);
}

.page-card-header--info {
    background: var(--pf-card-header-info-bg);
    color: var(--pf-card-header-info-fg);
}

.page-card-header--danger {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ins-danger) 18%, transparent) 0%, color-mix(in srgb, var(--ins-danger) 8%, transparent) 100%);
    color: var(--pf-card-header-danger-fg);
}

.page-card-icon {
    font-size: 1.25rem;
    line-height: 1;
}

/* --- Cabeçalho "ícone em círculo + título + subtítulo" das telas de
   detalhe (`base_view8.html`) — mesmo padrão do Sistema de Contratos
   (`.page-card-heading`/`.page-card-icon--primary`/`.page-card-title`/
   `.page-card-subtitle` de lá), com cor derivada de `--ins-primary` em
   vez de rgba cravado, pra acompanhar a paleta institucional Ceasa-CE
   automaticamente. Só usado em telas de visualização por enquanto — as
   demais (add/edit/list/del) continuam com o cabeçalho simples. */

.page-card--primary {
    border-color: color-mix(in srgb, var(--ins-primary) 28%, transparent);
}

.page-card--warning {
    border-color: color-mix(in srgb, var(--ins-warning) 38%, transparent);
}

.page-card-heading {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.page-card-icon--primary,
.page-card-icon--warning {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.page-card-icon--primary {
    background: var(--pf-card-header-primary-bg);
    color: var(--pf-card-header-primary-fg);
}

.page-card-icon--warning {
    background: var(--pf-card-header-warning-bg);
    color: var(--pf-card-header-warning-fg);
}

.page-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.page-card-subtitle {
    margin: 0.2rem 0 0;
    color: var(--ins-secondary-color);
    font-size: 0.78rem;
}

.page-action-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.25rem;
    font-size: 0.65rem;
    padding: 0 0.25rem;
}

/* --- Cartão de KPI/estatística — usado no Dashboard Executivo, no Mapa de
   Riscos e na tela inicial. Cor do ícone via classes utilitárias do próprio
   tema (`bg-*-subtle`/`text-*`, já definidas em vendor/inspinia-theme.min.css),
   nunca uma nova variante de cor aqui — evita duplicar o que o tema já dá. */

.kpi-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--pf-card-border);
    background: var(--ins-body-bg);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
}

.kpi-card.kpi-card--link:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1);
}

.kpi-card-icon {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.kpi-card-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
}

.kpi-card-label {
    font-size: 0.8rem;
    color: var(--ins-secondary-color);
}

/* --- Estado vazio (listagens/paineis sem dado) — troca o texto cinza solto
   por um ícone + mensagem, sem virar um componente pesado. */

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--ins-secondary-color);
}

.empty-state-icon {
    font-size: 2.5rem;
    opacity: 0.35;
    display: block;
    margin-bottom: 0.5rem;
}

/* --- Tela de login (auth-shell) — card centralizado (não tela cheia),
   mesma proporção do login real do Sistema de Contratos da Ceasa-CE
   (max-width 800px — o próprio CSS de lá tem o comentário "Diminuído para
   não ficar tão gigante", exatamente o ajuste feito aqui também). Cor
   institucional real da Ceasa (`--pf-ceasa-verde-principal`, já propagado
   ao tema inteiro no topo deste arquivo; `-escuro`/`-azul-destaque` só são
   usados aqui, no login), extraída de `contratos/static/css/custom.css`.
   Redesign 2026-08-14 (identidade SAJ): mantém a estrutura/cores oficiais
   e as duas aparições da logo da Ceasa-CE (barra superior + painel de
   marca), só refina hierarquia tipográfica, profundidade e acabamento. */

:root {
    --pf-ceasa-verde-escuro: #1b5334;
    --pf-ceasa-azul-destaque: #4682b4;
    --pf-ceasa-dourado: #d4af37;
}

/* --- Cabeçalho institucional acima do card de login — mesma faixa
   verde/degradê usada no topo das telas de autenticação do Sistema de
   Contratos (classe `.verde_ceasa` de lá), com a logo oficial da Ceasa-CE
   centralizada. Sombra inferior separa a faixa do fundo com textura logo
   abaixo, em vez de um corte seco entre as duas áreas. */

.pf-auth-header {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(36, 166, 55);
    background: linear-gradient(90deg, rgba(36, 166, 55, 1) 0%, rgba(36, 166, 55, 1) 19%, rgba(83, 189, 191, 1) 100%);
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 1;
}

.pf-auth-header img {
    max-height: 78px;
    width: auto;
    filter: drop-shadow(0 0.15rem 0.3rem rgba(0, 0, 0, 0.15));
}

.auth-shell {
    /* Igual ao Sistema de Contratos (`.container` com `min-height: 80vh`
       logo abaixo do `.verde_ceasa`, sem descontar a altura do header) —
       antes descontava 110px daqui, o que empurrava o card pra mais perto
       da barra verde do que lá. Fundo com textura sutil (grade + wash
       diagonal nas cores institucionais) em vez de uma área vazia — dá
       profundidade sem competir com o card. */
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--pf-ceasa-verde-principal) 10%, transparent) 0%, transparent 45%),
        radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--pf-ceasa-azul-destaque) 10%, transparent) 0%, transparent 45%),
        linear-gradient(180deg, var(--ins-body-bg) 0%, color-mix(in srgb, var(--pf-ceasa-verde-principal) 4%, var(--ins-body-bg)) 100%);
}

.auth-mobile-brand {
    display: none;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.auth-mobile-brand img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.15);
}

.auth-mobile-brand-name {
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: 0.03em;
    color: var(--pf-ceasa-verde-escuro);
}

.auth-card {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 800px;
    margin: 1rem;
    background: var(--ins-body-bg);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.18), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
    border: 1px solid color-mix(in srgb, var(--pf-ceasa-verde-principal) 12%, transparent);
}

.auth-brand-panel {
    position: relative;
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.75rem 2.5rem;
    color: #fff;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(150deg, var(--pf-ceasa-verde-principal) 0%, var(--pf-ceasa-verde-escuro) 100%);
}

.auth-brand-watermark {
    position: absolute;
    top: -1.5rem;
    right: -1.5rem;
    font-size: 10rem;
    color: rgba(255, 255, 255, 0.07);
    transform: rotate(12deg);
    pointer-events: none;
}

.auth-brand-logo {
    position: relative;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.9);
    padding: 5px;
    background-color: #fff;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.2);
    margin-bottom: 0.35rem;
}

.auth-brand-name {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.auth-brand-acronym {
    font-weight: 800;
    font-size: 2.1rem;
    line-height: 1;
    letter-spacing: 0.06em;
}

.auth-brand-fullname {
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    opacity: 0.88;
    max-width: 15rem;
}

.auth-brand-features {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0.9rem 0 0;
    width: 100%;
    text-align: left;
    font-size: 0.85rem;
}

.auth-brand-features li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.55rem;
}

.auth-brand-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.auth-brand-feature-icon i {
    color: var(--pf-ceasa-dourado);
    font-size: 0.95rem;
}

.auth-form-panel {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.75rem;
    min-width: 280px;
}

.auth-form-overline {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--pf-ceasa-verde-principal);
    margin-bottom: 0.35rem;
}

.auth-form-panel h3 {
    color: var(--pf-ceasa-verde-escuro);
}

/* Verde escuro fixo perde contraste no card quase-preto do dark mode
   — só nesse contexto, usa a cor de heading do próprio tema. */
[data-bs-theme=dark] .auth-form-panel h3 {
    color: var(--ins-body-color);
}

.auth-form-card .input-group-text {
    background-color: #f8f9fa;
    border-right: none;
    color: var(--pf-ceasa-verde-principal);
}

/* Mesma lógica do h3 acima: o cinza-claro fixo do vendor cria um "degrau"
   claro colado num campo escuro — unifica com o fundo do próprio input. */
[data-bs-theme=dark] .auth-form-card .input-group-text {
    background-color: var(--ins-body-bg);
}

.auth-form-card .form-control {
    border-left: none;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.auth-form-card .form-control:focus {
    box-shadow: none;
    border-color: var(--pf-card-border);
}

.auth-form-card .btn-login {
    background: linear-gradient(45deg, var(--pf-ceasa-verde-principal), var(--pf-ceasa-azul-destaque));
    border: none;
    color: #fff;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.auth-form-card .btn-login:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 0.5rem 1rem color-mix(in srgb, var(--pf-ceasa-verde-principal) 35%, transparent);
    color: #fff;
}

.auth-form-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pf-card-border);
}

.auth-form-footer .auth-form-system {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--pf-ceasa-verde-principal);
}

@media (max-width: 767.98px) {
    .auth-brand-panel {
        display: none;
    }

    .auth-mobile-brand {
        display: flex;
    }
}

.fade-in-up {
    animation: pf-fade-in-up 0.4s ease-out;
}

@keyframes pf-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Divisor com rótulo no meio (ex.: "Objeto" entre os campos de
   identificação e a descrição longa) — mesmo padrão do Sistema de
   Contratos (`.container_hr`/`.hr1`/`.hr2` de lá), portado ao pé da
   letra por ser puramente estrutural (sem cor cravada). */

.container_hr {
    display: flex;
    align-items: center;
}

.hr1 {
    flex-grow: 1;
    border-top: 1px solid var(--pf-card-border);
    margin-right: 10px;
}

.hr2 {
    flex-grow: 1;
    border-top: 1px solid var(--pf-card-border);
    margin-left: 10px;
}

/* --- Seção colapsável de tela de detalhe (Workflow/Documentos/Audiências
   etc. em Processo Administrativo/Judicial) — <details>/<summary> nativo do
   HTML5, sem JS/lib nova (mesmo padrão do Sistema de Contratos, lá chamado
   `.e-n-accordion-item`/`.e-n-surface`, ver docs/DESIGN_SYSTEM_REFERENCE.md).
   Substitui os cards sempre abertos empilhados (uma tela de processo tinha
   até 9 seções, todas expandidas ao mesmo tempo — muito scroll, zero
   hierarquia visual). Aberto por padrão só quando o autor do template
   inclui o atributo `open` no `<details>`. */

.pf-section {
    margin-bottom: 0.85rem;
}

.pf-section-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--pf-card-border);
    border-radius: 0.6rem;
    background: var(--ins-body-bg);
    box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.04);
    font-weight: 600;
}

.pf-section-summary::-webkit-details-marker,
.pf-section-summary::marker {
    display: none;
    content: "";
}

.pf-section-summary .ti-chevron-right {
    margin-left: auto;
    transition: transform 0.15s ease;
    color: var(--ins-secondary-color);
}

.pf-section[open] > .pf-section-summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.pf-section[open] > .pf-section-summary .ti-chevron-right {
    transform: rotate(90deg);
}

.pf-section-body {
    padding: 1.1rem;
    border: 1px solid var(--pf-card-border);
    border-top: none;
    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
    background: var(--ins-body-bg);
}

/* --- Cartão de estatística com barra colorida à esquerda — datas/valores
   de destaque no topo de uma tela de detalhe. Cor via classes utilitárias
   do próprio tema (`border-{cor}`/`text-{cor}`), sem variante nova aqui. */

.pf-stat-card {
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    background: var(--ins-tertiary-bg);
    border-left-width: 4px;
    height: 100%;
}

/* --- Avatar de iniciais do usuário — menu de usuário no topbar. */

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

/* --- Kanban de Prazos Processuais (Home, painel pessoal) — 5 colunas no
   desktop, 3 em tablet, 1 em mobile (ver docs/arquitetura/
   PRAZOS_PROCESSUAIS_KANBAN.md §11.5). Cor do cartão vem de `badge_urgencia`
   (mesmas classes `bg-*-subtle`/`text-*` do tema, nenhuma paleta nova). */

.kanban-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(220px, 1fr));
    gap: 1rem;
}

@media (max-width: 1200px) {
    .kanban-board {
        grid-template-columns: repeat(3, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    .kanban-board {
        grid-template-columns: 1fr;
    }
}

.kanban-coluna {
    background: var(--ins-tertiary-bg);
    border-radius: 0.75rem;
    padding: 0.75rem;
    min-height: 110px;
}

.kanban-coluna-titulo {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ins-secondary-color);
    margin-bottom: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kanban-coluna.kanban-coluna--dragover {
    outline: 2px dashed var(--ins-primary);
    outline-offset: -4px;
}

.kanban-card {
    background: var(--ins-body-bg);
    border: 1px solid var(--pf-card-border);
    border-radius: 0.6rem;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.6rem;
    box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.05);
    cursor: grab;
}

.kanban-card:active {
    cursor: grabbing;
}

.kanban-card.kanban-card--arrastando {
    opacity: 0.4;
}

.kanban-card-descricao {
    font-size: 0.83rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kanban-card-processo {
    font-size: 0.72rem;
    color: var(--ins-secondary-color);
    margin-bottom: 0.4rem;
}

/* --- Calendário mensal da Agenda (`agenda/agenda_calendario.html`) — grade
   própria no lugar da `table-bordered` genérica anterior (achado do
   usuário: "muito monótono, sem vida"). Destaque pro dia atual, fim de
   semana diferenciado, ícone por tipo de compromisso (ver
   `CompromissoAgenda.icone_tipo`) — cor continua vindo só de
   `badge_urgencia` (`bg-*-subtle`/`text-*` do tema), nenhuma paleta nova. */

.calendario-wrap {
    overflow-x: auto;
}

.calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(132px, 1fr));
    gap: 0.5rem;
    min-width: 940px;
}

.calendario-cabecalho {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ins-secondary-color);
    padding-bottom: 0.5rem;
}

.calendario-cabecalho--fds {
    color: var(--ins-primary);
}

.calendario-dia {
    background: var(--ins-body-bg);
    border: 1px solid var(--pf-card-border);
    border-radius: 0.65rem;
    padding: 0.5rem;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: box-shadow 0.15s ease;
}

.calendario-dia:not(.calendario-dia--vazio):hover {
    box-shadow: 0 0.25rem 0.6rem rgba(0, 0, 0, 0.08);
}

.calendario-dia--vazio {
    background: transparent;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--pf-card-border) 60%, transparent);
}

.calendario-dia--fds:not(.calendario-dia--vazio) {
    background: color-mix(in srgb, var(--ins-tertiary-bg) 45%, var(--ins-body-bg));
}

.calendario-dia--hoje {
    border-color: var(--ins-primary);
    border-width: 2px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ins-primary) 15%, transparent);
}

.calendario-numero {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ins-secondary-color);
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.calendario-dia--hoje .calendario-numero {
    background: var(--ins-primary);
    color: #fff;
}

.calendario-compromissos {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.calendario-compromisso {
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 0.4rem;
    padding: 0.2rem 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    min-width: 0;
}

.calendario-compromisso .text-truncate {
    min-width: 0;
}

.calendario-mais {
    font-size: 0.68rem;
    color: var(--ins-secondary-color);
    font-weight: 600;
    padding: 0 0.2rem;
}

.calendario-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    font-size: 0.75rem;
    color: var(--ins-secondary-color);
}

.calendario-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.calendario-legenda-ponto {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    display: inline-block;
}

/* --- Formulário compacto — layout mais denso para formulários com muitos
   campos (ex. Processo Judicial), sem reduzir a altura dos campos em si,
   só o espaço ao redor deles. `.pf-field`/`.pf-field-label` são classes
   novas (não redefinem `.mb-3`/`.form-label` do Bootstrap, que continuam
   com seu valor padrão em todo o resto do sistema) — por isso não
   precisam de nenhum wrapper/ancestral: os campos que usam essas classes
   ficam compactos, o resto do sistema não é afetado. `base_add.html`/
   `base_edit.html` já envolvem `{% block form %}` num único `<div
   class="row">` — colunas aqui continuam filhas diretas dele, sem `row`
   aninhado (quebraria o cálculo de largura do grid). */

.pf-field {
    margin-bottom: 0.25rem;
}

.pf-field-label {
    margin-bottom: 0.1rem;
    font-size: 0.82rem;
    line-height: 1.2;
}

/* Segunda rodada de compactação (2026-08-28): o ganho vem do espaço ENTRE
   os elementos (margens do campo/label/divisor), nunca da altura do input
   em si — `.form-control`/`.form-select` continuam com o padding padrão
   do Bootstrap (~38-40px), só o espaço ao redor encolheu. Medido via
   Playwright antes/depois (bounding boxes reais, não estimativa) — cada
   divisor de seção custava ~46px de espaço ao redor (margem do campo
   anterior + margem própria + altura da linha de texto); o textarea de
   Assunto renderizava 95px porque `min-height` é só um piso — o atributo
   HTML `rows="4"` do widget (compartilhado com outros 4 tipos de Demanda,
   não alterado) já pedia uma altura maior, então só `height` (não
   `min-height`) consegue de fato reduzir abaixo disso. */
.pf-section-divider {
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    line-height: 1.2;
}

.pf-section-divider strong {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

/* `.hr1`/`.hr2` (definidos em `.container_hr` acima) herdam o `margin:
   1rem 0` padrão do `<hr>` do Bootstrap — nunca zerado ali porque aquele
   componente é compartilhado com as telas de detalhe (view.html de vários
   apps), onde esse respiro é desejado. Aqui dentro do divisor compacto,
   zerar só a margem vertical (a horizontal de 10px continua vindo de
   `.hr1`/`.hr2`) — é essa margem escondida, não o `line-height` do texto,
   que inflava a altura do divisor. */
.pf-section-divider .hr1,
.pf-section-divider .hr2 {
    margin-top: 0;
    margin-bottom: 0;
}

/* Classe à parte (não `.pf-field textarea` genérico): esse encolhimento só
   faz sentido pra campo secundário curto tipo "Assunto" de Processo
   Judicial — em outros formulários (Fundamentação/Conclusão/Pergunta/
   Recomendações/Descrição do Objeto) o textarea é o conteúdo principal e
   precisa do tamanho maior que o form já define. Aplicada no `<div>` que
   envolve o campo (não dá pra colocar classe direto no `<textarea>`
   renderizado por `{{ form.objeto }}` sem mexer no widget em forms.py). */
.pf-field-textarea-compact textarea.form-control {
    height: 3.4rem;
}

/* --- Seletor de Partes (Polo Ativo/Passivo, Processo Judicial) — busca
   assíncrona + chips removíveis sobre um `<select multiple>` escondido
   (ver `selecao_partes.js`). Resultado da busca flutua por cima do
   conteúdo (`position: absolute`) em vez de empurrar os campos abaixo
   enquanto o usuário digita. */

.pf-partes-picker {
    border: 1px solid var(--pf-card-border);
    border-radius: 0.5rem;
    padding: 0.4rem;
    background: var(--ins-tertiary-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pf-partes-picker:focus-within {
    border-color: var(--ins-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ins-primary) 18%, transparent);
}

.pf-partes-busca-wrap {
    position: relative;
}

.pf-partes-resultados {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 0.25rem);
    z-index: 20;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15);
}

.pf-partes-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.pf-partes-chips:empty {
    margin-top: 0;
}

.pf-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.35rem 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--ins-primary-bg-subtle);
    color: var(--ins-primary-text-emphasis);
    border: 1px solid var(--ins-primary-border-subtle);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
}

.pf-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: transparent;
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}

/* --- Manual de Ajuda (administracao/ajuda.html) — página única com índice
   lateral fixo ao rolar; só essa tela usa estas classes. */

.pf-ajuda-toc {
    position: sticky;
    top: 1rem;
}

.pf-ajuda-toc .list-group-item {
    border: none;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 0.4rem;
}

.pf-ajuda-toc .list-group-item:hover {
    background: var(--ins-primary-bg-subtle);
}

.pf-ajuda-secao {
    scroll-margin-top: 1rem;
}

.pf-ajuda-secao + .pf-ajuda-secao {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pf-card-border);
}

.pf-ajuda-secao-titulo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.pf-ajuda-secao-titulo i {
    font-size: 1.15rem;
    color: var(--ins-primary);
}

.pf-ajuda-secao-titulo h5 {
    margin: 0;
}

.pf-chip-remove:hover,
.pf-chip-remove:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, var(--ins-primary) 20%, transparent);
    outline: none;
}

/* ==========================================================================
   Refinamento visual 2026-09 — pedido do usuário pra elevar o acabamento do
   sistema inteiro (referência de qualidade: araut.com.br, não pra copiar,
   só pro nível de capricho). Escopo deliberadamente contido ao que já
   existe: tipografia com mais caráter, movimento com propósito (nunca
   decorativo à toa), consistência de forma — nada de reescrever telas ou
   trocar a base Bootstrap/Django por um framework novo (o sistema é um
   painel de gestão de processos jurídicos em produção real, não uma
   landing page — ver docs internas do redesign pra essa distinção).
   ========================================================================== */

/* --- Tipografia: dupla com mais caráter que o sans-serif genérico do tema
   Inspinia. "Public Sans" (corpo) é a mesma fonte cívica já usada nos
   documentos institucionais do sistema — legibilidade alta, registro
   sério, apropriado pro contexto de governo/jurídico. "Plus Jakarta Sans"
   (títulos/números/botões) dá presença sem parecer artificial. Nunca
   mexe no `--ins-font-sans-serif` original (ainda serve de fallback caso
   a fonte não carregue a tempo). */

:root {
    --pf-font-display: 'Plus Jakarta Sans', var(--ins-font-sans-serif);
    --pf-font-body: 'Public Sans', var(--ins-font-sans-serif);
}

body {
    font-family: var(--pf-font-body);
}

h1, h2, h3, h4, h5, h6,
.page-card-title,
.page-card-subtitle,
.navbar-brand,
.auth-brand-acronym,
.auth-form-panel h3,
.pf-topbar-subtitle,
.btn,
.kpi-card-value {
    font-family: var(--pf-font-display);
}

h1, h2, h3, h4 {
    letter-spacing: -0.01em;
}

.kpi-card-value {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* --- Movimento com propósito: entrada suave dos blocos principais da tela
   (controlada por `interacoes.js`, IntersectionObserver — nunca listener
   de scroll cru). Sem JS ou com `prefers-reduced-motion: reduce`, o
   conteúdo aparece direto no estado final — a classe `.pf-entrada` só
   existe se o próprio script a adicionar, então nunca deixa nada
   permanentemente invisível. */

@media (prefers-reduced-motion: no-preference) {
    .pf-entrada {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .pf-entrada.pf-entrada-visivel {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Feedback tátil consistente em botões/links de ação — "empurrão"
   físico sutil no clique, mesmo critério já usado em `.kpi-card--link`. */

.btn:active {
    transform: translateY(1px) scale(0.98);
}

.btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* --- Topbar: gradiente com mais profundidade (3 paradas em vez de 2) e uma
   varredura de brilho sutil, única, ao carregar a tela — nunca em loop
   (loop infinito num elemento sempre visível cansaria, ver seção de
   `MOTION_INTENSITY` moderado). */

.pf-topbar {
    background: linear-gradient(100deg,
        rgb(0, 110, 60) 0%,
        rgba(36, 166, 55, 1) 45%,
        rgba(83, 189, 191, 1) 100%);
    /* NUNCA declarar `position`/`top` aqui de novo: essa é a MESMA regra
       `.pf-topbar` do topo do arquivo (linha ~66), que reintroduziu
       `position: sticky; top: 0` de propósito. CSS não faz merge por
       intenção — a última declaração da mesma propriedade, na cascata,
       vence — então um `position: relative` aqui (como havia antes)
       SILENCIOSAMENTE desfazia o sticky logo acima.

       Também NUNCA voltar a colocar `overflow: hidden` aqui: o
       dropdown do usuário (Meu perfil/Trocar senha/Sair, ver
       includes/menu_user.html) e o de notificações moram DENTRO desta
       mesma `<header class="pf-topbar">` (includes/header.html) e
       abrem por baixo do toggle, ultrapassando a altura fixa da barra
       (`min-height: var(--ins-topbar-height)`) — um `overflow: hidden`
       no container corta essa parte do menu, deixando o botão "Sair"
       invisível/inclicável. Achado real, 2026-09-21: usuário logou mas
       não conseguiu sair. O `::after` do brilho não precisa desse
       clip: a barra já ocupa a largura toda do `container-fluid`, e a
       varredura sai de -30% a 130% só na horizontal — sem overflow
       vertical, que é o único caso em que esse corte faria falta. */
}

@media (prefers-reduced-motion: no-preference) {
    .pf-topbar::after {
        content: "";
        position: absolute;
        top: 0;
        left: -30%;
        width: 30%;
        height: 100%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
        animation: pf-topbar-brilho 1.6s ease-out 0.3s 1;
        pointer-events: none;
    }
}

@keyframes pf-topbar-brilho {
    to { left: 130%; }
}

.topnav .nav-link {
    position: relative;
    transition: color 0.15s ease;
}

.topnav .nav-link::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.1rem;
    height: 2px;
    border-radius: 2px;
    background: var(--ins-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.topnav .nav-link:hover::after,
.topnav .nav-link.active::after {
    transform: scaleX(1);
}

/* --- Login: fundo com leve movimento ambiente (dois halos de cor
   deslizando devagar) — nunca chamativo, só dá sensação de "vivo" numa
   tela que hoje é só gradiente parado. Substitui o `radial-gradient`
   estático anterior por dois pseudo-elementos animáveis, mantendo o
   mesmo resultado visual em repouso. */

.auth-shell {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--ins-body-bg) 0%, color-mix(in srgb, var(--pf-ceasa-verde-principal) 4%, var(--ins-body-bg)) 100%);
}

.auth-shell::before,
.auth-shell::after {
    content: "";
    position: absolute;
    width: 46vw;
    height: 46vw;
    max-width: 620px;
    max-height: 620px;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.auth-shell::before {
    top: -12%;
    left: -10%;
    background: color-mix(in srgb, var(--pf-ceasa-verde-principal) 16%, transparent);
}

.auth-shell::after {
    bottom: -16%;
    right: -8%;
    background: color-mix(in srgb, var(--pf-ceasa-azul-destaque) 16%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .auth-shell::before {
        animation: pf-auth-halo-a 16s ease-in-out infinite;
    }

    .auth-shell::after {
        animation: pf-auth-halo-b 18s ease-in-out infinite;
    }
}

@keyframes pf-auth-halo-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(4vw, 3vh) scale(1.08); }
}

@keyframes pf-auth-halo-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-3vw, -4vh) scale(1.1); }
}

.auth-card {
    position: relative;
    z-index: 1;
}

/* Watermark do brasão ganha uma leve rotação contínua, quase imperceptível
   — textura de fundo do painel de marca, não decoração em primeiro plano. */
@media (prefers-reduced-motion: no-preference) {
    .auth-brand-watermark {
        animation: pf-watermark-flutuar 12s ease-in-out infinite;
    }
}

@keyframes pf-watermark-flutuar {
    0%, 100% { transform: rotate(12deg) translateY(0); }
    50% { transform: rotate(9deg) translateY(-8px); }
}

/* --- Saudação personalizada do Dashboard (`kpi-card` continua igual) --- */

.pf-saudacao-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ins-primary);
}

.pf-saudacao-titulo {
    font-weight: 800;
    letter-spacing: -0.015em;
    margin: 0.15rem 0 0.35rem;
}

/* --- Tiles de Acesso Rápido (tela Início) --- */

.pf-quick-tile {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.85rem;
    height: 100%;
    border-radius: var(--ins-border-radius, 0.5rem);
    border: 1px solid var(--ins-border-color);
    background: var(--ins-body-bg, #fff);
    color: var(--ins-body-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.pf-quick-tile:hover,
.pf-quick-tile:focus-visible {
    transform: translateY(-2px);
    border-color: var(--pf-ceasa-verde-principal);
    box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--pf-ceasa-verde-principal) 55%, transparent);
    color: var(--pf-ceasa-verde-principal);
}

.pf-quick-tile:active {
    transform: translateY(0) scale(0.98);
}

.pf-quick-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--pf-ceasa-verde-principal) 12%, transparent);
    color: var(--pf-ceasa-verde-principal);
    font-size: 1.05rem;
    transition: background 0.18s ease;
}

.pf-quick-tile:hover .pf-quick-tile-icon {
    background: color-mix(in srgb, var(--pf-ceasa-verde-principal) 20%, transparent);
}

/* ==========================================================================
   Menu lateral (2026-09) — layout alternativo ao `.pf-topbar`/`.topnav`,
   escolhido pelo usuário (ver includes/header.html, layout-menu.js e
   config.js). Os dois layouts ficam sempre os dois no HTML; só a raiz do
   documento decide qual aparece — `:root[data-pf-nav="lateral"]` esconde
   o menu de topo e mostra o lateral, `:root:not(...)` (o padrão, sem o
   atributo ou "topo") faz o inverso. Isso é o MESMO mecanismo do tema
   claro/escuro (`data-bs-theme`), só que pra navegação em vez de cor. */
:root:not([data-pf-nav="lateral"]) .pf-nav-lateral {
    display: none;
}
:root[data-pf-nav="lateral"] .pf-nav-topo {
    display: none;
}
:root[data-pf-nav="lateral"] main.app-content {
    margin-left: var(--pf-sidebar-width);
    transition: margin-left 0.15s ease;
}

/* Sidebar recolhida (2026-09) — estado lido de `data-pf-sidebar-collapsed`
   na raiz do documento, NUNCA de uma classe posta em `.pf-sidebar` via JS
   depois da carga: `config.js` seta esse atributo no `<html>` antes de
   `<body>` sequer começar a ser interpretado (mesma técnica de
   `data-pf-nav`/`data-bs-theme`) — assim o CSS já nasce aplicado no
   primeiro paint, sem o sidebar "nascer" largo e encolher um instante
   depois na frente do usuário. Preferência é só client-side
   (`localStorage`, chave `pf-sidebar-collapsed`), igual ao tema e ao modo
   de navegação — ver layout-menu.js/config.js. */
:root {
    --pf-sidebar-width: 264px;
    --pf-sidebar-collapsed-width: 76px;
}

.pf-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--pf-sidebar-width);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    color: #eafbf1;
    background: linear-gradient(180deg, var(--pf-ceasa-verde-escuro), color-mix(in srgb, var(--pf-ceasa-verde-escuro) 75%, black));
    transition: width 0.15s ease;
}

.pf-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem;
    min-height: var(--ins-topbar-height);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Único elemento com `overflow-y: auto` — NUNCA mover pro `.pf-sidebar`
   inteiro (ver comentário do mesmo assunto em includes/header.html): o
   flyout do modo recolhido é filho daqui dentro, e `position: fixed`
   só escapa da borda de QUEM tem o `overflow` — se fosse o `<aside>`
   a ter `overflow-y: auto`, o flyout nasceria cortado antes de chegar a
   escapar de coisa nenhuma. */
.pf-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.pf-sidebar-nav {
    padding: 0.6rem;
}

.pf-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pf-sidebar-item {
    position: relative;
}

.pf-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: 9px;
    font-family: var(--pf-font-display);
    font-size: 0.86rem;
    font-weight: 600;
    color: #dff2e6;
    text-decoration: none;
    cursor: pointer;
}

.pf-sidebar-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.pf-sidebar-item.active > .pf-sidebar-link {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.pf-sidebar-chevron {
    margin-left: auto;
    font-size: 0.85rem;
    opacity: 0.75;
    transition: transform 0.15s ease;
}

.pf-sidebar-link[aria-expanded="true"] .pf-sidebar-chevron {
    transform: rotate(180deg);
}

.pf-sidebar-submenu {
    list-style: none;
    margin: 2px 0 2px 1.6rem;
    padding: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.pf-sidebar-sublink {
    display: block;
    padding: 0.42rem 0.7rem;
    font-size: 0.8rem;
    color: #cfe9da;
    text-decoration: none;
    border-radius: 0 8px 8px 0;
}

.pf-sidebar-sublink:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.pf-sidebar-sublink.active {
    color: #fff;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.1);
}

.pf-sidebar-foot {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding: 0.5rem;
}

.pf-sidebar-collapse-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.5rem;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: #dff2e6;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.pf-sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Faixa superior do modo lateral — cuidado: NUNCA `overflow: hidden` aqui.
   É a mesma lição do `.pf-topbar` (comentário acima, achado 2026-09-21):
   o dropdown de notificações e o menu do usuário abrem por baixo do
   toggle e ultrapassam a altura da faixa. */
.pf-topstrip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    min-height: var(--ins-topbar-height);
    background: var(--ins-body-bg, #fff);
    border-bottom: 1px solid var(--ins-border-color, #e5e9ec);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.pf-sidebar-mobile-toggle {
    padding: 0.25rem 0.4rem;
}

.pf-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
}

@media (max-width: 991.98px) {
    :root[data-pf-nav="lateral"] main.app-content {
        margin-left: 0;
    }
    .pf-sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 0 10px 30px -18px rgba(20, 40, 30, 0.45);
    }
    .pf-sidebar.mobile-open {
        transform: translateX(0);
    }
    .pf-sidebar-backdrop.show {
        display: block;
    }
}

/* "Recolher" (rail de ícones + flyout) é recurso só de desktop — no
   mobile a gaveta é sempre a versão por extenso, então TODO o bloco do
   modo recolhido fica dentro deste `@media` único; sem isso, precisaria
   de um segundo bloco no mobile só pra ANULAR cada regra daqui (tentativa
   anterior, descartada: uma delas usava `:hover`/`:focus-within` com
   especificidade MAIOR que a regra de cancelamento — o acordeão do
   mobile abria e fechava sozinho sempre que o mouse ficava parado em
   cima do item clicado, achado real testando no navegador). Escopar a
   causa (só existir em telas grandes), não o sintoma, evita esse tipo de
   corrida de especificidade CSS por completo. */
@media (min-width: 992px) {
    .pf-sidebar-mobile-toggle {
        display: none;
    }

    :root[data-pf-sidebar-collapsed="1"] main.app-content {
        margin-left: var(--pf-sidebar-collapsed-width);
    }

    :root[data-pf-sidebar-collapsed="1"] .pf-sidebar {
        width: var(--pf-sidebar-collapsed-width);
    }

    :root[data-pf-sidebar-collapsed="1"] .pf-sidebar .pf-sidebar-brand {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    /* `ceasa_topbar.png` é uma logo composta (emblema circular + nome por
       extenso, 284×96px) pensada pra faixa larga do topo/sidebar
       expandida — sem recorte, na largura estreita do rail recolhido
       (76px) ela vazava cortada pela metade, achado real testando no
       navegador. Não existe um arquivo separado só com o emblema
       (checado em img/logos/); em vez de pedir um novo asset, recorta a
       MESMA imagem: o emblema fica todo dentro dos ~96px iniciais (a
       própria altura da imagem), então `object-fit: cover` com
       `object-position: left` isola só ele. */
    :root[data-pf-sidebar-collapsed="1"] .pf-sidebar .pf-sidebar-brand .pf-topbar-logo {
        width: 36px;
        height: 36px;
        object-fit: cover;
        object-position: left center;
    }

    :root[data-pf-sidebar-collapsed="1"] .pf-sidebar .pf-sidebar-link {
        justify-content: center;
        padding: 0.6rem;
    }

    /* `!important`: o texto da marca (`.pf-sidebar-brand-texto`) também
       leva `.d-flex` do Bootstrap (`display: flex !important`) — sem o
       `!important` aqui, o utilitário do Bootstrap vencia e o texto
       continuava aparecendo (vazando pra fora da largura estreita da
       sidebar recolhida), achado real testando no navegador. */
    :root[data-pf-sidebar-collapsed="1"] .pf-sidebar .pf-sidebar-brand-texto,
    :root[data-pf-sidebar-collapsed="1"] .pf-sidebar .pf-sidebar-link span:not(.pf-sidebar-chevron),
    :root[data-pf-sidebar-collapsed="1"] .pf-sidebar .pf-sidebar-chevron {
        display: none !important;
    }

    :root[data-pf-sidebar-collapsed="1"] .pf-sidebar .pf-sidebar-submenu {
        display: none;
        position: fixed;
        left: calc(var(--pf-sidebar-collapsed-width) + 8px);
        margin: 0;
        min-width: 220px;
        max-width: 280px;
        border-left: none;
        background: var(--pf-ceasa-verde-escuro);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 10px;
        padding: 0.4rem;
        box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
        z-index: 1002;
    }

    /* `top` de cada flyout é calculado em JS (layout-menu.js, no
       mouseenter/focusin do item) — a posição na tela do ícone recolhido
       não dá pra saber só com CSS porque a lista rola dentro de
       `.pf-sidebar-scroll` (ver acima); dois grupos podem estar em
       qualquer posição relativa ao topo da janela dependendo do scroll. */
    :root[data-pf-sidebar-collapsed="1"] .pf-sidebar .pf-sidebar-item--grupo:hover > .pf-sidebar-submenu,
    :root[data-pf-sidebar-collapsed="1"] .pf-sidebar .pf-sidebar-item--grupo:focus-within > .pf-sidebar-submenu {
        display: block;
    }

    :root[data-pf-sidebar-collapsed="1"] .pf-sidebar .pf-sidebar-collapse-btn i {
        transform: rotate(180deg);
    }
}

/* ==========================================================================
   Card "Carteira por situação" (2026-09) — donut CSS puro via
   `conic-gradient` (o gradiente em si é montado no template, com as
   cores/percentuais que vêm de `administracao.resumo_situacao`; aqui só
   o tamanho/formato do anel). Ver templates/includes/resumo_situacao.html,
   usado pelas listagens de Processo Judicial/Administrativo. */
.pf-donut-situacao {
    position: relative;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    flex: none;
}

.pf-donut-situacao::after {
    content: "";
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: var(--ins-card-bg);
}

.pf-donut-legenda-cor {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
}

.pf-donut-legenda li {
    margin-bottom: 0.35rem;
    font-size: 0.86rem;
}

/* Cabeçalho de tabela ordenável (ex.: Prazos Processuais do Processo
   Judicial) — precisa deixar claro que é clicável mesmo antes de passar o
   mouse (achado do usuário, 2026-09-24: um link sem sublinhado e na
   mesma cor do texto normal não parecia interativo). */
.pf-th-ordenavel {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0.35rem;
    padding: 0.15rem 0.4rem;
    margin: -0.15rem -0.4rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pf-th-ordenavel:hover,
.pf-th-ordenavel:focus-visible {
    color: var(--ins-primary);
    background-color: var(--ins-tertiary-bg);
}

.pf-th-ordenavel .ti {
    font-size: 0.95rem;
}

/* Ícone de "ordenável" sempre visível, discreto — só a coluna ativa
   (.pf-th-ordenavel--ativa) fica com o ícone e o texto em destaque,
   pra dar feedback claro de que o clique funcionou. */
.pf-th-ordenavel .ti-arrows-sort {
    opacity: 0.35;
}

.pf-th-ordenavel--ativa {
    color: var(--ins-primary);
    font-weight: 700;
}

.pf-th-ordenavel--ativa .ti {
    opacity: 1;
}