/*
|--------------------------------------------------------------------------
| sistema-painel.css — visual novo do sistema (layout "painel", 28/09/2026)
|--------------------------------------------------------------------------
| Protótipo aprovado pelo usuário: minimalista, formulário e resultado da busca lado a lado,
| campos em grade com larguras diferentes, seções com título pequeno.
|
| - Só age dentro de .sys-pagina (tela com o cabeçalho novo) e .sys-layout-painel (raiz do CRUD
|   do motor quando a PageDefinition declara 'layout' => 'painel'). As telas antigas não mudam.
| - Nenhuma cor fixa: tudo sai das variáveis da paleta (CssSystemGenerator::paletasDisponiveis),
|   que já têm claro e escuro — por isso não há bloco de "tema escuro" aqui.
| - Quando todas as telas estiverem no layout novo, este arquivo vira a base e o sistema-ui.css
|   (com as sobreposições do Bootstrap) é aposentado.
*/

.sys-pagina,
.sys-layout-painel,
.sys-bloco,
body:has(.sys-pagina) .sys-modal {
    --p-fundo: var(--sys-color-page, var(--sys-color-surface-muted));
    --p-painel: var(--sys-color-surface);
    --p-superficie: var(--sys-color-surface-muted);
    --p-texto: var(--sys-color-text);
    --p-apagado: var(--sys-color-text-muted);
    --p-linha: var(--sys-color-border);
    --p-destaque: var(--sys-color-primary);
    --p-destaque-contraste: var(--sys-color-primary-contrast);
    --p-destaque-suave: var(--sys-color-primary-soft, var(--sys-color-surface-muted));
    --p-destaque-suave-texto: var(--sys-color-primary-soft-text, var(--sys-color-primary));
    --p-hover: var(--sys-color-hover, var(--sys-color-surface-muted));
    --p-sombra: 0 12px 36px rgba(25, 52, 56, 0.055);
    --p-raio: 13px;
    /* Raio dos campos: a regra antiga dos campos usa esta variável (com !important). */
    --sys-radius-lg: 8px;
}

.sys-theme-escuro :is(.sys-pagina, .sys-layout-painel, .sys-bloco) {
    --p-sombra: 0 12px 36px rgba(0, 0, 0, 0.15);
}

/*
|--------------------------------------------------------------------------
| CONTORNO (29/09/2026) — menu lateral + barra superior, em TODAS as telas
|--------------------------------------------------------------------------
| Marcação: sistema.blade.php e partials/menu-lateral. Comportamento: app/core/menu.js.
| Aparece só com body.sys-autenticado (systemInit.js). ≤ 992px: menu deslizante (botão ☰).
*/
:root {
    /* 28/10/2026 (usuário "meio perdido" no menu): 252 → 272px, menos nome quebrando em duas linhas. */
    --sys-lateral-largura: 272px;
}

.sys-lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    width: var(--sys-lateral-largura);
    display: flex;
    flex-direction: column;
    background: var(--sys-color-surface);
    border-right: 1px solid var(--sys-color-border);
    color: var(--sys-color-text);
}

.sys-lateral-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 18px;
    color: var(--sys-color-text);
    font-weight: 750;
    font-size: 0.95rem;
    letter-spacing: -0.03em;
    white-space: nowrap;
    text-decoration: none;
}

.sys-lateral-marca:hover,
.sys-lateral-marca:focus {
    color: var(--sys-color-text);
}

/* Logo sobre fundo claro próprio (mesma solução do login): legível em qualquer paleta. */
.sys-lateral-logo {
    height: 34px;
    width: auto;
    max-width: 64px;
    object-fit: contain;
    padding: 3px 5px;
    border-radius: 8px;
    background: #fff;
}

.sys-lateral-menu {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 12px 28px;
}

.sys-menu,
.sys-menu-itens {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sys-menu-grupo + .sys-menu-grupo {
    margin-top: 2px;
}

.sys-menu-grupo-botao,
.sys-menu-link {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    /* Cor sólida e letra um pouco maior (pedido do usuário 29/09: estava pequena e "apagada"). */
    color: var(--sys-color-text);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}

.sys-menu-grupo-botao:hover,
.sys-menu-link:hover,
.sys-menu-grupo-botao:focus-visible,
.sys-menu-link:focus-visible {
    background: var(--sys-color-hover, var(--sys-color-surface-muted));
    color: var(--sys-color-text);
}

/* Ícone e seta no tom apagado: o texto é que se destaca. */
.sys-menu-icone {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    color: var(--sys-color-text-muted);
}

.sys-menu-seta {
    color: var(--sys-color-text-muted);
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.aberto > .sys-menu-grupo-botao .sys-menu-seta,
.aberto > .sys-menu-sub-botao .sys-menu-seta {
    transform: rotate(180deg);
}

/* Número de pendências da tela (24/10/2026, PendenciasDoMenu): no item e somado no grupo, que já vem aberto. */
.sys-menu-selo {
    margin-left: auto;
    min-width: 1.5rem;
    padding: 1px 7px;
    border-radius: 999px;
    /* o mesmo amarelo do número das guias (badge bg-warning text-dark de Controles Financeiros) */
    background: var(--bs-warning, #ffc107);
    color: var(--bs-dark, #212529);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.sys-menu-selo + .sys-menu-seta {
    margin-left: 6px;
}

/* Grupo que contém a tela aberta: título em destaque. */
.sys-menu-grupo.sys-menu-active > .sys-menu-grupo-botao {
    color: var(--sys-color-text);
}

/* 28/10/2026: grupo ABERTO com o título num fundo leve e as telas dele penduradas numa linha à esquerda (alinhada
   ao ícone) — dá para ver onde cada grupo começa e termina quando vários estão abertos. Só aparência. */
.sys-menu-grupo.aberto > .sys-menu-grupo-botao,
.sys-menu-sub.aberto > .sys-menu-sub-botao {
    background: var(--sys-color-surface-muted);
}

.sys-menu-itens {
    display: none;
    margin: 2px 0 8px 20px;
    padding: 0;
    border-left: 2px solid var(--sys-color-border);
}

.aberto > .sys-menu-itens {
    display: block;
}

.sys-menu-itens .sys-menu-link {
    /* o destaque (hover / tela aberta) fica 6px afastado da linha do grupo, sem encostar nela (usuário 28/10) */
    width: calc(100% - 6px);
    margin-left: 6px;
    padding: 7px 12px 7px 13px;
    font-size: 0.96rem;
    font-weight: 500;
    /* Telas dentro do grupo em outra cor (pedido do usuário 29/09): a principal da paleta puxada para o texto —
       acompanha a paleta e o claro/escuro. A tela aberta mantém o fundo + negrito (.sys-menu-active). */
    color: var(--sys-color-primary);
    color: color-mix(in srgb, var(--sys-color-primary) 70%, var(--sys-color-text));
}

.sys-menu-itens .sys-menu-itens {
    margin-left: 19px;
}

.sys-menu-itens .sys-menu-link .sys-menu-icone {
    display: none;
}

.sys-menu-link.sys-menu-active {
    background: var(--sys-color-primary-soft, var(--sys-color-surface-muted));
    color: var(--sys-color-primary-soft-text, var(--sys-color-primary));
    font-weight: 700;
}

/* Barrinha da TELA ABERTA (28/10/2026, como no menu do sistema antigo): na cor de destaque da paleta (laranja quando a
   paleta não tem). Grupo fechado que contém a tela aberta mostra a barrinha no título — dá para achar onde se está
   mesmo depois de abrir outro grupo. Só aparência: a classe é a mesma que o menu.js já põe (sys-menu-active). */
.sys-menu-link.sys-menu-active,
.sys-menu-grupo.sys-menu-active:not(.aberto) > .sys-menu-grupo-botao {
    box-shadow: inset 4px 0 0 var(--sys-color-accent, #F07820);
}

.sys-menu-vazio {
    margin: 0;
    padding: 10px 12px;
    font-size: 0.85rem;
    color: var(--sys-color-text-muted);
}

/* Área principal: ao lado do menu. */
body.sys-autenticado .sys-principal {
    margin-left: var(--sys-lateral-largura);
}

.sys-topo {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 0 clamp(16px, 3vw, 40px);
    background: var(--sys-color-surface);
    border-bottom: 1px solid var(--sys-color-border);
    color: var(--sys-color-text);
}

.sys-topo-caminho {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.82rem;
    color: var(--sys-color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sys-topo-caminho strong {
    color: var(--sys-color-text);
    font-weight: 650;
}

.sys-topo-caminho-sep {
    margin: 0 8px;
    opacity: 0.6;
}

.sys-topo-direita {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sys-topo-usuario {
    font-size: 0.85rem;
    font-weight: 650;
    margin-right: 4px;
}

.sys-topo-etiqueta {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--sys-color-border);
    background: var(--sys-color-surface-muted);
    color: var(--sys-color-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sys-topo-usuario:empty,
.sys-topo-etiqueta:empty {
    display: none;
}

/* "Ver como" (08/10/2026): a lista fica solta na barra, da altura dos botões do topo (tema, paleta). Zera o mínimo de
   altura e o espaçamento dos campos (.sys-select: min-height 46px, padding 10px 16px, 15px em sistema-ui.css; 40px em
   .sys-pagina) — senão a lista sai mais alta que os botões. */
.sys-topo .sys-topo-direita select.sys-topo-ver-como {
    width: auto;
    max-width: 180px;
    height: 36px;
    min-height: 0;
    padding: 0 26px 0 10px;
    line-height: 34px;
    border-radius: 8px;
    border: 1px solid var(--sys-color-border);
    background-color: var(--sys-color-surface);
    background-position: right 8px center;
    color: var(--sys-color-text);
    font-size: 0.75rem;
    font-weight: 650;
}

.sys-topo .sys-topo-direita select.sys-topo-ver-como[hidden] {
    display: none;
}

.sys-topo-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--sys-color-border);
    background: var(--sys-color-surface);
    color: var(--sys-color-text);
    font-size: 0.85rem;
    font-weight: 650;
}

.sys-topo-botao:hover,
.sys-topo-botao:focus-visible {
    background: var(--sys-color-hover, var(--sys-color-surface-muted));
}

.sys-topo-sair {
    color: var(--sys-color-danger);
}

/* Botão ☰ e fundo escuro: só no celular/tablet. */
.sys-topo-abrir-menu,
.sys-lateral-fundo {
    display: none;
}

@media (max-width: 992px) {
    .sys-lateral {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: none;
    }

    body.sys-menu-aberto .sys-lateral {
        transform: none;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
    }

    body.sys-autenticado .sys-principal {
        margin-left: 0;
    }

    body.sys-autenticado .sys-topo-abrir-menu {
        display: inline-flex;
    }

    body.sys-menu-aberto .sys-lateral-fundo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1035;
        background: rgba(0, 0, 0, 0.35);
    }
}

@media (max-width: 640px) {
    .sys-topo {
        padding: 0 12px;
        gap: 8px;
    }

    .sys-topo-usuario,
    #topbar-context {
        display: none;
    }

    .sys-topo-sair span {
        display: none;
    }

    /* ↻ Atualizar o sistema (18/10/2026): no celular o navegador já tem o "puxar para recarregar" — sem ele a barra
       não fica mais larga do que já é. */
    #btn-recarregar-sistema {
        display: none;
    }

    /* 30/10/2026: com o "Ver como" (administrador) e o selo do ano letivo, a barra passava da tela (464px numa tela de
       390) e a página inteira rolava para o lado. No celular o ano letivo sai do topo e o "Ver como" fica mais estreito. */
    #topbar-ano-letivo {
        display: none;
    }

    .sys-topo .sys-topo-direita select.sys-topo-ver-como {
        max-width: 130px;
    }
}

/*
|--------------------------------------------------------------------------
| Página: sem o card branco em volta; o fundo da paleta aparece entre os painéis
|--------------------------------------------------------------------------
*/
.app-container:has(.sys-pagina) {
    max-width: 1380px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 8px 16px 48px;
}

.sys-pagina-cabecalho {
    margin: 8px 0 18px;
}

/* Título da tela (<x-sys.titulo>, sempre com .sys-titulo): grande, sem ícone. */
.sys-pagina .sys-titulo h4 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--p-texto);
    margin: 0 0 6px;
}

.sys-pagina .sys-titulo p {
    line-height: 1.5;
}

/* Guias Cadastro | Manual: linha fina, guia ativa sublinhada no destaque, sem "aba de pasta". */
.sys-pagina > .nav-tabs {
    border-bottom: 1px solid var(--p-linha);
    margin-bottom: 20px !important; /* o mb-3 do Bootstrap já é !important */
}

.sys-pagina > .nav-tabs .nav-link {
    border: 0;
    background: transparent;
    color: var(--p-apagado);
    font-weight: 600;
    padding: 10px 14px;
}

.sys-pagina > .nav-tabs .nav-link:hover {
    color: var(--p-texto);
    background: transparent;
}

.sys-pagina > .nav-tabs .nav-link.active {
    color: var(--p-destaque);
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--p-destaque);
}

