/* ============================================================
   PÁGINA — layout padrão de todas as telas do sistema
   Carregado pelo layout (layouts/app) depois do Bootstrap.

   Tokens (--dc-*): fonte de verdade para o CSS escrito à mão.
   Os mesmos valores alimentam o Bootstrap em resources/sass.

   Anatomia de uma página (ver componente <x-pagina>):
     .pagina
       header.pg-head        trilha (ou ← pai) + h1 + resumo | ações
       .pg-panel             blocos de conteúdo (tabela, formulário, ficha)
         .pg-panel-head      título do bloco + ações do bloco
         .pg-filtros         barra de filtros de uma listagem
         .pg-panel-body
         .pg-paginacao
       .pg-form-secao        seção de formulário (h2 + campos)
       .pg-form-acoes        barra final: Salvar (primário) + Cancelar (link)
         .pg-acoes-descritas ações com texto explicativo (grade de 2 colunas)
   ============================================================ */

:root {
    --dc-ink: #1c2733;
    --dc-muted: #66727f;
    --dc-line: #dde3ea;
    --dc-line-strong: #c3ccd6;
    --dc-paper: #ffffff;
    --dc-soft: #f5f7f9;
    --dc-blue: #0479ff;
    --dc-blue-ink: #0b4fa8;
    --dc-blue-soft: #e8f1ff;
    --dc-ok: #1d7a4b;
    --dc-ok-soft: #e3f5ea;
    --dc-warn: #7a5200;
    --dc-warn-soft: #fff3d1;
    --dc-off: #b3261e;
    --dc-off-soft: #fbe9e7;
    --dc-radius: 10px;
    --dc-radius-sm: 8px;
    --dc-navbar-h: 56px;
    /* calha lateral das páginas (igual dos dois lados) e largura máxima padrão */
    --dc-gutter: clamp(1rem, 2.5vw, 2.5rem);
    --dc-pagina-max: 1600px;
}

/* ---------- base ---------- */
body {
    color: var(--dc-ink);
    background: var(--dc-paper);
    -webkit-font-smoothing: antialiased;
}

main#pagina {
    padding: 0 var(--dc-gutter) 1.5rem;
}

/* largura da página: toda página é centralizada, com a mesma margem à esquerda
   e à direita. Por padrão ocupa até --dc-pagina-max; a prop `largura` do
   <x-pagina> escolhe uma faixa mais estreita (formulários) sem mudar o
   cabeçalho, que acompanha o conteúdo. É o ÚNICO mecanismo de largura: não
   limite a largura de painéis avulsos (.pg-panel) — o cabeçalho ficaria solto. */
.pagina {
    max-width: var(--dc-pagina-max);
    margin-left: auto;
    margin-right: auto;
}

.pagina.is-estreita { max-width: 800px; }   /* formulários simples */
.pagina.is-media    { max-width: 1200px; }  /* formulários com várias colunas, fichas */
.pagina.is-larga    { max-width: var(--dc-pagina-max); } /* = padrão (listagens, relatórios) */

h1, h2, h3, h4, h5, h6 {
    color: var(--dc-ink);
    letter-spacing: -0.01em;
}

/* foco visível igual em toda parte (teclado) */
:focus-visible {
    outline: 2px solid var(--dc-blue);
    outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none;
}

/* tabelas e números: dígitos de largura fixa alinham colunas */
table,
.num,
.tabular {
    font-variant-numeric: tabular-nums;
}

/* ---------- cabeçalho da página ---------- */
.pg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 1rem 0 0.85rem;
}

.pg-head > .pg-head-texto {
    min-width: 0;
    flex: 1 1 320px;
}

/* trilha: só os ancestrais; a página atual é o h1 */
.pg-trilha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.45rem;
    margin: 0 0 0.4rem;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--dc-muted);
}

.pg-trilha li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 32ch;
}

.pg-trilha li + li::before {
    content: "›";
    color: var(--dc-line-strong);
    font-weight: 700;
}

