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

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

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

.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);
}

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

.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;
}