/* Área das guias sem fundo próprio (o sistema-ui.css pinta todo .tab-content de "surface"). */
.sys-pagina > .tab-content {
    background: transparent;
}

/* Manual: o mesmo painel das outras áreas. */
.sys-pagina > .tab-content > .tab-pane[id$="-manual"] {
    background: var(--p-painel);
    border: 1px solid var(--p-linha);
    border-radius: var(--p-raio);
    box-shadow: var(--p-sombra);
    padding: 22px 24px;
}

/*
|--------------------------------------------------------------------------
| Grade da tela: formulário | resultado da busca
|--------------------------------------------------------------------------
*/
.sys-painel-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
    gap: 22px;
    align-items: start;
}

/* Motor (crud-painel, 05/10/2026): busca à ESQUERDA, cadastro à direita — as larguras acompanham a troca. No tablet/
   celular (uma coluna) a busca fica em cima pela ordem do HTML. Telas próprias com o cadastro primeiro seguem como eram. */
.sys-painel-grade:has(> .sys-bloco-busca:first-child) {
    grid-template-columns: minmax(340px, 0.88fr) minmax(0, 1.12fr);
}

/* Tela sem busca (ex.: configuração de um registro já escolhido na guia pai): formulário na largura toda. */
.sys-painel-grade:has(> .sys-bloco:only-child) {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1100px) {
    .sys-painel-grade,
    .sys-painel-grade:has(> .sys-bloco-busca:first-child) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A LARGURA PADRÃO do filtro do alto (31/10/2026, usuário: "uma largura padrão"): a do bloco da lista/"Resultado da
   busca" — as mesmas colunas da grade acima com a busca na frente; a caixa fica na 1ª. Tela estreita: toda.
   Vem do <x-sys.faixa-filtro estreita>; uma <x-sys.caixa> de filtro com título (Ficha de Avaliação) vai dentro deste
   mesmo invólucro. */
.sys-faixa-filtro-estreita {
    display: grid;
    grid-template-columns: minmax(340px, 0.88fr) minmax(0, 1.12fr);
    gap: 22px;
}
@media (max-width: 1100px) {
    .sys-faixa-filtro-estreita { grid-template-columns: minmax(0, 1fr); }
}

/* <x-sys.faixa-filtro situacao> (31/10/2026, usuário): o fundo da linha do Diário — vermelho com campo obrigatório
   vazio, verde preenchido (as mesmas cores e a mesma faixa de 4px de .diario-linha.linha-diario-nova / -salva). O
   seletor leva .sys-pagina .bg-light.rounded para vencer a regra das caixas "bg-light rounded" (mais abaixo), que
   punha a borda de 1px e o fundo branco com !important. */
.sys-pagina .bg-light.rounded.sys-faixa-filtro-situacao:has(:is(select, input)[required]) {
    border-left: 4px solid var(--sys-color-success, #2e9d5b);
    background-color: color-mix(in srgb, var(--sys-color-success, #2e9d5b) 7%, var(--p-painel)) !important;
}
.sys-pagina .bg-light.rounded.sys-faixa-filtro-situacao:has(:is(select, input)[required]:invalid) {
    border-left-color: var(--sys-color-danger, #d9534f);
    background-color: color-mix(in srgb, var(--sys-color-danger, #d9534f) 7%, var(--p-painel)) !important;
}

/*
|--------------------------------------------------------------------------
| <x-sys.bloco> — painel com cabeçalho, corpo e rodapé
|--------------------------------------------------------------------------
*/
.sys-bloco {
    background: var(--p-painel);
    color: var(--p-texto);
    border: 1px solid var(--p-linha);
    border-radius: var(--p-raio);
    box-shadow: var(--p-sombra);
    min-width: 0;
}

.sys-bloco-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 22px 24px 18px;
}

.sys-bloco-textos {
    flex: 1 1 auto;
    min-width: 0;
}

.sys-bloco-titulo {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--p-texto);
}

/* Uma linha só: o selo "Em edição · <nome>" pode ser longo e o cabeçalho não pode mudar de altura
   (a tela não "pula" ao selecionar/salvar). */
.sys-bloco-dica {
    font-size: 0.8rem;
    color: var(--p-apagado);
    margin: 6px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sys-bloco-corpo {
    padding: 0 24px 22px;
}

.sys-bloco-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid var(--p-linha);
}

.sys-bloco-nota {
    font-size: 0.75rem;
    color: var(--p-apagado);
}

/* Muitas ações (5+, ex.: Usuários com "Enviar link de acesso", vínculos com "Copiar do ano anterior"): não cabem
   numa linha. A nota vai para cima e os botões preenchem as linhas — o Salvar (último) vira o botão largo de baixo,
   em vez de sobrar sozinho num canto. */
.sys-bloco-rodape:has(.sys-actions-group > .btn:nth-child(5)) .sys-bloco-nota {
    flex-basis: 100%;
}

.sys-layout-painel .sys-bloco-rodape:has(.sys-actions-group > .btn:nth-child(5)) .sys-actions-group {
    margin-left: 0;
    width: 100%;
}

.sys-layout-painel .sys-bloco-rodape .sys-actions-group:has(> .btn:nth-child(5)) > .btn {
    flex: 1 1 auto;
}

/* Selo do cabeçalho: "Novo cadastro" até selecionar; depois o nome do registro em edição. */
.sys-selo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 45%;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--p-destaque-suave);
    color: var(--p-destaque-suave-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sys-selo-registro:empty {
    display: none;
}

.sys-selo-registro::before {
    content: "Em edição · ";
    font-weight: 600;
    white-space: pre;
}

.sys-bloco-cabecalho:has(.sys-selo-registro:not(:empty)) .sys-selo-novo {
    display: none;
}

/* Selo abaixo do título da tela (11/10/2026, Ficha de Avaliação — padrão a estender às outras telas, pendencias §00):
   a tela espelha ali o selo do cadastro e o do cabeçalho do bloco some. */
.sys-selos-pagina {
    display: flex;
    gap: 8px;
}

.sys-selos-pagina .sys-selo {
    max-width: 100%;
}

.sys-selos-pagina:has(.sys-selo-registro:not(:empty)) .sys-selo-novo {
    display: none;
}

/* Selos próprios da tela ao lado do "Em edição" (14/10/2026; Usuários: selo do contratante) e selo que é LINK: mesmo
   desenho do selo, com contorno na cor de destaque e sublinhado ao passar o mouse. */
.sys-selos-extra:empty {
    display: none;
}

.sys-selos-extra {
    display: inline-flex;
    gap: 8px;
    min-width: 0;
}

.sys-pagina .btn.sys-selo.sys-selo-link {
    min-height: 0;
    border: 1px solid var(--p-destaque);
    padding: 4px 11px;
    font-size: 0.72rem;
    line-height: 1.2;
    text-decoration: none;
}

.sys-pagina .btn.sys-selo.sys-selo-link:is(:hover, :focus-visible) {
    background: var(--p-destaque-suave);
    color: var(--p-destaque-suave-texto);
    text-decoration: underline;
}

/* 12/10/2026: o selo da tela pode estar dentro de um invólucro (Usuários) — basta a tela tê-lo. */
.sys-pagina:has([data-role="selos-pagina"]) .sys-bloco-cadastro .sys-bloco-cabecalho .sys-selo {
    display: none;
}

/* Selo de GUIA (12/10/2026, Usuários): abaixo de "Cadastro | Manual"; o do cabeçalho do bloco daquele painel some. */
.tab-pane:has(> .sys-selos-guia) .sys-bloco-cadastro .sys-bloco-cabecalho .sys-selo {
    display: none;
}

/*
|--------------------------------------------------------------------------
| <x-sys.secao> + grade de campos (<x-sys.linha-campo largura="…">)
|--------------------------------------------------------------------------
*/
.sys-secao {
    border-top: 1px solid var(--p-linha);
    padding-top: 20px;
}

/* Seção escondida pela tela quando não tem o que mostrar (ex.: "Copiar do ano anterior" sem nada a copiar). */
.sys-secao[hidden] {
    display: none;
}

.sys-secao + .sys-secao {
    margin-top: 24px;
}

.sys-secao-titulo {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--p-apagado);
    margin: 0 0 16px;
}

/* Campos da mesma linha alinhados pela base: rótulo de duas linhas não desalinha os vizinhos. */
.sys-grade-campos {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px 20px;
    align-items: end;
}

.sys-campo {
    min-width: 0;
    grid-column: span 6;
}

.sys-campo-curta {
    grid-column: span 3;
}

.sys-campo-media {
    grid-column: span 6;
}

.sys-campo-longa {
    grid-column: span 9;
}

.sys-campo-inteira {
    grid-column: 1 / -1;
}

/* Campo de DATA nunca mais estreito que "média" (17/10/2026, achado da escola: com fonte grande/zoom o ANO ficava
   embaixo do ícone do calendário — numa data "curta" nem a fonte normal cabia). Vale para o motor e as telas próprias. */
.sys-grade-campos > .sys-campo-curta:has(input[type="date"]) {
    grid-column: span 6;
}

/* Campo de HORA só digitado (30/10/2026, usuário): a janelinha de horas/minutos do navegador não fechava ao escolher o
   minuto (tinha de clicar fora). Sem o reloginho: digita a hora, passa sozinho para os minutos; setas sobem/descem. */
.sys-pagina input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}

/* Botão do calendário junto do texto: sobra espaço para o ano quando a fonte cresce. */
.sys-pagina input[type="date"]::-webkit-calendar-picker-indicator {
    margin-left: 2px;
    padding: 2px;
}

@media (max-width: 640px) {
    .sys-grade-campos > .sys-campo {
        grid-column: 1 / -1;
    }
}

.sys-campo > .sys-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--p-texto);
    margin-bottom: 7px;
}

/* Campo alinhado ao rótulo (o invólucro tem recuo lateral no layout antigo). */
.sys-campo > .sys-field-wrapper {
    padding: 0;
}

.sys-campo:focus-within > .sys-label {
    color: var(--p-destaque);
}

.sys-campo > .sys-help-text {
    font-size: 0.72rem;
    margin-top: 6px;
}

/* Sem a tarja lateral colorida do layout antigo (sistema-ui.css, paletas): nenhuma faixa à esquerda (01/10/2026). */
.sys-pagina.sys-pagina .sys-help-text {
    border-left: 0;
    padding-left: 0;
}

/* Switch alinhado à altura dos campos de texto. */
.sys-campo > .sys-field-wrapper:has(> .sys-switch) {
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* Campos: fundo da superfície, linha embaixo; no foco, fundo do painel e halo no destaque.
   A cor da borda de validação (vazio → vermelho, válido → verde) continua vindo da regra
   do sistema-ui.css (estado do ícone oculto), que vale também aqui. Vale em toda tela migrada
   (.sys-pagina): layout painel e telas próprias/compostas com as linhas rótulo | campo. */
.sys-pagina .sys-input,
.sys-pagina .sys-select,
.sys-pagina .sys-textarea {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.9rem;
    color: var(--p-texto);
    background-color: var(--p-superficie);
    border: 1px solid transparent;
    border-bottom-color: var(--p-linha);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.sys-pagina .sys-textarea {
    min-height: 90px;
}

.sys-pagina .sys-input:hover,
.sys-pagina .sys-select:hover,
.sys-pagina .sys-textarea:hover {
    border-bottom-color: var(--p-apagado);
}

.sys-pagina .sys-input:focus,
.sys-pagina .sys-select:focus,
.sys-pagina .sys-textarea:focus {
    background-color: var(--p-painel);
    border-color: var(--p-destaque);
    box-shadow: 0 0 0 3px var(--p-destaque-suave);
    color: var(--p-texto);
}

.sys-pagina .sys-input::placeholder,
.sys-pagina .sys-textarea::placeholder {
    color: var(--p-apagado);
    opacity: 0.75;
}

/* Área de retorno das ações (showMessage): espaço FIXO reservado — a mensagem aparece e some sem a tela
   encolher e esticar (mesma ideia dos 55px do layout antigo). Altura = alerta de até duas linhas
   (ex.: "Registro excluído com sucesso. Para desfazer…" no formulário mais estreito). */
.sys-layout-painel .sys-crud-message-area {
    min-height: 72px;
    margin-top: 18px;
}

.sys-layout-painel .sys-crud-message-area > .alert {
    padding: 12px 16px;
    font-size: 0.88rem;
    border-radius: 10px;
}

/*
|--------------------------------------------------------------------------
| Botões (<x-sys.botao>) e barra de ações (<x-sys.acoes>) — toda tela migrada
|--------------------------------------------------------------------------
| Forma única (altura, raio, peso). Cor pelo papel do botão (classe sys-btn-* do CssSystemGenerator):
| principal (salvar, buscar, primário) = destaque da paleta; neutros (novo, secundário, restaurar, contorno)
| = contorno; excluir = texto vermelho; sucesso/aviso/info mantêm a cor de significado do sistema.
| Botão pequeno (btn-sm, ex.: ações de linha de tabela) e botão-link mantêm o tamanho próprio.
*/
.sys-pagina .btn[class*="sys-btn"]:not(.sys-btn-link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 8px;
    font-weight: 650;
    white-space: nowrap;
    box-shadow: none;
}

.sys-pagina .btn[class*="sys-btn"]:not(.sys-btn-link):not(.btn-sm) {
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.85rem;
}

.sys-pagina .btn:is(.sys-btn-new, .sys-btn-secondary, .sys-btn-restore, .sys-btn-contorno, .sys-btn, .sys-btn-delete) {
    border: 1px solid var(--p-linha);
    background: var(--p-painel);
    color: var(--p-texto);
}

.sys-pagina .btn:is(.sys-btn-new, .sys-btn-secondary, .sys-btn-restore, .sys-btn-contorno, .sys-btn, .sys-btn-delete):is(:hover, :focus-visible) {
    background: var(--p-hover);
    border-color: var(--p-linha);
    color: var(--p-texto);
}

.sys-pagina .btn:is(.sys-btn-save, .sys-btn-search, .sys-btn-primary) {
    background: var(--p-destaque);
    border: 1px solid var(--p-destaque);
    color: var(--p-destaque-contraste);
}

.sys-pagina .btn:is(.sys-btn-save, .sys-btn-search, .sys-btn-primary):is(:hover, :focus-visible) {
    background: var(--p-destaque);
    border-color: var(--p-destaque);
    color: var(--p-destaque-contraste);
    filter: brightness(0.94);
}

.sys-pagina .btn.sys-btn-delete,
.sys-pagina .btn.sys-btn-delete:is(:hover, :focus-visible) {
    color: var(--sys-color-danger);
}

.sys-pagina .btn[class*="sys-btn"]:disabled {
    opacity: 0.5;
}

.sys-pagina.sys-pagina .sys-actions-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.sys-pagina.sys-pagina .sys-actions-group::before,
.sys-pagina.sys-pagina .sys-actions-group::after {
    content: none;
}

/* Fora do rodapé do painel (telas próprias/compostas): a barra fica no fim, separada por uma linha. */
.sys-pagina.sys-pagina .sys-actions-group:not(.sys-bloco-rodape .sys-actions-group):not(.sys-modal .sys-actions-group) {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--p-linha);
}

.sys-layout-painel .sys-bloco-rodape .sys-actions-group {
    margin: 0 0 0 auto;
}

/* Salvar é a ação principal: no fim (à direita) — só o Cancelar vem depois dele (22/10/2026, pedido do usuário). */
.sys-pagina .sys-actions-group > .sys-btn-save {
    order: 1;
}

.sys-pagina .sys-actions-group > .sys-btn-cancelar-edicao {
    order: 2;
}

/*
|--------------------------------------------------------------------------
| Resultado da busca
|--------------------------------------------------------------------------
*/
/* Barra de busca do painel: vale no motor e nas telas próprias que usam a mesma marcação (ex.: fila do Conferir
   Formações). Mesma especificidade de antes (2/3 classes). */
.sys-barra-busca.sys-barra-busca-painel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 16px;
}

.sys-busca-campo {
    position: relative;
}

.sys-busca-campo > i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--p-apagado);
    pointer-events: none;
}

