/*
|--------------------------------------------------------------------------
| sistema-ui.css
|--------------------------------------------------------------------------
|
| OBJETIVO
|--------------------------------------------------------------------------
| Este arquivo centraliza a camada visual semântica do sistema.
|
| Ele foi criado para reduzir o acoplamento direto entre as views/renderers
| e as classes específicas do framework CSS utilizado no momento.
|
| A ideia é que o sistema passe a usar classes próprias, como:
|
| - sys-surface
| - sys-surface-header
| - sys-surface-body
| - sys-form-row
| - sys-form-label
| - sys-actions-group
| - sys-tabs-nav
| - sys-tabs-pane
|
| Em vez de depender de utilitários espalhados do Bootstrap em dezenas de
| pontos do projeto.
|
| Isso também prepara o sistema para:
|
| 1. troca futura de framework visual com impacto menor
| 2. temas por usuário
| 3. uniformização visual de módulos simples e especiais
| 4. redução de mistura entre convenções de Bootstrap 3 e versões mais novas
|
| IMPORTANTE
|--------------------------------------------------------------------------
| Este arquivo NÃO substitui o Bootstrap atual.
| Ele atua como camada de compatibilidade e semântica do sistema.
|
| Nesta etapa, o objetivo é:
| - preservar o que já funciona
| - adicionar uma base estável para evolução
| - evitar quebra em cascata
|
| No futuro, se o framework visual mudar, este arquivo continuará existindo
| como camada própria do sistema, recebendo apenas os ajustes necessários.
|
|--------------------------------------------------------------------------
| TOKENS DE TEMA
|--------------------------------------------------------------------------
| As variáveis abaixo têm valores padrão.
| Quando a shell principal começar a injetar o tema ativo com base na
| UiCssMap, esses valores poderão ser sobrescritos via style inline
| ou via classe de tema aplicada ao body/container raiz.
*/

:root {
    --sys-color-primary: #337ab7;
    --sys-color-primary-contrast: #ffffff;
    --sys-color-success: #5cb85c;
    --sys-color-danger: #d9534f;
    --sys-color-warning: #f0ad4e;
    --sys-color-info: #5bc0de;
    --sys-color-surface: #ffffff;
    --sys-color-surface-muted: #f7f9fc;
    --sys-color-border: #d9dee7;
    --sys-color-text: #1f2937;
    --sys-color-text-muted: #6b7280;
    --sys-color-topbar: #1f2937;
    --sys-color-topbar-contrast: #ffffff;
    --sys-shadow-soft: 0 1px 6px rgba(0, 0, 0, 0.08);
    --sys-radius-sm: 4px;
    --sys-radius-md: 6px;
    --sys-radius-lg: 8px;
    --sys-space-xxs: 4px;
    --sys-space-xs: 6px;
    --sys-space-sm: 8px;
    --sys-space-md: 12px;
    --sys-space-lg: 16px;
    --sys-space-xl: 24px;
    --sys-transition-fast: 0.15s ease;
}

/*
|--------------------------------------------------------------------------
| BASE VISUAL DO SISTEMA
|--------------------------------------------------------------------------
*/

html,
body {
    color: var(--sys-color-text);
}

body.sys-theme-escuro {
    background-color: #0f172a;
}

.sys-text-muted {
    color: var(--sys-color-text-muted) !important;
}

.sys-stack > * + * {
    margin-top: var(--sys-space-md);
}

/*
|--------------------------------------------------------------------------
| SUPERFÍCIES / PAINÉIS / "CARDS" DO SISTEMA
|--------------------------------------------------------------------------
| Estas classes servem para módulos especiais e também para pontos que
| deixarem de escrever diretamente "panel" ou "card".
*/

.sys-surface {
    background-color: var(--sys-color-surface);
    border-color: var(--sys-color-border);
    box-shadow: var(--sys-shadow-soft);
    border-radius: var(--sys-radius-md);
    overflow: hidden;
}

.panel.sys-surface {
    margin-bottom: 15px;
}

.sys-surface-header {
    background: var(--sys-color-surface-muted);
    color: var(--sys-color-text);
    border-bottom: 1px solid var(--sys-color-border);
    font-weight: 600;
}

.panel-heading.sys-surface-header {
    background: var(--sys-color-surface-muted);
}

.sys-surface-body {
    background: var(--sys-color-surface);
}

/*
|--------------------------------------------------------------------------
| FORMULÁRIOS
|--------------------------------------------------------------------------
*/

.sys-form-row {
    margin-bottom: 12px;
}

.sys-form-label-col,
.sys-form-input-col {
    min-height: 1px;
}

.sys-form-label {
    color: var(--sys-color-text);
    font-weight: 600;
}

.sys-form-control {
    border-color: var(--sys-color-border);
    color: var(--sys-color-text);
    transition: border-color var(--sys-transition-fast), box-shadow var(--sys-transition-fast);
}

.sys-form-control:focus {
    border-color: var(--sys-color-primary);
    box-shadow: 0 0 0 1px rgba(51, 122, 183, 0.15);
}

/* Largura uniforme do prefixo de ícone, inclusive ao mudar o estado de validação. */
.sys-input-group-text {
    flex: 0 0 3rem;
    width: 3rem;
    padding-inline: 0.5rem;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.sys-input-group-addon {
    background-color: var(--sys-color-surface-muted);
    border-color: var(--sys-color-border);
    color: var(--sys-color-text-muted);
}

.sys-help-block,
.help-block.sys-help-block {
    color: var(--sys-color-text-muted);
    margin-top: 4px;
}

/*
|--------------------------------------------------------------------------
| ESTADO DE VALIDAÇÃO
|--------------------------------------------------------------------------
| O sistema já possui sua lógica de validação. Aqui deixamos apenas uma base
| visual padronizada para quando as classes forem aplicadas no DOM.
*/

.sys-field-error .sys-form-control,
.has-error .sys-form-control {
    border-color: var(--sys-color-danger);
}

.sys-field-success .sys-form-control,
.has-success .sys-form-control {
    border-color: var(--sys-color-success);
}

.sys-field-error .sys-form-label,
.has-error .sys-form-label {
    color: var(--sys-color-danger);
}

.sys-field-success .sys-form-label,
.has-success .sys-form-label {
    color: var(--sys-color-success);
}

/*
|--------------------------------------------------------------------------
| GRUPOS DE AÇÕES
|--------------------------------------------------------------------------
| Substitui o uso direto de d-flex / gap-* / flex-wrap em novos pontos.
*/

.sys-actions-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sys-space-sm);
    align-items: center;
}

.sys-actions-group > .btn,
.sys-actions-group > button,
.sys-actions-group > a {
    margin-right: 0;
}

.sys-actions-group.sys-actions-group-right {
    justify-content: flex-end;
}

.sys-actions-group.sys-actions-group-between {
    justify-content: space-between;
}

.sys-actions-group.sys-actions-group-column {
    flex-direction: column;
    align-items: stretch;
}

/*
|--------------------------------------------------------------------------
| TABS DO SISTEMA
|--------------------------------------------------------------------------
| Esta camada foi pensada para evitar dependência de convenções específicas
| como fade/show/data-bs-*.
|
| A ideia é que o sistema controle as tabs via JS próprio, usando classes
| semânticas e comportamento previsível.
*/

.sys-tabs-nav {
    margin-bottom: 15px;
    border-bottom: 1px solid var(--sys-color-border);
}

.sys-tabs-nav > li.sys-tabs-item {
    margin-bottom: -1px;
}

.sys-tabs-nav > li.sys-tabs-item > a,
.sys-tabs-nav > li > a.sys-tabs-button,
.sys-tabs-nav > li.sys-tabs-item > a.sys-tabs-button {
    color: var(--sys-color-text);
    border-radius: var(--sys-radius-sm) var(--sys-radius-sm) 0 0;
    border: 1px solid transparent;
    transition: background-color var(--sys-transition-fast), color var(--sys-transition-fast), border-color var(--sys-transition-fast);
    cursor: pointer;
}

.sys-tabs-nav > li.sys-tabs-item > a:hover,
.sys-tabs-nav > li > a.sys-tabs-button:hover,
.sys-tabs-nav > li.sys-tabs-item > a.sys-tabs-button:hover {
    background-color: var(--sys-color-surface-muted);
    border-color: var(--sys-color-border);
    color: var(--sys-color-text);
}

.sys-tabs-nav > li.active > a,
.sys-tabs-nav > li.active > a:focus,
.sys-tabs-nav > li.active > a:hover,
.sys-tabs-nav > li > a.sys-tabs-button.active,
.sys-tabs-nav > li > a.sys-tabs-button.active:focus,
.sys-tabs-nav > li > a.sys-tabs-button.active:hover,
.sys-tabs-nav > li.sys-tabs-item > a.sys-tabs-button.active,
.sys-tabs-nav > li.sys-tabs-item > a.sys-tabs-button.active:focus,
.sys-tabs-nav > li.sys-tabs-item > a.sys-tabs-button.active:hover {
    color: var(--sys-color-primary);
    background-color: var(--sys-color-surface);
    border: 1px solid var(--sys-color-border);
    border-bottom-color: transparent;
    font-weight: 600;
}

.sys-tabs-nav > li.disabled > a,
.sys-tabs-nav > li > a.sys-tabs-button.disabled,
.sys-tabs-nav > li.sys-tabs-item > a.sys-tabs-button.disabled {
    color: #9aa4b2;
    cursor: not-allowed;
    opacity: 0.7;
    background-color: transparent;
}

.sys-tabs-content {
    position: relative;
}

.sys-tabs-pane {
    display: none;
}

.sys-tabs-pane.active {
    display: block;
}

/*
|--------------------------------------------------------------------------
| ALERTAS
|--------------------------------------------------------------------------
*/

.sys-alert-neutral {
    border-color: #bcdff1;
    background-color: #eef7fc;
    color: #31708f;
}

.sys-theme-escuro .sys-alert-neutral {
    border-color: #35546b;
    background-color: #132432;
    color: #a9d7f2;
}

/*
|--------------------------------------------------------------------------
| INDICADOR DE REGISTRO EM EDIÇÃO
|--------------------------------------------------------------------------
|
| Padrão para avisos de "você está editando este registro" em guias
| e sub-guias. Usar sempre com: alert alert-warning d-none small
|
| Exemplo:
|   <div class="alert alert-warning d-none small sys-indicador-edicao" role="alert">
|       <i class="fa-solid fa-pen-to-square me-1"></i>
|       <strong>Editando:</strong> <span id="..."></span>
|       — Clique em <strong>Novo</strong> para criar um registro diferente.
|   </div>
*/

