/* =============================================================
   Custom CSS — Design System Gov.br — Prefeitura Municipal
   ============================================================= */

/* ---------------------------------------------------------------
   Tipografia Global
   --------------------------------------------------------------- */
body {
    font-family: 'Rawline', 'Raleway', sans-serif;
    font-size: var(--font-size-scale-base, 14px);
    color: var(--gray-80, #333333);
}

/* ---------------------------------------------------------------
   Acessibilidade — Respeitar preferência de movimento reduzido
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------
   Skip Link — Gov.br DS (acessibilidade)
   --------------------------------------------------------------- */
.br-skip-link {
    position: absolute;
    left: -9999px;
    top: var(--spacing-scale-base, 8px);
    z-index: 9999;
    padding: var(--spacing-scale-base, 8px) var(--spacing-scale-2x, 16px);
    background-color: var(--blue-warm-vivid-70, #1351B4);
    color: var(--pure-0, #ffffff);
    border-radius: var(--surface-rounder-sm, 4px);
    text-decoration: none;
    font-weight: var(--font-weight-semi-bold, 600);
}

.br-skip-link:focus {
    left: var(--spacing-scale-2x, 16px);
}

/* ---------------------------------------------------------------
   Espaçamentos utilitários (tokens Gov.br DS)
   --------------------------------------------------------------- */
.gap-small {
    gap: var(--spacing-scale-base, 8px);
}

.gap-medium {
    gap: var(--spacing-scale-2x, 16px);
}

.gap-large {
    gap: var(--spacing-scale-4x, 32px);
}

/* ---------------------------------------------------------------
   Alinhamento de botões — utilitários
   --------------------------------------------------------------- */
.flex-buttons-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--spacing-scale-2x, 16px);
}

.flex-buttons-start {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--spacing-scale-2x, 16px);
}

.flex-buttons-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--spacing-scale-2x, 16px);
}

.flex-buttons-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--spacing-scale-2x, 16px);
}

.flex-buttons-stretch {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    gap: var(--spacing-scale-2x, 16px);
}

@media (max-width: 991px) {
    .flex-buttons-end,
    .flex-buttons-start,
    .flex-buttons-between,
    .flex-buttons-center,
    .flex-buttons-stretch {
        flex-direction: column;
    }
}

/* ---------------------------------------------------------------
   Listas em formulários
   --------------------------------------------------------------- */
.form-group ul {
    list-style: none;
    padding: 0;
}

/* ---------------------------------------------------------------
   Utilitários de cor
   --------------------------------------------------------------- */
.white {
    filter: brightness(0) invert(1);
}

/* ---------------------------------------------------------------
   Tabelas — colunas de ações
   --------------------------------------------------------------- */
.table-actions {
    width: 9rem;
    text-align: center !important;
}

.table-delete {
    width: 5rem;
    text-align: center !important;
}

/* ---------------------------------------------------------------
   Linha excluída / desativada
   --------------------------------------------------------------- */