.pg-trilha a {
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg-trilha a:hover,
.pg-trilha a:focus-visible {
    color: var(--dc-blue-ink);
    text-decoration: underline;
}

/* um único ancestral: vira o link "← Pai" */
.pg-trilha.is-volta li::before {
    content: "←";
    color: inherit;
    font-weight: 400;
}

/* em telas estreitas a trilha vira só "← pai imediato" (NN/g: sem quebra de linha) */
@media (max-width: 767.98px) {
    .pg-trilha li:not(:last-child) {
        display: none;
    }

    .pg-trilha li:last-child::before {
        content: "←";
        color: inherit;
        font-weight: 400;
    }
}

.pg-title {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.pg-title small,
.pg-title .pg-title-sub {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--dc-muted);
    letter-spacing: 0;
}

/* resumo: números e estados da página (o que há aqui, quanto, em que situação) */
.pg-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.25rem;
    margin: 0.35rem 0 0;
    color: var(--dc-muted);
    font-size: 0.92rem;
}

.pg-resumo strong {
    color: var(--dc-ink);
    font-weight: 700;
}

.pg-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .pg-acoes {
        width: 100%;
    }

    .pg-acoes > .btn,
    .pg-acoes > form,
    .pg-acoes > form > .btn {
        flex: 1 1 auto;
    }
}

/* ---------- painéis ---------- */
.pg-panel {
    background: var(--dc-paper);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    margin-bottom: 1rem;
}

/* compatibilidade: partials antigos que ainda limitam o próprio painel
   (ex.: componentes/permission-denied). Nas páginas, use a prop `largura`. */
.pg-panel.is-estreito {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.pg-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--dc-line);
}

.pg-panel-head h2,
.pg-panel-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.pg-panel-head small {
    color: var(--dc-muted);
    font-weight: 500;
}

.pg-panel-body {
    padding: 1rem;
}

.pg-panel-body > :last-child {
    margin-bottom: 0;
}

.pg-panel-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--dc-line);
    background: var(--dc-soft);
    border-radius: 0 0 var(--dc-radius) var(--dc-radius);
}

/* dois painéis lado a lado (ficha + lateral) */
.pg-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1rem;
    align-items: start;
}

.pg-grid.is-lateral-esquerda {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}

.pg-grid.is-metade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .pg-grid,
    .pg-grid.is-lateral-esquerda,
    .pg-grid.is-metade {
        grid-template-columns: 1fr;
    }
}

/* ---------- filtros de uma listagem ---------- */
.pg-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--dc-line);
    background: var(--dc-soft);
    border-radius: var(--dc-radius) var(--dc-radius) 0 0;
}

.pg-filtros > * {
    flex: 1 1 150px;
    min-width: 0;
}

.pg-filtros > .is-largo {
    flex: 2 1 240px;
}

.pg-filtros > .is-auto {
    flex: 0 0 auto;
}

.pg-filtros label,
.pg-filtros .form-label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dc-muted);
}

.pg-filtros .form-select,
.pg-filtros .form-control {
    font-size: 0.92rem;
}

.pg-filtros .form-check {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
}

.pg-filtros-opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1rem;
    flex-basis: 100%;
}

/* ---------- tabela de listagem ---------- */
.pg-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.pg-table th {
    padding: 0.55rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dc-muted);
    border-bottom: 1px solid var(--dc-line);
    white-space: nowrap;
    vertical-align: bottom;
    text-align: left;
}

.pg-table td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--dc-line);
}

.pg-table tbody tr:last-child td {
    border-bottom: 0;
}

.pg-table tbody tr:hover td {
    background: var(--dc-soft);
}

.pg-table tfoot td,
.pg-table tfoot th {
    padding: 0.55rem 0.75rem;
    border-top: 1px solid var(--dc-line-strong);
    border-bottom: 0;
    font-weight: 700;
    background: var(--dc-soft);
}

.pg-table .num {
    text-align: right;
}

.pg-table .centro {
    text-align: center;
}

.pg-table .compacta {
    width: 1%;
    white-space: nowrap;
}