.sys-barra-busca-painel .sys-busca-campo > .sys-input {
    width: 100%;
    padding-left: 36px;
}

.sys-busca-controles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sys-busca-controles > .sys-select {
    flex: 1 1 130px;
    width: auto;
}

.sys-resultado-vazio {
    display: none;
    margin: 0;
    padding: 28px 16px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--p-apagado);
    border: 1px dashed var(--p-linha);
    border-radius: 10px;
}

.sys-resultado:has(> [data-role="lista"]:empty) > .sys-resultado-vazio {
    display: block;
}

/* Barra de páginas embaixo da lista (partial modulos/genericos/partials/paginacao-busca, 05/10/2026: 20 por página). */
.sys-paginacao-busca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.sys-paginacao-busca-info {
    font-size: 0.85rem;
    color: var(--p-apagado);
    white-space: nowrap;
}

/* « ‹ e › »: pares de botões só com ícone. */
.sys-paginacao-busca-grupo {
    display: flex;
    gap: 6px;
}

.sys-paginacao-busca-grupo > .btn {
    min-width: 36px;
}

/* Itens da lista (CrudListRenderer): cada registro é uma caixinha dentro do bloco (não encosta nas bordas), com
   espaço entre elas, rolagem própria — padrão de TODA lista de resultado (pedido do usuário 29/09/2026; regra em
   06-comportamento-das-telas). O contorno é sombra interna: o sistema-ui.css tem
   ".sys-crud-list-item { border: 0 !important }". */
.sys-layout-painel .sys-crud-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 480px;
    overflow: auto;
    margin: 0;
}

.sys-layout-painel .sys-crud-list > * + * {
    margin-top: 0;
}

/* O recuo fica na linha: o botão interno leva p-0 (!important) do Bootstrap. */
.sys-layout-painel .sys-crud-list-item {
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--p-linha);
    color: var(--p-texto);
}

.sys-layout-painel .sys-crud-list-item > button[data-action="selecionar"] {
    color: inherit;
}

/* Descrição longa (06/10/2026): o "Selecionar →" não quebra para a linha de baixo (deixava a caixinha com uma 2ª linha
   vazia); a descrição ocupa o resto e quebra a linha dentro dela (26/10/2026 — antes cortava com "…"). */
.sys-layout-painel .sys-crud-list-item > button[data-action="selecionar"] > div {
    flex-wrap: nowrap !important;
}

.sys-layout-painel .sys-crud-list-main {
    flex: 1 1 auto;
}

/* Destaque das caixinhas, UM padrão só (01/10/2026, pedido do usuário: umas com faixa grossa à esquerda, outras
   sem): mouse = fundo; foco/aberto = contorno fino na cor de destaque. Sem faixa lateral em nenhuma lista. */
.sys-layout-painel .sys-crud-list-item:hover {
    background: var(--p-hover);
}

.sys-layout-painel .sys-crud-list-item:focus-within {
    box-shadow: inset 0 0 0 1px var(--p-destaque);
}

.sys-layout-painel .sys-crud-list-badge {
    background: var(--p-superficie);
    color: var(--p-apagado);
    border: 1px solid var(--p-linha);
    border-radius: 6px;
    height: 26px;
}

/*
|--------------------------------------------------------------------------
| Busca e seleção de PESSOA em tela composta (29/09/2026 — Ocorrências; serve às próximas, ex.: Formação)
|--------------------------------------------------------------------------
| Barra numa linha só (escola | nome ou CPF | Buscar) e lista com rolagem própria, no visual do resultado da
| busca do painel. Marcação: modulos/ocorrencias/ocorrencias.blade.php + partials/lista-pessoas.
*/
.sys-barra-pessoa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.sys-barra-pessoa > .sys-select {
    flex: 0 1 260px;
}

.sys-barra-pessoa > .sys-input {
    flex: 1 1 220px;
}

/* Cada pessoa é uma caixinha dentro do bloco (não encosta nas bordas), com espaço entre elas — mesmo desenho da fila
   do Conferir Formações (pedido do usuário 29/09/2026). O contorno é sombra interna: o sistema-ui.css tem
   ".sys-crud-list-item { border: 0 !important }". */
.sys-lista-pessoas .sys-crud-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 340px;
    overflow: auto;
}

.sys-lista-pessoas .sys-crud-list-item {
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--p-linha);
    color: var(--p-texto);
    cursor: pointer;
}

.sys-lista-pessoas .sys-crud-list-item:is(:hover, :focus-visible) {
    background: var(--p-hover);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--p-destaque);
}

.sys-lista-pessoas > p {
    margin-top: 10px;
}

@media (max-width: 640px) {
    .sys-barra-pessoa > :is(.sys-select, .sys-input, .btn) {
        flex: 1 1 100%;
    }
}

/*
|--------------------------------------------------------------------------
| Comprovantes (Formação dos funcionários, 29/09/2026) — bloco abaixo do formulário, lista de arquivos
|--------------------------------------------------------------------------
| O JS põe o bloco na grade do painel: coluna do cadastro (a 2ª desde 05/10/2026, busca à esquerda), 2ª linha
| (mesma largura de "Dados da formação"); o resultado da busca ocupa as duas linhas da esquerda.
| Lista no visual do resultado da busca. Marcação: modulos/formacao/partials/comprovantes + lista-comprovantes.
*/
/* .sys-bloco-sob-cadastro (11/10/2026, Ficha de Avaliação → "Frases ativas"): o mesmo encaixe, para qualquer tela com
   um bloco abaixo do cadastro. A 2ª linha é 1fr: quando a busca cresce (ex.: "%"), quem cresce é a 2ª linha — o bloco
   de baixo fica colado no cadastro, sem ser empurrado. */
.sys-painel-grade:has(> :is(.sys-bloco-comprovantes, .sys-bloco-sob-cadastro)) > .sys-bloco-busca {
    grid-row: span 2;
}

.sys-painel-grade:has(> .sys-bloco-sob-cadastro) {
    grid-template-rows: auto 1fr;
}

.sys-painel-grade > :is(.sys-bloco-comprovantes, .sys-bloco-sob-cadastro) {
    grid-column: 1;
}

.sys-painel-grade:has(> .sys-bloco-busca) > :is(.sys-bloco-comprovantes, .sys-bloco-sob-cadastro) {
    grid-column: 2;
}

/* Uma coluna (tablet/celular): busca, formulário e o bloco de baixo, nessa ordem (a do HTML). */
@media (max-width: 1100px) {
    .sys-painel-grade:has(> :is(.sys-bloco-comprovantes, .sys-bloco-sob-cadastro)) > .sys-bloco-busca {
        grid-row: auto;
    }

    .sys-painel-grade:has(> .sys-bloco-sob-cadastro) {
        grid-template-rows: none;
    }

    .sys-painel-grade:has(> .sys-bloco-busca) > :is(.sys-bloco-comprovantes, .sys-bloco-sob-cadastro) {
        grid-column: auto;
    }
}

.sys-bloco-comprovantes .sys-bloco-dica {
    white-space: normal;
}

.sys-comprovantes-situacao {
    margin-bottom: 12px;
}

.sys-comprovantes-situacao > .sys-selo {
    max-width: 100%;
    white-space: normal; /* "Não aprovada por Fulano de Tal em 29/09/2026" quebra linha em vez de cortar */
    text-align: left;
}