.sys-indicador-edicao {
    border-radius: var(--sys-radius-md);
    margin: 0 0 8px 0;
    font-size: 13px;
}

/*
|--------------------------------------------------------------------------
| CONFIRMAÇÃO GRANDE (DITADO DE NOTAS)
|--------------------------------------------------------------------------
|
| Card de confirmação em tela cheia, usado pelo módulo de ditado de notas
| para mostrar nome do aluno + nota por alguns segundos. Injetado via JS
| (notasDitadoOverlay.js); cores seguem as variáveis de tema/paleta.
*/

.sys-ditado-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.sys-ditado-overlay-card {
    background: var(--sys-color-surface);
    color: var(--sys-color-text);
    border: 2px solid var(--sys-color-primary);
    border-radius: var(--sys-radius-lg);
    box-shadow: var(--sys-shadow-soft);
    padding: var(--sys-space-xl) calc(var(--sys-space-xl) * 2);
    text-align: center;
    max-width: min(90vw, 720px);
}

.sys-ditado-overlay-nome {
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 700;
    margin-bottom: var(--sys-space-sm);
}

.sys-ditado-overlay-valor {
    font-size: clamp(36px, 7vw, 56px);
    font-weight: 800;
    color: var(--sys-color-primary);
}

.sys-ditado-badge {
    color: var(--sys-color-primary-contrast);
}

.sys-ditado-badge-inativo { background-color: var(--sys-color-text-muted); }
.sys-ditado-badge-passivo { background-color: var(--sys-color-info); }
.sys-ditado-badge-ativo   { background-color: var(--sys-color-success); }

/*
|--------------------------------------------------------------------------
| BADGES / ESTADOS / INDICADORES
|--------------------------------------------------------------------------
*/

.sys-status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
}

.sys-status-pill.sys-status-ativo {
    background-color: rgba(92, 184, 92, 0.14);
    color: #2f6f2f;
}

.sys-status-pill.sys-status-inativo {
    background-color: rgba(240, 173, 78, 0.16);
    color: #8a5d1f;
}

.sys-status-pill.sys-status-excluido {
    background-color: rgba(217, 83, 79, 0.14);
    color: #8a2f2c;
}

/*
|--------------------------------------------------------------------------
| TABELAS
|--------------------------------------------------------------------------
| Mantemos compatibilidade com Bootstrap 3, mas criamos classes próprias
| para evolução futura.
*/

.sys-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.sys-table {
    width: 100%;
    background-color: var(--sys-color-surface);
}

.sys-table > thead > tr > th {
    background-color: var(--sys-color-surface-muted);
    color: var(--sys-color-text);
    border-bottom: 1px solid var(--sys-color-border);
}

.sys-table > tbody > tr > td {
    color: var(--sys-color-text);
    vertical-align: middle;
}

.sys-table > tbody > tr:hover {
    background-color: rgba(51, 122, 183, 0.03);
}

/*
|--------------------------------------------------------------------------
| BARRAS / CONTAINERS DE TOPO
|--------------------------------------------------------------------------
*/

.sys-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sys-space-sm);
    margin-bottom: 15px;
}

.sys-toolbar-left,
.sys-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sys-space-sm);
}

/*
|--------------------------------------------------------------------------
| BOTÕES
|--------------------------------------------------------------------------
| Não substituímos os botões do Bootstrap atual.
| Apenas acrescentamos classes semânticas e suporte futuro a tema.
*/

.btn.sys-btn-primary,
.sys-btn-primary {
    background-color: var(--sys-color-primary);
    border-color: var(--sys-color-primary);
    color: var(--sys-color-primary-contrast);
}

.btn.sys-btn-primary:hover,
.btn.sys-btn-primary:focus,
.sys-btn-primary:hover,
.sys-btn-primary:focus {
    filter: brightness(0.96);
    color: var(--sys-color-primary-contrast);
}

.btn.sys-btn-neutral,
.sys-btn-neutral {
    background-color: var(--sys-color-surface-muted);
    border-color: var(--sys-color-border);
    color: var(--sys-color-text);
}

.btn.sys-btn-neutral:hover,
.btn.sys-btn-neutral:focus,
.sys-btn-neutral:hover,
.sys-btn-neutral:focus {
    background-color: #eef2f7;
    border-color: #c8d0db;
    color: var(--sys-color-text);
}

/*
|--------------------------------------------------------------------------
| ESTRUTURAS AUXILIARES DE LAYOUT
|--------------------------------------------------------------------------
*/

.sys-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--sys-space-xs);
}

.sys-row-gap-sm > * {
    margin-bottom: var(--sys-space-sm);
}

.sys-row-gap-md > * {
    margin-bottom: var(--sys-space-md);
}

.sys-section-title {
    margin: 0 0 12px 0;
    color: var(--sys-color-text);
    font-size: 18px;
    font-weight: 600;
}

.sys-section-subtitle {
    margin: 0 0 15px 0;
    color: var(--sys-color-text-muted);
    font-size: 13px;
}

/*
|--------------------------------------------------------------------------
| TOPO DO SISTEMA / MENU
|--------------------------------------------------------------------------
| Já deixamos tokens prontos para o futuro uso no shell principal.
*/

/* Garante que dropdown funcione sem Bootstrap JS */

.navbar .dropdown-menu {
    display: none;
    position: absolute;
    background: #fff;
    z-index: 1000;
}

.navbar .dropdown-menu.show {
    display: block !important;
}

/* Corrige posicionamento */
.navbar .nav-item {
    position: relative;
}

.sys-topbar {
    background-color: var(--sys-color-topbar);
    color: var(--sys-color-topbar-contrast);
}

.sys-topbar a {
    color: var(--sys-color-topbar-contrast);
}

.sys-topbar a:hover,
.sys-topbar a:focus {
    opacity: 0.92;
    color: var(--sys-color-topbar-contrast);
}

/*
|--------------------------------------------------------------------------
| TEMA ESCURO - AJUSTES COMPLEMENTARES
|--------------------------------------------------------------------------
| As variáveis já cobrem boa parte do comportamento.
| Aqui ficam apenas refinamentos estruturais que não dependem só de cor.
*/

:is(.sys-theme-escuro, .sys-palette-custom) .sys-surface {
    border-color: var(--sys-color-border);
}