/* linha de grupo dentro da tabela (ex.: uma série, uma área) */
.pg-table tr.is-grupo th {
    padding-top: 0.9rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--dc-ink);
    background: var(--dc-soft);
}

.pg-table tr.is-inativo td {
    color: var(--dc-muted);
}

/* linha de subtotal de um grupo */
.pg-table tr.is-subtotal th,
.pg-table tr.is-subtotal td {
    font-size: 0.85rem;
    color: var(--dc-muted);
    background: var(--dc-soft);
    border-bottom: 1px solid var(--dc-line-strong);
}

.pg-table tr.is-subtotal th {
    font-weight: 600;
}

/* nome principal da linha (link para o registro) */
.pg-nome {
    display: block;
    font-weight: 600;
    line-height: 1.25;
    color: var(--dc-ink);
    text-decoration: none;
}

.pg-nome:hover,
.pg-nome:focus-visible {
    color: var(--dc-blue-ink);
    text-decoration: underline;
}

.pg-sub {
    display: block;
    font-size: 0.82rem;
    color: var(--dc-muted);
}

.pg-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82em;
    color: var(--dc-muted);
}

/* ações de uma linha */
.pg-linha-acoes {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.pg-linha-acoes .btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.82rem;
}

.pg-linha-acoes form {
    display: inline;
}

/* estado vazio: diz o que aconteceu e o que fazer */
.pg-vazio {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--dc-muted);
}

.pg-vazio strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--dc-ink);
}

.pg-paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--dc-line);
    color: var(--dc-muted);
    font-size: 0.88rem;
}

.pg-paginacao .pagination {
    margin: 0;
}

/* ---------- estados e etiquetas ---------- */
/* situação com ponto: cor é significado, não decoração */
.pg-situacao {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dc-ok);
    white-space: nowrap;
}

.pg-situacao::before {
    content: "";
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.pg-situacao.is-atencao { color: var(--dc-warn); }
.pg-situacao.is-off { color: var(--dc-off); }
.pg-situacao.is-neutro { color: var(--dc-muted); }
.pg-situacao.is-info { color: var(--dc-blue-ink); }

.pg-situacao.is-vazio::before {
    background: transparent;
    box-shadow: inset 0 0 0 2px currentColor;
}

/* etiqueta pequena (contagem, marcador) */
.pg-tag {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--dc-soft);
    color: var(--dc-muted);
}

.pg-tag.is-azul { background: var(--dc-blue-soft); color: var(--dc-blue-ink); }
.pg-tag.is-ok { background: var(--dc-ok-soft); color: var(--dc-ok); }
.pg-tag.is-atencao { background: var(--dc-warn-soft); color: var(--dc-warn); }
.pg-tag.is-off { background: var(--dc-off-soft); color: var(--dc-off); }

/* aviso dentro do conteúdo (não é mensagem da página; essas vêm do layout) */
.pg-aviso {
    margin: 0 0 1rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--dc-radius-sm);
    background: var(--dc-warn-soft);
    color: var(--dc-warn);
    font-size: 0.9rem;
}

.pg-aviso.is-ok { background: var(--dc-ok-soft); color: var(--dc-ok); }
.pg-aviso.is-off { background: var(--dc-off-soft); color: var(--dc-off); }
.pg-aviso.is-info { background: var(--dc-blue-soft); color: var(--dc-blue-ink); }

.pg-nota {
    margin: 0;
    color: var(--dc-muted);
    font-size: 0.88rem;
}

/* ---------- ficha (leitura de um registro) ---------- */
.pg-dl {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
    font-size: 0.92rem;
}

.pg-dl dt {
    font-weight: 500;
    color: var(--dc-muted);
}

.pg-dl dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.pg-dl.is-colunas {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem 1.25rem;
}

.pg-dl.is-colunas dt {
    font-size: 0.78rem;
    font-weight: 600;
}

.pg-dl.is-colunas dd {
    grid-column: auto;
}

.pg-dl.is-colunas > div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

@media (max-width: 575.98px) {
    .pg-dl {
        grid-template-columns: 1fr;
        gap: 0.1rem 0;
    }

    .pg-dl dd {
        margin-bottom: 0.5rem;
    }
}