.sys-selo.sys-selo-pendente {
    background: color-mix(in srgb, var(--sys-color-warning, #f0ad4e) 22%, var(--p-painel));
    color: var(--p-texto);
}

.sys-selo.sys-selo-ok {
    background: color-mix(in srgb, var(--sys-color-success, #2e9d5b) 20%, var(--p-painel));
    color: var(--p-texto);
}

.sys-selo.sys-selo-nao-aprovado {
    background: color-mix(in srgb, var(--sys-color-danger, #d9534f) 20%, var(--p-painel));
    color: var(--p-texto);
}

.sys-lista-arquivos {
    margin: 0 -24px;
    border-top: 1px solid var(--p-linha);
}

/* Minhas pendências (19/10/2026, pedido do usuário): cada pendência numa linha própria, mais baixa, com a sua borda e
   5 px entre uma e outra (antes encostavam na borda de baixo). */
.sys-lista-pendencias {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sys-lista-pendencias > li {
    padding: 6px 12px;
    border: 1px solid var(--p-linha);
    border-radius: 8px;
}

.sys-lista-pendencias > li:hover {
    background: var(--p-hover);
}

.sys-lista-arquivos > .sys-arquivo-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 -1px 0 var(--p-linha);
    background: transparent;
    color: var(--p-texto);
}

.sys-lista-arquivos > .sys-arquivo-linha:hover {
    background: var(--p-hover);
}

/* Linha do arquivo = caixinhas da mesma altura (pedido do usuário): [tipo] [nome] [tamanho] [Remover]. */
.sys-arquivo-caixa {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--p-linha);
    border-radius: 6px;
    background: var(--p-superficie);
    font-size: 0.82rem;
}

.sys-arquivo-tipo {
    flex-shrink: 0;
    justify-content: center;
    min-width: 46px;
    color: var(--p-apagado);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.sys-lista-arquivos a.sys-arquivo-nome {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    line-height: 30px;
    color: var(--p-texto);
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sys-lista-arquivos a.sys-arquivo-nome:is(:hover, :focus-visible) {
    border-color: var(--p-destaque);
    color: var(--p-destaque);
}

.sys-arquivo-tamanho {
    flex-shrink: 0;
    justify-content: flex-end;
    min-width: 72px;
    color: var(--p-apagado);
    font-variant-numeric: tabular-nums;
}

/* Combos da barra de busca encolhem além do texto da opção mais longa (ex.: "Não aprovadas (com o funcionário)");
   sem isto o Cancelar cai para a linha de baixo em telas de 1280px. */
.sys-busca-controles > .sys-select {
    min-width: 0;
}

/* Lista em caixinhas (regra 11 de 06-comportamento-das-telas): para listas de telas próprias que não usam uma das
   classes específicas (fila, não aprovadas, pessoas). Cada item é uma caixinha que não encosta nas bordas, com espaço
   entre elas. Contorno por sombra interna: ".sys-crud-list-item { border: 0 !important }" (sistema-ui.css). */
.sys-lista-caixas {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.sys-lista-caixas > .list-group-item {
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--p-linha);
    background: transparent;
    color: var(--p-texto);
}

/* Item clicável (a linha inteira é o botão): destaque ao passar o mouse ou focar. */
.sys-lista-caixas > .list-group-item:is([role="button"], :has(> button:only-child)):is(:hover, :focus-within) {
    background: var(--p-hover);
    box-shadow: inset 0 0 0 1px var(--p-destaque);
}

/* Item aberto (o botão da linha com aria-current="true", posto pela tela ao abrir): o mesmo contorno do foco. */
/* Caixinha com o botão de abrir e outros controles ao lado (Ficha: "Já avaliada", setas) — mesmo realce (12/10/2026). */
.sys-lista-caixas > .list-group-item:has(> .btn-link:first-child):is(:hover, :focus-within) {
    background: var(--p-hover);
    box-shadow: inset 0 0 0 1px var(--p-destaque);
}

.sys-lista-caixas > .list-group-item:has(> [aria-current="true"]) {
    box-shadow: inset 0 0 0 1px var(--p-destaque);
}

/* Contrato / termo dentro do Portal (rematrícula online, antes do aceite): parágrafos das cláusulas justificados, como na
   página do documento (21/10/2026, usuário). Títulos e capítulos à esquerda. */
.documento-rematricula .documento-clausula,
.documento-rematricula .clausula > div {
    text-align: justify;
}

/* Título do documento centralizado (21/10/2026, usuário). */
.documento-rematricula > h2 {
    text-align: center;
}

/* Divisória de grupo na lista dos ativos (21/10/2026: o capítulo das Cláusulas) — sem caixinha, como o título de grupo. */
.sys-lista-caixas > .list-group-item.sys-lista-ativos-grupo {
    box-shadow: none;
    padding: 8px 4px 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--p-apagado);
}

/* Selo dentro de uma caixinha: cabe inteiro (o limite de 45% do selo de cabeçalho cortava "Ciência declarada…"). */
.sys-lista-caixas .sys-selo {
    max-width: none;
}

/* Tela Conferir Formações: fila à esquerda; à direita, dados da formação e comprovantes empilhados. */
.sys-conferencia-lado {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

/* Cada formação é uma caixinha dentro do bloco (não encosta nas bordas), com alguns pixels entre uma e outra
   (pedido do usuário 29/09/2026); a altura das linhas continua a mesma. */
.sys-lista-fila {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 560px;
    overflow: auto;
}

.sys-lista-fila > .sys-fila-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border: 1px solid var(--p-linha);
    border-radius: 8px;
    box-shadow: none;
    background: transparent;
    color: var(--p-texto);
    cursor: pointer;
}

.sys-lista-fila > .sys-fila-linha + .sys-fila-linha {
    border-top-width: 1px; /* o list-group do Bootstrap tira a borda de cima das linhas seguintes */
}

.sys-lista-fila > .sys-fila-linha:is(:hover, :focus-visible, .ativa) {
    background: var(--p-hover);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--p-destaque);
}

.sys-fila-textos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sys-fila-textos > span {
    font-size: 0.85rem;
}

.sys-fila-textos > small {
    color: var(--p-apagado);
    font-size: 0.75rem;
}

/* Pré-matrículas (16/10/2026): cada item é um CONTRATANTE (em cima, com a caixa de marcar das mensagens) e, embaixo, os
   estudantes dele — cada linha com o selo da situação e os botões Efetivar / Desistir. Não é clicável como um todo. */
.sys-lista-fila.sys-pre-lista {
    max-height: none;
}

.sys-pre-lista > .sys-pre-grupo {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    cursor: default;
}

.sys-pre-lista > .sys-pre-grupo:hover {
    background: transparent;
    box-shadow: none;
}

.sys-pre-contratante {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sys-pre-contratante .form-check {
    margin: 0;
}

.sys-pre-estudantes {
    list-style: none;
    margin: 0;
    padding: 0 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sys-pre-estudante {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 6px;
    border-top: 1px dashed var(--p-linha);
}

.sys-pre-acoes {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* 17/10/2026 (usuário): com Receber e Restaurar os botões não cabiam lado a lado — selo em cima e os botões em grupos
   de dois, um par embaixo do outro, todos da mesma largura. O resto da linha não muda. */
.sys-pre-estudante .sys-pre-acoes {
    flex-direction: column;
    align-items: flex-end;
}
.sys-pre-botoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(96px, 1fr));
    gap: 6px;
}
.sys-pre-botoes:empty { display: none; }
.sys-pre-botoes .btn { width: 100%; white-space: nowrap; }

/* Cor da linha da pré-matrícula PENDENTE (17/10/2026): verde = janeiro pago e sem pendência; amarelo = pagar depois;
   vermelho = pendência financeira do contratante. Cores "subtle" do Bootstrap 5.3 (acompanham o tema escuro). */
.sys-pre-estudante[class*="sys-pre-cor-"] {
    border-radius: var(--p-raio);
    padding: 6px 8px;
}
.sys-pre-cor-ok           { background: var(--bs-success-bg-subtle); }
.sys-pre-cor-pagar-depois { background: var(--bs-warning-bg-subtle); }
.sys-pre-cor-aguardando   { background: var(--bs-primary-bg-subtle); } /* azul: pendente de pagamento, aguardando o financeiro */
.sys-pre-cor-pendencia    { background: var(--bs-danger-bg-subtle); }

@media (max-width: 700px) {
    .sys-pre-estudante {
        flex-direction: column;
        align-items: flex-start;
    }
    .sys-pre-estudante .sys-pre-acoes {
        align-items: flex-start;
    }
}

/* Desdobramentos das Ocorrências (06/10/2026): caixas separadas por 4px, cada uma com borda inteira e cantos
   arredondados; à direita o selo e os botões só com ícone (editar, excluir, restaurar). */
.sys-lista-desdobramentos {
    gap: 4px;
}

.sys-lista-desdobramentos > .list-group-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-top-width: 1px;
    border-radius: var(--bs-list-group-border-radius, 0.375rem);
}

.sys-desdobramento-acoes {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
}

.sys-desdobramento-acoes > .sys-selo {
    max-width: none; /* os 45% do selo seriam da caixinha dos ícones — cortava "Excluído" */
}

.sys-desdobramento-excluido .sys-fila-textos > span {
    color: var(--p-apagado);
    text-decoration: line-through;
}

.sys-selo.sys-selo-sem-comprovante {
    background: var(--p-superficie);
    color: var(--p-apagado);
}

/* Meus Diplomas: não aprovadas no topo (largura toda, acima do cadastro), borda vermelha à esquerda. */
.sys-bloco-nao-aprovadas {
    box-shadow: inset 4px 0 0 var(--sys-color-danger, #d9534f);
}

/* Cada não aprovada é uma caixinha dentro do bloco (não encosta nas bordas), com espaço entre elas — mesmo desenho da
   fila do Conferir Formações (pedido do usuário 29/09/2026). */
.sys-lista-nao-aprovadas {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sys-lista-nao-aprovadas > .sys-nao-aprovada-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border: 1px solid var(--p-linha);
    border-radius: 8px;
    box-shadow: none;
    background: transparent;
    color: var(--p-texto);
}

.sys-lista-nao-aprovadas > .sys-nao-aprovada-linha + .sys-nao-aprovada-linha {
    border-top-width: 1px; /* o list-group do Bootstrap tira a borda de cima das linhas seguintes */
}

.sys-nao-aprovada-textos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sys-nao-aprovada-motivo {
    color: var(--sys-color-danger, #d9534f);
    font-size: 0.9rem;
}

.sys-nao-aprovada-textos > small {
    color: var(--p-apagado);
    font-size: 0.75rem;
}

.sys-nao-aprovada-linha > .btn {
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .sys-lista-nao-aprovadas > .sys-nao-aprovada-linha {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Sem formação em edição (ou já conferida) não há o que anexar: o rodapé some em vez de ficar uma faixa vazia. */
.sys-bloco-comprovantes .sys-bloco-rodape:has(> [data-role="ff-envio"][hidden]:only-child) {
    display: none;
}

/* Rodapé: [Nome do comprovante ………] [Anexar comprovante] — o nome é o que aparece na lista (pedido do usuário). */
.sys-comprovantes-envio:not([hidden]) {
    display: flex;
    flex: 1 1 360px;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sys-comprovantes-envio > .sys-input {
    flex: 1 1 220px;
    min-width: 0;
}

/* Selo do cabeçalho do bloco ("Em edição · …", pessoa selecionada): NUNCA corta o texto com "…" — usa o espaço do
   cabeçalho e quebra em linhas (regra 14 de 06-comportamento-das-telas; pedido do usuário na Formação, 29/09/2026,
   que virou padrão de todas as telas). */
.sys-bloco-cabecalho > .sys-selo:not(.sys-selo-novo):not(:empty) {
    display: inline-block;
    /* Encolhe (texto longo quebra a linha dentro do bloco), mas nunca abaixo do trecho que não se parte — o
       "Em edição · " (::before, white-space: pre) + a 1ª palavra: nome curto ("Acre") não vira "…". */
    flex-shrink: 1;
    min-width: min-content;
    max-width: 70%;
    white-space: normal;   /* quebra em linhas em vez de cortar com … */
    line-height: 1.35;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 12px;
    text-align: right;
}

.sys-layout-painel:is([data-modulo="meus_diplomas"], [data-modulo="funcionarios_formacoes"]) .sys-bloco-cabecalho > .sys-bloco-textos {
    min-width: 170px;      /* "Dados da formação" numa linha só */
}

/* Renomear na própria linha: o campo ocupa o lugar do nome; Renomear/Remover ou Salvar/Cancelar ao lado.
   As caixinhas têm display próprio: o atributo hidden precisa vencer (senão o campo aparece sempre). */
.sys-lista-arquivos .sys-arquivo-caixa[hidden] {
    display: none;
}

.sys-arquivo-acoes:not([hidden]) {
    display: inline-flex;
    flex-shrink: 0;
    gap: 6px;
}

.sys-lista-arquivos .sys-input.sys-arquivo-renomear:not([hidden]) {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--p-destaque);
    background: var(--p-painel);
    font-weight: 600;
}

/* Remover em vermelho (texto e lixeira), como o Excluir do painel. */
.sys-pagina .btn.sys-arquivo-remover,
.sys-pagina .btn.sys-arquivo-remover:is(:hover, :focus-visible) {
    flex-shrink: 0;
    min-height: 32px;
    color: var(--sys-color-danger);
}

/* Celular: nome em cima na linha inteira; tipo, tamanho e Remover embaixo. */
@media (max-width: 640px) {
    .sys-lista-arquivos > .sys-arquivo-linha {
        flex-wrap: wrap;
        gap: 8px;
    }

    .sys-lista-arquivos a.sys-arquivo-nome {
        order: -1;
        flex-basis: 100%;
    }

    .sys-lista-arquivos .sys-arquivo-acoes {
        margin-left: auto;
    }

    .sys-lista-arquivos .sys-input.sys-arquivo-renomear:not([hidden]) {
        order: -1;
        flex-basis: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| COMPONENTES DO LAYOUT ANTIGO DENTRO DE UMA TELA MIGRADA (.sys-pagina), 29/09/2026
|--------------------------------------------------------------------------
| Telas próprias e compostas usam <x-sys.caixa>, <x-sys.cartao>, <x-sys.cartao-guias>, <x-sys.guias>,
| <x-sys.linha-campo> (rótulo | campo), <x-sys.tabela>, <x-sys.aviso>. Aqui eles ganham o visual novo sem
| mudar marcação nem JS. Classe dobrada (.sys-pagina.sys-pagina) = vencer as regras antigas com modificador
| (.sys-palette-custom fieldset.sys-stack.sys-stack-x …) sem !important.
*/

/* Caixa → painel, sem selo nem borda colorida. */
.sys-pagina.sys-pagina fieldset.sys-stack {
    background: var(--p-painel);
    border: 1px solid var(--p-linha);
    border-radius: var(--p-raio);
    box-shadow: var(--p-sombra);
    padding: 18px 22px 20px;
    margin: 0;
    min-width: 0;
}

.sys-pagina.sys-pagina fieldset.sys-stack + fieldset.sys-stack,
.sys-pagina.sys-pagina fieldset.sys-stack + .sys-actions-group + fieldset.sys-stack {
    margin-top: 18px;
}

/* float: left + largura toda = legenda dentro da caixa (sem float o navegador a desenha sobre a borda). */
.sys-pagina.sys-pagina fieldset.sys-stack > legend.sys-section-subtitle {
    float: left;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--p-texto);
}

.sys-pagina.sys-pagina fieldset.sys-stack > legend.sys-section-subtitle::after {
    content: none;
}

/* Cartão da tela (<x-sys.cartao>): sem faixa colorida; o título vira título de seção. */
.sys-pagina.sys-pagina .card.sys-crud-surface {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.sys-pagina.sys-pagina .card.sys-crud-surface > .sys-crud-surface-header {
    background: transparent;
    color: var(--p-texto);
    border: 0;
    padding: 0 0 14px;
    font-size: 1.05rem;
}

.sys-pagina.sys-pagina .card.sys-crud-surface > .sys-crud-surface-body {
    background: transparent;
    padding: 0;
}

/* Cartão com guias (<x-sys.cartao-guias>): guias sublinhadas sobre o fundo da página, sem caixa em volta. */
/* O cartão da página composta leva shadow-sm, o de sub-guias leva border (utilitários do Bootstrap, já
   !important). */
.sys-pagina.sys-pagina .card:has(> .card-header .nav-tabs) {
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
}

/* O cabeçalho do cartão de guias leva bg-white/bg-light (utilitário do Bootstrap, já !important). */
.sys-pagina.sys-pagina .card:has(> .card-header .nav-tabs) > .card-header {
    background: transparent !important;
    border: 0;
    padding: 0;
}

/* Faixa de título do cartão de sub-guias (ex.: "Matrículas", "Financeiro" em Usuários): repete o nome da guia
   logo acima — no visual novo sai (ficava branca sobre o fundo claro). */
.sys-pagina.sys-pagina .card:has(> .card-header .nav-tabs) > .sys-crud-surface-header {
    display: none;
}

.sys-pagina.sys-pagina .card:has(> .card-header .nav-tabs) > .card-body {
    background: transparent;
    padding: 20px 0 0;
}

.sys-pagina.sys-pagina.sys-pagina .card:has(> .card-header .nav-tabs) .tab-content,
.sys-pagina.sys-pagina .tab-content {
    background: transparent;
}

/* Guias (qualquer nível): linha fina e sublinhado no destaque, sem "aba de pasta". Guia dependente
   desabilitada fica apagada (nunca escondida — 02-padroes §6). */
.sys-pagina .nav-tabs {
    border-bottom: 1px solid var(--p-linha);
    gap: 2px;
}

.sys-pagina .card-header-tabs {
    margin: 0;
}

.sys-pagina.sys-pagina .nav-tabs .nav-link {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--p-apagado);
    font-weight: 600;
    padding: 10px 14px;
}

.sys-pagina.sys-pagina .nav-tabs .nav-link:hover {
    color: var(--p-texto);
    background: transparent;
}

.sys-pagina.sys-pagina .nav-tabs .nav-link.active,
.sys-pagina.sys-pagina .nav-tabs .nav-link.active:is(:hover, :focus) {
    color: var(--p-destaque);
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--p-destaque);
}

.sys-pagina.sys-pagina .nav-tabs .nav-link.disabled {
    opacity: 0.45;
}

/* Guias de dentro de uma guia (ex.: Cadastro | Manual de cada guia): um pouco menores. */
.sys-pagina .tab-pane .nav-tabs .nav-link {
    font-size: 0.85rem;
    padding: 8px 12px;
}

/* Manual de qualquer nível: o mesmo painel das outras áreas. */
.sys-pagina .tab-pane[id$="-manual"] {
    background: var(--p-painel);
    border: 1px solid var(--p-linha);
    border-radius: var(--p-raio);
    box-shadow: var(--p-sombra);
    padding: 22px 24px;
}

/* Linha rótulo | campo (<x-sys.linha-campo> sem largura). O rótulo antigo leva text-dark (!important
   do Bootstrap): no escuro ficaria ilegível, por isso o !important aqui. */
.sys-pagina .sys-field-row .sys-label,
.sys-pagina .sys-field-row .sys-label.text-dark {
    color: var(--p-texto) !important;
    font-size: 0.85rem;
    font-weight: 650;
}

/* Tabelas de dados (<x-sys.tabela variante="lista">) — pelas variáveis da tabela do Bootstrap. */
.sys-pagina .sys-lista-tabela {
    --bs-table-bg: transparent;
    --bs-table-color: var(--p-texto);
    --bs-table-hover-bg: var(--p-hover);
    --bs-table-hover-color: var(--p-texto);
    --bs-table-border-color: var(--p-linha);
}

.sys-pagina.sys-pagina .sys-lista-tabela > thead > tr > th {
    background: transparent;
    color: var(--p-apagado);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--p-linha);
}

/* Linha de grupo numa lista (ex.: aspecto da Ficha de Avaliação, 12/10/2026): fundo de destaque suave do tema, também
   no hover (é título, não linha clicável). */
.sys-pagina .sys-lista-tabela tr.sys-linha-grupo {
    --bs-table-bg: var(--p-destaque-suave);
    --bs-table-color: var(--p-destaque-suave-texto);
    --bs-table-hover-bg: var(--p-destaque-suave);
    --bs-table-hover-color: var(--p-destaque-suave-texto);
}

.sys-pagina.sys-pagina .sys-lista-tabela > tbody > tr.sys-linha-grupo > th {
    background-color: var(--p-destaque-suave);
    color: var(--p-destaque-suave-texto);
    box-shadow: none;
    font-weight: 700;
}

/* Tabela de DEMONSTRATIVO (22/10/2026, pedido do usuário — 1º uso: Entrega do material → Resumo): cabeçalho e total geral
   na cor de destaque do tema (a mais escura), linha de grupo com a fonte maior e total do grupo realçado. Só variáveis
   da paleta (claro/escuro de graça). Uso: <x-sys.tabela variante="lista" classe="sys-tabela-demonstrativo">, linha de
   grupo tr.sys-linha-grupo, total do grupo tr.sys-linha-subtotal, total geral tr.sys-linha-total. */
.sys-pagina.sys-pagina .sys-tabela-demonstrativo > thead > tr > th,
.sys-pagina.sys-pagina .sys-tabela-demonstrativo tr.sys-linha-total > :is(td, th) {
    background-color: var(--p-destaque);
    color: var(--p-destaque-contraste);
    box-shadow: none;
}
/* Título de coluna em duas linhas onde o texto traz "\n" (26/10/2026 — Séries → Resumo → Configurações, larga demais). */
.sys-pagina.sys-pagina .sys-tabela-demonstrativo.sys-tabela-titulos-quebrados > thead > tr > th {
    white-space: pre-line;
    vertical-align: bottom;
}
.sys-pagina.sys-pagina .sys-tabela-demonstrativo > tbody > tr.sys-linha-grupo > th {
    background-color: var(--p-painel);
    color: var(--p-destaque);
    border-bottom: 2px solid var(--p-destaque);
    font-size: 1.05rem;
    padding-top: 16px;
    padding-bottom: 6px;
}
.sys-pagina.sys-pagina .sys-tabela-demonstrativo tr.sys-linha-subtotal > :is(td, th) {
    background-color: var(--p-destaque-suave);
    color: var(--p-destaque-suave-texto);
    box-shadow: none;
    font-weight: 700;
}
.sys-pagina.sys-pagina .sys-tabela-demonstrativo tr.sys-linha-total > :is(td, th) {
    font-weight: 700;
}

/* Registro em edição do layout antigo (.sys-crud-current-name, "Selecionado") → o mesmo selo do painel. */
.sys-pagina.sys-pagina .sys-crud-current-name {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    margin: 0 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--p-destaque-suave);
    color: var(--p-destaque-suave-texto);
    font-size: 0.8rem;
    font-weight: 700;
}

.sys-pagina.sys-pagina .sys-crud-current-name::before {
    content: "Em edição · ";
    margin: 0;
    padding: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    white-space: pre;
}

/* Invólucro do campo: sem o fundo/recuo do layout antigo (criava "caixa dentro da caixa"). */
.sys-pagina.sys-pagina .sys-field-wrapper {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}

/* Caixas feitas à mão em telas próprias (Diários, Notas, Processar Retorno): filtro "bg-light rounded" e
   barra de ferramentas "bg-primary rounded" (utilitários do Bootstrap, já !important). Pendência: trocar pela
   marcação dos componentes (<x-sys.caixa> / <x-sys.acoes>) — pendencias.md. */
.sys-pagina .bg-light.rounded,
.sys-pagina .bg-primary.rounded {
    background-color: var(--p-painel) !important;
    border: 1px solid var(--p-linha);
    border-radius: var(--p-raio) !important;
    box-shadow: var(--p-sombra);
}

/* Avisos fixos da tela (<x-sys.aviso>). */
.sys-pagina .alert[role="note"] {
    border-radius: 10px;
}

/*
|--------------------------------------------------------------------------
| Foto do usuário (Usuários → Foto, partial modulos/users/partials/foto-usuario), 29/09/2026
|--------------------------------------------------------------------------
*/
.sys-foto-principal {
    display: flex;
    align-items: center;
    gap: 28px;
}

.sys-foto-avatar-area {
    position: relative;
    flex-shrink: 0;
}

.sys-foto-avatar {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    background: var(--p-superficie);
    border: 4px solid var(--p-painel);
    box-shadow: 0 0 0 3px var(--p-destaque-suave), var(--p-sombra);
    transition: box-shadow 0.15s ease;
}

.sys-foto-avatar:hover,
.sys-foto-avatar:focus-visible {
    box-shadow: 0 0 0 3px var(--p-destaque), var(--p-sombra);
}

.sys-foto-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sys-foto-vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--p-apagado);
    font-size: 3.6rem;
}

.sys-foto-carregando {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--p-painel) 80%, transparent);
    color: var(--p-destaque);
}

/* Selo de câmera no canto: indica que a foto é clicável. */
.sys-foto-selo {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--p-destaque);
    color: var(--p-destaque-contraste);
    border: 3px solid var(--p-painel);
    pointer-events: none;
    font-size: 0.9rem;
}

.sys-foto-acoes {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.sys-foto-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sys-foto-ajuda {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--p-apagado);
    max-width: 640px;
}

/* Recorte e câmera ao vivo: sub-painel claro dentro do painel. */
.sys-foto-subpainel {
    margin-top: 22px;
    padding: 18px 20px;
    border: 1px solid var(--p-linha);
    border-radius: 12px;
    background: var(--p-superficie);
}

.sys-foto-subpainel:not(.d-none) {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sys-foto-subpainel-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--p-texto);
}

.sys-foto-subpainel-cabecalho i {
    color: var(--p-destaque);
    margin-right: 6px;
}

.sys-foto-recorte {
    max-height: 380px;
    overflow: hidden;
}

.sys-foto-recorte img {
    display: block;
    max-width: 100%;
}

.sys-foto-camera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}

