/* ==========================================================================
   BASE GLOBAL — SIGDP
   Estilos realmente globais. Estilos de páginas específicas devem ficar
   dentro do próprio template ou em arquivos CSS específicos.
   ========================================================================== */

:root {
    --app-bg: #eef5fa;
    --app-surface: #ffffff;
    --app-surface-soft: #f7fafc;
    --app-text: #172033;
    --app-muted: #637286;
    --app-border: #dbe6ef;
    --app-link: #0f4c81;
    --app-input-bg: #ffffff;
    --app-input-text: #172033;
    --app-shadow: 0 10px 24px rgba(16, 59, 91, .08);
}

html[data-theme="dark"] {
    --app-bg: #0b1723;
    --app-surface: #122334;
    --app-surface-soft: #172c40;
    --app-text: #edf4fa;
    --app-muted: #a7b8c8;
    --app-border: #2a455c;
    --app-link: #7cc3f5;
    --app-input-bg: #0d1d2c;
    --app-input-text: #edf4fa;
    --app-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

body {
    color: var(--app-text);
    background-color: var(--app-bg);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item {
    color: var(--app-text);
    border-color: var(--app-border);
    background-color: var(--app-surface);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    color: var(--app-input-text);
    border-color: var(--app-border);
    background-color: var(--app-input-bg);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    color: var(--app-input-text);
    border-color: #4c96c9;
    background-color: var(--app-input-bg);
    box-shadow: 0 0 0 .20rem rgba(76, 150, 201, .18);
}

html[data-theme="dark"] .form-control::placeholder {
    color: #8497aa;
}

html[data-theme="dark"] .table {
    --bs-table-color: var(--app-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--app-border);
    --bs-table-striped-color: var(--app-text);
    --bs-table-striped-bg: rgba(255, 255, 255, .035);
    --bs-table-hover-color: var(--app-text);
    --bs-table-hover-bg: rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .bg-light {
    background-color: var(--app-surface-soft) !important;
}

html[data-theme="dark"] .text-muted {
    color: var(--app-muted) !important;
}

html[data-theme="dark"] hr {
    border-color: var(--app-border);
    opacity: 1;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: 'Montserrat', sans-serif;
    padding-right: 0 !important;
}

/*
    Não use transition em "*" porque isso anima tabelas, modais, offcanvas,
    elementos do Bootstrap e alterações de layout do sistema inteiro.
*/
button,
a,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.modal,
.offcanvas {
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

/*
    Mantém links sem sublinhado, mas sem forçar preto.
    "color: black" quebrava links do Bootstrap, links de status e links
    customizados de páginas novas.
*/
a {
    color: inherit;
    text-decoration: none;
}

/*
    Bootstrap e os templates específicos devem controlar tamanhos de títulos.
    Evite aplicar tamanhos grandes globalmente em todo h1, h2, h3 etc.
*/
h1,
h2,
h3,
h4,
h5,
h6,
p,
label {
    font-family: 'Montserrat', sans-serif;
}

label {
    font-weight: 500;
}

/* ==========================================================================
   COMPONENTES DE ARQUIVO
   ========================================================================== */

.botao-arquivo {
    padding: 5px 10px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    background-color: #333;
}

.bloco-arquivo {
    display: flex;
    align-items: center;
    column-gap: 10px;
    padding: 10px 20px;
    border-radius: 55px;
    background-color: #eee;
}

.input-arquivo {
    display: none;
}

#bg-arquivo {
    display: none;
}

#bg-arquivo.visivel {
    display: inline-block;
}

/* ==========================================================================
   BOTÃO DE EXCLUSÃO LEGADO
   ========================================================================== */

.botaoExcluir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    padding: 9px 20px;
    border: 1px solid #fff;
    border-radius: 10px;
    color: rgb(244, 33, 46);
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    background: transparent;
}

.botaoExcluir.negative {
    border-color: #fff;
    color: #fff;
}

.botaoExcluir.negative:hover {
    color: rgb(244, 33, 46);
    background: #fff;
}

.botaoExcluir:hover {
    color: #fff;
    background: rgb(244, 33, 46);
}

/* ==========================================================================
   ALERTS
   O posicionamento dos flashes é controlado exclusivamente pela base.html.
   ========================================================================== */

.fade-out {
    opacity: 0;
}

/* ==========================================================================
   TABELAS
   Use estas classes somente onde realmente forem necessárias.
   Não aplique nowrap e max-height em todas as tabelas do sistema.
   ========================================================================== */

.tabela-sem-quebra th,
.tabela-sem-quebra td {
    padding: 10px;
    white-space: nowrap;
}

.tabela-scroll-limitada {
    max-height: 500px;
    overflow-y: auto;
}

/* Larguras úteis para tabelas específicas */

.col-nome_completo {
    min-width: 200px;
}

.col-cpf {
    min-width: 120px;
}

.col-rg {
    min-width: 100px;
}

.col-especialidade {
    min-width: 150px;
}

.col-obms,
.col-funcoes {
    min-width: 150px;
}

/* ==========================================================================
   PAGINAÇÃO E BUSCA
   ========================================================================== */

.search-pagination-container {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
}

@media (max-width: 576px) {
    canvas {
        max-height: 300px !important;
    }
}