/* abas dentro de um painel */
.pg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--dc-line);
}

.pg-tabs a,
.pg-tabs button {
    padding: 0.7rem 0.6rem 0.55rem;
    margin-bottom: -1px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--dc-muted);
    text-decoration: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
}

.pg-tabs a:hover,
.pg-tabs a:focus-visible,
.pg-tabs button:hover,
.pg-tabs button:focus-visible {
    color: var(--dc-ink);
}

.pg-tabs .is-ativa,
.pg-tabs [aria-current="page"],
.pg-tabs [aria-selected="true"] {
    color: var(--dc-blue-ink);
    border-color: var(--dc-blue);
}

/* ---------- formulários ---------- */
.pg-form-secao {
    padding: 1rem;
    border-bottom: 1px solid var(--dc-line);
}

.pg-form-secao:last-of-type {
    border-bottom: 0;
}

.pg-form-secao > h2,
.pg-form-secao > legend {
    float: none;
    width: auto;
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.pg-form-secao > h2 small,
.pg-form-secao > legend small {
    font-weight: 500;
    color: var(--dc-muted);
}

.pagina .form-label {
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dc-muted);
}

.pagina .form-text {
    font-size: 0.82rem;
}

.pagina .form-control:disabled,
.pagina .form-select:disabled,
.pagina .form-control[readonly] {
    color: var(--dc-ink);
    background-color: var(--dc-soft);
    border-color: var(--dc-line);
}

/* barra de ações do formulário: um primário, o resto discreto */
.pg-form-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--dc-line);
    background: var(--dc-soft);
    border-radius: 0 0 var(--dc-radius) var(--dc-radius);
}

.pg-form-acoes.is-fixa {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--dc-paper);
}

.pg-form-acoes .pg-form-acoes-extra {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ações com texto explicativo: duas colunas com calha larga entre elas,
   cada item = botão + <small> abaixo (uma coluna só em telas estreitas) */
.pg-acoes-descritas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 6vw, 5rem);
    row-gap: 1rem;
    width: 100%;
    align-items: start;
}

.pg-acoes-descritas .btn {
    min-width: 14rem;
}

.pg-acoes-descritas small {
    max-width: 40ch;
}

@media (max-width: 767.98px) {
    .pg-acoes-descritas {
        grid-template-columns: 1fr;
    }

    .pg-acoes-descritas .btn {
        width: 100%;
    }

    .pg-acoes-descritas small {
        max-width: none;
    }
}

/* ---------- barra de botões de navegação secundária (ex.: seções do aluno) ---------- */
.pg-secoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pg-secoes .btn {
    font-weight: 500;
}

.pg-secoes .btn.disabled,
.pg-secoes .btn:disabled,
.pg-secoes .btn[aria-current="page"] {
    opacity: 1;
    background: var(--dc-blue-soft);
    border-color: var(--dc-blue-soft);
    color: var(--dc-blue-ink);
}

/* ---------- atalhos (página inicial, hubs): título + uma linha do que faz ---------- */
.pg-atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pg-atalho {
    display: block;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius-sm);
    color: var(--dc-ink);
    text-decoration: none;
    transition: border-color 0.12s, background-color 0.12s;
}

.pg-atalho:hover,
.pg-atalho:focus-visible {
    border-color: var(--dc-blue);
    background: var(--dc-blue-soft);
    color: var(--dc-ink);
    text-decoration: none;
}

.pg-atalho strong {
    display: block;
    font-weight: 600;
    line-height: 1.25;
}

.pg-atalho span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: var(--dc-muted);
}

.pg-atalho.is-destaque {
    border-color: var(--dc-blue-ink);
    background: var(--dc-blue-ink);
    color: #fff;
}

.pg-atalho.is-destaque span {
    color: rgba(255, 255, 255, 0.8);
}

.pg-atalho.is-destaque:hover,
.pg-atalho.is-destaque:focus-visible {
    background: var(--dc-blue);
    border-color: var(--dc-blue);
    color: #fff;
}