.sys-foto-video-area {
    position: relative;
}

.sys-foto-video,
.sys-foto-canvas {
    display: block;
    width: 280px;
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
}

.sys-foto-video {
    background: #000; /* vídeo sem imagem = preto, em qualquer tema */
}

.sys-foto-canvas {
    border: 2px solid var(--p-destaque);
}

.sys-foto-video-erro {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    text-align: center;
    font-size: 0.85rem;
}

.sys-foto-previa:not(.d-none) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

@media (max-width: 640px) {
    .sys-foto-principal {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Botão de contorno "perigo" (ex.: Remover foto): mantém o vermelho no visual novo. */
.sys-pagina .btn.btn-outline-danger.sys-btn-contorno,
.sys-pagina .btn.btn-outline-danger.sys-btn-contorno:is(:hover, :focus-visible) {
    color: var(--sys-color-danger);
}

/*
|--------------------------------------------------------------------------
| Janelas (.sys-modal) com a tela do layout novo aberta — inclui o diálogo de confirmação
|--------------------------------------------------------------------------
| Sem faixa colorida nem caixa "Ações": painel branco, título escuro, botões à direita
| (secundário à esquerda do principal). As janelas fora do layout novo não mudam.
*/
body:has(.sys-pagina) #system-confirm-modal .modal-dialog {
    max-width: 420px;
}
/* confirmAction({ largo: true }) — 26/10/2026: botões de texto comprido lado a lado (ex.: a pergunta do ano da matrícula). */
body:has(.sys-pagina) #system-confirm-modal .modal-dialog.sys-confirm-largo {
    max-width: 620px;
}
/* Mensagem com quebra de linha (\n) — 26/10/2026: a lista de onde a grade de permissões desmarca junto. */
#system-confirm-message {
    white-space: pre-line;
}
/* confirmAction({ cancelarPerigo: true }): o cancelar (vermelho) vem antes do confirmar. */
#system-confirm-modal [data-confirm-cancel].sys-confirm-primeiro {
    order: -1;
}