.deleted {
    background-color: var(--red-vivid-10, #FFF3F2);
}

/* ---------------------------------------------------------------
   Botão "Ir para o topo"
   --------------------------------------------------------------- */
.go-to-top {
    position: fixed;
    bottom: var(--spacing-scale-2x, 16px);
    right: var(--spacing-scale-2x, 16px);
    z-index: var(--z-index-layer-1, 1000);
}

/* ---------------------------------------------------------------
   Utilitários adicionais — DS Gov.br
   --------------------------------------------------------------- */

/* Botão em bloco (largura 100%) */
.br-button.block {
    width: 100%;
    display: block;
}

/* Cores de ícones — Gov.br DS */
.text-blue-warm-vivid-70 {
    color: var(--blue-warm-vivid-70, #1351B4);
}

.text-blue-warm-vivid-60 {
    color: var(--blue-warm-vivid-60, #155BCB);
}

.text-green-cool-vivid-50 {
    color: var(--green-cool-vivid-50, #168821);
}

.text-yellow-vivid-20 {
    color: var(--yellow-vivid-20, #FFCD07);
}

.text-red-vivid-50 {
    color: var(--red-vivid-50, #E52207);
}

.text-gray-60 {
    color: var(--gray-60, #636363);
}

/* Margin right para ícones em botões */
.mr-1 {
    margin-right: var(--spacing-scale-half, 4px);
}

.mr-2 {
    margin-right: var(--spacing-scale-base, 8px);
}

/* Margin end (Bootstrap 5 utility) */
.me-1 {
    margin-inline-end: var(--spacing-scale-half, 4px);
}

.me-2 {
    margin-inline-end: var(--spacing-scale-base, 8px);
}

.me-3 {
    margin-inline-end: var(--spacing-scale-2x, 16px);
}

/* Margin bottom */
.mb-2 {
    margin-bottom: var(--spacing-scale-base, 8px);
}

.mb-3 {
    margin-bottom: var(--spacing-scale-2x, 16px);
}

.mb-4 {
    margin-bottom: var(--spacing-scale-3x, 24px);
}

.mb-5 {
    margin-bottom: var(--spacing-scale-4x, 32px);
}

/* Cards com hover — Gov.br DS */
.br-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.16);
    transition: box-shadow 0.2s ease-in-out;
}

/* Card header clicável (collapse) */
.card-header[data-bs-toggle="collapse"] {
    cursor: pointer;
    user-select: none;
}

.card-header[data-bs-toggle="collapse"]:hover {
    background-color: var(--bs-gray-100, #f8f9fa) !important;
}

/* Ícone chevron — rotação ao expandir */
.collapse-icon {
    transition: transform 0.3s ease;
    color: var(--bs-secondary, #6c757d);
}

.card-header[aria-expanded="true"] .collapse-icon {
    transform: rotate(180deg);
}

/* Cards com altura 100% */
.br-card.h-100 {
    height: 100%;
}

/* Card header com padding ajustado */
.br-card .card-header {
    padding: var(--spacing-scale-2x, 16px);
    border-bottom: 1px solid var(--gray-10, #CCCCCC);
}

/* Card content com padding */
.br-card .card-content {
    padding: var(--spacing-scale-3x, 24px);
}

/* Lista sem marcadores */
.list-unstyled {
    list-style: none;
    padding-left: 0;
}

/* ---------------------------------------------------------------
   Fieldset e Legend
   --------------------------------------------------------------- */

/* Toggle buttons com espaçamento */
.btn-group-gap {
    gap: 4px;
}

.btn-group-gap .btn {
    border-radius: var(--bs-border-radius, 0.375rem) !important;
}

.br-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.br-fieldset legend {
    font-size: var(--font-size-scale-down-01, 12px);
    font-weight: var(--font-weight-semi-bold, 600);
    color: var(--gray-80, #333333);
    margin-bottom: var(--spacing-scale-base, 8px);
    padding: 0;
}

.extrato-header {
    min-height: 72px;
    background-color: #f3f3f3;
    border-bottom: 1px solid #d6d6d6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.header-logo-wrapper {
    min-height: 72px;
    border-right: 1px solid #c7c7c7;
}

.header_blue {
    min-height: 72px;
    background-color: #f3f3f3;
}

.br-footer {
    background-color: #065EFF;
}

.nome_do_sistema {
    color: #1f2d3d;
}

.extrato-header .header-logo {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.extrato-header .header-logo a {
    width: 100%;
    justify-content: center;
    min-width: 0;
    flex-wrap: nowrap;
}

.extrato-header .header-logo img {
    max-height: 42px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}

.extrato-header .header_blue {
    min-width: 0;
}

.extrato-header .header-top {
    min-height: 72px;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

.extrato-header .nome_do_sistema {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
}

/*
   Desktop intermediario (logo ainda no header desktop):
   amplia a coluna da logo para evitar corte antes da troca para mobile.
*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .extrato-header .header-logo-wrapper {
        flex: 0 0 24%;
        width: 24%;
        max-width: 24%;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .extrato-header .header_blue {
        flex: 0 0 76%;
        width: 76%;
        max-width: 76%;
    }

    .extrato-header .header-logo a {
        gap: 0.5rem !important;
    }

    .extrato-header .header-logo img {
        max-height: 36px;
    }

    .extrato-header .nome_do_sistema {
        font-size: 1.6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* ===================================================
   CONTROLE EXATO DOS HEADERS (SEM PONTOS CEGOS)
   =================================================== */

/* 1. Mobile First: Até 991px, mostramos o mobile e escondemos o desktop */
.meu-header-desktop { 
    display: none !important; 
}
.meu-header-mobile { 
    display: block !important; 
}

/* 2. Desktop: A partir de exatos 992px, inverte a lógica */
@media (min-width: 992px) {
    .meu-header-desktop { 
        display: block !important; 
    }
    .meu-header-mobile { 
        display: none !important; 
    }
}