/* ---------- ajustes globais nos componentes do Bootstrap ---------- */
/* Mesmo em páginas ainda não migradas, o card já assume o visual de painel. */
.card {
    --bs-card-border-color: var(--dc-line);
    --bs-card-border-radius: var(--dc-radius);
    --bs-card-inner-border-radius: calc(var(--dc-radius) - 1px);
    --bs-card-cap-bg: var(--dc-soft);
    --bs-card-cap-padding-y: 0.85rem;
    --bs-card-cap-padding-x: 1rem;
    box-shadow: none;
    margin-bottom: 1rem;
}

.card > .card-header .breadcrumb {
    margin-bottom: 0;
}

.card > .card-header .breadcrumb + * {
    margin-top: 0.75rem;
}

.breadcrumb {
    --bs-breadcrumb-divider: "›";
    --bs-breadcrumb-font-size: 0.85rem;
    --bs-breadcrumb-divider-color: var(--dc-line-strong);
    --bs-breadcrumb-item-active-color: var(--dc-ink);
}

.breadcrumb-item.active {
    font-weight: 600;
}

.breadcrumb-item a {
    color: var(--dc-muted);
}

.breadcrumb-item a:hover {
    color: var(--dc-blue-ink);
}

.table {
    --bs-table-color: var(--dc-ink);
    --bs-table-border-color: var(--dc-line);
    --bs-table-hover-bg: var(--dc-soft);
    --bs-table-striped-bg: var(--dc-soft);
    font-size: 0.92rem;
}

.table > thead > tr > th {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dc-muted);
    border-bottom-color: var(--dc-line);
    vertical-align: bottom;
    white-space: nowrap;
}

/* cabeçalho escuro de tabela vira o cabeçalho padrão discreto */
.table > thead.table-dark,
.table > thead.table-dark > tr > th,
.table > thead.table-light,
.table > thead.table-light > tr > th {
    --bs-table-bg: transparent;
    --bs-table-color: var(--dc-muted);
    background: transparent;
    color: var(--dc-muted);
    border-color: var(--dc-line);
}

.table > :not(caption) > * > * {
    padding: 0.5rem 0.65rem;
}

.table-sm > :not(caption) > * > * {
    padding: 0.35rem 0.5rem;
}

.pagination {
    --bs-pagination-font-size: 0.88rem;
    --bs-pagination-padding-y: 0.3rem;
    --bs-pagination-padding-x: 0.65rem;
    --bs-pagination-color: var(--dc-ink);
    --bs-pagination-border-color: var(--dc-line);
    --bs-pagination-hover-bg: var(--dc-soft);
    --bs-pagination-hover-color: var(--dc-blue-ink);
    --bs-pagination-active-bg: var(--dc-blue-ink);
    --bs-pagination-active-border-color: var(--dc-blue-ink);
    margin-bottom: 0;
}

.btn {
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
        box-shadow .15s ease, transform .15s ease;
}

/* destaque ao passar o mouse, em qualquer botão de qualquer tela:
   leve elevação + sombra (a cor de fundo/borda vem do Bootstrap por variante) */
.btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(28, 39, 51, 0.16);
}

.btn:active:not(:disabled):not(.disabled) {
    transform: none;
    box-shadow: none;
}

.btn-outline-secondary:hover:not(:disabled):not(.disabled) {
    --bs-btn-hover-bg: var(--dc-blue-soft);
    --bs-btn-hover-color: var(--dc-blue-ink);
    --bs-btn-hover-border-color: var(--dc-blue-ink);
}

.btn-outline-secondary {
    --bs-btn-color: var(--dc-ink);
    --bs-btn-border-color: var(--dc-line-strong);
    --bs-btn-hover-bg: var(--dc-soft);
    --bs-btn-hover-color: var(--dc-ink);
    --bs-btn-hover-border-color: var(--dc-line-strong);
    --bs-btn-active-bg: var(--dc-line);
    --bs-btn-active-color: var(--dc-ink);
    --bs-btn-active-border-color: var(--dc-line-strong);
}