body:has(.sys-pagina) .sys-modal .modal-content {
    background: var(--p-painel);
    color: var(--p-texto);
    border: 1px solid var(--p-linha);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

body:has(.sys-pagina) .sys-modal .modal-header {
    background: transparent;
    color: var(--p-texto);
    border-bottom: 0;
    padding: 22px 24px 4px;
}

body:has(.sys-pagina) .sys-modal .modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

body:has(.sys-pagina) .sys-modal .modal-body {
    background: transparent;
    padding: 6px 24px 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

body:has(.sys-pagina) .sys-modal .sys-modal-acoes {
    padding: 22px 0 20px;
}

body:has(.sys-pagina) .sys-modal .sys-actions-group {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body:has(.sys-pagina) .sys-modal .sys-actions-group::before,
body:has(.sys-pagina) .sys-modal .sys-actions-group::after {
    content: none;
}

body:has(.sys-pagina) .sys-modal .sys-actions-group > .sys-btn-secondary {
    order: -1;
}

body:has(.sys-pagina) .sys-modal .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 650;
}

/* Secundário no mesmo estilo dos botões do painel; o de perigo mantém o vermelho do sistema. */
body:has(.sys-pagina) .sys-modal .btn.sys-btn-secondary {
    background: var(--p-painel);
    border: 1px solid var(--p-linha);
    color: var(--p-texto);
}

body:has(.sys-pagina) .sys-modal .btn.sys-btn-secondary:hover {
    background: var(--p-hover);
}

/*
|--------------------------------------------------------------------------
| Diários — só o visual da parte do meio (02/10/2026)
|--------------------------------------------------------------------------
| Pedido do usuário: estilizar as linhas de lançamento sem mudar ordem, marcação nem comportamento.
| Só CSS: a linha vira um painel como os demais; a situação (nova = rosa, salva = verde, classes postas
| pelo JS) passa a ser uma faixa à esquerda + fundo suave. A faixa é a borda esquerda mais grossa; o
| recuo interno desconta a diferença para os campos não saírem do alinhamento com os títulos das colunas.
*/
.sys-pagina .modulo-diarios > div:has(+ #diarios-grid) {
    color: var(--p-apagado);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sys-pagina .modulo-diarios .diario-linha {
    --diario-situacao: var(--p-linha);
    background: var(--p-painel);
    border: 1px solid var(--p-linha) !important;
    border-left: 4px solid var(--diario-situacao) !important;
    border-radius: var(--p-raio);
    box-shadow: var(--p-sombra) !important;
    overflow: hidden;
}

.sys-pagina .modulo-diarios .diario-linha.linha-diario-nova {
    --diario-situacao: var(--sys-color-danger, #d9534f);
    background: color-mix(in srgb, var(--sys-color-danger, #d9534f) 7%, var(--p-painel));
}

.sys-pagina .modulo-diarios .diario-linha.linha-diario-salva {
    --diario-situacao: var(--sys-color-success, #2e9d5b);
    background: color-mix(in srgb, var(--sys-color-success, #2e9d5b) 7%, var(--p-painel));
}

.sys-pagina .modulo-diarios .diario-linha .card-body {
    background: transparent;
    padding: 14px 16px 14px 13px;
}

.sys-pagina .modulo-diarios .diario-linha textarea {
    resize: vertical;
}

/* Ícones copiar/excluir da linha (09/10/2026, pedido do usuário): separados um do outro, com a altura (40px) e o topo
   das caixas da linha — antes ficavam colados e 4px acima. */
.sys-pagina .modulo-diarios .diario-linha .diario-acoes {
    gap: 8px;
    margin-top: 4px;
}

.sys-pagina .modulo-diarios .diario-linha .diario-acoes .btn {
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
}

/*
|--------------------------------------------------------------------------
| Lançamento de Notas — só o visual da lista de estudantes (02/10/2026)
|--------------------------------------------------------------------------
| Pedido do usuário: "apenas estilizar" a tabela do resultado (notas, faltas, faltas por aula), que vem do servidor
| como tabela Bootstrap com grade. Só CSS, preso a #area-grid-notas: caixa do painel, sem grade (só a linha entre
| estudantes), cabeçalho igual ao das listas do sistema (.sys-lista-tabela), hover, inativo apagado.
*/
.sys-pagina .modulo-lancamento-notas #area-grid-notas > .table-responsive {
    background: var(--p-painel);
    border: 1px solid var(--p-linha);
    border-radius: var(--p-raio);
    box-shadow: var(--p-sombra);
    padding: 6px 16px 10px;
}

.sys-pagina .modulo-lancamento-notas #area-grid-notas table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--p-texto);
    --bs-table-hover-bg: var(--p-hover);
    --bs-table-border-color: var(--p-linha);
    margin: 0;
}

.sys-pagina .modulo-lancamento-notas #area-grid-notas table > :not(caption) > * {
    border-width: 0;
}

.sys-pagina .modulo-lancamento-notas #area-grid-notas table > :not(caption) > * > * {
    border-width: 0 0 1px;
    padding: 7px 10px;
    vertical-align: middle;
}

.sys-pagina .modulo-lancamento-notas #area-grid-notas table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

.sys-pagina.sys-pagina .modulo-lancamento-notas #area-grid-notas table > thead > tr > th,
.sys-pagina.sys-pagina .modulo-lancamento-notas #area-grid-notas table > tbody > tr.sys-cabecalho-repetido > th {
    background: transparent;
    color: var(--p-apagado);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sys-pagina .modulo-lancamento-notas #area-grid-notas table > tbody > tr:not(.sys-cabecalho-repetido):hover > * {
    background: var(--p-hover);
}

/* Cabeçalho repetido a cada 10 estudantes (faltas por aula): mesmo visual do topo, com um respiro acima. */
.sys-pagina .modulo-lancamento-notas #area-grid-notas #grid-faltas-aula tr.sys-cabecalho-repetido > th {
    padding-top: 12px;
}

/* Nº de chamada discreto. */
.sys-pagina .modulo-lancamento-notas #area-grid-notas table > tbody > tr > td:first-child {
    color: var(--p-apagado);
    font-variant-numeric: tabular-nums;
}

/* Transferido / desistente (classe table-secondary vinda do servidor): apagado, sem o cinza do Bootstrap. */
.sys-pagina .modulo-lancamento-notas #area-grid-notas tr.table-secondary > * {
    --bs-table-bg: transparent;
    background: var(--p-superficie);
    color: var(--p-apagado);
}

/* Campo da nota/falta: valor centralizado. */
.sys-pagina .modulo-lancamento-notas #area-grid-notas .nota-input,
.sys-pagina .modulo-lancamento-notas #area-grid-notas .falta-input,
.sys-pagina .modulo-lancamento-notas #area-grid-notas .falta-justificada-input,
.sys-pagina .modulo-lancamento-notas #area-grid-notas input[name="notas[]"] {
    text-align: center;
}

/* Faltas por aula: célula preenchida empilhada na vertical — Editar, nº de faltas, Excluir (pedido do usuário
   02/10/2026, como no sistema antigo): cresce para baixo; os 31 dias continuam cabendo na largura. */
.sys-falta-aula {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 3px 0;
}

/* Faltas por aula: 3 colunas + até 31 dias precisam caber na largura (sem rolagem horizontal) — as células dos dias
   ficam sem o espaço interno das outras listas (com ele cada dia travava em 29 px e a grade passava de 1500 px). */
.sys-pagina .modulo-lancamento-notas #area-grid-notas #grid-faltas-aula > :not(caption) > * > * {
    padding: 6px 4px;
}

.sys-pagina .modulo-lancamento-notas #area-grid-notas #grid-faltas-aula > :not(caption) > * > :nth-child(n+4) {
    padding: 4px 1px;
}

.sys-pagina .sys-falta-aula .sys-falta-aula-acao {
    min-height: 0;
    padding: 1px 3px;
    font-size: 10px;
    line-height: 1.4;
}

.sys-pagina .sys-falta-aula .sys-falta-aula-acao > i {
    margin: 0;
}

/* Destaque em coordenadas (02/10/2026): mouse num dia → linha do estudante + coluna do dia acesas; a célula do
   cruzamento mais forte; nome do estudante e número do dia em destaque. Só variáveis do tema (claro/escuro/paletas). */
.sys-pagina .modulo-lancamento-notas #area-grid-notas #grid-faltas-aula tr.sys-coord-linha > *,
.sys-pagina .modulo-lancamento-notas #area-grid-notas #grid-faltas-aula .sys-coord-coluna {
    background: var(--p-destaque-suave);
}

.sys-pagina .modulo-lancamento-notas #area-grid-notas #grid-faltas-aula tr.sys-coord-linha > td:nth-child(2),
.sys-pagina.sys-pagina .modulo-lancamento-notas #area-grid-notas #grid-faltas-aula th.sys-coord-coluna {
    color: var(--p-destaque-suave-texto);
    font-weight: 700;
}

.sys-pagina .modulo-lancamento-notas #area-grid-notas #grid-faltas-aula td.sys-coord-celula {
    background: color-mix(in srgb, var(--p-destaque) 28%, var(--p-painel));
    box-shadow: inset 0 0 0 2px var(--p-destaque);
}

/* Gravação segura (02/10/2026): célula "salvando" (pedido a caminho do servidor) e "não salvou" (falha de comunicação
   ou sem resposta — clicar tenta de novo). Depois do destaque em coordenadas para prevalecer sobre ele. */
.sys-pagina .modulo-lancamento-notas #area-grid-notas #grid-faltas-aula td.sys-falta-salvando {
    opacity: 0.55;
    cursor: progress;
}

.sys-pagina .modulo-lancamento-notas #area-grid-notas #grid-faltas-aula td.sys-falta-salvando:empty::after {
    content: "…";
    font-weight: 700;
    color: var(--p-destaque);
}

.sys-pagina .modulo-lancamento-notas #area-grid-notas #grid-faltas-aula td.sys-falta-erro {
    background: color-mix(in srgb, var(--sys-color-danger, #d9534f) 14%, var(--p-painel));
    box-shadow: inset 0 0 0 2px var(--sys-color-danger, #d9534f);
    cursor: pointer;
}

.sys-pagina .modulo-lancamento-notas #area-grid-notas #grid-faltas-aula td.sys-falta-erro:empty::after {
    content: "!";
    font-weight: 700;
    color: var(--sys-color-danger, #d9534f);
}

/* Planilha (18/10/2026, faltasPorAulaGrid.js): o dia selecionado tem contorno forte; a caixa de digitação fica por
   cima do dia, invisível até digitar (assim os botões Editar/Excluir continuam clicáveis). */
.sys-pagina .modulo-lancamento-notas #area-grid-notas #grid-faltas-aula td.sys-falta-selecionada {
    position: relative;
    box-shadow: inset 0 0 0 3px var(--p-destaque);
}

.sys-pagina .modulo-lancamento-notas #area-grid-notas #grid-faltas-aula td .sys-falta-planilha-editor {
    position: absolute;
    inset: 3px;
    width: auto;
    min-height: 0;
    height: auto;
    padding: 0;
    text-align: center;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.sys-pagina .modulo-lancamento-notas #area-grid-notas #grid-faltas-aula td .sys-falta-planilha-editor.sys-digitando {
    opacity: 1;
    pointer-events: auto;
}

/* Balão do dia selecionado (18/10/2026, filtro "Balão com aluno e dia"): fica por cima da grade, acima (ou abaixo) do
   dia — o JS põe left/top; não pega clique. */