:is(.sys-theme-escuro, .sys-palette-custom) .sys-form-control,
:is(.sys-theme-escuro, .sys-palette-custom) textarea.sys-form-control,
:is(.sys-theme-escuro, .sys-palette-custom) select.sys-form-control {
    background-color: var(--sys-color-input, #0f172a);
    color: var(--sys-color-text);
    border-color: var(--sys-color-border);
}

:is(.sys-theme-escuro, .sys-palette-custom) .sys-input-group-addon {
    background-color: var(--sys-color-surface-muted, #1f2937);
    color: var(--sys-color-text-muted);
    border-color: var(--sys-color-border);
}

:is(.sys-theme-escuro, .sys-palette-custom) .sys-tabs-nav > li.sys-tabs-item > a:hover,
:is(.sys-theme-escuro, .sys-palette-custom) .sys-tabs-nav > li > a.sys-tabs-button:hover,
:is(.sys-theme-escuro, .sys-palette-custom) .sys-tabs-nav > li.sys-tabs-item > a.sys-tabs-button:hover {
    background-color: var(--sys-color-hover, #17212f);
}

:is(.sys-theme-escuro, .sys-palette-custom) .sys-tabs-nav > li.active > a,
:is(.sys-theme-escuro, .sys-palette-custom) .sys-tabs-nav > li.active > a:focus,
:is(.sys-theme-escuro, .sys-palette-custom) .sys-tabs-nav > li.active > a:hover,
:is(.sys-theme-escuro, .sys-palette-custom) .sys-tabs-nav > li > a.sys-tabs-button.active,
:is(.sys-theme-escuro, .sys-palette-custom) .sys-tabs-nav > li > a.sys-tabs-button.active:focus,
:is(.sys-theme-escuro, .sys-palette-custom) .sys-tabs-nav > li > a.sys-tabs-button.active:hover,
:is(.sys-theme-escuro, .sys-palette-custom) .sys-tabs-nav > li.sys-tabs-item > a.sys-tabs-button.active,
:is(.sys-theme-escuro, .sys-palette-custom) .sys-tabs-nav > li.sys-tabs-item > a.sys-tabs-button.active:focus,
:is(.sys-theme-escuro, .sys-palette-custom) .sys-tabs-nav > li.sys-tabs-item > a.sys-tabs-button.active:hover {
    background-color: var(--sys-color-surface, #111827);
}

:is(.sys-theme-escuro, .sys-palette-custom) .sys-table > thead > tr > th {
    background-color: var(--sys-color-surface-muted, #1f2937);
}

:is(.sys-theme-escuro, .sys-palette-custom) .sys-table > tbody > tr:hover {
    background-color: rgba(var(--sys-color-primary-rgb, 96, 165, 250), 0.08);
}

/*
|--------------------------------------------------------------------------
| TEMA ESCURO — BOOTSTRAP 5 + LAYOUT
|--------------------------------------------------------------------------
| Sobrescreve componentes Bootstrap 5 e elementos de layout (topbar,
| menubar, app-container) quando o tema escuro está ativo.
| Os valores usam as CSS vars do tema para manter consistência.
*/

/* Estrutura de layout */
:is(.sys-theme-escuro, .sys-palette-custom) .app-container {
    background: var(--sys-color-surface);
    box-shadow: var(--sys-shadow-soft);
    color: var(--sys-color-text);
}

/* Cards Bootstrap */
:is(.sys-theme-escuro, .sys-palette-custom) .card {
    background-color: var(--sys-color-surface-muted);
    border-color: var(--sys-color-border);
    color: var(--sys-color-text);
}

:is(.sys-theme-escuro, .sys-palette-custom) .card-header {
    background-color: var(--sys-color-surface-muted, #1f2937);
    border-bottom-color: var(--sys-color-border);
    color: var(--sys-color-text);
}

:is(.sys-theme-escuro, .sys-palette-custom) .card-body {
    background-color: var(--sys-color-surface-muted);
}

:is(.sys-theme-escuro, .sys-palette-custom) .card-footer {
    background-color: var(--sys-color-surface-muted, #1f2937);
    border-top-color: var(--sys-color-border);
}

/* Form controls Bootstrap */
:is(.sys-theme-escuro, .sys-palette-custom) .form-control,
:is(.sys-theme-escuro, .sys-palette-custom) .form-select {
    background-color: var(--sys-color-input, #0f172a);
    border-color: var(--sys-color-border);
    color: var(--sys-color-text);
}

/* Controles nativos de data/hora: color-scheme instrui o browser a usar ícones claros */
.sys-theme-escuro input[type="date"],
.sys-theme-escuro input[type="time"],
.sys-theme-escuro input[type="datetime-local"],
.sys-theme-escuro input[type="month"],
.sys-theme-escuro input[type="week"] {
    color-scheme: dark;
}

:is(.sys-theme-escuro, .sys-palette-custom) .form-control:focus,
:is(.sys-theme-escuro, .sys-palette-custom) .form-select:focus {
    background-color: var(--sys-color-input, #0f172a);
    color: var(--sys-color-text);
    border-color: var(--sys-color-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--sys-color-primary-rgb, 96, 165, 250), 0.2);
}

:is(.sys-theme-escuro, .sys-palette-custom) .form-control::placeholder {
    color: var(--sys-color-text-muted);
}

:is(.sys-theme-escuro, .sys-palette-custom) .form-control:disabled,
:is(.sys-theme-escuro, .sys-palette-custom) .form-select:disabled {
    background-color: var(--sys-color-surface-muted, #1f2937);
    color: var(--sys-color-text-muted);
}

:is(.sys-theme-escuro, .sys-palette-custom) .input-group-text {
    background-color: var(--sys-color-surface-muted, #1f2937);
    border-color: var(--sys-color-border);
    color: var(--sys-color-text-muted);
}

/* Nav / Tabs Bootstrap */
:is(.sys-theme-escuro, .sys-palette-custom) .nav-tabs {
    border-bottom-color: var(--sys-color-border);
}

:is(.sys-theme-escuro, .sys-palette-custom) .nav-tabs .nav-link {
    color: var(--sys-color-text-muted);
}

:is(.sys-theme-escuro, .sys-palette-custom) .nav-tabs .nav-link:hover {
    color: var(--sys-color-text);
    border-color: transparent transparent var(--sys-color-border);
}

:is(.sys-theme-escuro, .sys-palette-custom) .nav-tabs .nav-link.active,
:is(.sys-theme-escuro, .sys-palette-custom) .nav-tabs .nav-link.active:hover,
:is(.sys-theme-escuro, .sys-palette-custom) .nav-tabs .nav-link.active:focus {
    background-color: var(--sys-color-surface);
    border-color: var(--sys-color-border) var(--sys-color-border) var(--sys-color-surface);
    color: var(--sys-color-text);
}

/* Garante que o fundo do card-header com nav-tabs não fique branco */
:is(.sys-theme-escuro, .sys-palette-custom) .card-header-tabs {
    border-bottom-color: var(--sys-color-border);
}

:is(.sys-theme-escuro, .sys-palette-custom) .tab-content {
    background-color: var(--sys-color-surface);
    color: var(--sys-color-text);
}

:is(.sys-theme-escuro, .sys-palette-custom) .tab-pane {
    color: var(--sys-color-text);
}

/* Tabelas Bootstrap */
:is(.sys-theme-escuro, .sys-palette-custom) .table {
    color: var(--sys-color-text);
    border-color: var(--sys-color-border);
}

:is(.sys-theme-escuro, .sys-palette-custom) .table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--sys-color-border);
    color: var(--sys-color-text);
}

:is(.sys-theme-escuro, .sys-palette-custom) .table > thead > tr > th {
    background-color: var(--sys-color-surface-muted, #1f2937);
    border-color: var(--sys-color-border);
    color: var(--sys-color-text);
}

:is(.sys-theme-escuro, .sys-palette-custom) .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--sys-color-text);
}

:is(.sys-theme-escuro, .sys-palette-custom) .table-hover > tbody > tr:hover > * {
    background-color: rgba(var(--sys-color-primary-rgb, 96, 165, 250), 0.07);
    color: var(--sys-color-text);
}

/* Alerts Bootstrap */
.sys-theme-escuro .alert {
    background-color: var(--sys-color-surface-muted);
    border-color: var(--sys-color-border);
    color: var(--sys-color-text);
}

.sys-theme-escuro .alert-primary {
    background-color: rgba(var(--sys-color-primary-rgb, 96, 165, 250), 0.15);
    border-color: rgba(var(--sys-color-primary-rgb, 96, 165, 250), 0.3);
    color: #93c5fd;
}

.sys-theme-escuro .alert-success {
    background-color: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #6ee7b7;
}

.sys-theme-escuro .alert-danger {
    background-color: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.3);
    color: #fca5a5;
}

.sys-theme-escuro .alert-warning {
    background-color: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fde68a;
}

.sys-theme-escuro .alert-info {
    background-color: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
    color: #7dd3fc;
}

:is(.sys-theme-escuro, .sys-palette-custom) .alert-secondary {
    background-color: var(--sys-color-surface-muted);
    border-color: var(--sys-color-border);
    color: var(--sys-color-text-muted);
}

:is(.sys-theme-escuro, .sys-palette-custom) .alert-light {
    background-color: var(--sys-color-surface-muted, #1f2937);
    border-color: var(--sys-color-border);
    color: var(--sys-color-text);
}

/* Dropdowns Bootstrap */
:is(.sys-theme-escuro, .sys-palette-custom) .dropdown-menu {
    background-color: var(--sys-color-surface-muted, #1f2937);
    border-color: var(--sys-color-border);
}

/* Especificidade maior para sobrescrever .navbar .dropdown-menu { background: #fff } */
:is(.sys-theme-escuro, .sys-palette-custom) .navbar .dropdown-menu {
    background-color: var(--sys-color-surface-muted, #1f2937);
    border-color: var(--sys-color-border);
}

:is(.sys-theme-escuro, .sys-palette-custom) .dropdown-item {
    color: var(--sys-color-text);
}

:is(.sys-theme-escuro, .sys-palette-custom) .dropdown-item:hover,
:is(.sys-theme-escuro, .sys-palette-custom) .dropdown-item:focus {
    background-color: var(--sys-color-hover, #374151);
    color: var(--sys-color-text);
}

:is(.sys-theme-escuro, .sys-palette-custom) .dropdown-divider {
    border-top-color: var(--sys-color-border);
}

/* .text-black em qualquer HTML (o menu principal não usa mais desde 25/09/2026) */
:is(.sys-theme-escuro, .sys-palette-custom) .text-black {
    color: var(--sys-color-text) !important;
}

/* Modais Bootstrap */
:is(.sys-theme-escuro, .sys-palette-custom) .modal-content {
    background-color: var(--sys-color-surface);
    border-color: var(--sys-color-border);
    color: var(--sys-color-text);
}

:is(.sys-theme-escuro, .sys-palette-custom) .modal-header {
    border-bottom-color: var(--sys-color-border);
}

:is(.sys-theme-escuro, .sys-palette-custom) .modal-footer {
    border-top-color: var(--sys-color-border);
}

/* Botões Bootstrap */
:is(.sys-theme-escuro, .sys-palette-custom) .btn-light {
    background-color: var(--sys-color-hover, #374151);
    border-color: var(--sys-color-hover-strong, #4b5563);
    color: var(--sys-color-text);
}

:is(.sys-theme-escuro, .sys-palette-custom) .btn-light:hover {
    background-color: var(--sys-color-hover-strong, #4b5563);
    color: var(--sys-color-text);
}

:is(.sys-theme-escuro, .sys-palette-custom) .btn-outline-secondary {
    border-color: var(--sys-color-border);
    color: var(--sys-color-text-muted);
}

:is(.sys-theme-escuro, .sys-palette-custom) .btn-outline-secondary:hover {
    background-color: var(--sys-color-hover, #374151);
    border-color: var(--sys-color-border);
    color: var(--sys-color-text);
}

/* Utilitários Bootstrap */
:is(.sys-theme-escuro, .sys-palette-custom) .bg-light {
    background-color: var(--sys-color-surface-muted) !important;
    color: var(--sys-color-text) !important;
}

:is(.sys-theme-escuro, .sys-palette-custom) .bg-white {
    background-color: var(--sys-color-surface) !important;
    color: var(--sys-color-text) !important;
}

:is(.sys-theme-escuro, .sys-palette-custom) .text-dark {
    color: var(--sys-color-text) !important;
}

:is(.sys-theme-escuro, .sys-palette-custom) .text-muted {
    color: var(--sys-color-text-muted) !important;
}

:is(.sys-theme-escuro, .sys-palette-custom) .border,
:is(.sys-theme-escuro, .sys-palette-custom) .border-bottom,
:is(.sys-theme-escuro, .sys-palette-custom) .border-top {
    border-color: var(--sys-color-border) !important;
}

:is(.sys-theme-escuro, .sys-palette-custom) hr {
    border-color: var(--sys-color-border);
    opacity: 1;
}

/* Sobrescreve as CSS vars internas do Bootstrap 5 para list-group */
:is(.sys-theme-escuro, .sys-palette-custom) .list-group,
:is(.sys-theme-escuro, .sys-palette-custom) .sys-crud-list {
    --bs-list-group-bg: var(--sys-color-surface);
    --bs-list-group-color: var(--sys-color-text);
    --bs-list-group-border-color: var(--sys-color-border);
    --bs-list-group-action-color: var(--sys-color-text);
    --bs-list-group-action-hover-color: var(--sys-color-text);
    --bs-list-group-action-hover-bg: var(--sys-color-surface-muted);
    --bs-list-group-action-active-color: var(--sys-color-text);
    --bs-list-group-action-active-bg: var(--sys-color-surface-muted);
}

:is(.sys-theme-escuro, .sys-palette-custom) .list-group-item {
    background-color: var(--sys-color-surface);
    border-color: var(--sys-color-border);
    color: var(--sys-color-text);
}

/* Garante que os botões internos dos itens da lista herdem a cor correta */
:is(.sys-theme-escuro, .sys-palette-custom) .sys-crud-list-item,
:is(.sys-theme-escuro, .sys-palette-custom) .sys-crud-list-item button {
    color: var(--sys-color-text) !important;
    background-color: transparent;
}

:is(.sys-theme-escuro, .sys-palette-custom) .sys-crud-list-item:hover {
    background-color: var(--sys-color-surface-muted) !important;
}

:is(.sys-theme-escuro, .sys-palette-custom) .list-group-item:hover {
    background-color: var(--sys-color-surface-muted);
}

/* Telas de autenticação: estilos em auth/login.css (reestilizadas em 25/09/2026
   com as classes do card CRUD; os overrides antigos daqui ficaram sem uso). */

/*
|--------------------------------------------------------------------------
| RESPONSIVIDADE AUXILIAR
|--------------------------------------------------------------------------
*/

@media (max-width: 991px) {
    .sys-actions-group {
        gap: var(--sys-space-xs);
    }

    .sys-toolbar {
        align-items: stretch;
    }

    .sys-toolbar-left,
    .sys-toolbar-right {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .sys-actions-group {
        flex-direction: column;
        align-items: stretch;
    }

    .sys-inline {
        flex-wrap: wrap;
    }

    .sys-tabs-nav > li {
        float: none;
        display: block;
        width: 100%;
    }

    .sys-tabs-nav > li > a,
    .sys-tabs-nav > li > a.sys-tabs-button,
    .sys-tabs-nav > li.sys-tabs-item > a.sys-tabs-button {
        border-radius: var(--sys-radius-sm);
        margin-bottom: 4px;
    }

    .sys-tabs-nav > li.active > a,
    .sys-tabs-nav > li.active > a:focus,
    .sys-tabs-nav > li.active > a:hover,
    .sys-tabs-nav > li > a.sys-tabs-button.active,
    .sys-tabs-nav > li > a.sys-tabs-button.active:focus,
    .sys-tabs-nav > li > a.sys-tabs-button.active:hover,
    .sys-tabs-nav > li.sys-tabs-item > a.sys-tabs-button.active,
    .sys-tabs-nav > li.sys-tabs-item > a.sys-tabs-button.active:focus,
    .sys-tabs-nav > li.sys-tabs-item > a.sys-tabs-button.active:hover {
        border-bottom-color: var(--sys-color-border);
    } 
}

/* Área de conteúdo: mesmo acabamento do card do cabeçalho (cards irmãos). */
.sys-palette-custom .app-container {
    border: 1px solid var(--sys-color-border, #d9dee7);
}

/*
|--------------------------------------------------------------------------
| DIÁRIOS - ESTADO VISUAL DAS LINHAS
|--------------------------------------------------------------------------
| Linha nova/alterada: vermelho esmaecido.
| Linha salva/sincronizada: verde esmaecido.
*/

.diario-linha.linha-diario-nova {
    background-color: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.25) !important;
}

.diario-linha.linha-diario-salva {
    background-color: rgba(25, 135, 84, 0.08);
    border-color: rgba(25, 135, 84, 0.25) !important;
}

.linha-gerada {
    background-color: rgba(25, 135, 84, 0.08);
    border-color: rgba(25, 135, 84, 0.25) !important;
}

.linha-pendente {
    background-color: rgba(255, 193, 7, 0.10);
    border-color: rgba(255, 193, 7, 0.35) !important;
}
/* Paletas: ajustes da estrutura; os componentes reutilizam as regras acima. */
body.sys-palette-custom {
    background-color: var(--sys-color-page);
}
.sys-palette-custom .dropdown-item.active,
.sys-palette-custom .dropdown-item:active {
    background-color: var(--sys-color-primary);
    color: var(--sys-color-primary-contrast);
}
.sys-palette-custom .btn-primary,
.sys-palette-custom .btn-outline-primary {
    --bs-btn-border-color: var(--sys-color-primary);
    --bs-btn-hover-color: var(--sys-color-primary-contrast);
    --bs-btn-hover-bg: var(--sys-color-primary);
    --bs-btn-hover-border-color: var(--sys-color-primary);
    --bs-btn-active-color: var(--sys-color-primary-contrast);
    --bs-btn-active-bg: var(--sys-color-primary);
    --bs-btn-active-border-color: var(--sys-color-primary);
    --bs-btn-focus-shadow-rgb: var(--sys-color-primary-rgb);
    --bs-btn-disabled-border-color: var(--sys-color-primary);
}
.sys-palette-custom .btn-primary {
    --bs-btn-color: var(--sys-color-primary-contrast);
    --bs-btn-bg: var(--sys-color-primary);
    --bs-btn-disabled-color: var(--sys-color-primary-contrast);
    --bs-btn-disabled-bg: var(--sys-color-primary);
}
.sys-palette-custom .btn-outline-primary {
    --bs-btn-color: var(--sys-color-primary);
    --bs-btn-disabled-color: var(--sys-color-primary);
}
.sys-palette-custom .btn-primary:hover {
    filter: brightness(0.92);
}

/* Botão de Buscar usa o ACENTO da paleta (não a primária) — antes ele herdava
   .btn-primary igual Salvar/Novo e tudo ficava com a mesma cor. Pedido do
   usuário (23/09/2026): dar lugar de verdade pras cores novas nas telas reais. */
.sys-palette-custom .sys-btn-search.btn-primary {
    --bs-btn-bg: var(--sys-color-accent);
    --bs-btn-border-color: var(--sys-color-accent);
    --bs-btn-color: var(--sys-color-accent-contrast);
    --bs-btn-hover-bg: var(--sys-color-accent);
    --bs-btn-hover-border-color: var(--sys-color-accent);
    --bs-btn-hover-color: var(--sys-color-accent-contrast);
    --bs-btn-active-bg: var(--sys-color-accent);
    --bs-btn-active-border-color: var(--sys-color-accent);
    --bs-btn-focus-shadow-rgb: var(--sys-color-accent-rgb);
}
.sys-palette-custom .sys-btn-search.btn-primary:hover {
    filter: brightness(0.92);
}

/* Linha da lista em hover usa o ACENTO (antes usava a primária, igual os
   botões — sem diferença nenhuma entre "isto é clicável" e "isto é destaque"). */
:is(.sys-theme-escuro, .sys-palette-custom) .sys-table > tbody > tr:hover {
    background-color: rgba(var(--sys-color-accent-rgb, 192, 138, 62), 0.10);
}

/* Texto de ajuda ganha uma tarja lateral na cor TERCIÁRIA — dá um lugar real
   pra essa cor em qualquer tela, mesmo as mais simples (Estados, Bairros...). */
.sys-palette-custom .sys-help-text {
    border-left: 2px solid var(--sys-color-tertiary, transparent);
    padding-left: 8px;
    margin-top: 2px;
}

/* Painel de ações — container visual (fundo + borda), não botões soltos no ar.
   Classe real é .sys-actions-group (achado no HtmlGenerator::renderActionBar) —
   .sys-action-bar existia só na definição, nunca era usada em lugar nenhum. */
/* Hierarquia de 3 camadas pedida pelo usuário (23/09/2026), do escuro pro claro:
   barra do título (mais escura) -> corpo do card (meio) -> campos e ações
   (mais claro, mesmo tom nos dois). */
.sys-palette-custom .sys-crud-surface-header {
    background: var(--sys-color-primary);
    color: var(--sys-color-primary-contrast);
    border-color: var(--sys-color-primary);
}
.sys-palette-custom .sys-crud-surface-body {
    background: var(--sys-color-primary-soft);
}
.sys-palette-custom .sys-field-wrapper {
    background: var(--sys-color-surface);
    border-radius: 6px;
    padding: 4px 8px;
}

/* Distância entre campos (25/09/2026, pedido do usuário p/ todas as telas): a linha
   vem com .mb-3 (1rem) de CssSystemGenerator::fieldRow() e das blades escritas à mão
   com o mesmo esqueleto. 16px + 2×6px de respiro do wrapper (~28px) -> 12px + 2×4px
   (~20px). Altura dos campos não muda. Duas classes + !important vencem o .mb-3. */
.sys-field-row.mb-3 {
    margin-bottom: .75rem !important;
}

.sys-actions-group {
    background: var(--sys-color-surface, #ffffff);
    border: 1px solid var(--sys-color-border, #d9dee7);
    /* Destaque lateral em toda barra de ações (motor e telas custom), não só no
       .sys-crud-module — achado na sub-guia Boleto Avulso (24/09/2026). */
    border-left: 4px solid var(--sys-color-primary, #337ab7);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* "Ações" — título + linha divisória abaixo, ANTES dos botões (igual o
   card-head do modelo). display:block sozinho não bastava porque o grupo de
   botões não empurrava o pseudo-elemento pra própria linha; width:100% resolve. */
.sys-actions-group {
    position: relative;
}
.sys-actions-group::before {
    content: "Ações";
    display: block;
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    color: var(--sys-color-primary, #337ab7);
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--sys-color-border, #d9dee7);
}

/* Selo no canto, igual "Pesquisa" (busca) e "Cadastro" (dados) — mesma
   receita visual, cor PRIMARY pra fechar o trio primary/accent/tertiary
   já usado nas outras duas caixas. */
.sys-palette-custom .sys-actions-group::after {
    content: "Confirmação";
    position: absolute;
    top: 12px;
    right: 14px;
    background: var(--sys-color-primary-soft, #e9ecef);
    color: var(--sys-color-primary-soft-text, var(--sys-color-primary, #337ab7));
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 999px;
}

/* Progresso em lote (partials/progresso-donut + app/ui/progressoDonut.js) — saiu do CSS injetado pelo JS (03/10/2026). */
.pd-root{border:1px solid var(--bs-border-color,#dee2e6);border-radius:.5rem;overflow:hidden;background:var(--bs-body-bg,#fff)}
.pd-head{display:flex;align-items:baseline;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--bs-border-color,#dee2e6);background:var(--bs-tertiary-bg,#f8f9fa)}
.pd-titulo{font-weight:600;font-size:.95rem}
.pd-corpo{display:grid;grid-template-columns:230px 1fr;gap:.75rem;padding:.75rem}
@media (max-width:640px){.pd-corpo{grid-template-columns:1fr}}
.pd-corpo.pd-sem-log{grid-template-columns:1fr}
.pd-corpo.pd-sem-log .pd-log-wrap{display:none}
.pd-donut{display:flex;align-items:center;justify-content:center}
.pd-canvas{width:210px;height:210px;max-width:100%}
.pd-log{margin:0;height:210px;overflow:auto;font-size:.8rem;line-height:1.45;background:var(--bs-tertiary-bg,#f8f9fa);border:1px solid var(--bs-border-color,#dee2e6);border-radius:.375rem;padding:.5rem;white-space:pre-wrap;word-break:break-word}
.pd-log .pd-linha{padding:1px 0;border-bottom:1px dashed var(--bs-border-color,#e9ecef)}
.pd-log .pd-linha:last-child{border-bottom:0}
.pd-log .pd-erro{color:var(--bs-danger,#dc3545)}

/* Etapas de uma operação (partials/progresso-etapas + app/ui/progressoEtapas.js) — 18/10/2026. */
.pe-lista{list-style:none;margin:.75rem 0 0;padding:0}
.pe-etapa{display:grid;grid-template-columns:1.5rem 1fr;column-gap:.5rem;padding:.35rem 0;color:var(--bs-secondary-color,#6c757d)}
.pe-etapa+.pe-etapa{border-top:1px dashed var(--bs-border-color,#e9ecef)}
.pe-icone{grid-row:span 2;width:1.25rem;height:1.25rem;border-radius:50%;border:2px solid currentColor;margin-top:.1rem;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}
.pe-detalhe{grid-column:2;font-size:.8rem}
.pe-detalhe:empty{display:none}
.pe-etapa.pe-andamento{color:var(--bs-primary,#0d6efd);font-weight:600}
.pe-etapa.pe-andamento .pe-icone{border-right-color:transparent;animation:pe-giro .8s linear infinite}
.pe-etapa.pe-ok{color:var(--bs-success,#198754)}
.pe-etapa.pe-ok .pe-icone{background:currentColor}
.pe-etapa.pe-ok .pe-icone::after{content:"\2713";color:#fff}
.pe-etapa.pe-erro{color:var(--bs-danger,#dc3545)}
.pe-etapa.pe-erro .pe-icone::after{content:"!"}
.pe-etapa.pe-pulada{opacity:.6}
.pe-etapa.pe-pulada .pe-icone::after{content:"\2013"}
.pe-etapa .pe-detalhe{font-weight:400}
@keyframes pe-giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pe-etapa.pe-andamento .pe-icone{animation:none}}
/* Gráfico à esquerda e etapas à direita (janela de andamento); no celular, um embaixo do outro. */
.pe-duas-colunas{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:1rem;align-items:center}
.pe-duas-colunas .pe-lista{margin-top:0}
.pe-duas-colunas .pd-corpo{padding:.5rem}
.pe-duas-colunas .pd-canvas{width:180px;height:180px}
@media (max-width:576px){.pe-duas-colunas{grid-template-columns:1fr}}
/* Altura reservada para a mensagem do resultado: a janela não estica nem encolhe quando ela aparece. */
.pe-msg-reservada{min-height:3.5rem;margin-top:.75rem}

/* Giro de "em andamento" sem HTML no JS (03/10/2026): botão ocupado (app/ui/botaoOcupado.js) e texto "Carregando..."
   (app/ui/textoDeEstado.js). Mesmo ícone do antigo <i class="fa-solid fa-spinner fa-spin">. */
.sys-btn-ocupado::before,
.sys-carregando::before {
    content: "\f110";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    margin-right: .4em;
    animation: fa-spin 2s linear infinite;
}
/* Botão do motor em andamento (bindPageActions, 12/10/2026): o giro ocupa o lugar do ícone do botão. */
.sys-btn-ocupado > i { display: none; }

/* "Busca e seleção" JÁ EXISTIA (fieldset legend em toda tela do motor,
   HtmlGenerator.php) — não duplicar texto, só estilizar. Fica DENTRO da
   mesma caixa clara da barra de busca (o pai comum é .sys-stack), por isso
   o fundo/borda saiu de .sys-barra-busca e foi pro .sys-stack — pedido do
   usuário (24/09/2026): legenda dentro do container, não separada dele. */
.sys-palette-custom .sys-section-subtitle {
    color: var(--sys-color-primary);
    font-size: 12px;
    font-weight: 700;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--sys-color-border);
    width: 100%;
}

.sys-palette-custom fieldset.sys-stack {
    background: var(--sys-color-surface, #ffffff);
    border: 1px solid var(--sys-color-border, #d9dee7);
    border-radius: 10px;
    padding: 12px 14px;
}

/* A lista de resultados fica numa fieldset própria (renderListSection),
   separada da busca. O JS (clearList.js/renderSearchList.js) já esvazia e
   oculta a div .listaFormulario quando não há resultados — mas a fieldset
   em volta continuava com fundo/borda/padding, sobrando uma faixa vazia
   entre "Busca e seleção" e "Dados do bairro". Some junto com a div. */
.sys-palette-custom fieldset.sys-stack:has(.listaFormulario:empty) {
    display: none;
}

/* Mais respiro entre as caixas (busca -> lista -> dados) pra aparecer mais
   o fundo mais escuro do corpo do card (--sys-color-primary-soft) entre
   elas — pedido do usuário (24/09/2026). Regra genérica por adjacência,
   não por classe específica de cada fieldset: funciona igual com a lista
   visível ou escondida (display:none não quebra a adjacência no DOM). */
.sys-palette-custom fieldset.sys-stack + fieldset.sys-stack {
    margin-top: 28px;
}

/* Lista de resultados — item com destaque de acento no hover (item real:
   .sys-crud-list-item, não é <table>). Sem borda/fundo/padding próprios: a
   fieldset "Resultado" (.sys-stack, 24/09/2026) já é o único container
   visual — antes disso o <ul> tinha caixa própria e ficava "caixa dentro
   de caixa" junto com a fieldset. Pedido do usuário: os itens vivem no
   container um nível abaixo (a fieldset), sem wrapper visual extra. */
.sys-crud-list {
    padding: 0;
}
.sys-crud-list-item {
    border: 0 !important;
    border-radius: 6px;
    background: transparent !important;
}
.sys-crud-list-item:hover {
    background-color: rgba(var(--sys-color-accent-rgb, 192, 138, 62), 0.15) !important;
}

/* Label acompanha o campo quando ele ganha foco (:has() — suportado nos
   navegadores modernos). Pedido do usuário (23/09/2026). */
.sys-field-row:has(.sys-form-control:focus) .sys-label {
    color: var(--sys-color-primary);
    font-weight: 700;
}
.sys-palette-custom .text-primary {
    color: var(--sys-color-primary) !important;
}
.sys-palette-custom .form-check-input:checked {
    background-color: var(--sys-color-primary);
    border-color: var(--sys-color-primary);
}
.sys-palette-custom .alert-primary {
    background-color: var(--sys-color-primary-soft);
    border-color: var(--sys-color-border);
    color: var(--sys-color-primary-soft-text);
}
.sys-palette-swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid currentColor;
}

/*
|--------------------------------------------------------------------------
| PROTÓTIPO "3 TEMAS" — identidade visual do card de busca/dados
|--------------------------------------------------------------------------
| Pedido do usuário (24/09/2026): aproximar a tela real (piloto: Bairros) do
| protótipo estático prototipo_cadastro_estados_3_temas_V5_contraste_corrigido.html,
| sem duplicar HTML novo no motor. Reaproveita o que o HtmlGenerator já gera:
| os fieldset.sys-stack de busca ("Busca e seleção") e dados ("Dados do
| cadastro"), e o container .sys-crud-current-name que já existe para o
| registro selecionado/em edição. Puro CSS — nenhum arquivo do motor foi
| alterado.
*/

/* Legend vira "header" com selo decorativo à direita — o texto real
   continua sendo a legend em si ("Busca e seleção" / "Dados do cadastro"). */
/* .sys-stack-cadastro: mesma caixa "Cadastro" pra telas custom (blade própria) que não têm
   .sys-crud-current-name — ex.: sub-guia Boleto Avulso de Users (24/09/2026). */
.sys-palette-custom fieldset.sys-stack:has(.sys-barra-busca) > legend.sys-section-subtitle,
.sys-palette-custom fieldset.sys-stack.sys-stack-filtro > legend.sys-section-subtitle,
.sys-palette-custom fieldset.sys-stack.sys-stack-catalogo > legend.sys-section-subtitle,
.sys-palette-custom fieldset.sys-stack.sys-stack-criterio > legend.sys-section-subtitle,
.sys-palette-custom fieldset.sys-stack.sys-stack-parcela > legend.sys-section-subtitle,
.sys-palette-custom fieldset.sys-stack.sys-stack-material > legend.sys-section-subtitle,
.sys-palette-custom fieldset.sys-stack.sys-stack-estudante > legend.sys-section-subtitle,
.sys-palette-custom fieldset.sys-stack.sys-stack-recebimento > legend.sys-section-subtitle,
.sys-palette-custom fieldset.sys-stack.sys-stack-ajuste > legend.sys-section-subtitle,
.sys-palette-custom fieldset.sys-stack:has(.sys-crud-current-name) > legend.sys-section-subtitle,
.sys-palette-custom fieldset.sys-stack.sys-stack-cadastro > legend.sys-section-subtitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* .sys-stack-filtro: filtro de tela custom (ex.: Carômetro, 25/09/2026) — mesma caixa
   "Pesquisa" da busca do motor. */
.sys-palette-custom fieldset.sys-stack:has(.sys-barra-busca),
.sys-palette-custom fieldset.sys-stack.sys-stack-filtro,
.sys-palette-custom fieldset.sys-stack.sys-stack-catalogo {
    border-left: 4px solid var(--sys-color-accent, var(--sys-color-primary));
}
.sys-palette-custom fieldset.sys-stack:has(.sys-barra-busca) > legend.sys-section-subtitle::after,
.sys-palette-custom fieldset.sys-stack.sys-stack-filtro > legend.sys-section-subtitle::after,
.sys-palette-custom fieldset.sys-stack.sys-stack-catalogo > legend.sys-section-subtitle::after {
    content: "Pesquisa";
    background: var(--sys-color-accent-soft, var(--sys-color-primary-soft));
    color: var(--sys-color-accent-soft-text, var(--sys-color-primary-soft-text));
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 999px;
    border-bottom: none;
    flex-shrink: 0;
}

.sys-palette-custom fieldset.sys-stack:has(.sys-crud-current-name),
.sys-palette-custom fieldset.sys-stack.sys-stack-cadastro,
.sys-palette-custom fieldset.sys-stack.sys-stack-criterio,
.sys-palette-custom fieldset.sys-stack.sys-stack-parcela,
.sys-palette-custom fieldset.sys-stack.sys-stack-material,
.sys-palette-custom fieldset.sys-stack.sys-stack-estudante,
.sys-palette-custom fieldset.sys-stack.sys-stack-recebimento,
.sys-palette-custom fieldset.sys-stack.sys-stack-ajuste {
    border-left: 4px solid var(--sys-color-tertiary, var(--sys-color-primary));
}

/* Caixa da lista de resultados — cor própria (--sys-color-info, do tema
   base, não da paleta de 3 cores já toda usada nas outras caixas), selo
   "Resultado" e legend "{Título} e seleção" (renderListSection() em
   HtmlGenerator.php). Sem :not(:empty) porque a fieldset some inteira via
   display:none quando vazia (regra acima), então nada disso aparece sem
   conteúdo de qualquer forma. */
/* .sys-stack-selecao: grade/lista de tela custom onde se clica pra escolher um item
   (ex.: grade de fotos do Carômetro, 25/09/2026) — mesma caixa "Seleção" do motor. */
.sys-palette-custom fieldset.sys-stack:has(.listaFormulario),
.sys-palette-custom fieldset.sys-stack.sys-stack-selecao {
    /* --sys-color-info puro fica pálido perto das cores vivas da paleta —
       escurecido pra ter presença igual às outras 3 bordas (24/09/2026). */
    border-left: 4px solid #2a7ba5;
    border-left: 4px solid color-mix(in srgb, var(--sys-color-info, #5bc0de) 70%, black);
}
/* .sys-stack-historico: lista só-leitura do que já foi feito numa tela custom (ex.: avulsos
   emitidos na sub-guia Boleto Avulso, 24/09/2026). Mesma cor da caixa "Resultado", selo
   "Histórico" — não é "Seleção" porque ali não se clica pra selecionar nada. */
.sys-palette-custom fieldset.sys-stack.sys-stack-historico {
    border-left: 4px solid #2a7ba5;
    border-left: 4px solid color-mix(in srgb, var(--sys-color-info, #5bc0de) 70%, black);
}
.sys-palette-custom fieldset.sys-stack.sys-stack-historico > legend.sys-section-subtitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.sys-palette-custom fieldset.sys-stack.sys-stack-historico > legend.sys-section-subtitle::after {
    content: "Histórico";
    background: #bce8f1;
    background: color-mix(in srgb, var(--sys-color-info, #5bc0de) 30%, var(--sys-color-surface, #fff));
    color: #1f5c78;
    color: color-mix(in srgb, var(--sys-color-info, #5bc0de) 70%, black);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* .sys-stack-contratante: aba Financeiro com ESTUDANTE selecionado — caixa "Responsável
   financeiro" que leva ao cadastro do contratante (24/09/2026). Cor primária, selo
   "Contratante" (substantivo no singular, regra dos selos — "Alternar" é verbo). */
.sys-palette-custom fieldset.sys-stack.sys-stack-contratante {
    border-left: 4px solid var(--sys-color-primary, #337ab7);
}
.sys-palette-custom fieldset.sys-stack.sys-stack-contratante > legend.sys-section-subtitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.sys-palette-custom fieldset.sys-stack.sys-stack-contratante > legend.sys-section-subtitle::after {
    content: "Contratante";
    background: var(--sys-color-primary-soft, #e9ecef);
    color: var(--sys-color-primary-soft-text, var(--sys-color-primary, #337ab7));
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* .sys-stack-impacto: prévia do que uma ação vai alterar antes de confirmar (ex.: parcelas
   afetadas pela transferência, 24/09/2026). Cor de aviso do tema, selo "Impacto". */
.sys-palette-custom fieldset.sys-stack.sys-stack-impacto,
.sys-palette-custom fieldset.sys-stack.sys-stack-encargo {
    border-left: 4px solid var(--sys-color-warning, #f0ad4e);
}
.sys-palette-custom fieldset.sys-stack.sys-stack-impacto > legend.sys-section-subtitle,
.sys-palette-custom fieldset.sys-stack.sys-stack-encargo > legend.sys-section-subtitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.sys-palette-custom fieldset.sys-stack.sys-stack-impacto > legend.sys-section-subtitle::after,
.sys-palette-custom fieldset.sys-stack.sys-stack-encargo > legend.sys-section-subtitle::after {
    content: "Impacto";
    background: #fcefd9;
    background: color-mix(in srgb, var(--sys-color-warning, #f0ad4e) 25%, var(--sys-color-surface, #fff));
    color: #7a4d0c;
    color: color-mix(in srgb, var(--sys-color-warning, #f0ad4e) 45%, var(--sys-color-text, #000));
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

.sys-palette-custom fieldset.sys-stack:has(.listaFormulario) > legend.sys-section-subtitle,
.sys-palette-custom fieldset.sys-stack.sys-stack-selecao > legend.sys-section-subtitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.sys-palette-custom fieldset.sys-stack:has(.listaFormulario) > legend.sys-section-subtitle::after,
.sys-palette-custom fieldset.sys-stack.sys-stack-selecao > legend.sys-section-subtitle::after {
    content: "Seleção";
    background: #bce8f1;
    background: color-mix(in srgb, var(--sys-color-info, #5bc0de) 30%, var(--sys-color-surface, #fff));
    color: #1f5c78;
    color: color-mix(in srgb, var(--sys-color-info, #5bc0de) 70%, black);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 999px;
    border-bottom: none;
    flex-shrink: 0;
}
.sys-palette-custom fieldset.sys-stack:has(.sys-crud-current-name) > legend.sys-section-subtitle::after,
.sys-palette-custom fieldset.sys-stack.sys-stack-cadastro > legend.sys-section-subtitle::after,
.sys-palette-custom fieldset.sys-stack.sys-stack-recebimento > legend.sys-section-subtitle::after,
.sys-palette-custom fieldset.sys-stack.sys-stack-ajuste > legend.sys-section-subtitle::after,
/* Parcela/Material ficaram fora desta lista em 25/09 — o selo saía como texto solto, sem a
   pílula; incluídas em 26/09/2026 junto com Estudante. O texto de cada uma vem mais abaixo. */
.sys-palette-custom fieldset.sys-stack.sys-stack-parcela > legend.sys-section-subtitle::after,
.sys-palette-custom fieldset.sys-stack.sys-stack-material > legend.sys-section-subtitle::after,
.sys-palette-custom fieldset.sys-stack.sys-stack-estudante > legend.sys-section-subtitle::after,
.sys-palette-custom fieldset.sys-stack.sys-stack-criterio > legend.sys-section-subtitle::after {
    content: "Cadastro";
    background: var(--sys-color-tertiary-soft, var(--sys-color-primary-soft));
    color: var(--sys-color-tertiary-soft-text, var(--sys-color-primary-soft-text));
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 999px;
    border-bottom: none;
    flex-shrink: 0;
}

/* Central de Relatórios (25/09/2026): mesmas caixas (acento / terciária) com selo
   próprio — .sys-stack-catalogo = escolher o relatório, .sys-stack-criterio = os
   parâmetros dele. Só troca o texto; cor/formato vêm das regras acima. Precisa
   ficar DEPOIS das regras de "Pesquisa" e "Cadastro" (mesma especificidade). */
.sys-palette-custom fieldset.sys-stack.sys-stack-catalogo > legend.sys-section-subtitle::after {
    content: "Catálogo";
}
.sys-palette-custom fieldset.sys-stack.sys-stack-criterio > legend.sys-section-subtitle::after {
    content: "Critério";
}
/* Usuários → Financeiro (25/09/2026): listas de Mensalidades e Taxa de Material. */
.sys-palette-custom fieldset.sys-stack.sys-stack-parcela > legend.sys-section-subtitle::after {
    content: "Parcela";
}
.sys-palette-custom fieldset.sys-stack.sys-stack-material > legend.sys-section-subtitle::after {
    content: "Material";
}
/* Usuários → Financeiro → Mensalidades (26/09/2026): uma caixa por estudante, nome no título
   (antes era uma linha cinza no meio da tabela e o nome "se perdia"). Borda/pílula nas listas
   compartilhadas acima (cor terciária); aqui só o texto do selo e o destaque do nome.
   Série/ano ao lado do nome em .sys-lista-grupo-detalhe. */
.sys-palette-custom fieldset.sys-stack.sys-stack-estudante > legend.sys-section-subtitle::after {
    content: "Estudante";
}
/* Ficha Financeira (26/09/2026): totais no pé da caixa do estudante e total geral abaixo das
   caixas (sem caixa própria). Alinhados à direita, separados por espaço. */
.sys-ficha-totais {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .25rem 1.25rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--sys-color-border, #d9dee7);
    font-size: .8125rem;
}
.sys-ficha-totais-geral {
    border-top: 2px solid var(--sys-color-border, #d9dee7);
    font-size: .875rem;
}
.sys-stack-estudante-nome {
    font-size: 1rem;
    font-weight: 700;
}
/* Modal Receber Mensalidade (25/09/2026): dados do recebimento (terciária) e encargos
   de atraso (cor de aviso, mesma receita da caixa Impacto). */
.sys-palette-custom fieldset.sys-stack.sys-stack-recebimento > legend.sys-section-subtitle::after {
    content: "Recebimento";
}
.sys-palette-custom fieldset.sys-stack.sys-stack-encargo > legend.sys-section-subtitle::after {
    content: "Encargo";
}
/* Modal Editar Mensalidade (25/09/2026): vencimento/desconto da parcela (terciária). */
.sys-palette-custom fieldset.sys-stack.sys-stack-ajuste > legend.sys-section-subtitle::after {
    content: "Ajuste";
}

/*
|--------------------------------------------------------------------------
| MODAL NO PADRÃO DO CARD (.sys-modal, 25/09/2026 — piloto: Receber Mensalidade)
|--------------------------------------------------------------------------
| Opt-in: só o modal que tiver .sys-modal muda; os demais continuam como eram
| até serem migrados. Mesmas 3 camadas do card CRUD: cabeçalho na primária,
| corpo no primary-soft, caixas .sys-stack com selo e a barra .sys-actions-group
| DENTRO do corpo, no fim (substitui o .modal-footer).
| Sem "X" no cabeçalho: fecha pelo Cancelar da barra (e Esc) — pedido do usuário.
| Espaçamento mais enxuto que o do card (modal não pode passar da altura da tela).
| A barra .sys-actions-group fica DENTRO do corpo, no fim, numa faixa
| .sys-modal-acoes com respiro embaixo, e rola junto com o conteúdo (pedido do
| usuário: nem .modal-footer fora da rolagem, nem sticky "congelada" embaixo).
| .sys-resumo: pares rótulo/valor só leitura (ex.: a parcela sendo recebida).
*/
.sys-palette-custom .sys-modal .modal-header {
    background: var(--sys-color-primary);
    color: var(--sys-color-primary-contrast);
    border-bottom-color: var(--sys-color-primary);
}
.sys-palette-custom .sys-modal .modal-body {
    background: var(--sys-color-primary-soft);
}
.sys-modal .modal-header {
    padding: 10px 16px;
}
.sys-modal .modal-header .modal-title {
    font-weight: 700;
}
.sys-modal .modal-body {
    padding: 14px 16px 0;
}
.sys-palette-custom .sys-modal fieldset.sys-stack {
    padding: 10px 14px;
}
.sys-palette-custom .sys-modal fieldset.sys-stack + fieldset.sys-stack {
    margin-top: 12px;
}
.sys-modal .sys-modal-acoes {
    padding: 12px 0 16px;
}
.sys-modal .sys-modal-acoes > .sys-actions-group {
    margin: 0;
}
.sys-resumo {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 0;
    font-size: 14px;
}
.sys-resumo > dt {
    font-weight: 600;
    color: var(--sys-color-text-muted, #6b7280);
}
.sys-resumo > dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}
/* Dois pares por linha a partir de telas médias (ex.: caixa PARCELA do Receber). */
@media (min-width: 768px) {
    .sys-resumo.sys-resumo-duplo {
        grid-template-columns: max-content 1fr max-content 1fr;
    }
}
/* Coluna de valores em R$ alinhada à direita (ex.: encargos + total). */
.sys-resumo.sys-resumo-valores > dd {
    text-align: right;
}
.sys-resumo > .sys-resumo-total {
    border-top: 1px solid var(--sys-color-border, #d9dee7);
    padding-top: 6px;
    margin-top: 2px;
    font-weight: 700;
    color: var(--sys-color-text, #1f2937);
}

/*
|--------------------------------------------------------------------------
| LISTA OPERACIONAL — tabela com ações por linha (25/09/2026)
|--------------------------------------------------------------------------
| .sys-lista-tabela: tabela dentro de uma caixa .sys-stack (a caixa já é o
| container visual — a tabela não tem fundo/borda próprios). O Bootstrap
| pinta o fundo em cada CÉLULA (--bs-table-bg), então hover/fundo são
| ajustados pelas variáveis da própria tabela, não no <tr>.
| .sys-lista-grupo-detalhe: série/ano ao lado do nome no título da caixa do estudante.
| .sys-acoes-linha: ação principal + menu "⋯ Mais"
| (modulos/users/financeiro/acoes-linha.blade.php).
*/
.sys-lista-tabela {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sys-color-text, #1f2937);
    --bs-table-hover-bg: rgba(var(--sys-color-accent-rgb, 245, 126, 32), 0.10);
    --bs-table-hover-color: var(--sys-color-text, #1f2937);
    --bs-table-border-color: var(--sys-color-border, #d9dee7);
}
.sys-lista-tabela > thead > tr > th {
    background: transparent;
    color: var(--sys-color-text-muted, #6b7280);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--sys-color-border, #d9dee7);
    white-space: nowrap;
}
.sys-lista-tabela > tbody > tr > td {
    padding-top: 8px;
    padding-bottom: 8px;
}
/* A linha-título .sys-lista-grupo (estudante no meio da tabela) saiu em 26/09/2026: Mensalidades,
   Anuidade e Taxa de Material usam uma caixa por estudante (.sys-stack-estudante). O detalhe
   (série/ano ao lado do nome) continua. */
.sys-lista-grupo-detalhe {
    font-weight: 400;
    opacity: .8;
}
.sys-acoes-linha {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
}
/* Botões EMPILHADOS e do mesmo tamanho (22/10/2026, pedido do usuário — 1º uso: Entrega do material → Entregues): um em
   cima do outro, os dois com a largura do maior, e a coluna de ações estreita no canto (sobra espaço para as outras
   colunas). Partial acoes-linha com 'empilhada' => true; a célula da coluna leva .sys-celula-acoes. */
.sys-acoes-linha.sys-acoes-linha-empilhada {
    display: inline-grid;
    grid-auto-flow: row;
    gap: 4px;
}
.sys-acoes-linha.sys-acoes-linha-empilhada > .btn {
    width: 100%;
    justify-content: center;
}
.sys-lista-tabela .sys-celula-acoes {
    width: 1%;
    white-space: nowrap;
}
.sys-acoes-menu {
    min-width: 230px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--sys-color-border, #d9dee7);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.sys-acoes-menu .dropdown-item {
    border-radius: 6px;
    font-size: 14px;
    padding: 7px 10px;
}
.sys-acoes-menu .dropdown-item > i {
    width: 18px;
    text-align: center;
}

/*
|--------------------------------------------------------------------------
| Lista de resultados — badge + affordance de clique
|--------------------------------------------------------------------------
| .sys-crud-list-badge, .sys-crud-list-main e .sys-crud-list-side vêm de
| CrudListRenderer.php.
| Item sem badge (módulo não configurou campo_badge nem tem descrição) não
| quebra layout — o span simplesmente não é renderizado.
*/
.sys-crud-list-item > button[data-action="selecionar"] {
    padding: 8px 10px;
}
.sys-crud-list-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    padding: 0 6px;
    border-radius: 7px;
    background: var(--sys-color-accent, var(--sys-color-primary));
    color: var(--sys-color-accent-contrast, var(--sys-color-primary-contrast));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
}
/* Grupo da esquerda (badge+nome) e da direita (status+seta) ficam cada um
   flush numa ponta — corrige o desalinhamento que aparecia quando o pill
   de status "flutuava" entre os dois, variando de posição conforme o
   tamanho do nome do bairro. */
.sys-crud-list-main {
    min-width: 0;
}
/* Descrição inteira (26/10/2026, pedido da escola: o "…" escondia o que diferencia um registro do outro): fonte um pouco
   menor e quebra de linha; o título do botão (CrudListRenderer) mostra a descrição completa ao passar o mouse. */
.sys-crud-list-main strong {
    font-size: .875rem;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}
.sys-crud-list-side {
    flex-shrink: 0;
}
.sys-crud-list-side::after {
    content: "Selecionar \2192";
    font-size: 11px;
    font-weight: 700;
    color: var(--sys-color-accent, var(--sys-color-primary));
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.sys-crud-list-item:hover .sys-crud-list-side::after,
.sys-crud-list-item:focus-within .sys-crud-list-side::after {
    opacity: 1;
}

/* Registro selecionado / em edição — formato do chip. Cores e selo "Selecionado": regra no fim
   do arquivo (26/09/2026; antes era verde fixo rgba(92,184,92,...), fora do tema). */
.sys-palette-custom .sys-crud-current-name {
    border-radius: var(--sys-radius-md, 10px);
    padding: 8px 12px !important;
    font-weight: 600;
}

/*
|--------------------------------------------------------------------------
| CAMPOS SEM ÍCONE LATERAL — caixas maiores e arredondadas
|--------------------------------------------------------------------------
| Pedido do usuário (24/09/2026): tirar o ícone da esquerda dos campos e
| deixar a caixa maior/mais arredondada, como no protótipo.
|
| O elemento do ícone (.sys-input-group-text / .sys-field-icon) continua
| existindo no HTML — só fica visualmente oculto. O JS de validação
| (applyValidationIconClass.js) continua alternando as mesmas classes nele
| sem nenhuma mudança; só passamos a refletir o estado na BORDA do campo
| via :has(), em vez do ícone, pra não perder o feedback visual de
| válido/inválido.
*/
.sys-input-group > .sys-input-group-text {
    display: none;
}
.sys-input-group > .sys-input,
.sys-input-group > .sys-select,
.sys-input-group > .sys-textarea {
    border-radius: var(--sys-radius-lg, 12px) !important;
}

.sys-input,
.sys-select,
.sys-textarea {
    min-height: 46px;
    padding: 10px 16px;
    font-size: 15px;
    border-radius: var(--sys-radius-lg, 12px);
}
.sys-textarea {
    min-height: 90px;
}

/* 18/10/2026 (usuário: "telas muito poluídas com a borda toda preenchida"): a validação pinta só a LINHA DE BAIXO,
   no mesmo visual da caixa de busca (fundo claro + linha embaixo) — um padrão só de campo. Antes pintava a borda inteira. */
.sys-input-group:has(.sys-field-icon-success) .sys-input,
.sys-input-group:has(.sys-field-icon-success) .sys-select,
.sys-input-group:has(.sys-field-icon-success) .sys-textarea {
    border-bottom-color: var(--sys-color-success, #5cb85c) !important;
}
.sys-input-group:has(.sys-field-icon-error) .sys-input,
.sys-input-group:has(.sys-field-icon-error) .sys-select,
.sys-input-group:has(.sys-field-icon-error) .sys-textarea {
    border-bottom-color: var(--sys-color-danger, #d9534f) !important;
}
.sys-input-group:has(.sys-field-icon-warning) .sys-input,
.sys-input-group:has(.sys-field-icon-warning) .sys-select,
.sys-input-group:has(.sys-field-icon-warning) .sys-textarea {
    border-bottom-color: var(--sys-color-warning, #f0ad4e) !important;
}

/* Usuários: o nome do usuário fica no selo da tela, acima das guias (selos-pagina, 12/10/2026), então some da guia
   principal e dos formulários ainda no layout antigo (Matrículas, Remanejamento). Continua sendo a FONTE do texto
   (app/ui/selosPagina.js copia). */
.modulo-users-composto #crud-root-users [data-role="nome-atual"],
.modulo-users-composto .sys-crud-current-name[data-role="nome-atual"] {
    display: none !important;
}

/* Caixa de busca do motor: mesma distância de antes (mb-3 + os 12px da linha que a envolvia). */
.sys-crud-module .sys-barra-busca {
    margin-bottom: calc(1rem + 12px);
}

/* Barra de ações do CRUD do motor (.sys-crud-module). Parada no fim do card, sem "sticky"
   (27/09/2026: o gerador deixou de envolvê-la em linha/coluna com margin-left inline — é o mesmo
   <x-sys.acoes> das telas próprias; estas regras mantêm o visual que já existia). */
.sys-crud-module .sys-actions-group {
    background: var(--sys-color-surface, #fff);
    border-left: 4px solid var(--sys-color-primary, #337ab7);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
    /* Mesmo respiro usado entre busca/lista/dados (28px). */
    margin-top: 28px;
    margin-bottom: 12px;
}

/* Abas Cadastro/Manual — sublinhado com a cor de acento da paleta. */
.sys-palette-custom .sys-tabs-nav > li.active > a,
.sys-palette-custom .sys-tabs-nav > li > a.sys-tabs-button.active {
    box-shadow: inset 0 -3px 0 var(--sys-color-accent, var(--sys-color-primary));
}

/*
|--------------------------------------------------------------------------
| CAMPO DE COR — o quadradinho do <x-sys.campo tipo="color"> (28/10/2026)
|--------------------------------------------------------------------------
| Na tela, SÓ o quadradinho pintado (usuário, 28/10/2026): a caixa com o código (.sys-campo-cor-codigo) fica
| escondida e é ela que salva (app/ui/campoCor.js liga os dois). Altura dos outros campos; o quadradinho inteiro é a
| cor (sem a moldura do seletor do navegador); sem cor fixa (vale nos temas claro e escuro).
*/
.sys-campo-cor-codigo { display: none !important; }
.sys-campo-cor {
    flex: 0 0 auto;
    width: 4.5rem;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0;
    border: var(--bs-border-width, 1px) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius, 0.375rem) !important;
    background: none;
    cursor: pointer;
}
.sys-campo-cor::-webkit-color-swatch-wrapper { padding: 0; }
.sys-campo-cor::-webkit-color-swatch { border: 0; border-radius: calc(var(--bs-border-radius, 0.375rem) - 1px); }
.sys-campo-cor::-moz-color-swatch { border: 0; border-radius: calc(var(--bs-border-radius, 0.375rem) - 1px); }
.sys-campo-cor:disabled { cursor: not-allowed; opacity: 0.6; }
.sys-campo-cor:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }

/*
|--------------------------------------------------------------------------
| SWITCH — campo booleano do motor (type: 'switch' no HtmlGenerator)
|--------------------------------------------------------------------------
| Aparência do botão .sys-switch renderizado por HtmlGenerator::renderSwitchField()
| (ver motor-changelog.md). O valor real trafega num <input type="hidden">
| ao lado — este arquivo só cuida da forma visual do botão.
*/
.sys-switch {
    --sys-switch-w: 46px;
    --sys-switch-h: 26px;
    width: var(--sys-switch-w);
    height: var(--sys-switch-h);
    flex-shrink: 0;
    position: relative;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--sys-color-border, #d9dee7);
    background: var(--sys-color-surface-muted, #e9ecef);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sys-switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(var(--sys-switch-h) - 6px);
    height: calc(var(--sys-switch-h) - 6px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}
.sys-switch.sys-switch-on {
    background: var(--sys-color-success, #5cb85c);
    border-color: var(--sys-color-success, #5cb85c);
}
.sys-switch.sys-switch-on::before {
    transform: translateX(calc(var(--sys-switch-w) - var(--sys-switch-h)));
}
.sys-switch:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.sys-switch:focus-visible {
    outline: 2px solid var(--sys-color-primary, #337ab7);
    outline-offset: 2px;
}


/* (.sys-subguia-motor removido em 26/09/2026: virou a opção 'embutido' => true da PageDefinition,
   que já não gera o card nem a barra — components/sys/cartao.) */
/* Sub-guias — UM fundo só (26/09/2026, pedido do usuário). Card de sub-guias DENTRO de uma guia
   (.tab-pane .card com .card-header-tabs — Usuários → Matrículas/Financeiro, Escolas → Contas,
   Séries → Disciplinas): faixa das sub-guias, sub-guia ativa, corpo, conteúdo e o "Cadastro | Manual"
   de dentro usam a mesma cor da guia-mãe (surface-muted). A aba ativa se destaca pela borda e pelo
   texto, não pelo fundo. Antes a sub-guia ativa e o conteúdo ficavam em surface (branco no claro). */
:is(.sys-theme-escuro, .sys-palette-custom) .tab-pane .card:has(> .card-header .card-header-tabs) > .card-body,
:is(.sys-theme-escuro, .sys-palette-custom) .tab-pane .card:has(> .card-header .card-header-tabs) > .card-body .tab-content {
    background-color: var(--sys-color-surface-muted);
}
:is(.sys-theme-escuro, .sys-palette-custom) .tab-pane .card:has(> .card-header .card-header-tabs) .nav-tabs .nav-link.active,
:is(.sys-theme-escuro, .sys-palette-custom) .tab-pane .card:has(> .card-header .card-header-tabs) .nav-tabs .nav-link.active:hover,
:is(.sys-theme-escuro, .sys-palette-custom) .tab-pane .card:has(> .card-header .card-header-tabs) .nav-tabs .nav-link.active:focus {
    background-color: var(--sys-color-surface-muted);
    border-bottom-color: var(--sys-color-surface-muted);
}
/* Registro selecionado (.sys-crud-current-name, gerado pelo motor dentro da caixa "Cadastro"),
   26/09/2026 — substitui o chip verde fixo (rgba, não acompanhava tema/paleta): agora usa a cor
   terciária da própria caixa Cadastro (borda + fundo suave misturado à superfície, funciona no
   claro e no escuro) e ganha o selo "Selecionado" antes do nome, no formato dos demais selos.
   Não virou caixa própria de propósito: ficaria caixa dentro de caixa. Só CSS; vale para todas
   as telas do motor. No fim do arquivo para vencer a regra antiga (mesma especificidade). */
.sys-palette-custom .sys-crud-current-name {
    background: color-mix(in srgb, var(--sys-color-tertiary, var(--sys-color-primary)) 10%, var(--sys-color-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--sys-color-tertiary, var(--sys-color-primary)) 30%, transparent);
    border-left: 4px solid var(--sys-color-tertiary, var(--sys-color-primary));
    color: var(--sys-color-text);
}
.sys-palette-custom .sys-crud-current-name::before {
    content: "Selecionado";
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    background: var(--sys-color-tertiary-soft, var(--sys-color-primary-soft));
    color: var(--sys-color-tertiary-soft-text, var(--sys-color-primary-soft-text));
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 999px;
}

/* -------------------------------------------------------------------------
   Documento preenchido na tela (29/10/2026 — Psicopedagogia, prontuário da Educação inclusiva). O formulário segue o
   roteiro do documento na ordem do papel: faixas de seção, textos fixos e os campos onde o papel tem linha/caixinha.
   Genérico (qualquer tela que mostre um documento para preencher); cores do tema.
   ------------------------------------------------------------------------- */
.sys-documento { max-width: 60rem; }
.sys-documento-titulo { text-align: center; font-weight: 700; margin-bottom: var(--sys-space-md); }
.sys-documento-corpo { margin-top: var(--sys-space-md); }
.sys-documento-faixa {
    margin: 1.25rem 0 .6rem; padding: .3rem .6rem; text-align: center; font-weight: 700; text-transform: uppercase;
    background: var(--sys-color-surface-muted); border: 1px solid var(--sys-color-border); border-radius: var(--sys-radius-md);
}
.sys-documento-sub { font-weight: 700; margin: .9rem 0 .35rem; }
.sys-documento-p { margin: 0 0 .55rem; text-align: justify; line-height: 1.7; }
.sys-documento-nota { font-style: italic; color: var(--sys-color-text-muted); }
.sys-documento-lista { margin: 0 0 .6rem; padding-left: 1.4rem; }
.sys-documento-var { border-bottom: 1px dotted var(--sys-color-border); }
.sys-documento-inline { display: inline-block; vertical-align: middle; margin: 0 .2rem; }
.sys-documento-texto { margin-bottom: .6rem; }
.sys-documento-opcoes { margin: 0 0 .6rem; }
.sys-documento-opcoes-linha { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.sys-documento-opcao { display: inline-flex; align-items: center; gap: .4rem; }
.sys-documento-opcao .form-check { margin-bottom: 0; }
.sys-documento-grade { display: grid; grid-template-columns: repeat(var(--sys-doc-colunas, 3), minmax(0, 1fr)); gap: .25rem 1rem; }
.sys-documento-grade .sys-documento-opcoes-linha { display: contents; }
.sys-documento-quadro td { vertical-align: top; }
.sys-documento-quadro .sys-documento-rotulo { background: var(--sys-color-surface-muted); font-weight: 600; width: 30%; }
.sys-documento-quadro .sys-documento-cabecalho td { background: var(--sys-color-surface-muted); font-weight: 700; text-align: center; }
.sys-documento-assinatura { text-align: center; margin: 1.6rem auto .4rem; max-width: 24rem; color: var(--sys-color-text-muted); }
.sys-documento-traco { display: block; border-top: 1px solid var(--sys-color-border); margin-bottom: .2rem; }
.sys-documento-repetir { border-left: 3px solid var(--sys-color-border); padding-left: .8rem; margin: .6rem 0; }
.sys-documento-quebra { border-top: 1px dashed var(--sys-color-border); margin: 1.2rem 0; }
.sys-documento-linha { cursor: pointer; }
@media (max-width: 767.98px) { .sys-documento-grade { grid-template-columns: 1fr; } }

/* Ferramentas embaixo das caixas de texto grandes (29/10/2026): ditado por voz, situação e "N caracteres restantes"
   (partial modulos.genericos.partials.texto-ferramentas; app/ui/contadorCaracteres.js e app/ui/ditado/ditado.js). */
.sys-texto-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin: -.25rem 0 .75rem; }
/* 30/10/2026 (usuário): o aviso do ditado ocupa a linha ao lado do botão; sem espaço, o contador desce (não o aviso quebrando palavra por palavra). */
.sys-texto-status { font-size: .85rem; color: var(--sys-color-text-muted); flex: 1 1 auto; }
.sys-texto-status:empty { flex: 0 0 0; }
.sys-contador { margin-left: auto; font-size: .8rem; color: var(--sys-color-text-muted); white-space: nowrap; }
.sys-contador-alerta { color: var(--bs-danger, #b02a37); font-weight: 600; }
/* Painel único do preparo do ditado (download do reconhecedor), no canto da tela (partial ditado-painel). */
.sys-ditado-painel { position: fixed; right: 1rem; bottom: 1rem; z-index: 1080; max-width: 26rem; display: flex; align-items: center;
    gap: .5rem; padding: .6rem .85rem; font-size: .875rem; background: var(--sys-color-surface); color: var(--sys-color-text);
    border: 1px solid var(--sys-color-border); border-radius: var(--sys-radius-md); box-shadow: var(--sys-shadow-soft); }
.sys-ditado-painel[hidden] { display: none; }