.alert.message {
    border-radius: var(--dc-radius-sm);
}

/* modais e dropdowns com o mesmo raio e sem sombra pesada */
.modal-content {
    border-color: var(--dc-line);
    border-radius: var(--dc-radius);
}

.dropdown-menu {
    border-radius: var(--dc-radius-sm);
}

/* rodapé do site */
footer {
    color: var(--dc-muted);
    font-size: 0.82rem;
    background: transparent;
    border-top: 1px solid var(--dc-line);
    margin-top: 1.5rem;
    padding: 0.85rem 0;
}

footer a {
    color: inherit;
}

/* impressão: sem cabeçalho de navegação nem ações */
@media print {
    .navbar,
    .pg-trilha,
    .pg-acoes,
    .pg-linha-acoes,
    .pg-form-acoes,
    .pg-filtros,
    footer {
        display: none !important;
    }

    .pg-panel,
    .card {
        border: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina *,
    .pagina *::before,
    .pagina *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- tabela de divergências (relatorios/administrativo/divergencias/turma) ---------- */
.pg-tabela-divergencias { font-size: .8rem; }
.pg-tabela-divergencias th, .pg-tabela-divergencias td { white-space: nowrap; vertical-align: middle; }
.pg-tabela-divergencias th.pg-data { text-align: center; line-height: 1.1; padding: .25rem .3rem; }
.pg-tabela-divergencias th.pg-data small { font-weight: normal; }
.pg-tabela-divergencias td.pg-celula { text-align: center; padding: .1rem .3rem; min-width: 3.2rem; line-height: 1.15; }
.pg-tabela-divergencias td.pg-celula .pg-marca { display: block; font-weight: 700; font-size: .9rem; }
.pg-tabela-divergencias td.pg-celula .pg-sigla { display: block; font-size: .65rem; opacity: .9; }
.pg-tabela-divergencias .pg-fixa { position: sticky; left: 0; background: #fff; z-index: 1; }
.pg-tabela-divergencias .pg-fixa-2 { position: sticky; left: 3rem; background: #fff; z-index: 1; }
.pg-tabela-divergencias thead th.pg-fixa, .pg-tabela-divergencias thead th.pg-fixa-2 { z-index: 2; }
/* As cores repetem na tabela e na legenda; dentro da tabela o Bootstrap pinta o td com
   --bs-table-bg numa regra mais específica, por isso a variável também é sobrescrita. */
.pg-celula-coordenacao, .pg-tabela-divergencias td.pg-celula-coordenacao { --bs-table-bg: #e9ecef; --bs-table-accent-bg: transparent; background-color: #e9ecef; color: #6c757d; }
.pg-celula-pendente-pagela, .pg-tabela-divergencias td.pg-celula-pendente-pagela { --bs-table-bg: #fd7e14; --bs-table-accent-bg: transparent; background-color: #fd7e14; color: #fff; }
.pg-celula-pendente-coordenacao, .pg-tabela-divergencias td.pg-celula-pendente-coordenacao { --bs-table-bg: #dc3545; --bs-table-accent-bg: transparent; background-color: #dc3545; color: #fff; }
.pg-celula-resolvida, .pg-tabela-divergencias td.pg-celula-resolvida { --bs-table-bg: #198754; --bs-table-accent-bg: transparent; background-color: #198754; color: #fff; }
.pg-aluno-movimentado { color: #6c757d; font-style: italic; }
.pg-legenda { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
.pg-legenda .pg-exemplo { display: inline-block; min-width: 3.2rem; text-align: center; padding: .1rem .3rem; border-radius: .2rem; margin-right: .4rem; font-weight: 700; line-height: 1.15; }
.pg-legenda .pg-exemplo small { display: block; font-weight: normal; font-size: .65rem; }

/* ---------- alerta piscante (relatorios/alunos/notas/disciplinas/controle) ---------- */
.pg-blink {
    animation: pg-blink-animation 1s steps(2) infinite;
}

@keyframes pg-blink-animation {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}