.sys-falta-balao {
    position: fixed;
    z-index: 1055;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-width: min(26rem, calc(100vw - 8px));
    padding: 4px 10px;
    border-radius: 6px;
    /* Tom mais escuro da cor do tema (a paleta escolhida), texto branco — legível em qualquer paleta e no tema escuro. */
    background: color-mix(in srgb, var(--p-destaque, #1f3b73) 55%, #000);
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    pointer-events: none;
}

.sys-falta-balao[hidden] {
    display: none;
}

.sys-falta-balao-dia {
    font-weight: 700;
}

.sys-falta-balao-aluno {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Gravação segura do Salvar em lote (03/10/2026, gravacaoLote.js): campo alterado a caminho do servidor e campo que
   "não salvou" (o motivo aparece ao passar o mouse; Salvar de novo tenta outra vez). */
.sys-pagina .modulo-lancamento-notas #area-grid-notas input.sys-gravacao-salvando {
    opacity: 0.55;
    cursor: progress;
}

.sys-pagina .modulo-lancamento-notas #area-grid-notas input.sys-gravacao-erro {
    background: color-mix(in srgb, var(--sys-color-danger, #d9534f) 14%, var(--p-painel));
    box-shadow: inset 0 0 0 2px var(--sys-color-danger, #d9534f);
    border-color: var(--sys-color-danger, #d9534f) !important;
}

/* Menu do botão direito no dia (1–4 faltas): fica por cima da grade, na posição do clique (o JS põe left/top).
   O mesmo visual serve aos atalhos dos quadros dos painéis (.sys-menu-contexto, 10/10/2026). */
.sys-menu-falta-aula,
.sys-menu-contexto {
    /* Mesmo desenho do .dropdown-menu do "⋯ Mais", sem a classe do Bootstrap (ver o partial menu-falta-aula). */
    --bs-dropdown-link-color: var(--p-texto, var(--sys-color-text));
    --bs-dropdown-link-hover-color: var(--p-texto, var(--sys-color-text));
    --bs-dropdown-link-hover-bg: var(--p-hover, var(--sys-color-surface-muted));
    --bs-dropdown-link-active-color: var(--p-destaque-contraste, #fff);
    --bs-dropdown-link-active-bg: var(--p-destaque, var(--sys-color-primary));
    --bs-dropdown-header-color: var(--p-apagado, var(--sys-color-text-muted));
    --bs-dropdown-header-padding-x: 10px;
    --bs-dropdown-header-padding-y: 4px;
    display: none;
    position: fixed;
    z-index: 1060;
    min-width: 9rem;
    margin: 0;
    list-style: none;
    background: var(--p-painel, var(--sys-color-surface));
    color: var(--p-texto, var(--sys-color-text));
}

.sys-menu-falta-aula.show,
.sys-menu-contexto.show {
    display: block;
}

.sys-menu-falta-aula .dropdown-item,
.sys-menu-contexto .dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--bs-dropdown-link-color);
}

.sys-menu-falta-aula .dropdown-item:hover,
.sys-menu-falta-aula .dropdown-item:focus,
.sys-menu-contexto .dropdown-item:hover,
.sys-menu-contexto .dropdown-item:focus {
    background: var(--bs-dropdown-link-hover-bg);
}

/* Caixa da edição rápida (dois cliques no número): estreita, para não alargar a coluna do dia. */
.sys-pagina .sys-falta-aula .sys-falta-aula-editar {
    width: 26px;
    min-height: 0;
    padding: 0 2px;
    text-align: center;
    font-weight: 700;
}

.sys-falta-aula-qtd {
    cursor: text;
    font-weight: 700;
    line-height: 1.2;
}

/* Opção única preenchida e travada (app/ui/campoUnico.js, 02/10/2026): mostra o valor, não deixa mexer. */
select.sys-campo-travado {
    pointer-events: none;
    background-color: var(--p-superficie, var(--sys-color-surface-muted)) !important;
    background-image: none !important;
    color: var(--p-texto, inherit);
}

@media (max-width: 640px) {
    .sys-bloco-cabecalho,
    .sys-bloco-rodape {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sys-bloco-corpo {
        padding: 0 16px 18px;
    }

    .sys-layout-painel .sys-crud-list-item {
        padding: 10px 12px;
    }

    .sys-bloco-rodape {
        flex-direction: column;
        align-items: stretch;
    }

    .sys-layout-painel .sys-actions-group {
        justify-content: stretch;
        margin: 0;
    }

    .sys-layout-painel .sys-actions-group > .btn {
        flex: 1 1 auto;
    }
}

/*
|--------------------------------------------------------------------------
| <x-sys.grupo-marcar> — grupos recolhíveis de caixas de marcar (08/10/2026; Papel x Permissões / Itens de Menu /
| Papéis atribuíveis). Cabeçalho = <summary> (título + "N de M"); corpo: dica, Marcar/Desmarcar todos, linhas de
| caixas em colunas que se ajustam à largura.
|--------------------------------------------------------------------------
*/
.sys-grupos-marcar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sys-grupos-marcar-filtro {
    margin-bottom: 12px;
}

.sys-grupo-marcar {
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--p-linha);
}

.sys-grupo-marcar[open] {
    box-shadow: inset 0 0 0 1px var(--p-destaque);
}

.sys-grupo-marcar-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    list-style: none;
    color: var(--p-texto);
    font-weight: 600;
    border-radius: 8px;
}

.sys-grupo-marcar-cabecalho::-webkit-details-marker {
    display: none;
}

/* Seta à esquerda do título: aponta para baixo com o grupo aberto. */
.sys-grupo-marcar-cabecalho::before {
    content: "\25B8";
    color: var(--p-apagado);
    transition: transform 0.15s ease;
}

.sys-grupo-marcar[open] > .sys-grupo-marcar-cabecalho::before {
    transform: rotate(90deg);
}

.sys-grupo-marcar-cabecalho:hover {
    background: var(--p-hover);
}

.sys-grupo-marcar-titulo {
    flex: 1 1 auto;
}

.sys-grupo-marcar-contagem {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--p-apagado);
    white-space: nowrap;
}

.sys-grupo-marcar-corpo {
    padding: 4px 16px 14px;
}

.sys-grupo-marcar-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.sys-grupo-marcar-dica {
    margin: 0;
    font-size: 0.78rem;
    color: var(--p-apagado);
}

.sys-grupo-marcar-acoes {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

/* Uma linha por subgrupo (ex.: as permissões de uma tela), separadas por um fio. */
.sys-grupo-marcar-linha {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 2px 16px;
    padding: 8px 0;
}

.sys-grupo-marcar-linha + .sys-grupo-marcar-linha {
    border-top: 1px solid var(--p-linha);
}

.sys-grupo-marcar-linha .form-check {
    margin: 0;
}

.sys-grupo-marcar-linha .form-check[hidden],
.sys-grupo-marcar-linha:not(.sys-grupo-marcar-linha--cabecalho):not(:has(.form-check:not([hidden]))) {
    display: none;
}

/* Linha com o nome da guia à esquerda (22/10/2026 — árvore por tela do Papel x Permissões); sub-guia recuada. */
.sys-grupo-marcar-linha--com-titulo {
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    align-items: start;
}

.sys-grupo-marcar-linha-titulo {
    font-weight: 600;
    font-size: .875rem;
    padding-top: 1px;
}

.sys-grupo-marcar-linha--nivel2 .sys-grupo-marcar-linha-titulo {
    padding-left: 1.25rem;
}

.sys-grupo-marcar-linha-itens {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
}

.sys-grupo-marcar-linha--cabecalho {
    display: block; /* só o nome (agrupa as sub-guias): não tem caixa, mas aparece — fora da regra que esconde a linha vazia */
    padding-bottom: 0;
}

@media (max-width: 575.98px) {
    .sys-grupo-marcar-linha--com-titulo {
        grid-template-columns: 1fr;
    }
}

/* Ícone do menu do papel (22/10/2026): prévia ao lado do combo e a janela com o desenho e um rádio em cada ícone. */
.sys-icone-previa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--p-linha);
    border-radius: .5rem;
    font-size: 1.1rem;
}

.sys-icones-secao + .sys-icones-secao {
    margin-top: 1rem;
}

.sys-icones-secao-titulo {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--p-apagado);
    margin: 0 0 .5rem;
}

/* Os já usados nos menus, em destaque no topo */
.sys-icones-secao--destaque {
    padding: .75rem;
    border-radius: .6rem;
    background: var(--p-destaque-suave);
}

.sys-icones-secao--destaque .sys-icones-secao-titulo {
    color: var(--p-destaque-suave-texto);
}

.sys-icones-secao--destaque .sys-icone-opcao {
    background: var(--p-painel);
}

.sys-icones-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 6px;
}

.sys-icone-opcao {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    border: 1px solid var(--p-linha);
    border-radius: .5rem;
    cursor: pointer;
    margin: 0;
    font-size: .875rem;
}

.sys-icone-opcao .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.sys-icone-opcao > i {
    width: 1.5rem;
    text-align: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.sys-icone-opcao:has(input:checked),
.sys-icones-secao--destaque .sys-icone-opcao:has(input:checked) {
    border-color: var(--p-destaque);
    background: var(--p-destaque-suave);
    color: var(--p-destaque-suave-texto);
}

/*
|--------------------------------------------------------------------------
| Painéis (08/10/2026 — Painel da Secretaria): widgets numa tela só (3 x 2) com roscas em SVG feitas no servidor
|--------------------------------------------------------------------------
| Cores das fatias: categorias (cat1..cat6, paleta de referência validada, com versão própria no tema escuro) e estados
| (perigo/aviso/sucesso, cores do tema) — sempre com nome e número na legenda; 0,8 de espaço entre fatias.
*/
.sys-painel-secretaria {
    --sys-graf-cat1: #2a78d6;
    --sys-graf-cat2: #eb6834;
    --sys-graf-cat3: #1baf7a;
    --sys-graf-cat4: #eda100;
    --sys-graf-cat5: #e87ba4;
    --sys-graf-cat6: #4a3aa7;
}

.sys-theme-escuro .sys-painel-secretaria {
    --sys-graf-cat1: #3987e5;
    --sys-graf-cat2: #d95926;
    --sys-graf-cat3: #199e70;
    --sys-graf-cat4: #c98500;
    --sys-graf-cat5: #d55181;
    --sys-graf-cat6: #9085e9;
}

.sys-painel-legenda {
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: var(--sys-color-text-muted);
}

/* Mensagem dos atalhos do painel (10/10/2026): só ocupa espaço quando aparece — o painel cabe numa tela sem rolar. */
.sys-painel-secretaria .sys-crud-message-area {
    min-height: 0;
    margin-top: 0;
}
.sys-painel-secretaria .sys-crud-message-area:not(:empty) {
    margin-bottom: 12px;
}

.sys-widgets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.sys-widgets > .sys-widget {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Quadro na linha inteira (31/10/2026, 'largo' no quadro do Painel — ex.: Desempenho das turmas). */
.sys-widgets > .sys-widget-largo {
    grid-column: 1 / -1;
}

/* Várias pizzas pequenas num quadro (partial painel/roscas): grade que se ajusta à largura; a rosca padrão, menor. */
.sys-roscas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px 20px;
}
.sys-roscas-item {
    min-width: 0;
    margin: 0;
}
.sys-roscas-titulo {
    margin-bottom: 4px;
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sys-color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sys-roscas-item .sys-rosca {
    gap: 10px;
}
.sys-roscas-item .sys-rosca-svg {
    width: 84px;
    height: 84px;
}
.sys-roscas-item .sys-rosca-legenda {
    gap: 3px;
    font-size: 0.72rem;
}

.sys-widget .sys-bloco-cabecalho {
    padding-bottom: 6px;
}

/* "⋯" dos atalhos no canto superior direito do quadro (10/10/2026): discreto, acende no hover/foco. */
.sys-widget .sys-widget-mais {
    align-self: flex-start;
    margin: -4px -6px 0 auto;
    padding: 2px 8px;
    line-height: 1;
    color: var(--sys-color-text-muted);
    text-decoration: none;
    border-radius: 6px;
}
.sys-widget .sys-widget-mais:hover,
.sys-widget .sys-widget-mais:focus-visible {
    color: var(--p-destaque, var(--sys-color-primary));
    background: var(--p-hover, var(--sys-color-surface-muted));
}
.sys-widget .sys-widget-mais > i {
    margin: 0;
    font-size: 1.05rem;
}

.sys-widget-rodape {
    margin: auto 0 0;
    padding-top: 8px;
    font-size: 0.74rem;
    color: var(--sys-color-text-muted);
}

/* Rosca + legenda lado a lado */
.sys-rosca {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sys-rosca-svg {
    flex: 0 0 auto;
    width: 118px;
    height: 118px;
}

.sys-rosca-fundo {
    fill: none;
    stroke: var(--sys-color-surface-muted);
    stroke-width: 5.5;
}

.sys-rosca-fatia {
    fill: none;
    stroke-width: 5.5;
    background: none;
    cursor: help;
    transition: stroke-width 0.12s ease;
}

.sys-rosca-fatia:hover {
    stroke-width: 7;
}

.sys-rosca-total {
    fill: var(--sys-color-text);
    font-size: 7.2px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
}

.sys-rosca-centro {
    fill: var(--sys-color-text-muted);
    font-size: 3.1px;
    text-anchor: middle;
}

.sys-rosca-legenda {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
    color: var(--sys-color-text);
}

.sys-rosca-legenda li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sys-rosca-rotulo {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Rótulo da legenda que abre a lista da fatia (12/10/2026, ritmo dos diários): texto da legenda, sublinhado. */
.sys-rosca-legenda .sys-rosca-link {
    padding: 0;
    border: 0;
    text-align: left;
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
}

.sys-rosca-vazio {
    margin: 0;
    font-size: 0.8rem;
    color: var(--sys-color-text-muted);
}

.sys-graf-marca {
    flex: 0 0 auto;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

/* stroke = fatia do SVG; background = marca da legenda */
.sys-graf-cat1 { stroke: var(--sys-graf-cat1); background: var(--sys-graf-cat1); }
.sys-graf-cat2 { stroke: var(--sys-graf-cat2); background: var(--sys-graf-cat2); }
.sys-graf-cat3 { stroke: var(--sys-graf-cat3); background: var(--sys-graf-cat3); }
.sys-graf-cat4 { stroke: var(--sys-graf-cat4); background: var(--sys-graf-cat4); }
.sys-graf-cat5 { stroke: var(--sys-graf-cat5); background: var(--sys-graf-cat5); }
.sys-graf-cat6 { stroke: var(--sys-graf-cat6); background: var(--sys-graf-cat6); }
.sys-graf-perigo { stroke: var(--sys-color-danger); background: var(--sys-color-danger); }
.sys-graf-aviso { stroke: var(--sys-color-warning); background: var(--sys-color-warning); }
.sys-graf-sucesso { stroke: var(--sys-color-success); background: var(--sys-color-success); }
.sys-graf-neutra { stroke: var(--sys-color-border); background: var(--sys-color-border); }
svg .sys-rosca-fatia { background: none; }

/* Aniversariantes */
.sys-widget-destaque {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    color: var(--sys-color-text-muted);
}

.sys-widget-destaque strong {
    font-size: 1.9rem;
    line-height: 1;
    color: var(--sys-color-text);
}

.sys-widget-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
}

.sys-widget-lista li {
    display: flex;
    gap: 10px;
    min-width: 0;
}

.sys-widget-dia {
    flex: 0 0 auto;
    color: var(--sys-color-text-muted);
    font-variant-numeric: tabular-nums;
}

.sys-widget-dia.sys-widget-hoje {
    color: var(--sys-color-success);
    font-weight: 700;
}

.sys-widget-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sys-color-text);
}

/* Pontos de atenção */
.sys-widget-atencao {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sys-widget-atencao li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--sys-color-border);
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--sys-color-text-muted);
}

.sys-widget-atencao strong {
    min-width: 3.2rem;
    font-size: 1.25rem;
    color: var(--sys-color-text);
    font-variant-numeric: tabular-nums;
}

.sys-widget-atencao li.sys-widget-alerta {
    border-color: var(--sys-color-warning);
}

@media (max-width: 1200px) {
    .sys-widgets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .sys-widgets {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Legenda das variáveis {{…}} (17/10/2026 — <x-sys.legenda-variaveis>): fechada é uma linha só; aberta, a tabela com
   o botão Inserir. Abre/fecha pelo <details> do navegador; a seta gira quando aberta. */
.sys-legenda-variaveis {
    border: 1px solid var(--p-linha);
    border-radius: var(--p-raio);
    background: var(--p-superficie);
}
.sys-legenda-variaveis-linha {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--p-destaque);
    user-select: none;
}
.sys-legenda-variaveis-linha::-webkit-details-marker { display: none; }
.sys-legenda-variaveis-linha:hover { background: var(--p-hover); }
.sys-legenda-variaveis-seta { transition: transform 0.15s; margin-right: 4px; }
/* Só a seta do próprio <details> gira (26/10/2026: os grupos também abrem e fecham — a legenda aberta não gira as deles). */
.sys-legenda-variaveis[open] > summary .sys-legenda-variaveis-seta,
.sys-legenda-variaveis-subgrupo[open] > summary .sys-legenda-variaveis-seta { transform: rotate(90deg); }
.sys-legenda-variaveis-total { color: var(--p-apagado); font-weight: 400; }
.sys-legenda-variaveis-corpo { padding: 4px 12px 8px; border-top: 1px solid var(--p-linha); }
.sys-legenda-variaveis-grupo {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--p-apagado);
    margin: 10px 0 4px;
}
/* Grupo que abre e fecha (26/10/2026, usuário): um pouco recuado, com a mesma setinha; a tabela dele, mais recuada. */
.sys-legenda-variaveis-subgrupo { margin-left: 12px; }
.sys-legenda-variaveis-subgrupo > summary.sys-legenda-variaveis-grupo {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
}
.sys-legenda-variaveis-subgrupo > summary.sys-legenda-variaveis-grupo::-webkit-details-marker { display: none; }
.sys-legenda-variaveis-subgrupo > summary.sys-legenda-variaveis-grupo:hover { color: var(--p-destaque); }
.sys-legenda-variaveis-subgrupo > .table-responsive { margin-left: 18px; }

/*
|--------------------------------------------------------------------------
| Calendário escolar (30/10/2026, Pedagógico → Calendário — specs/calendario-escolar.md)
| O ano bem grande e o mês ao lado nas cores do tema; a grade de quadradinhos (dias do mês); cada evento na cor do seu
| tipo (--cal-cor, posta pelo partial); a sequência do mês embaixo; resumo e linha do tempo.
|--------------------------------------------------------------------------
*/
.sys-cal-subguias { flex-wrap: wrap; }
.sys-cal-topo-guia { /* o Imprimir no alto de cada calendário (30/10/2026) */
    display: flex;
    justify-content: flex-end;
    margin-bottom: .5rem;
}
.sys-cal-topo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 12px;
}
.sys-cal-ano {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--p-destaque, var(--sys-color-primary));
}
.sys-cal-nome-mes {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--p-texto, var(--sys-color-text));
    border-left: 4px solid var(--p-destaque, var(--sys-color-primary));
    padding-left: 12px;
}
.sys-cal-letivos {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--p-destaque-suave, var(--sys-color-surface-muted));
    color: var(--p-destaque-suave-texto, var(--sys-color-text));
    font-size: 0.85rem;
}
.sys-cal-grade { table-layout: fixed; }
.sys-cal-grade thead th {
    text-align: center;
    background: var(--p-destaque, var(--sys-color-primary));
    color: var(--p-destaque-contraste, #fff);
    font-weight: 700;
}
.sys-cal-grade td { padding: 0; vertical-align: top; }
.sys-cal-quadro { aspect-ratio: 1 / 1; display: flex; flex-direction: column; overflow: hidden; }
.sys-cal-vazio { background: var(--p-hover, var(--sys-color-surface-muted)); }
.sys-cal-dia { background: var(--p-painel, var(--sys-color-surface)); cursor: context-menu; }
.sys-cal-fds { background: var(--p-hover, var(--sys-color-surface-muted)); }
.sys-cal-letivo .sys-cal-numero { color: var(--p-destaque, var(--sys-color-primary)); }
.sys-cal-hoje { box-shadow: inset 0 0 0 3px var(--p-destaque, var(--sys-color-primary)); }
.sys-cal-numero {
    font-weight: 800;
    font-size: 1.05rem;
    padding: 4px 6px 2px;
    color: var(--p-apagado, var(--sys-color-text-muted));
}
.sys-cal-eventos {
    list-style: none;
    margin: 0;
    padding: 0 4px 4px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.sys-cal-eventos li {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
    padding: 1px 2px 1px 5px;
    border-left: 4px solid var(--cal-cor, #6C757D);
    border-radius: 4px;
    background: color-mix(in srgb, var(--cal-cor, #6C757D) 14%, transparent);
    font-size: 0.72rem;
    line-height: 1.2;
}
.sys-cal-evento-texto { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys-cal-eventos .sys-cal-acao { flex: 0 0 auto; width: auto; padding: 0 3px; font-size: 0.68rem; }
.sys-cal-eventos li[draggable="true"] { cursor: grab; }
.sys-cal-eventos li.sys-cal-arrastando { opacity: 0.45; }
.sys-cal-dia.sys-cal-alvo { box-shadow: inset 0 0 0 3px var(--sys-color-warning, #FFC107); background: color-mix(in srgb, var(--sys-color-warning, #FFC107) 14%, var(--p-painel, #fff)); }
.sys-cal-dia.sys-cal-soltar { box-shadow: inset 0 0 0 3px var(--p-destaque, var(--sys-color-primary)); }
/* A guia do calendário arrastada para mudar a ordem (31/10/2026) e a guia onde ela vai cair. */
#cal-guias li[data-cal-ordem] .nav-link { cursor: grab; }
#cal-guias li.sys-cal-arrastando { opacity: 0.45; }
#cal-guias li.sys-cal-guia-soltar .nav-link { box-shadow: inset 0 -3px 0 var(--p-destaque, var(--sys-color-primary));
    background: color-mix(in srgb, var(--p-destaque, var(--sys-color-primary)) 10%, transparent); }
.sys-cal-eventos li.sys-cal-feriado,
.sys-cal-lista li.sys-cal-feriado,
.sys-cal-linha-lista li.sys-cal-feriado { --cal-cor: var(--sys-color-danger, #DC3545); }
.sys-cal-sequencia { margin-top: 16px; }
.sys-cal-lista { list-style: none; margin: 0; padding: 0; }
.sys-cal-lista li {
    padding: 4px 8px;
    margin-bottom: 4px;
    border-left: 4px solid var(--cal-cor, #6C757D);
    border-radius: 4px;
    background: var(--p-painel, var(--sys-color-surface));
}
.sys-cal-menu-item { border-left: 4px solid var(--cal-cor, #6C757D) !important; }
.sys-cal-linha-topo { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.sys-cal-linha-lista { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 3px solid var(--p-linha, var(--sys-color-border)); }
.sys-cal-linha-lista li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    margin-bottom: 4px;
    border-radius: 6px;
    background: var(--p-painel, var(--sys-color-surface));
}
.sys-cal-linha-lista li::before {
    content: "";
    position: absolute;
    left: -21px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--cal-cor, #6C757D);
}
.sys-cal-linha-lista li.sys-cal-passou {
    background: var(--p-hover, var(--sys-color-surface-muted));
    color: var(--p-apagado, var(--sys-color-text-muted));
    opacity: 0.7;
}
.sys-cal-linha-lista li.sys-cal-passou::before { background: var(--p-destaque, var(--sys-color-primary)); }
.sys-cal-linha-lista li.sys-cal-passou::after {
    content: "";
    position: absolute;
    left: -17px;
    top: 0;
    bottom: -4px;
    width: 3px;
    background: var(--p-destaque, var(--sys-color-primary));
}
.sys-cal-linha-lista li.sys-cal-linha-hoje {
    justify-content: center;
    font-weight: 800;
    color: var(--p-destaque-contraste, #fff);
    background: var(--p-destaque, var(--sys-color-primary));
}
.sys-cal-linha-lista li.sys-cal-linha-hoje::before { background: var(--p-destaque, var(--sys-color-primary)); box-shadow: 0 0 0 3px var(--p-painel, #fff); }
.sys-cal-progresso {
    height: 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--p-hover, var(--sys-color-surface-muted));
    overflow: hidden;
}
.sys-cal-progresso-feito { height: 100%; border-radius: 999px; background: var(--p-destaque, var(--sys-color-primary)); }
.sys-cal-resumo-meses tbody tr { cursor: pointer; }
.sys-cal-resumo-meses tbody tr.sys-cal-resumo-aberto td { background: var(--p-destaque-suave, var(--sys-color-surface-muted)); font-weight: 700; }
.sys-cal-tipos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sys-cal-tipos li {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--cal-cor, #6C757D);
    background: color-mix(in srgb, var(--cal-cor, #6C757D) 12%, transparent);
    font-size: 0.8rem;
}
.sys-cal-linha-lista li.sys-cal-hoje { box-shadow: inset 0 0 0 2px var(--p-destaque, var(--sys-color-primary)); opacity: 1; }
.sys-cal-linha-data { flex: 0 0 76px; font-weight: 700; }
.sys-cal-linha-texto { flex: 1 1 auto; }
.sys-cal-linha-feito { color: var(--sys-color-success, #198754); }