:root {
    /* Light Theme Palette */
    --bg-color: #e8eaeb;       /* Main background - very light gray */
    --bg-light: #ffffff;       /* Cards, modals, content area - white */
    --bg-lighter: #e9ecef;     /* Inputs, headers, striped rows - light gray */
    --text-color: #212529;     /* Main text - almost black */
    --text-secondary-color: #6c757d;
    
    /* Action Colors */
    --primary-color: #3A7EBF;
    --primary-hover: #346FA4;
    --secondary-color: #6c757d; /* Standard gray button */
    --secondary-hover: #5a6268; /* Darker gray on hover */
    --danger-color: #D9534F;
    --danger-hover: #C9302C;
    --success-color: #5CB85C;
    --warning-color: #F0AD4E;
    
    /* Other UI Colors */
    --border-color: #dee2e6;   /* Light border for elements */
    --border-color-light: #f1f3f5; /* ✅ NOVO: Borda mais clara */
    --hover-bg-color: #f8f9fa; /* ✅ NOVO: Cor de fundo para hover */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

body {
    margin: 0;
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    /*min-height: 100vh;*/
    height: 100vh; /* Garante que o body ocupe a tela inteira */
}

/* --- Estrutura e Layout --- */
.user-display {
    display: flex;
    align-items: center;
    padding: 5px 20px;
    background-color: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; 
}
.user-info-text { flex-grow: 1; text-align: right; margin-right: 15px; font-size: 0.9em; }
.user-avatar { border-radius: 50%; }
.logo-small { height: 40px; width: auto; }
.logo-big { max-width: 300px; margin-bottom: 20px; }

/* ✅ NOVO: Estilo para o botão do menu */
#menu-toggle-button {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 24px;
    cursor: pointer;
    padding: 0 15px 0 0;
    margin-right: 10px;
}

#app-container {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.frame {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    width: 100%;
    max-width: 500px;
}
.frame.active { display: flex; }

.main-layout {
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    max-width: none;
    height: 100%;
}

#sidebar {
    background-color: var(--bg-light);
    width: 250px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    transition: width 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
    overflow: hidden; 
}

/* Este seletor significa: "aplique ao #sidebar SOMENTE QUANDO o body tiver a classe sidebar-collapsed" */
body.sidebar-collapsed #sidebar {
    width: 0;
    padding: 20px 0;
    opacity: 0;
}

#sidebar h2 { margin-top: 0; }
#sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.sidebar-footer { margin-top: auto; }
.municipio-info {
    font-size: 0.8em;
    color: #6c757d;
    margin-bottom: 15px;
    padding: 10px;
    background-color: var(--bg-color);
    border-radius: 5px;
    text-align: center;
}

/* ✅ ADICIONE ESTES NOVOS ESTILOS */
.btn-sidebar {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 6px;
    border: 1px solid #555;
    background-color: #4a4a4a;
    color: #ddd;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-sidebar:hover:not(:disabled) {
    background-color: #5a5a5a;
    border-color: #777;
}

.btn-sidebar:disabled {
    background-color: #383838; /* Tonalidade mais escura/apagada */
    color: #888;
    cursor: not-allowed;
    border-color: #444;
}

.btn-logout {
    background-color: #6c757d;
    border-color: #5a6268;
}

.btn-logout:hover {
    background-color: #5a6268;
}

/* Estilo para a lista de seleção no novo modal */
.scrollable-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
}

.radio-item {
    display: block;
    margin-bottom: 8px;
}

#content-area {
    flex-grow: 1;
    padding: 20px;
    overflow-y: hidden;
}

.content {
    height: 100%; /* Garante que a área da aba ocupe toda a altura */
    overflow-y: auto; /* Adiciona a barra de rolagem se o conteúdo for maior */
}

/* --- Estilos para o Botão de Alternância do Dashboard --- */

/* 1. Torna o banner um container de posicionamento */
.welcome-banner {
    position: relative; /* Essencial para o posicionamento absoluto do filho */
}
/* 2. Posiciona o container do botão no canto superior direito do banner */
.dashboard-toggle-container {
    position: absolute;
    top: 1.5rem;   /* Alinha com a margem do banner */
    right: 2rem;  /* Alinha com a margem do banner */

    /* Estilos ajustados para a nova posição */
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Espaçamento menor */
    margin: 0;
    padding: 0;
    background-color: transparent; /* Remove o fundo */
    border: none;                  /* Remove a borda */
}

.dashboard-toggle-container strong {
    font-size: 0.9rem; /* Texto um pouco menor */
    color: rgba(255, 255, 255, 0.7); /* Cor branca semitransparente */
    transition: color 0.3s ease;
}

.dashboard-toggle-container strong.active-source {
    color: #ffffff; /* Cor branca sólida para a fonte ativa */
    font-weight: 700;
}

/* ========================================================= */
/* === AJUSTE DO BOTÃO DE ALTERNÂNCIA PARA DISPOSITIVOS MÓVEIS === */
/* ========================================================= */

@media (max-width: 768px), (pointer: coarse)  {
    /* 1. Reseta o posicionamento absoluto do container do botão */
    .dashboard-toggle-container {
        position: static;      /* Tira o botão do canto e o coloca de volta no fluxo normal da página */
        top: auto;
        right: auto;
        
        /* 2. Re-centraliza o botão e ajusta as margens para o novo local */
        justify-content: center;
        margin-top: 1rem;      /* Adiciona espaço acima, abaixo do parágrafo */
        margin-bottom: 1.5rem; /* Adiciona espaço abaixo, antes dos cards */
    }

    /* 3. Ajusta as cores do texto para serem legíveis no fundo claro do dashboard */
    .dashboard-toggle-container strong {
        font-size: 0.85rem;                /* Reduz um pouco o tamanho da fonte */
        color: rgba(255, 255, 255, 0.7);/* Cor de texto padrão para o tema claro */
    }

    .dashboard-toggle-container strong.active-source {
        color: #ffffff;      /* Cor primária para a fonte ativa */
    }
}

@media (min-width: 901px) { /* Aplica apenas para telas maiores que 900px (desktop) */
    
    /* Regras do gráfico que já tínhamos */
    .dashboard-card.chart-card {
        max-height: 300px;
        overflow: hidden;
        flex-direction: column;
    }

    .dashboard-card.chart-card .chart-container {
        flex-grow: 1;
        min-height: 0;
    }

    /* --- ADICIONE ESTA NOVA REGRA AQUI DENTRO --- */
    /* Ela desativa a rolagem APENAS no dashboard em telas de desktop */
    #home-content {
        overflow-y: hidden;
    }
}

.content { display: none; }
.content.show { display: block; }

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

/* --- Elementos de Formulário --- */
.form-group {
    width: 100%;
    margin-bottom: 15px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
select,
textarea {
    width: 100%;
    padding: 10px;
    background-color: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-color);
    box-sizing: border-box; /* Importante */
}
input::placeholder, textarea::placeholder { color: #6c757d; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    width: 100%;
}

/* --- Botões --- */
.btn {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
    width: 100%;
    max-width: 300px;
}
.btn-primary { background-color: var(--primary-color); color: white; }
.btn-primary:hover { background-color: var(--primary-hover); }
.btn-secondary { background-color: var(--secondary-color); color: white; }
.btn-secondary:hover { background-color: var(--secondary-hover); }
.btn-link {
    background: none;
    color: var(--primary-color);
    text-decoration: underline;
    padding: 5px;
    max-width: none;
}

.btn-menu {
    width: 100%;
    text-align: left;
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid transparent;
}
.btn-menu:hover { background-color: var(--bg-lighter); }
.btn-menu.active { background-color: var(--primary-color); color: white; }

/* --- Tabelas --- */
/* ===== TABELA DE PROCESSOS OTIMIZADA - BASEADA NA IMAGEM ===== */

.table-container {
    width: 100%;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: visible;
    margin-top: 20px;
}

/* Cabeçalho da tabela */
.table-header-compact {
    display: grid;
    grid-template-columns: 
        60px      /* ID */
        120px     /* Nº Processo */
        140px     /* Modalidade */
        1fr     /* Objeto */
        250px     /* Agente */
        100px     /* Data Publicação */
        100px     /* Data Abertura */
        100px      /* Status */
        100px;    /* Ações */
    gap: 1px;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 13px;
    color: #495057;
    padding: 12px 8px;
    align-items: center;
    text-align: center;
}

/* Linhas da tabela */
.table-row-compact {
    display: grid;
    grid-template-columns: 
        60px      /* ID */
        120px     /* Nº Processo */
        140px     /* Modalidade */
        1fr     /* Objeto */
        250px     /* Agente */
        100px     /* Data Publicação */
        100px     /* Data Abertura */
        100px      /* Status */
        100px;    /* Ações */
    gap: 1px;
    padding: 12px 8px;
    border-bottom: 1px solid #e9ecef;
    align-items: center;
    font-size: 13px;
    transition: background-color 0.2s ease;
}

.table-row-compact:hover {
    background-color: #f8f9fa;
}

.table-row-compact:nth-child(even) {
    background-color: #fdfdfd;
}

/* Estilos das colunas individuais */
.col-id {
    font-weight: 600;
    color: #495057;
    text-align: center;
}

.col-numero {
    font-weight: 500;
    color: #007bff;
    word-break: break-word;
}

.col-modalidade {
    color: #6c757d;
    font-size: 12px;
    line-height: 1.3;
}

.col-objeto {
    color: #495057;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* Propriedade padrão para compatibilidade futura */
    line-clamp: 2;
    /* Fallback para navegadores que não suportam line-clamp */
    text-overflow: ellipsis;
}

@supports not (line-clamp: 2) {
    .col-objeto {
        /* Limita a uma linha com ellipsis como fallback */
        white-space: nowrap;
        text-overflow: ellipsis;
        max-height: 20px;
        display: block;
    }
}

.col-agente {
    color: #6c757d;
    font-size: 12px;
    text-align: center;
}

.col-data-pub,
.col-data-abert {
    font-family: 'Segoe UI', monospace;
    font-size: 12px;
    color: #495057;
    text-align: center;
    font-weight: 500;
}

.col-status {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #28a745;
    background-color: #d4edda;
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid #c3e6cb;
}

.col-acoes {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

/* Botões de ação */
.btn-action {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-edit {
    color: #ffc107;
    border-color: #ffc107;
}

.btn-edit:hover {
    background-color: #fff3cd;
    border-color: #ffcd39;
}

.btn-delete {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-delete:hover {
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.btn-view {
    color: #6c757d;
    border-color: #6c757d;
}

.btn-view:hover {
    background-color: #e2e6ea;
    border-color: #adb5bd;
}

.col-valor-estimado {
    text-align: center; 
}

/* Estilos base para as células com alerta */
.alerta-visual-verde,
.alerta-visual-vermelho, .alerta-visual-amarelo {
    border-radius: 4px;
    padding: 4px 6px;
    text-align: center;
    font-weight: bold;
    margin: -4px -6px; /* Compensa o padding para não quebrar o alinhamento da linha */
}

/* Alerta VERDE para "1 dia útil" */
.alerta-visual-verde {
    color: #1a5e20; /* Texto verde escuro para boa legibilidade */
    background-color: rgba(76, 175, 80, 0.1); /* Fundo verde muito claro */
    /* A linha abaixo aplica a animação 'pulse-green' */
    animation: pulse-green 2.5s infinite;
}

/* Alerta VERMELHO para "Aguardando Situação" */
.alerta-visual-vermelho {
    color: #b71c1c; /* Texto vermelho escuro para boa legibilidade */
    background-color: rgba(244, 67, 54, 0.1); /* Fundo vermelho muito claro */
    /* A linha abaixo aplica a animação 'pulse-red' */
    animation: pulse-red 2.5s infinite;
}

/* Alerta AMARELO para "Em fase de recurso" */
.alerta-visual-amarelo {
    color: #856404; /* Texto amarelo escuro */
    background-color: #fff3cd; /* Fundo amarelo claro */
    animation: pulse-yellow 2.5s infinite;
}

/* Animação de pulso para o brilho verde */
@keyframes pulse-green {
    0% { box-shadow: 0 0 7px 2px rgba(76, 175, 80, 0.6); }
    50% { box-shadow: 0 0 12px 4px rgba(76, 175, 80, 0.8); }
    100% { box-shadow: 0 0 7px 2px rgba(76, 175, 80, 0.6); }
}

/* Animação de pulso para o brilho vermelho */
@keyframes pulse-red {
    0% { box-shadow: 0 0 7px 2px rgba(244, 67, 54, 0.6); }
    50% { box-shadow: 0 0 12px 4px rgba(244, 67, 54, 0.8); }
    100% { box-shadow: 0 0 7px 2px rgba(244, 67, 54, 0.6); }
}

/* Animação de pulso para o brilho amarelo */
@keyframes pulse-yellow {
    0% { box-shadow: 0 0 7px 2px rgba(255, 193, 7, 0.6); }
    50% { box-shadow: 0 0 12px 4px rgba(255, 193, 7, 0.8); }
    100% { box-shadow: 0 0 7px 2px rgba(255, 193, 7, 0.6); }
}

/* Responsividade */
@media (max-width: 1400px) {
    .table-header-compact,
    .table-row-compact {
        grid-template-columns: 
            50px      /* ID */
            100px     /* Nº Processo */
            120px     /* Modalidade */
            250px     /* Objeto */
            100px     /* Agente */
            90px      /* Data Publicação */
            90px      /* Data Abertura */
            70px      /* Status */
            90px;     /* Ações */
        font-size: 12px;
    }
}

@media (max-width: 1200px) {
    .table-header-compact,
    .table-row-compact {
        grid-template-columns: 
            45px      /* ID */
            90px      /* Nº Processo */
            110px     /* Modalidade */
            200px     /* Objeto */
            90px      /* Agente */
            80px      /* Data Publicação */
            80px      /* Data Abertura */
            60px      /* Status */
            80px;     /* Ações */
        font-size: 11px;
        padding: 8px 6px;
    }
}

@media (max-width: 768px) {
    .table-header-compact,
    .table-row-compact {
        grid-template-columns: 
            40px      /* ID */
            80px      /* Nº Processo */
            100px     /* Modalidade */
            150px     /* Objeto */
            80px      /* Agente */
            70px      /* Data Publicação */
            70px      /* Data Abertura */
            50px      /* Status */
            70px;     /* Ações */
        font-size: 10px;
        padding: 6px 4px;
    }
    
    .btn-action {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* --- Modais (Dialogs) --- */
dialog {
    background-color: var(--bg-light);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
}
dialog form { display: flex; flex-direction: column; gap: 15px; }
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
.modal-actions button { width: auto; }

/* --- Outros --- */
.status-label {
    margin-top: 15px;
    min-height: 20px;
    color: var(--danger-color);
    text-align: center;
}

/* Estilos para a lista de sugestões flutuante */
.suggestions-list {
    display: none;
    position: fixed; /* MUDANÇA CRÍTICA: de 'absolute' para 'fixed' */
    border: 1px solid #ccc;
    background-color: white;
    z-index: 9999; /* z-index alto para garantir que fique sobre o fundo do modal */
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 4px 0;
}

/* Estilos para os grupos de campos condicionais */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    margin: 0;
}

/* Estilos para avisos e validações */
.status-label {
    font-size: 0.9em;
    margin-top: 5px;
    padding: 5px;
    border-radius: 4px;
}

.status-label:empty {
    display: none;
}

/* Cores para diferentes tipos de status */
.status-label.error {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

.status-label.warning {
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
}

.status-label.success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

/* Textarea styling */
textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

/* Estilos para campos de data e hora com ícones */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon input[type="date"],
.input-with-icon input[type="time"] {
    width: 100%;
    padding: 12px 40px 12px 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    background-color: #fff;
}

.input-with-icon input[type="date"]:focus,
.input-with-icon input[type="time"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.input-with-icon .input-icon {
    position: absolute;
    right: 12px;
    font-size: 18px;
    pointer-events: none;
    color: #666;
    z-index: 1;
}

/* Melhorar aparência dos calendários/relógios nativos */
.input-with-icon input[type="date"]::-webkit-calendar-picker-indicator,
.input-with-icon input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 40px;
    height: 100%;
    cursor: pointer;
}

/* Estilo para campos inválidos */
.input-with-icon input.invalid {
    border-color: #dc3545;
    background-color: #fff5f5;
}

.input-with-icon input.valid {
    border-color: #28a745;
    background-color: #f8fff8;
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
    .input-with-icon input[type="date"],
    .input-with-icon input[type="time"] {
        font-size: 16px; /* Evita zoom no iOS */
        padding: 10px 35px 10px 10px;
    }
    
    .input-with-icon .input-icon {
        right: 10px;
        font-size: 16px;
    }
}

.suggestion-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: #f0f0f0;
}

/* ===== TABELA DE MUNICÍPIOS - MESMO PADRÃO DOS PROCESSOS ===== */

/* Cabeçalho da tabela de municípios */
.municipios-table-header-compact {
    display: grid;
    grid-template-columns: 
        60px      /* ID */
        300px     /* Nome */
        200px     /* CNPJ */
        80px      /* UF */
        300px;    /* Ações */
    gap: 8px;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 13px;
    color: #495057;
    padding: 15px 10px;
    align-items: center;
}

/* Linhas da tabela de municípios */
.municipios-table-row-compact {
    display: grid;
    grid-template-columns: 
        60px      /* ID */
        300px     /* Nome */
        200px     /* CNPJ */
        80px      /* UF */
        120px;    /* Ações */
    gap: 8px;
    padding: 12px 8px;
    border-bottom: 1px solid #e9ecef;
    align-items: center;
    font-size: 13px;
    transition: background-color 0.2s ease;
    /*min-height: 50px;*/ /* Garantir altura mínima para linhas */
}

.municipios-table-row-compact:hover {
    background-color: #f8f9fa;
}

.municipios-table-row-compact:nth-child(even) {
    background-color: #fdfdfd;
}

/* Colunas específicas dos municípios */
.col-municipio-id {
    font-weight: 600;
    color: #495057;
    text-align: center;
}

.col-municipio-nome {
    font-weight: 500;
    color: #007bff;
    word-break: break-word;
}

.col-municipio-cnpj {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    color: #495057;
    text-align: center;
    font-weight: 500;
    /* ✅ GARANTIR ESPAÇO SUFICIENTE PARA CNPJ COMPLETO */
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    min-width: 160px; /* Espaço mínimo para CNPJ formatado */
}
/* ✅ AJUSTAR LARGURAS DAS COLUNAS */
.municipios-table-header-compact,
.municipios-table-row-compact {
    grid-template-columns: 
        60px      /* ID */
        280px     /* Nome - reduzido um pouco */
        180px     /* CNPJ - aumentado */
        80px      /* UF */
        300px;    /* Ações */
}

.col-municipio-uf {
    font-weight: 600;
    color: #6c757d;
    text-align: center;
    text-transform: uppercase;
}

.col-municipio-acoes {
    min-width: 300px;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

/* 1. O contêiner para os dois botões de limite (sem alteração) */
.limit-toggle-group {
    display: flex;
    gap: 8px;
    align-items: center;
    border: 1px solid #ddd;
    padding: 2px 6px;
    border-radius: 15px;
    background-color: #f8f9fa;
}

/* 2. O corpo do botão deslizante (sem alteração) */
.switch-small {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 34px;
    height: 20px;
}

/* Esconde o checkbox padrão (sem alteração) */
.switch-small input { 
    opacity: 0;
    width: 0;
    height: 0;
}

/* 3. A "pista" do botão deslizante (sem alteração) */
.slider-small {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc; /* Cor cinza quando desligado */
    transition: .4s;
}

/* 4. O círculo que desliza (sem alteração) */
.slider-small:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    z-index: 1; 
}

/* ✅ 5. NOVA REGRA PARA O TEXTO DENTRO DO BOTÃO */
.slider-small:after {
    /* Pega o texto do atributo 'data-label' que vamos adicionar no HTML */
    content: attr(data-label); 
    position: absolute;
    font-size: 10px;
    font-weight: bold;
    line-height: 20px; /* Alinha verticalmente com a altura do botão */
    transition: color 0.4s, left 0.4s, right 0.4s; /* Anima a cor e posição */
    z-index: 0; /* Fica atrás do círculo branco */

    /* Estado INICIAL (Desativado) */
    color: #4d5153; /* Cinza escuro, conforme solicitado */
    right: 5px;     /* Posicionado na área cinza à direita */
}

/* 6. Estilo para quando o botão está LIGADO (checked) */
input:checked + .slider-small {
    background-color: #28a745; /* Muda a cor da pista para verde */
}

input:checked + .slider-small:before {
    transform: translateX(14px); /* Move o círculo para a direita */
}

/* ✅ 7. NOVA REGRA PARA O TEXTO QUANDO O BOTÃO ESTÁ LIGADO */
input:checked + .slider-small:after {
    color: white;  /* Cor branca, conforme solicitado */
    left: 5px;     /* Posicionado na área verde à esquerda */
    right: auto;   /* Remove o posicionamento à direita */
}

/* 8. Estilos de arredondamento (sem alteração) */
.slider-small.round { border-radius: 20px; }
.slider-small.round:before { border-radius: 50%; }
/* ===== VALIDAÇÕES DE FORMULÁRIO ===== */

/* Status labels para validações */
.status-label {
    font-size: 13px;
    font-weight: 500;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    display: block;
    min-height: 20px;
}

.status-label.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-label.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-label.warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

/* Campos inválidos */
input.invalid,
select.invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Campos válidos */
input.valid,
select.valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* ===== TABELA DE ÓRGÃOS - PADRÃO PROCESSOS ===== */
.orgaos-table-header, .orgaos-table-row {
    display: grid;
    grid-template-columns: 80px 1fr 120px; /* Define as 3 colunas */
    gap: 8px;
    padding: 12px 10px;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.orgaos-table-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 13px;
    color: #495057;
}

.orgaos-table-row {
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.orgaos-table-row:nth-child(even) {
    background-color: #fdfdfd;
}

.orgaos-table-row:hover {
    background-color: #f1f3f5;
}

/* Estilo para a coluna de nome do órgão */
.col-orgao-nome {
    font-weight: 500;
    color: #343a40;
    word-break: break-word;
}

.radio-item {
    margin-bottom: 10px;
}

.radio-item input[type="radio"] {
    margin-right: 10px;
}

.radio-item label {
    font-size: 14px;
    color: #495057;
}

/* ===== Estilos para o Botão Deslizante (Toggle Switch) ===== */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--success-color);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--success-color);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* Estilos para o Acordeão de Processos */
.processo-accordion-item {
    border-bottom: 1px solid var(--border-color);
}

.processo-row-header {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.processo-row-header:hover {
    background-color: var(--hover-bg-color);
}

.processo-details-panel {
    display: none; /* Oculto por padrão */
    padding: 15px;
    background-color: #fdfdfd;
    border-top: 1px solid var(--border-color-light);
}

.processo-details-panel.expanded {
    display: block; /* Visível quando expandido */
}

.details-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px;
    font-size: 0.9rem;
}

.details-grid div:nth-child(odd) { /* Estilo para os rótulos (label) */
    font-weight: bold;
    color: var(--text-secondary-color);
}

.details-grid div:nth-child(even) { /* Estilo para os valores */
    white-space: pre-wrap; /* Mantém quebras de linha do campo observações */
    word-break: break-word;
}

.toast-notification.error {
    background-color: var(--danger-color);
}

.toast-notification.show {
    transform: translateY(0);
    opacity: 1;
}

/* --- Estilos para a Seção de Relatórios --- */
.reports-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    padding: 1rem;
}

.report-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    border: 1px solid #e0e0e0;
}

.report-card h3 {
    margin-top: 0;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color-light);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.report-card p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.5rem;
}

.form-group-inline {
    display: flex;
    gap: 1rem;
}

.form-group-inline .form-group {
    flex: 1;
}

/* Estilo padronizado e unificado para botões de "Voltar" nos cabeçalhos */
#orgao-contatos-back-btn,
#processo-situacoes-back-btn,
#voltar-para-gerenciamento-btn,
#btn-voltar-contratos {
    background: transparent; /* Aproveitado da sua regra antiga */
    border: none;            /* Aproveitado da sua regra antiga */
    font-size: 1.5rem;       /* Tamanho um pouco maior para o ícone de seta */
    color: var(--text-secondary-color); /* Cor cinza padrão */
    padding: 0 10px;         /* Espaçamento para a área de clique */
    cursor: pointer;         /* Aproveitado da sua regra antiga */
    border-radius: 5px;      /* Adiciona bordas arredondadas suaves */
    transition: all 0.2s ease; /* Efeito de transição suave */
}

/* Efeito de hover padronizado - SEM SUBLINHADO */
#orgao-contatos-back-btn:hover,
#processo-situacoes-back-btn:hover,
#voltar-para-gerenciamento-btn:hover,
#btn-voltar-contratos:hover {
    background-color: var(--hover-bg-color); /* Adiciona um fundo sutil ao passar o mouse */
    color: var(--primary-color);             /* Muda a cor da seta para o azul primário */
    text-decoration: none;                   /* Garante que não haja sublinhado */
}

/* Tabela de Fornecedores */
.fornecedores-table-header, .fornecedores-table-row {
    display: grid;
    gap: 8px;
    padding: 12px 10px;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.fornecedores-table-header {
    background-color: #f8f9fa;
    border-bottom-width: 2px;
    font-weight: 600;
    font-size: 13px;
    color: #495057;
}

.fornecedores-table-row {
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.fornecedores-table-row:hover {
    background-color: #f1f3f5;
}

/* Layout padrão (sem coluna município) */
.fornecedores-table-header.default-layout,
.fornecedores-table-row.default-layout {
    grid-template-columns: 1.5fr 2fr 1.5fr 1.5fr 2fr 120px;
}

/* Layout para proprietários (com coluna município) */
.fornecedores-table-header.owner-layout,
.fornecedores-table-row.owner-layout {
    grid-template-columns: 1.5fr 2fr 1.5fr 1.5fr 2fr 1.5fr 120px;
}

/* Componente de Input com Tags */
.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--bg-lighter);
}

.tag-input-container input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 4px;
    background-color: transparent;
}

.tag-item {
    display: flex;
    align-items: center;
    background-color: var(--primary-color);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.9em;
}

.tag-remove-btn {
    margin-left: 8px;
    border: none;
    background: none;
    color: white;
    cursor: pointer;
    font-weight: bold;
}
/* Wrapper para alinhar input e botão */
.tag-input-wrapper {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.tag-input-wrapper input {
    flex-grow: 1; /* Faz o input ocupar o espaço disponível */
}

/* Estilo para o novo botão Adicionar */
.btn-add-tag {
    flex-shrink: 0; /* Impede que o botão encolha */
    padding: 8px 15px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.btn-add-tag:hover {
    background-color: var(--primary-hover);
}

/* --- AJUSTE DE LARGURA FIXA PARA DESKTOP (VERSÃO MELHORADA) --- */

/* Aplica os estilos se AMBAS as condições forem verdadeiras:
  1. A tela tiver 769px de largura ou mais.
  2. O dispositivo tiver um ponteiro preciso (como um mouse), indicando que é um desktop/laptop.
*/
/* Aplica as regras apenas em telas maiores com um ponteiro preciso (mouse) */
@media (min-width: 769px) and (pointer: fine) {

  /* 1. Define o tamanho e a transição da barra lateral */
  #sidebar {
    width: 200px;
    min-width: 200px;
    transition: width 0.3s ease, min-width 0.3s ease;
  }

  /* 2. Define o tamanho e a posição iniciais da área de conteúdo */
  #content-area {
    width: 100%; /* Ocupa o restante do espaço */
    transition: margin-left 0.3s ease, width 0.3s ease; /* Anima a mudança */
  }

  /* 3. Define o que acontece quando a sidebar é recolhida */
  body.sidebar-collapsed #sidebar {
    width: 0;
    min-width: 0;
  }

  body.sidebar-collapsed #content-area {
    margin-left: 0; /* Remove a margem */
    width: 100%;    /* Faz o conteúdo ocupar 100% da tela */
  }
}

/* Estilos para a Visão Pública do Processo */
.public-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.public-modal-content {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.public-modal-content h3 {
    margin-top: 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.public-details-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 15px;
    font-size: 1rem;
}

.public-details-grid div:nth-child(odd) {
    font-weight: bold;
    color: var(--text-secondary-color);
}

.public-modal-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

/* --- Estilos para Notificações Toast --- */

/* Posiciona o contêiner no canto superior esquerdo da tela */
#toast-container {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Estilo base da notificação: invisível e fora da tela */
.toast-notification {
    padding: 15px 20px;
    background-color: #333;
    color: white;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateX(-120%);
    /* A linha mais importante: define a animação */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Estilo da notificação quando visível */
.toast-notification.show {
    opacity: 1;
    transform: translateX(0);
}

/* Cores para diferentes tipos de mensagens */
.toast-notification.error {
    background-color: #D9534F; /* Cor de perigo */
}

.toast-notification.success {
    background-color: #5CB85C; /* Cor de sucesso */
}

.modal-toast-container {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 99999; /* Garante que fique acima de todo o conteúdo do modal */
}

/* --- Otimização do Modal Público para Dispositivos Móveis --- */
@media (max-width: 600px) {
  .public-details-grid {
    /* Altera o layout de 2 colunas para apenas 1 */
    grid-template-columns: 1fr;
    gap: 5px; /* Reduz o espaçamento entre os itens */
  }

  /* No celular, o rótulo (ex: "Município:") fica menor e sem margem inferior */
  .public-details-grid div:nth-child(odd) {
    margin-bottom: 0;
    font-size: 0.8rem;
    color: var(--text-secondary-color);
  }

  /* O valor (ex: "Abaiara / CE") ganha uma margem inferior para separar do próximo item */
  .public-details-grid div:nth-child(even) {
    margin-bottom: 10px;
  }

  /* Reduz o espaçamento interno do modal em telas pequenas */
  .public-modal-content {
    padding: 1.5rem;
  }
}

/* --- Estilos para o Dashboard da Página Inicial --- */
.welcome-banner {
    background: linear-gradient(135deg, var(--primary-color), #5f9dce);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.welcome-banner h2 {
    margin: 0;
    font-size: 1.8rem;
}
.welcome-banner p {
    margin: 0.25rem 0 0;
    opacity: 0.9;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.dashboard-card {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid var(--border-color);
}

.stat-card {
    text-align: center;
}
.stat-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-color);
}
.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary-color);
}

.action-card h3, .list-card h3 {
    margin-top: 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.action-button {
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    text-align: left;
    background-color: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s, border-color 0.2s;
}
.action-button:hover {
    background-color: #d4dbe1;
    border-color: #b6c2cf;
}
.action-button:last-child {
    margin-bottom: 0;
}

#proximos-processos-list .processo-item {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color-light);
}
#proximos-processos-list .processo-item:last-child {
    border-bottom: none;
}
.processo-item-header {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.processo-item-date {
    font-size: 0.8rem;
    color: var(--text-secondary-color);
}

#chart-card-container {
    display: none; /* Oculto por padrão */
}

.dashboard-card.chart-card {
    grid-column: span 2;
    /* Usa flexbox para organizar o título e o contêiner do gráfico */
    display: flex;
    flex-direction: column;
    min-height: 310px; /* Altura mínima para o card */
}

/* Novo contêiner que segura o gráfico */
.chart-container {
    /* Posição relativa é essencial para o Chart.js */
    position: relative;
    /* flex-grow: 1 permite que este contêiner ocupe todo o espaço
       vertical restante dentro do card, após o título <h3> */
    flex-grow: 1; 
}

/* Media query para telas menores (sem alteração) */
@media (max-width: 900px) {
    .dashboard-card.chart-card {
        grid-column: span 1;
    }
}

@media (min-width: 901px) { /* Aplica apenas para telas maiores que 900px (desktop) */
    .dashboard-card.chart-card {
        max-height: 310px; /* Ajuste este valor conforme a necessidade */
        overflow: hidden; /* Oculta qualquer parte do gráfico que exceda a altura */
        flex-direction: column; /* Garante que o conteúdo interno continue em coluna */
    }

    .dashboard-card.chart-card .chart-container {
        flex-grow: 1; /* Permite que o contêiner do gráfico use o espaço limitado */
    }
}

/* --- Estilos para o grupo Valor Estimado e Toggle --- */

/* Contêiner principal para alinhar itens horizontalmente */
.form-group-horizontal {
    display: flex;
    align-items: center;
    gap: 20px; /* Espaço entre o campo de valor e o grupo do botão */
}

/* Grupo que contém apenas o input do valor */
.valor-estimado-group {
    flex-grow: 1; /* Faz o campo de input ocupar o máximo de espaço possível */
}

/* Grupo que contém o botão e o texto */
.toggle-group {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaço entre o botão e o texto */
    flex-shrink: 0; /* Impede que o grupo encolha */
}

/* Estilo para o texto "Orçamento Sigiloso" */
.toggle-label {
    font-size: 0.9em;
    font-weight: 500;
    color: #6c757d; /* Cor de texto secundária (aparência opaca) */
    cursor: pointer;
}

/* --- Estilo para o cabeçalho do grupo de checkboxes --- */
.form-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; /* Adiciona um espaço antes da lista de checkboxes */
}

/* Contêiner do checkbox "Marcar todos" */
#marcar-todos-orgaos-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ========================================================= */
/* === ESTILOS MOBILE UNIFICADOS PARA PROCESSOS E PNCP === */
/* ========================================================= */

/* Aplica estas regras em telas com largura máxima de 768px */
@media (max-width: 768px) {

    /* --- 1. Regras Gerais (Aplicadas a AMBAS as tabelas) --- */
    #processos-content .table-header-compact,
    #pncp-content .table-header-compact {
        display: none;
    }

    #processos-content .table-container,
    #pncp-content .table-container {
        background-color: transparent;
        box-shadow: none;
        padding: 0;
    }

    #processos-content .processo-accordion-item .table-row-compact,
    #pncp-content .processo-accordion-item .table-row-compact {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: var(--bg-light);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    #processos-content .processo-accordion-item .table-row-compact > div,
    #pncp-content .processo-accordion-item .table-row-compact > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-color-light);
    }
    
    #processos-content .processo-accordion-item .table-row-compact > div:last-child,
    #pncp-content .processo-accordion-item .table-row-compact > div:last-child {
        border-bottom: none;
    }
    
    /* ✅ INÍCIO DA CORREÇÃO */
    /* Regra específica para a coluna de ações para forçar o alinhamento horizontal */
    #processos-content .processo-accordion-item .table-row-compact > .col-acoes,
    #pncp-content .processo-accordion-item .table-row-compact > .col-acoes {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 0.75rem;
        padding-top: 1rem;
    }
    /* ✅ FIM DA CORREÇÃO */

    #processos-content .processo-accordion-item .table-row-compact > div::before,
    #pncp-content .processo-accordion-item .table-row-compact > div::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.75rem;
        color: var(--text-secondary-color);
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    #processos-content .table-row-compact .col-acoes::before,
    #pncp-content .table-row-compact .col-acoes::before {
        content: none;
    }

    /* --- 2. Rótulos Específicos para cada Tabela --- */
    /* (O restante do seu código de rótulos permanece o mesmo) */
    #processos-content .table-row-compact > div:nth-child(1) { display: none; }
    #processos-content .table-row-compact > div:nth-child(2)::before { content: 'Nº Processo'; }
    #processos-content .table-row-compact > div:nth-child(3)::before { content: 'Modalidade'; }
    #processos-content .table-row-compact > div:nth-child(4)::before { content: 'Objeto'; }
    #processos-content .table-row-compact > div:nth-child(5)::before { content: 'Agente'; }
    #processos-content .table-row-compact > div:nth-child(6)::before { content: 'Data Publicação'; }
    #processos-content .table-row-compact > div:nth-child(7)::before { content: 'Data / Hora Abertura'; }
    #processos-content .table-row-compact > div:nth-child(8)::before { content: 'Valor Estimado'; }
    
    #pncp-content .table-row-compact > div:nth-child(1) { display: none; }
    #pncp-content .table-row-compact > div:nth-child(2)::before { content: 'Nº Processo'; }
    #pncp-content .table-row-compact > div:nth-child(3)::before { content: 'Modalidade'; }
    #pncp-content .table-row-compact > div:nth-child(4)::before { content: 'Objeto'; }
    #pncp-content .table-row-compact > div:nth-child(5)::before { content: 'Data Publicação'; }
    #pncp-content .table-row-compact > div:nth-child(6)::before { content: 'Fim Receb. Propostas'; }
    #pncp-content .table-row-compact > div:nth-child(7)::before { content: 'Valor Estimado'; }

}

/* ======================================================= */
/* === ESTILOS MOBILE PARA SITUAÇÕES DO PROCESSO (CARDS) === */
/* ======================================================= */

/* Aplica estas regras em telas com largura máxima de 768px */
@media (max-width: 768px) {

    /* 1. Esconde o cabeçalho da tabela de situações. */
    #processo-situacoes-content .table-header-compact {
        display: none;
    }

    /* 2. Remove o fundo e a sombra do contêiner principal. */
    #processo-situacoes-table-container {
        background-color: transparent;
        box-shadow: none;
    }

    /* 3. Transforma cada linha de situação em um card. */
    #processo-situacoes-content .table-row-compact {
        display: block; /* Muda o layout de grid para bloco */
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: var(--bg-light);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* 4. Estiliza cada item de dado dentro do card de situação. */
    #processo-situacoes-content .table-row-compact > div {
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-color-light);
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    #processo-situacoes-content .table-row-compact > div:last-child {
        border-bottom: none;
    }

    /* 5. Adiciona os rótulos (labels) antes de cada dado da situação. */
    #processo-situacoes-content .table-row-compact > div::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.75rem;
        color: var(--text-secondary-color);
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    /* 6. Define os textos dos rótulos para cada coluna. */
    #processo-situacoes-content .table-row-compact > div:nth-child(1)::before { content: 'Situação'; }
    #processo-situacoes-content .table-row-compact > div:nth-child(2)::before { content: 'Data'; }
    #processo-situacoes-content .table-row-compact > div:nth-child(3)::before { content: 'Responsável'; }
    #processo-situacoes-content .table-row-compact > div:nth-child(4)::before { content: 'Fornecedores'; }
    
    /* 7. Ajusta a coluna de ações. */
    #processo-situacoes-content .table-row-compact .col-acoes {
        padding-top: 1rem;
        flex-direction: row;
        justify-content: flex-end;
    }
    
    #processo-situacoes-content .table-row-compact .col-acoes::before {
        content: none;
    }
}

/* ======================================================= */
/* === ESTILOS MOBILE PARA A TELA DE MUNICÍPIOS (CARDS) === */
/* ======================================================= */

/* Aplica estas regras em telas com largura máxima de 768px */
@media (max-width: 768px), (pointer: coarse)  {

    /* 1. Esconde o cabeçalho original da tabela de municípios. */
    #municipios-content .municipios-table-header-compact {
        display: none;
    }

    /* 2. Remove o fundo do contêiner para um visual mais limpo. */
    #municipios-content #municipios-table-container {
        background-color: transparent;
        box-shadow: none;
    }

    /* 3. Transforma cada linha de município em um card individual. */
    #municipios-content .municipios-table-row-compact {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: var(--bg-light);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* 4. Estiliza os campos de dados dentro do card. */
    #municipios-content .municipios-table-row-compact > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-color-light);
    }

    #municipios-content .municipios-table-row-compact > div:last-child {
        border-bottom: none;
    }

    /* 5. Adiciona os rótulos usando pseudo-elementos CSS. */
    #municipios-content .municipios-table-row-compact > div::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.75rem;
        color: var(--text-secondary-color);
        margin-bottom: 4px;
        text-transform: uppercase;
    }
    
    /* 6. Define o texto de cada rótulo e esconde a coluna de ID. */
    #municipios-content .municipios-table-row-compact > div:nth-child(1) { display: none; } /* Esconde o ID */
    #municipios-content .municipios-table-row-compact > div:nth-child(2)::before { content: 'Nome'; }
    #municipios-content .municipios-table-row-compact > div:nth-child(3)::before { content: 'CNPJ'; }
    #municipios-content .municipios-table-row-compact > div:nth-child(4)::before { content: 'UF'; }

    /* 7. Ajusta a coluna de ações para o formato de card. */
    #municipios-content .municipios-table-row-compact .col-municipio-acoes {
        flex-direction: row;
        justify-content: flex-start; /* Alinha à esquerda */
        align-items: center;
        flex-wrap: wrap; /* Permite que os botões quebrem a linha se necessário */
        gap: 1rem;
        padding-top: 1rem;
    }

    #municipios-content .municipios-table-row-compact .col-municipio-acoes::before {
        content: none; /* Remove o rótulo da coluna de ações */
    }
}

/* =================================================== */
/* === ESTILOS MOBILE PARA A TELA DE USUÁRIOS (CARDS) === */
/* =================================================== */

/* Aplica estas regras em telas com largura máxima de 768px */
@media (max-width: 768px) {

    /* 1. Esconde o cabeçalho da tabela de usuários. */
    #usuarios-content .table-header-compact {
        display: none;
    }

    /* 2. Remove o fundo do contêiner da tabela. */
    #usuarios-content #usuarios-table-container {
        background-color: transparent;
        box-shadow: none;
    }

    /* 3. Transforma cada linha de usuário em um card. */
    #usuarios-content .table-row-compact {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: var(--bg-light);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* 4. Estiliza os campos de dados dentro do card de usuário. */
    #usuarios-content .table-row-compact > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-color-light);
    }

    #usuarios-content .table-row-compact > div:last-child {
        border-bottom: none;
    }

    /* 5. Adiciona os rótulos (labels) para cada campo de dado. */
    #usuarios-content .table-row-compact > div::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.75rem;
        color: var(--text-secondary-color);
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    /* 6. Define o texto de cada rótulo na ordem correta. */
    #usuarios-content .table-row-compact > div:nth-child(1)::before { content: 'Nome'; }
    #usuarios-content .table-row-compact > div:nth-child(2)::before { content: 'Email'; }
    #usuarios-content .table-row-compact > div:nth-child(3)::before { content: 'Telefone'; }
    #usuarios-content .table-row-compact > div:nth-child(4)::before { content: 'Tipo'; }
    #usuarios-content .table-row-compact > div:nth-child(5)::before { content: 'Consent. WhatsApp'; }

    /* 7. Ajusta a coluna de ações para o layout de card. */
    #usuarios-content .table-row-compact .col-acoes {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-top: 1rem;
    }

    #usuarios-content .table-row-compact .col-acoes::before {
        content: none; /* Remove o rótulo da coluna de ações */
    }
}

/* ======================================================= */
/* === ESTILOS MOBILE PARA AGENTES E CONTATOS (CARDS) === */
/* ======================================================= */

/* Aplica estas regras em telas com largura máxima de 768px */
@media (max-width: 768px) {

    /* 1. Regras Genéricas para todas as telas de Contatos/Agentes/Órgãos */
    #agentes-content .table-header-compact,
    #orgaos-content .table-header-compact,
    #contatos-gerais-content .table-header-compact,
    #orgao-contatos-content .table-row-compact[style*="grid-template-columns"] { /* Cabeçalho dos contatos do órgão */
        display: none;
    }

    #agentes-content .table-container,
    #orgaos-content .table-container,
    #contatos-gerais-content .table-container,
    #orgao-contatos-content .table-container {
        background-color: transparent;
        box-shadow: none;
    }

    #agentes-content .table-row-compact,
    #orgaos-content .table-row-compact,
    #contatos-gerais-content .table-row-compact,
    #orgao-contatos-content .table-row-compact {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: var(--bg-light);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    #agentes-content .table-row-compact > div,
    #orgaos-content .table-row-compact > div,
    #contatos-gerais-content .table-row-compact > div,
    #orgao-contatos-content .table-row-compact > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-color-light);
    }

    #agentes-content .table-row-compact > div:last-child,
    #orgaos-content .table-row-compact > div:last-child,
    #contatos-gerais-content .table-row-compact > div:last-child,
    #orgao-contatos-content .table-row-compact > div:last-child {
        border-bottom: none;
    }

    /* 2. Adiciona os Rótulos (Labels) */
    #agentes-content .table-row-compact > div::before,
    #orgaos-content .table-row-compact > div::before,
    #contatos-gerais-content .table-row-compact > div::before,
    #orgao-contatos-content .table-row-compact > div::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.75rem;
        color: var(--text-secondary-color);
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    /* 3. Define os textos dos rótulos para cada tela */

    /* AGENTES E CONTATOS GERAIS/ÓRGÃOS (mesma estrutura) */
    #agentes-content .table-row-compact > div:nth-child(1)::before,
    #contatos-gerais-content .table-row-compact > div:nth-child(1)::before,
    #orgao-contatos-content .table-row-compact > div:nth-child(1)::before { content: 'Nome'; }

    #agentes-content .table-row-compact > div:nth-child(2)::before,
    #contatos-gerais-content .table-row-compact > div:nth-child(2)::before,
    #orgao-contatos-content .table-row-compact > div:nth-child(2)::before { content: 'Email'; }

    #agentes-content .table-row-compact > div:nth-child(3)::before,
    #contatos-gerais-content .table-row-compact > div:nth-child(3)::before,
    #orgao-contatos-content .table-row-compact > div:nth-child(3)::before { content: 'Telefone'; }
    
    #agentes-content .table-row-compact > div:nth-child(4)::before,
    #contatos-gerais-content .table-row-compact > div:nth-child(4)::before,
    #orgao-contatos-content .table-row-compact > div:nth-child(4)::before { content: 'Cargo/Função'; }

    #agentes-content .table-row-compact > div:nth-child(5)::before,
    #contatos-gerais-content .table-row-compact > div:nth-child(5)::before,
    #orgao-contatos-content .table-row-compact > div:nth-child(5)::before { content: 'Consent. WhatsApp'; }

     /* ÓRGÃOS */
    #orgaos-content .table-row-compact > div:nth-child(1) { display: none; } /* Esconde ID */
    
    #orgaos-content .table-row-compact > div:nth-child(2) {
        /* Garante que este div do nome tenha espaço suficiente */
        min-height: auto; /* Permite que a altura se ajuste ao conteúdo */
        flex-grow: 1; /* Ocupa espaço flexível */
        /* Remova overflow: hidden se houver aqui, ou garanta que não esteja cortando */
        white-space: normal; /* Permite que o texto quebre a linha */
        word-break: break-word; /* Força quebra de palavras longas */
    }
    #orgaos-content .table-row-compact > div:nth-child(2)::before { content: 'Nome do Órgão'; }

    /* 4. Ajustes finais na coluna de Ações */
    #agentes-content .table-row-compact .col-acoes,
    #orgaos-content .table-row-compact .col-acoes,
    #contatos-gerais-content .table-row-compact .col-acoes,
    #orgao-contatos-content .table-row-compact .col-acoes {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.5rem;
        padding-top: 1rem;
    }

    #agentes-content .table-row-compact .col-acoes::before,
    #orgaos-content .table-row-compact .col-acoes::before,
    #contatos-gerais-content .table-row-compact .col-acoes::before,
    #orgao-contatos-content .table-row-compact .col-acoes::before {
        content: none;
    }
}

/* ======================================================= */
/* === CORREÇÃO  PARA NOME DO ÓRGÃO NO MOBILE === */
/* ======================================================= */

@media (max-width: 768px) {

    /*
     Este seletor mira especificamente na coluna do nome do órgão
     SOMENTE na tela de órgãos e SOMENTE na visualização de cards mobile.
    */
    #orgaos-content .table-row-compact > div:nth-child(2) {
        /* Reseta o 'display' para um comportamento normal de bloco,
           anulando o display '-webkit-box' do desktop. */
        display: flex;

        /* Permite que o conteúdo fique totalmente visível,
           anulando o 'overflow: hidden'. */
        overflow: visible;

        /* Remove qualquer limite de linhas que venha do estilo de desktop. */
        -webkit-line-clamp: unset;
        line-clamp: unset;

        /* Garante que o texto possa quebrar em várias linhas. */
        white-space: normal;
        
        /* Remove qualquer altura máxima que possa estar cortando o texto. */
        max-height: none;
    }
}

/* ================================================================= */
/* === ESTILOS MOBILE PARA SOLICITAÇÕES E FORNECEDORES (CARDS) === */
/* ================================================================= */

/* Aplica estas regras em telas com largura máxima de 768px */
@media (max-width: 768px) {

    /*
    |--------------------------------------------------
    | Estilos para a Tela de Solicitações de Cadastro
    |--------------------------------------------------
    */

    #solicitacoes-content .table-header-compact {
        display: none;
    }

    #solicitacoes-content #solicitacoes-table-container {
        background-color: transparent;
        box-shadow: none;
    }

    #solicitacoes-content .table-row-compact {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: var(--bg-light);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    #solicitacoes-content .table-row-compact > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-color-light);
    }
    
    #solicitacoes-content .table-row-compact > div:last-child {
        border-bottom: none;
        padding-top: 1rem;
    }

    #solicitacoes-content .table-row-compact > div::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.75rem;
        color: var(--text-secondary-color);
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    #solicitacoes-content .table-row-compact > div:nth-child(1)::before { content: 'Nome'; }
    #solicitacoes-content .table-row-compact > div:nth-child(2)::before { content: 'Email'; }
    #solicitacoes-content .table-row-compact > div:nth-child(3)::before { content: 'Telefone'; }
    #solicitacoes-content .table-row-compact > div:nth-child(4)::before { content: 'Município'; }
    #solicitacoes-content .table-row-compact > div:nth-child(5)::before { content: 'CNPJ'; }
    #solicitacoes-content .table-row-compact > div:nth-child(6)::before { content: 'UF'; }
    #solicitacoes-content .table-row-compact > div:nth-child(7)::before { content: 'Data da Solicitação'; }

    #solicitacoes-content .table-row-compact .col-acoes::before {
        content: none;
    }

    /*
    |--------------------------------------------------
    | Estilos para a Tela de Fornecedores
    |--------------------------------------------------
    */

    #fornecedores-content .fornecedores-table-header {
        display: none;
    }

    #fornecedores-content #fornecedores-table-container {
        background-color: transparent;
        box-shadow: none;
    }

    #fornecedores-content .fornecedores-table-row {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: var(--bg-light);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    #fornecedores-content .fornecedores-table-row > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-color-light);
    }
    
    #fornecedores-content .fornecedores-table-row > div:last-child {
        border-bottom: none;
        padding-top: 1rem;
    }

    #fornecedores-content .fornecedores-table-row > div::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.75rem;
        color: var(--text-secondary-color);
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    /* Rótulos para o layout padrão (não-proprietário) */
    #fornecedores-content .fornecedores-table-row.default-layout > div:nth-child(1)::before { content: 'CNPJ'; }
    #fornecedores-content .fornecedores-table-row.default-layout > div:nth-child(2)::before { content: 'Nome Empresarial'; }
    #fornecedores-content .fornecedores-table-row.default-layout > div:nth-child(3)::before { content: 'Telefone'; }
    #fornecedores-content .fornecedores-table-row.default-layout > div:nth-child(4)::before { content: 'E-mail'; }
    #fornecedores-content .fornecedores-table-row.default-layout > div:nth-child(5)::before { content: 'Sócio/Procurador'; }

    /* Rótulos para o layout de proprietário (com a coluna extra de município) */
    #fornecedores-content .fornecedores-table-row.owner-layout > div:nth-child(1)::before { content: 'CNPJ'; }
    #fornecedores-content .fornecedores-table-row.owner-layout > div:nth-child(2)::before { content: 'Nome Empresarial'; }
    #fornecedores-content .fornecedores-table-row.owner-layout > div:nth-child(3)::before { content: 'Telefone'; }
    #fornecedores-content .fornecedores-table-row.owner-layout > div:nth-child(4)::before { content: 'E-mail'; }
    #fornecedores-content .fornecedores-table-row.owner-layout > div:nth-child(5)::before { content: 'Sócio/Procurador'; }
    #fornecedores-content .fornecedores-table-row.owner-layout > div:nth-child(6)::before { content: 'Município'; }
    
    #fornecedores-content .fornecedores-table-row .col-acoes::before {
        content: none;
    }
}

.btn-action img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

/* Ajusta o espaçamento vertical dos botões na tela de login */

#login-frame .google-login-container {
    /* Aumenta o espaço ACIMA do botão de login do Google */
    margin-top: 30px;
}

#login-frame #show-register-button {
    /* Adiciona um espaço ACIMA do link 'Não tem uma conta? Registrar' */
    margin-top: 20px;
}

/* Adiciona um espaço vertical entre os botões na tela de seleção de município */
#logout-from-select-button {
    margin-top: 10px;
}

.btn-menu .menu-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Estilos para o slider de licença com ícones */
.switch .slider[data-icon-on]:after,
.switch .slider[data-icon-off]:after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px; /* Ajuste o tamanho do ícone se necessário */
    color: white; /* Cor dos ícones */
    pointer-events: none; /* Garante que o clique passe para o input */
    line-height: 1; /* Para evitar espaçamento extra */
}

/* Ícone quando o switch está ativo (checked) */
input:checked + .slider[data-icon-on]:after {
    content: attr(data-icon-on); /* Exibe o ícone de 'data-icon-on' */
    left: 8px; /* Posição à esquerda quando ativo */
}

/* Ícone quando o switch está desativado (unchecked) */
input:not(:checked) + .slider[data-icon-off]:after {
    content: attr(data-icon-off); /* Exibe o ícone de 'data-icon-off' */
    right: 8px; /* Posição à direita quando desativado */
    color: #555; /* Cor mais escura quando desativado, para contraste */
}

/* Para garantir que o círculo branco interno não sobreponha o ícone
   Você pode ajustar a largura do círculo ou a posição do ícone.
   Uma solução é garantir que o ícone fique fora do caminho do círculo.
   Vamos ajustar a posição do ícone e o z-index se necessário.
*/
.switch .slider:before {
    z-index: 1; /* Garante que o círculo esteja acima do ícone */
}
input:checked + .slider[data-icon-on]:after {
    left: 8px; /* Mova um pouco para a esquerda */
}
input:not(:checked) + .slider[data-icon-off]:after {
    right: 8px; /* Mova um pouco para a direita */
}

/* Se você quiser que o texto "Licença do Sistema" não apareça no slider,
   mas sim os ícones, certifique-se de que não há nenhuma regra de 'content'
   genérica para .slider que conflite.
*/
/* --- Estilos aprimorados para os itens no Modal de Seleção de Processo --- */
.process-select-item {
    padding: 0.75rem 1rem;              /* Aumenta o espaçamento interno */
    margin-bottom: 0.5rem;             /* Adiciona espaço ENTRE os cards */
    border-radius: 6px;                /* Cantos arredondados */
    border: 1px solid var(--border-color); /* Borda sólida para criar o card */
    background-color: var(--bg-light); /* Fundo branco/claro */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.process-select-item:hover {
    background-color: var(--hover-bg-color);
    border-color: var(--primary-color);     /* Destaca a borda ao passar o mouse */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Adiciona uma leve sombra para dar profundidade */
}

.process-select-item:last-child {
    margin-bottom: 0;
    /* A regra de border-bottom é removida pois o card já tem sua própria borda completa */
    border-bottom: 1px solid var(--border-color); 
}

.process-select-item-numero {
    font-weight: bold;
    color: var(--primary-color);
}

.process-select-item-objeto {
    font-size: 0.9em;
    color: var(--text-secondary-color);
    margin-top: 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2; /* Para compatibilidade com navegadores mais antigos */
    line-clamp: 2;         /* A propriedade padrão e moderna */
}

/* --- Estilos para a Seção de Integrações na Tela de Login --- */

.integrations-container {
    position: absolute; /* Permite o posicionamento livre na tela */
    bottom: 20px;       /* Distância da parte de baixo */
    left: 20px;         /* Distância da esquerda */
    text-align: left;
}

.integrations-container h3 {
    color: var(--text-secondary-color);
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.logos-container {
    display: flex;      /* Alinha as imagens lado a lado */
    align-items: center;/* Centraliza as imagens verticalmente */
    gap: 15px;          /* Espaço entre as logos */
}

.logos-container img {
    height: 50px;      /* Define a altura vertical fixa em 100px */
    width: auto;        /* Ajusta a largura automaticamente para manter a proporção */
}

/* --- Ajustes na Seção de Integrações para Dispositivos Móveis --- */

@media (max-width: 768px), pointer {
    /* 1. Remove o posicionamento absoluto para telas pequenas */
    .integrations-container {
        position: static; /* Coloca a seção de volta no fluxo normal da página */
        text-align: center; /* Centraliza o título "Integrações:" */
        margin-top: 40px;   /* Adiciona um bom espaço acima, abaixo do botão "Registrar" */
    }

    /* 2. Centraliza as logos */
    .logos-container {
        justify-content: center;
    }

    /* 3. Reduz o tamanho das imagens em telas menores */
    .logos-container img {
        height: 50px; /* Reduz a altura para 80px para um melhor ajuste */
    }
}

/* Estilo para seleção e vinculação de orgãos aos processos PNCP. */

.checkbox-item {
    display: block;
    margin-bottom: 8px;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.checkbox-item:hover {
    background-color: var(--hover-bg-color);
}

.checkbox-item label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Estilo de alinhamento específico para os checkboxes
  DENTRO do modal de Adicionar Destinatários do PNCP.
  Não afetará nenhum outro modal.
*/
#pncp-orgaos-modal .checkbox-item {
    display: flex;
    align-items: center;
}

/* Botão para realizar uma nova tentativa de envio manualmente */

.btn-retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--secondary-color);
    border-radius: 50%; /* Deixa o botão redondo */
    background-color: transparent;
    color: var(--secondary-color);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.btn-retry:hover:not(:disabled) {
    background-color: var(--bg-lighter);
    color: var(--text-color);
    border-color: var(--text-color);
    transform: rotate(180deg); /* Efeito de rotação ao passar o mouse */
}

.btn-retry:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Animação do Spinner */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,0,0,0.3);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Este seletor aplica o estilo APENAS aos .checkbox-item que estão DENTRO do #vincular-municipio-modal */
#vincular-municipio-modal .checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Este seletor remove as regras de layout da label APENAS dentro daquele modal */
#vincular-municipio-modal .checkbox-item label {
    display: inline; /* Comportamento padrão de texto */
    gap: 0;
}

/* Ajusta o cabeçalho da tela do PNCP para ter um espaçamento padrão */
#pncp-content .content-header {
    gap: 1.5rem; /* Adiciona um espaço entre os itens (título, modo teste, visão) */
}

/* Aplica a regra de "empurrar" APENAS ao título <h2> que está dentro do cabeçalho da tela do PNCP */
#pncp-content .content-header h2 {
    /* A mágica acontece aqui: o título ocupa todo o espaço livre à sua direita,
       empurrando os outros elementos para o final do contêiner. */
    margin-right: auto;
}

/* --- Estilos Finais para o Acordeão de Municípios --- */

/* Linha do Legislativo que servirá como cabeçalho clicável */
.municipio-row-header {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}
.municipio-row-header:hover {
    background-color: var(--hover-bg-color);
}
.municipio-row-header .col-municipio-nome::before {
    content: '+'; /* Ícone de expandir */
    font-weight: bold;
    margin-right: 10px;
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}
.municipio-row-header.expanded .col-municipio-nome::before {
    content: '−'; /* Ícone de recolher */
    transform: rotate(180deg);
}

/* A "caixa" que contém os municípios filhos e fica escondida */
.municipio-details-panel {
    display: none; /* Escondido por padrão */
    background-color: #f8f9fa;
    padding: 0 10px 10px 10px; /* Espaçamento interno */
}

/* Torna a "caixa" visível quando ela tem a classe 'expanded' */
.municipio-details-panel.expanded {
    display: block;
}

/* Adiciona um destaque visual (borda e indentação) para os filhos dentro da caixa */
.municipio-details-panel .municipios-table-row-compact {
    border-left: 3px solid var(--primary-color);
    margin-left: 20px;
    width: calc(100% - 20px);
}
.municipio-details-panel .col-municipio-nome {
    color: #495057;
    font-weight: normal;
}

/* Estiliza as linhas dos Executivos vinculados (filhos) */
.municipios-table-row-compact.accordion-child {
    display: none !important; /* <-- ADICIONE !important AQUI */
    background-color: #f8f9fa;
    border-left: 3px solid var(--primary-color);
}

/* Estilo para quando a linha filha é exibida */
.municipios-table-row-compact.accordion-child.show {
    display: grid !important; /* <-- ADICIONE !important AQUI TAMBÉM */
}

.municipios-table-row-compact.accordion-child .col-municipio-nome {
    /* Altera a cor do texto para cinza escuro, igual à cor do ID. */
    color: #495057;
    
    /* Remove o negrito leve para diferenciar ainda mais do 'pai'. */
    font-weight: normal;
}

/* --- Estilo para Células Ativáveis na Tabela de Municípios --- */
.activatable-cell {
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

.activatable-cell:hover {
    color: var(--primary-hover); /* Escurece a cor do texto ao passar o mouse */
    text-decoration: underline;
}

/* --- Estilos para o Botão de Imagem (PNCP Toggle) --- */

/* O contêiner principal da imagem (a tag <label>) */
.image-toggle {
    display: inline-block;
    cursor: pointer;
    position: relative;
}

/* Esconde o checkbox real, pois vamos usar a imagem para controlá-lo */
.image-toggle input[type="checkbox"] {
    display: none;
}

/* Estiliza a imagem dentro do botão */
.image-toggle img {
    width: 25px;  /* Ajuste o tamanho conforme necessário */
    height: 25px; /* Ajuste o tamanho conforme necessário */
    transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Animação suave */
}

/* ESTADO DESATIVADO: Aplica o filtro preto e branco quando o checkbox NÃO está marcado */
.image-toggle input:not(:checked) + img {
    filter: grayscale(100%);
    opacity: 0.6; /* Deixa a imagem um pouco mais apagada */
}

/* ESTADO ATIVADO: Remove o filtro (imagem colorida) quando o checkbox ESTÁ marcado */
.image-toggle input:checked + img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Campos inválidos */
input.invalid,
select.invalid {
    border-color: #dc3545 !important; /* Vermelho */
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Campos válidos */
input.valid,
select.valid {
    border-color: #28a745 !important; /* Verde */
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

#pncp-content .content-header {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem a linha em telas muito pequenas */
    align-items: center;
    gap: 1.5rem;
}

#pncp-content .content-header h2 {
    margin-right: auto; /* Empurra o título para a esquerda e os botões para a direita */
    flex-shrink: 0; /* Impede que o título encolha */
}

/* --- Estilos para Botões de Documentos no Acordeão --- */

/* Seletor que mira especificamente nos links de documentos dentro dos painéis de detalhe e modal de exibição pública*/
.processo-details-panel .details-grid a,
.public-details-grid a {
    display: inline-block; /* Permite o layout lado a lado com quebra de linha */
    padding: 6px 12px;     /* Espaçamento interno (vertical e horizontal) */
    margin: 4px 4px 4px 0; /* Margem para separar os botões */
    
    background-color: var(--bg-lighter); /* Fundo cinza claro, padrão de inputs */
    color: var(--text-color);            /* Cor do texto principal (preto) */
    
    border: 1px solid var(--border-color); /* Borda sutil */
    border-radius: 4px;                  /* Bordas suavizadas/arredondadas */
    
    text-decoration: none; /* Remove o sublinhado padrão do link */
    font-size: 0.85rem;    /* Tamanho de fonte um pouco menor */
    font-weight: 500;      /* Fonte um pouco mais forte */
    
    transition: all 0.2s ease-in-out; /* Efeito de transição suave */
}

/* Efeito ao passar o mouse sobre o botão */
.processo-details-panel .details-grid a:hover,
.public-details-grid a:hover {
    background-color: var(--hover-bg-color); /* Fundo levemente mais escuro */
    border-color: var(--primary-color);      /* Borda na cor primária do sistema */
    color: var(--primary-color);             /* Texto na cor primária do sistema */
    cursor: pointer;                         /* Garante que o cursor seja uma mãozinha */
}

.plan-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}
.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}
.plan-card .btn-assinar-plano {
    width: 100%;
}

.plan-card-static {
    /* Impede os efeitos de hover no card do plano Uno */
    cursor: default !important;
}
.plan-card-static:hover {
    transform: none !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05) !important;
}

/* Estilo para botões primários quando desabilitados */
.btn-primary:disabled {
    background-color: #9cb4cc; /* Tom de azul acinzentado e menos saturado */
    cursor: not-allowed;
    opacity: 0.8; /* Um pouco de transparência para reforçar o estado */
}

/* Ajusta o botão de adicionar no card do Plano Uno */
#add-novo-municipio-plano {
    height: auto;         /* Remove a altura fixa para permitir que o botão estique verticalmente */
    aspect-ratio: 1 / 1;  /* Garante que a largura seja sempre igual à altura, mantendo-o quadrado */
    flex-shrink: 0;       /* Impede que o botão seja espremido ou encolha */
}

/* Garante que não haja efeito de hover no botão desabilitado */
.btn-primary:disabled:hover {
    background-color: #9cb4cc;
}

/* Estilo para botões que contêm apenas um ícone */
.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-icon-only:hover {
    background-color: var(--primary-hover);
}

/* Garante que o card seja um contêiner de posicionamento para a imagem */
.report-card {
    position: relative;
    overflow: hidden; /* Garante que a imagem não vaze para fora do card */
}

/* Estilo para a imagem do mapa no canto do card */
.plan-map-icon {
    position: absolute;
    bottom: 15px;
    right: 15px;
    height: 110px;
    width: auto;
    opacity: 0.1;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    /* Define a cor inicial do SVG (cinza escuro) usando filtro */
    filter: invert(20%) sepia(0%) saturate(0%) hue-rotate(240deg) brightness(90%) contrast(90%);
}

.report-card:hover .plan-map-icon {
    /* Aplica a animação 'pulse' que criamos, com duração de 2 segundos, em loop infinito */
    animation: pulse 2s infinite ease-in-out;
    
    /* Este filtro complexo é uma forma de "colorir" uma imagem SVG preta ou cinza
      para a cor azul primária do seu sistema (#3A7EBF).
    */
    filter: invert(48%) sepia(61%) saturate(1028%) hue-rotate(179deg) brightness(95%) contrast(88%);
}

/* Animação de pulso para o mapa */
@keyframes pulse {
    0% {
        transform: scale(1.05);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.05);
        opacity: 0.4;
    }
}

/* Melhora o alinhamento do checkbox com textos de múltiplas linhas no modal de planos */
#municipio-selection-modal .checkbox-item label {
    display: flex;
    align-items: flex-start; /* Alinha no topo */
    gap: 10px;
}

#municipio-selection-modal .checkbox-item input[type="checkbox"] {
    margin-top: 4px; /* Pequeno ajuste vertical */
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 12px;
    text-transform: uppercase;
}
.status-badge.pending {
    background-color: var(--warning-color);
    color: #fff;
}
.status-badge.active {
    background-color: var(--success-color);
    color: #fff;
}

/* Adicione este código no final do seu arquivo style.css */

.filtros-wrapper {
    max-width: 800px; /* Limita a largura para melhor legibilidade em telas grandes */
    margin-right: auto; /* Empurra o conteúdo para a esquerda */
    margin-left: 0;   /* Remove a margem esquerda */
    padding: 1rem;      /* Adiciona um espaçamento interno */
    text-align: left; /* Garante que todo o texto interno comece pela esquerda */
}

/* Em style.css, adicione estas regras no final do arquivo */

/* Garante que o botão 'x' fique centralizado verticalmente na tag */
.tag-item {
    align-items: center;
}

/* Cria um container para o texto dentro da tag */
.tag-text-content {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* Estiliza a linha do CNPJ dentro da tag */
.tag-text-content small {
    font-size: 0.8em;
    opacity: 0.8;
}

/* Estilos para os itens na lista de visualização */
.readonly-item {
    padding: 5px 0;
    line-height: 1.3;
}

.readonly-item-cnpj {
    display: block;
    padding-left: 15px; /* Adiciona uma indentação para o CNPJ */
    opacity: 0.7;
    font-size: 0.9em;
}

/* Classe para esconder a primeira coluna (ID) na tabela de municípios */
.hide-id-column .municipios-table-header-compact,
.hide-id-column .municipios-table-row-compact {
    /* Redefine o grid para não ter a primeira coluna de 60px */
    grid-template-columns: 280px 180px 80px 1fr;
}

.hide-id-column .municipios-table-row-compact .col-municipio-acoes {
    justify-content: start; /* Alinha os botões restantes à esquerda */
}

/* Esconde a primeira célula (div) de cada linha e do cabeçalho */
.hide-id-column .municipios-table-header-compact > div:first-child,
.hide-id-column .municipios-table-row-compact > div:first-child {
    display: none;
}

/* --- Realce Visual para Campos de Cartão de Crédito (Mercado Pago) --- */

/* Estilo para os contentores dos campos seguros do Mercado Pago */
#form-checkout__cardNumber,
#form-checkout__expirationDate,
#form-checkout__securityCode {
    background-color: #f8f9fa; /* Um fundo cinza muito claro para destacar */
    border: 1px solid #ced4da;  /* Uma borda sutil */
    border-radius: 5px;       /* Cantos arredondados, consistentes com outros inputs */
    padding: 5px;             /* Um pequeno espaçamento interno */
}

/* Adiciona uma borda azul (cor primária) quando o utilizador foca num dos campos */
#form-checkout__cardNumber:has(iframe:focus),
#form-checkout__expirationDate:has(iframe:focus),
#form-checkout__securityCode:has(iframe:focus) {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(58, 126, 191, 0.25);
}

/* O contêiner principal que segura os 3 botões. 
   Precisa ser 'relative' para posicionar os filhos. */
/* O contêiner principal que segura os 3 botões. 
   Precisa ser 'relative' para posicionar os filhos. */
.payment-action-container {
    position: relative;
    width: 40px;  /* Largura do botão principal */
    height: 40px; /* Altura do botão principal */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilo base para todos os botões dentro do contêiner */
.payment-action-container button {
    width: 100%;
    height: 100%;
    padding: 8px; /* Espaçamento interno para a imagem */
    border-radius: 50%; /* Botões redondos */
    border: 1px solid var(--border-color);
    background-color: var(--bg-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
}

.payment-action-container button img {
    width: 100%;
    height: auto;
}

/* Botão principal (pagar.svg) */
.pay-main-btn {
    z-index: 2; /* Fica na frente dos botões de opção */
}

/* Botões de opção (PIX e Cartão) - estado inicial (escondido) */
.pay-option-btn {
    position: absolute;
    z-index: 1; /* Fica atrás do botão principal */
    opacity: 0;
    pointer-events: none; /* Não pode ser clicado quando escondido */
    transform: translateY(0); /* Posição inicial, sem deslocamento */
}

/* EFEITO HOVERED: Acontece quando o mouse está sobre o contêiner */
.payment-action-container.hovered .pay-main-btn {
    opacity: 0.2;
    pointer-events: none;
}

.payment-action-container.hovered .pay-option-btn {
    opacity: 1;
    pointer-events: auto;
}

.payment-action-container.hovered .pay-pix-btn {
    transform: translateY(50px);
}

.payment-action-container.hovered .pay-card-btn {
    transform: translateY(100px);
}

/* Efeito de hover nos próprios botões para feedback visual */
.payment-action-container button:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.payment-action-container.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    /* Impede que qualquer evento de mouse (hover, clique) seja acionado */
    pointer-events: none; 
}

/* Faz a animação dos botões secundários ser para a ESQUERDA. */

#payment-action-container-uno.hovered .pay-pix-btn {
    transform: translateX(-50px) translateY(0); /* Move para a esquerda */
}

#payment-action-container-uno.hovered .pay-card-btn {
    transform: translateX(-100px) translateY(0); /* Move mais para a esquerda */
}

.payment-action-container.non-interactive {
    pointer-events: none; /* Faz com que o clique "vaze" para o card abaixo */
    opacity: 0.7;
}

#payment-action-container-modal.hovered .pay-pix-btn {
    transform: translateX(-50px) translateY(0); /* Move para a esquerda */
}

#payment-action-container-modal.hovered .pay-card-btn {
    transform: translateX(-100px) translateY(0); /* Move mais para a esquerda */
}

#payment-action-container-crajubar.hovered .pay-pix-btn,
#payment-action-container-metropolitano.hovered .pay-pix-btn,
#payment-action-container-cariri.hovered .pay-pix-btn {
    transform: translateX(-50px) translateY(0);
}

#payment-action-container-crajubar.hovered .pay-card-btn,
#payment-action-container-metropolitano.hovered .pay-card-btn,
#payment-action-container-cariri.hovered .pay-card-btn {
    transform: translateX(-100px) translateY(0);
}

/* --- Animação de Sucesso PIX --- */
.success-animation-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9); /* Fundo branco semitransparente */
    border-radius: 8px; /* Para corresponder ao modal */
    z-index: 10;
}

.success-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #4CAF50; /* Verde sucesso */
    position: relative;
    animation: grow-circle 0.5s ease-out forwards;
}

.success-checkmark {
    width: 25px;
    height: 50px;
    border: solid white;
    border-width: 0 8px 8px 0;
    transform: rotate(45deg);
    position: absolute;
    top: 10px;
    left: 27px;
    opacity: 0;
    animation: draw-check 0.4s 0.5s ease-out forwards;
}

@keyframes grow-circle {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes draw-check {
    from {
        opacity: 0;
        height: 0;
    }
    to {
        opacity: 1;
        height: 50px;
    }
}

/* --- Animação de Falha (Pagamento Recusado) --- */
.failure-animation-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    z-index: 10;
}

.failure-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #DC3545; /* Cor vermelha de perigo */
    position: relative;
    animation: grow-circle-fail 0.5s ease-out forwards; /* Reutiliza ou cria animação similar */
    display: flex; /* Para centralizar o X */
    justify-content: center;
    align-items: center;
}

.failure-cross {
    width: 40px;
    height: 40px;
    position: relative;
    opacity: 0;
    animation: draw-cross 0.4s 0.5s ease-out forwards;
}

.failure-cross::before,
.failure-cross::after {
    content: '';
    position: absolute;
    left: 18px; /* Ajuste fino para centralizar */
    top: 0;
    width: 4px; /* Espessura da linha do X */
    height: 40px; /* Altura da linha do X */
    background-color: white;
    border-radius: 2px;
}

.failure-cross::before {
    transform: rotate(45deg);
}

.failure-cross::after {
    transform: rotate(-45deg);
}

/* Pode reutilizar a animação grow-circle ou criar uma específica se quiser */
@keyframes grow-circle-fail {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes draw-cross {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

/* Feedback visual para campos MP (DIVs) */
#form-checkout__cardNumber.mp-field-invalid,
#form-checkout__expirationDate.mp-field-invalid,
#form-checkout__securityCode.mp-field-invalid {
    border: 1px solid var(--danger-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}
#form-checkout__cardNumber.mp-field-valid,
#form-checkout__expirationDate.mp-field-valid,
#form-checkout__securityCode.mp-field-valid {
     border: 1px solid var(--success-color) !important;
}
/* Feedback visual para campos normais (INPUTs/SELECTs) */
#form-checkout input.mp-field-invalid,
#form-checkout select.mp-field-invalid {
    border-color: var(--danger-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.spinner {
    width: 20px;            /* Largura do círculo */
    height: 20px;           /* Altura do círculo */
    border-radius: 50%;     /* Garante que seja perfeitamente redondo */
    
    /* A mágica acontece aqui: */
    border: 3px solid rgba(58, 58, 58, 0.589); /* Uma borda cinza claro, quase transparente */
    border-top-color: #ffffff; /* A parte de cima da borda é branca e opaca */
    
    /* Define a animação: 'spin', com duração de 1 segundo, linear e em loop infinito */
    animation: spin 1s linear infinite; 
}

/* A animação 'spin' que faz o círculo girar 360 graus */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* --- CORREÇÃO PARA CAMPOS DE CARTÃO DE CRÉDITO --- */

/* Esta regra garante que qualquer elemento com a classe .form-control, 
  incluindo os <div>s do Mercado Pago, ocupe 100% da largura 
  e tenha uma altura mínima para ser visível.
*/
.form-control {
    width: 100%;
    padding: 10px;
    background-color: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-color);
    box-sizing: border-box; /* Essencial para o layout */
    min-height: 42px;       /* Altura mínima para os campos */
}

/* Um pequeno ajuste para os campos específicos do Mercado Pago, 
   para garantir que o preenchimento interno não cause problemas de layout.
*/
#form-checkout__cardNumber,
#form-checkout__expirationDate,
#form-checkout__securityCode {
    padding: 5px;
}

/* --- Estilo para Ícone no Modal PIX --- */
#pix-modal-icon {
    position: relative; /* Permite posicionamento livre dentro do header */
    top: 10;             /* Alinha ao topo do header */
    left: 10px;          /* Alinha à esquerda do header */
    height: 80px;       /* Altura do ícone */
}

/* Garante que o header do modal PIX seja o contexto de posicionamento */
#pix-payment-modal .modal-content > div:first-child { 
    position: relative; 
    padding-right: 40px; /* Mantém o espaço reservado */
    box-sizing: border-box; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 1rem;
}


.table-row-compact.fornecedor-message-row {
    background-color: #f0f0f0 !important; /* Um cinza um pouco mais escuro que o fundo padrão */
}

/* Opcional: Escurecer também o hover para manter a diferenciação */
.table-row-compact.fornecedor-message-row:hover {
     background-color: #e9e9e9 !important; /* Hover um pouco mais escuro */
}

/* Ajuste se necessário para posicionar o toggle no card */
.report-card .form-group .switch {
    /* Seus estilos de switch */
    margin-bottom: 0; /* Pode remover margem se estiver dentro de um flex container */
}
.report-card .toggle-label {
   /* Seus estilos de label */
   margin-right: 5px;
}

#filtros-card .stat-icon img {
    width: 2.5rem; /* Ajuste conforme o tamanho dos outros ícones */
    height: 2.5rem;
    object-fit: contain; /* Garante que o ícone escale sem distorcer */
    margin-bottom: 0.5rem; /* Adiciona espaço abaixo como nos outros cards */
}

/* Garante alinhamento correto do título ao lado do ícone */
#filtros-card h3 {
     margin: 0;
     border: none;
     padding: 0;
}

.info-assinatura-container {
    background-color: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 15px;
    margin-bottom: 20px;
    font-size: 0.95em;
}
.info-assinatura-container p {
    margin: 5px 0;
    color: var(--text-secondary-color);
}
.info-assinatura-container p strong {
    color: var(--text-color);
}

/* Estilos para o seletor de ano no dashboard */
#dashboard-year-filter {
    /* Fundo */
    background-color: rgba(255, 255, 255, 0.2); /* Fundo branco com 20% de opacidade */
    border: none; /* Remove a borda padrão */
    border-radius: 5px; /* Bordas levemente arredondadas */
    -webkit-appearance: none; /* Remove a seta padrão do navegador (Chrome/Safari) */
    -moz-appearance: none;    /* Remove a seta padrão do navegador (Firefox) */
    appearance: none;         /* Remove a seta padrão do navegador */

    width: auto;              /* Garante que a largura seja automática (tamanho do ano + seta) */
    height: auto;             /* Anula qualquer altura mínima herdada */
    vertical-align: middle;   /* Alinha verticalmente com o texto "no ano de" */

    /* Espaçamento e Alinhamento */
    padding: 8px 12px;        /* Aumenta o padding para mais espaço */
    padding-right: 30px;      /* Espaço extra para a seta customizada */
    margin-left: 5px;        /* Mais margem à esquerda */
    display: inline-block;
    vertical-align: middle;   /* Alinha verticalmente com o texto */

    /* Texto */
    color: white;             /* Cor do texto branca */
    font-size: 1.3em;         /* Amplia a fonte do ano */
    font-weight: bold;        /* Garante negrito */
    cursor: pointer;          /* Indica que é clicável */

    /* Transição suave para interação */
    transition: background-color 0.3s ease;
}

#dashboard-year-filter:hover {
    background-color: rgba(255, 255, 255, 0.3); /* Um pouco mais opaco ao passar o mouse */
}

#dashboard-year-filter:focus {
    outline: none; /* Remove o contorno de foco padrão */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); /* Sombra de foco sutil */
}

/* Estilo para a seta lateral (usa uma máscara para criar uma seta para baixo branca) */
/* Isso funciona criando um SVG de seta como imagem de fundo */
#dashboard-year-filter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center; /* Posição da seta */
    background-size: 16px 16px; /* Tamanho da seta */
}

/* Cor do texto das opções (quando o dropdown está ABERTO) */
/* Isso geralmente é controlado pelo navegador, mas podemos tentar influenciar */
#dashboard-year-filter option {
    background-color: #3182CE; /* Fundo mais escuro para as opções */
    color: white;             /* Texto branco para as opções */
    font-weight: normal;      /* Não negrito nas opções */
}

/* --- Estilos para o Fluxograma/Linha do Tempo de Processos --- */

/* Contêiner que será inserido no grid de detalhes */
.timeline-grid-item {
    /* Ocupa as duas colunas do grid de detalhes */
    grid-column: 1 / -1;
    padding: 1.5rem 0 1rem 0; /* Mais espaço vertical */
    border-top: 1px solid var(--border-color-light);
    margin-top: 1rem;
}

/* O contêiner principal que alinha as setas */
.timeline-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 60px; /* Altura total da linha do tempo */
    overflow: hidden; 
}

/* Estilo de cada "seta" (dia) */
.timeline-arrow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Faz com que todos os dias dividam o espaço horizontal igualmente */
    flex-grow: 1;
    flex-basis: 0;
    
    position: relative;
    padding: 5px;
    padding-right: 15px; /* Espaço para a ponta da seta */
    
    /* Cores padrão (dia futuro) */
    background-color: #f0f2f5; /* Fundo cinza claro */
    color: var(--text-secondary-color);
    border-top: 1px solid #d9dde3;
    border-bottom: 1px solid #d9dde3;
    
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    
    /* A forma da seta usando clip-path */
    clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%);
    
    transition: all 0.3s ease;
}

/* Ajusta a sobreposição das setas */
.timeline-arrow:not(:first-child) {
    margin-left: -15px; /* Sobrepõe a ponta da seta anterior */
}

/* Estilo para dias que já passaram */
.timeline-arrow.past {
    background-color: #d4edda; /* Verde claro */
    color: #155724; /* Verde escuro */
    border-color: #c3e6cb;
    z-index: 1; /* Garante que a ponta da seta fique sobre a próxima */
}

/* Estilo para o DIA ATUAL (destaque) */
.timeline-arrow.current {
    background-color: var(--primary-color) !important; /* Cor primária (azul) */
    color: white !important;
    border-color: var(--primary-hover) !important;
    
    /* Destaque de tamanho */
    transform: scale(1.1);
    
    /* Posição de destaque */
    z-index: 10; /* Fica acima de todas as outras setas */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 1. Força o texto a ser branco APENAS para o dia ATUAL (azul) */
.timeline-arrow.current .timeline-date,
.timeline-arrow.current .timeline-day-of-week,
.timeline-arrow.current .timeline-milestone-label {
    color: white !important; 
}

/* 2. Força o texto dos MARCOS (Impugnação/Fim) a herdar a cor do pai.
      - Se o pai for futuro, herda 'white'.
      - Se o pai for passado (ex: .milestone-impugnacao.past), herda 'dark-purple'.
*/
.timeline-arrow.milestone-impugnacao .timeline-date,
.timeline-arrow.milestone-impugnacao .timeline-day-of-week,
.timeline-arrow.milestone-impugnacao .timeline-milestone-label,
.timeline-arrow.milestone-end .timeline-date,
.timeline-arrow.milestone-end .timeline-day-of-week,
.timeline-arrow.milestone-end .timeline-milestone-label {
    color: inherit; 
}

/* Texto da data dentro da seta */
.timeline-date {
    font-size: 0.9em;
    font-weight: bold;
}
.timeline-day-of-week {
    font-size: 0.8em;
    text-transform: uppercase;
}

/* * ↓↓↓ NOVO MARCO: Estilo para IMPUGNAÇÃO (Roxo) ↓↓↓
*/
.timeline-arrow.milestone-impugnacao {
    background-color: #9b59b6; /* Roxo */
    color: white !important;
    border-color: #8e44ad;
    z-index: 6; /* Acima do 'end' e 'past', mas abaixo do 'current' */
}
.timeline-arrow.milestone-impugnacao.past {
    background-color: #d7bde2 !important; /* Roxo claro */
    color: #5b2c6f !important;  /* Roxo escuro */
    border-color: #c39bd3;
    z-index: 3;
}
.timeline-arrow.milestone-impugnacao.current {
    background-color: #8e44ad; /* Roxo mais escuro */
    z-index: 12; /* Acima de todos */
}

/* Estilo para a seta de FIM DE PROPOSTA (Laranja) */
.timeline-arrow.milestone-end {
    background-color: var(--warning-color); /* Laranja */
    color: #fff !important;
    border-color: #d68910;
    z-index: 5; 
}

/* Caso especial: O DIA ATUAL é também o FIM DAS PROPOSTAS (Vermelho) */
.timeline-arrow.milestone-end.current {
    background-color: var(--danger-color); /* Vermelho */
    border-color: var(--danger-hover);
    transform: scale(1.15); 
    z-index: 11; 
}

/* Caso especial: O FIM DAS PROPOSTAS já passou (Rosa) */
.timeline-arrow.milestone-end.past {
    background-color: #f5b7b1 !important;/* Vermelho claro/rosa */
    color: #b71c1c !important; 
    border-color: #f1948a;
    z-index: 4; 
}

/* Estilo para a seta de PUBLICAÇÃO (Primeira seta) */
.timeline-arrow.milestone-start {
    clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%);
    margin-left: 0; 
}

/* Ajusta a sobreposição da seta seguinte */
.timeline-arrow.milestone-start + .timeline-arrow {
    margin-left: -15px;
}

/* --- Estilo para Feriados e Fins de Semana no Fluxograma --- */

/* * Esta é a classe base para dias não úteis (feriados e fins de semana)
 * que NÃO são o dia atual e NÃO são um marco principal.
*/
.timeline-arrow.non-work-day {
    background-color: #f8f9fa !important; /* Cinza bem claro */
    color: #adb5bd !important; /* Texto cinza claro */
    border-color: #e9ecef;
}

/* * Se um dia não útil já passou, ele fica com um cinza um pouco mais escuro
 * para diferenciar dos futuros.
*/
.timeline-arrow.non-work-day.past {
    background-color: #e9ecef !important; 
    color: #6c757d !important;
    border-color: #dee2e6;
}

/* ================================================================= */
/* === CORREÇÃO ESTÉTICA: Prioridade do Dia Atual (CURRENT) === */
/* ================================================================= */

/* Esta regra garante que, mesmo se o dia atual for um fim de semana
  ou feriado (tendo a classe .non-work-day), o estilo de .current
  (azul e destacado) tenha prioridade sobre o estilo .non-work-day (cinza).
  Fazemos isso aumentando a especificidade da regra.
*/
.timeline-arrow.current.non-work-day {
    /* Re-aplica o estilo de fundo azul do .current */
    background-color: var(--primary-color) !important;
    
    /* Re-aplica o destaque (z-index e sombra) */
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    
    /* Re-aplica a cor da borda */
    border-color: var(--primary-hover) !important;
}

/* Esta regra garante que os marcos especiais (Impugnação, Fim)
  mantenham suas cores .current (roxo escuro, vermelho) mesmo
  se caírem em um fim de semana.
*/
.timeline-arrow.milestone-impugnacao.current.non-work-day {
    background-color: #8e44ad !important; /* Roxo mais escuro */
    z-index: 12;
}

.timeline-arrow.milestone-end.current.non-work-day {
    background-color: var(--danger-color) !important; /* Vermelho */
    border-color: var(--danger-hover) !important;
    z-index: 11;
}

/*
  Esta regra garante que o *texto* (data, dia da semana)
  também fique branco, sobrepondo o `color: #adb5bd !important`
  do .non-work-day.
*/
.timeline-arrow.current.non-work-day .timeline-date,
.timeline-arrow.current.non-work-day .timeline-day-of-week,
.timeline-arrow.current.non-work-day .timeline-milestone-label {
    color: white !important;
}

/* Adiciona a cor azul ao ícone de status 'read' (lido) */
.status-icon-read {
  filter: invert(39%) sepia(97%) saturate(2204%) hue-rotate(189deg) brightness(100%) contrast(104%);
}

/* Em seu arquivo CSS, por exemplo, style.css */
.btn-menu .icon-menu {
    width: 20px;   /* Ajuste conforme o tamanho desejado */
    height: 20px;  /* Ajuste conforme o tamanho desejado */
    vertical-align: middle; /* Alinha o ícone verticalmente com o texto */
    margin-right: 8px; /* Espaçamento entre o ícone e o texto */
}

/* Se você precisar de um espaçamento diferente ou alinhamento para todos os botões com ícones: */
.btn-menu {
    display: flex;       /* Permite alinhar itens internos (ícone e texto) */
    align-items: center; /* Centraliza verticalmente o ícone e o texto */
    gap: 8px;            /* Adiciona um espaçamento entre o ícone e o texto */
}

.btn-menu img { /* Para ter certeza que a imagem segue as regras */
    width: 20px;
    height: 20px;
}

/* --- Texto de Ajuda nos Cards de Plano --- */
.plan-card .click-hint {
    position: absolute;
    bottom: 1.5rem;      /* Alinha com o padding inferior do card */
    left: 1.5rem;        /* Alinha com o padding esquerdo do card */
    font-size: 0.65rem;  /* Texto pequeno */
    font-weight: 700;    /* Negrito para destaque */
    color: var(--primary-color); /* Azul do tema para chamar atenção */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    pointer-events: none; /* Garante que o clique passe através do texto para o card */
    transition: opacity 0.3s ease;
}

/* Efeito ao passar o mouse no card */
.plan-card:hover .click-hint {
    opacity: 1;
}

/* Diminui APENAS a fonte do texto de dica (placeholder) do campo Uno */
#uno-municipio-input::placeholder {
    font-size: 12px; /* Ajuste este valor conforme desejar (ex: 11px, 12px) */
}

/* --- Fluxograma Estilo PNCP (Stepper) --- */
.stepper-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
}

.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

/* A linha conectora (cinza por padrão) */
.stepper-item::before {
  content: "";
  position: absolute;
  top: 15px; /* Metade da altura do círculo (30px) */
  left: 50%;
  width: 100%;
  height: 3px;
  background-color: #e0e0e0;
  z-index: -1; /* Valor menor que o do círculo (10) */
}

.stepper-item:last-child::before {
  content: none; /* O último item não desenha linha para a direita */
}

/* Garante que o primeiro item desenhe a linha */
.stepper-item:first-child::before {
  content: "";
}

/* O Círculo (Bolinha) */
.step-counter {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #ffffff; 
  position: relative;        
  z-index: 20;
  border: 2px solid #e0e0e0;
  color: #6c757d;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 6px;
  transition: all 0.3s ease;
}

/* O Texto da Fase */
.step-name {
  font-size: 12px;
  color: #6c757d;
  text-align: center;
  font-weight: 500;
  max-width: 100px; /* Evita que texto longo quebre o layout */
  line-height: 1.2;
  background-color: transparent; 
  position: relative;
  z-index: 2;
}

/* --- Estados do Stepper --- */

/* Estado: Concluído (Verde) */
.stepper-item.completed .step-counter {
  background-color: #28a745; /* Verde sucesso */
  border-color: #28a745;
  color: white;
}

.stepper-item.completed::before {
  background-color: #28a745; /* Linha verde */
}

 /*
.stepper-item.active {
  z-index: 100; Força este item inteiro a ficar acima dos vizinhos 
}
*/

.stepper-item.completed .step-name {
  color: #28a745;
  font-weight: bold;
}

/* Estado: Ativo/Atual (Azul ou Amarelo) */
.stepper-item.active .step-counter {
  background-color: #007bff; /* Azul primário */
  border-color: #007bff;
  color: white;
  transform: scale(1.2); /* Um pouco maior para destaque */
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.4);
  z-index: 3;
}

.stepper-item.active::before {
  background-color: #e0e0e0; /* A linha que CHEGA no ativo é verde */
}

.stepper-item.active .step-name {
  color: #007bff;
  font-weight: bold;
}

/* Ajuste no container do stepper para caber na tabela */
.stepper-wrapper-table {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    position: relative;
    padding: 0 20px;
    z-index: 0;
}

/* Metadata (Data e Usuário) */
.step-metadata {
    margin-top: 8px;
    font-size: 10px;
    color: #6c757d;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 30px; /* Reserva espaço */
}

.step-date {
    font-weight: 600;
    color: #495057;
}

.step-user {
    font-style: italic;
    font-size: 9px;
}

/* Detalhes do Acordeão (Fundo) */
.demanda-details-panel {
    display: none;
    padding: 15px;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.demanda-details-panel.expanded {
    display: block;
}

/* --- Estilos para Acordeão de Lotes (Itens) --- */

.lote-accordion-group {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    background-color: #fff;
}

.lote-header {
    background-color: #f1f3f5;
    padding: 12px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text-color);
    transition: background-color 0.2s;
    border-left: 4px solid var(--primary-color);
}

.lote-header:hover {
    background-color: #e9ecef;
}

.lote-header .toggle-icon {
    font-size: 1.2em;
    transition: transform 0.3s ease;
}

/* Quando ativo, a seta gira */
.lote-header.active .toggle-icon {
    transform: rotate(180deg);
}

.lote-content {
    display: none; /* Escondido por padrão */
    padding: 0;
    background-color: #fff;
    border-top: 1px solid var(--border-color);
}

.lote-content.show {
    display: block;
}

/* Ajuste para a tabela dentro do acordeão não ter borda dupla */
.lote-content .table-header-compact,
.lote-content .table-row-compact {
    border-left: none;
    border-right: none;
}

/* --- Estilos Específicos para a Tabela de Contratos --- */

/* 1. Definição do Grid (Colunas) */
/* Ajustei a 1ª coluna para 120px para não sobrepor o Fornecedor */
.contratos-layout {
    display: grid;
    grid-template-columns: 120px 1.5fr 2fr 110px 130px 130px 100px 100px;
    gap: 10px;
    align-items: start; /* Alinha o texto no topo quando expandir */
    padding: 12px 8px;
    border-bottom: 1px solid #e9ecef;
    font-size: 13px;
}

/* 2. Cabeçalho */
.contratos-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
    align-items: center; /* Cabeçalho sempre centralizado verticalmente */
}

/* 3. Linha do Contrato (Clicável) */
.contratos-row {
    cursor: pointer;
    background-color: #fff;
    transition: background-color 0.2s ease, max-height 0.3s ease;
}

.contratos-row:hover {
    background-color: #f1f3f5;
}

/* 4. Lógica de Texto (Expandir/Recolher) */
.content-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Exibe até 2 linhas no estado original (mostra mais conteúdo) */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 2.8em; /* Altura para 2 linhas */
}

/* Estado Expandido */
.contratos-row.expanded {
    background-color: #e8f0fe; /* Cor de destaque suave quando aberto */
}

.contratos-row.expanded .content-clamp {
    -webkit-line-clamp: unset; /* Remove o limite de linhas */
    overflow: visible;
    max-height: none;
    white-space: normal;
}

/* 5. Alinhamentos Específicos */
.col-center {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Garante centralização vertical */
}

.col-right {
    text-align: right;
    justify-content: flex-end;
    display: flex;
}

/* Ajuste do Nº do Contrato para evitar quebra feia */
.col-num-contrato {
    font-weight: bold;
    word-break: break-all; /* Força a quebra do número longo */
    white-space: normal;   /* Garante que o texto possa ir para a próxima linha */
    overflow-wrap: break-word;
    font-size: 0.9em;      /* Reduzi levemente a fonte para caber melhor */
    line-height: 1.2;
    padding-right: 5px;    /* Espaço extra de segurança */
    text-align: left;      /* Melhor leitura para números quebrados */
}

/* Mobile */
@media (max-width: 1200px) {
    .contratos-layout {
        /* Em telas menores, permite rolagem horizontal ou ajusta layout */
        grid-template-columns: 100px 150px 200px 90px 100px 100px 80px 80px;
        overflow-x: auto;
    }
}

.contratos-header > div {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 100%;
}

/* --- Ordenação da Tabela de Contratos --- */
.contratos-header > div.sortable {
    cursor: pointer;
    user-select: none; /* Impede seleção de texto ao clicar rápido */
    transition: background-color 0.2s;
    position: relative;
}

.contratos-header > div.sortable:hover {
    background-color: #e2e6ea; /* Destaca levemente ao passar o mouse */
}

.sort-icon {
    margin-left: 5px;
    font-size: 0.8em;
    color: #666;
    display: inline-block;
}

/* Cor da seta quando ativa */
.sort-icon.active {
    color: var(--primary-color);
    font-weight: bold;
}

/* --- Estilos Atualizados para Tabela de Contratos --- */

/* Ajusta o Grid Layout do Header para remover a coluna de ações */
.contratos-layout.contratos-header {
    /* NOVAS MEDIDAS:
       90px (ID) 
       2fr (Fornecedor) 
       3fr (Objeto - Ganha mais espaço)
       120px (Início - Aumentado para caber o título)
       110px (Fim)
       130px (Valor)
       130px (Saldo)
       110px (Status)
    */
    grid-template-columns: 90px 2fr 2.5fr 120px 110px 130px 130px 110px;
    
    /* AUMENTADO: Espaço maior entre colunas para evitar invasão visual */
    gap: 20px; 
    
    /* Alinhamento */
    align-items: center;
    text-align: center; /* Força alinhamento de texto no cabeçalho */
}

.col-objeto-container {
    /* CRUCIAL: Impede que o grid item expanda além do cálculo fr */
    min-width: 0; 
    
    /* Garante que o texto quebre a linha e não invada a direita */
    white-space: normal; 
    word-break: break-word; 
    overflow-wrap: break-word;
    
    /* Margem de segurança interna */
    padding-right: 15px; 
}

/* Nova Barra de Ações (Abaixo do conteúdo) */
.contratos-actions-bar {
    display: flex;
    justify-content: flex-end; /* Alinha à direita */
    align-items: center;
    gap: 10px; /* Espaço entre os botões */
    padding: 8px 15px 12px 15px;
    background-color: #fff; /* Fundo branco para continuidade */
    border-top: none;
}

/* Ajuste visual para os botões na nova barra (opcional, para ficarem mais largos se quiser) */
.contratos-actions-bar .btn-action {
    width: auto; /* Permite largura automática baseada no texto */
    padding: 6px 12px;
    font-size: 13px;
    height: 34px;
}

/* Ajuste para responsividade no Mobile */
@media (max-width: 1200px) {
    /* Ajusta o header */
    .contratos-layout.contratos-header {
        grid-template-columns: 90px 150px 250px 120px 110px 120px 120px 100px;
        overflow-x: auto;
        gap: 10px;
    }
    
    /* Ajusta a barra de ações para quebrar linha se necessário */
    .contratos-actions-bar {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* Garante que o texto do objeto não estoure a célula */
.text-limit-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Garante que o texto respeite a largura do pai */
    max-width: 100%; 
}

/* --- Correção para remover a linha divisória na tabela de contratos --- */

/* Remove a borda inferior da linha de dados (parte de cima), 
   pois agora a barra de ações (parte de baixo) faz o fechamento visual */
#contratos-table-container .table-row-compact {
    border-bottom: none;
}

/* Garante que a barra de ações também não tenha borda superior */
.contratos-actions-bar {
    border-top: none;
    padding-top: 0; /* Ajuste opcional para aproximar os botões do conteúdo */
}

/* Garante que o cabeçalho obedeça à classe de centralização */
.contratos-header .col-center {
    justify-content: center !important;
    text-align: center !important;
    display: flex;
    width: 100%;
}

/* (Opcional) Caso precise reforçar a centralização do conteúdo das linhas também */
.table-row-compact .col-center {
    justify-content: center;
    text-align: center;
}

/* --- Botão de Excel para o Histórico (Atualizado) --- */
.btn-excel-download {
    background-color: transparent; /* Fundo transparente */
    border: none; /* Sem borda */
    padding: 0; /* Sem espaçamento interno */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Necessário para o contexto */
    outline: none;
    transition: transform 0.2s ease; /* Leve efeito de clique */
}

.btn-excel-download:active {
    transform: scale(0.95); /* Efeito de clique */
}

/* Container para os ícones (Excel base + Seta) */
.excel-icon-wrapper {
    position: relative;
    width: 32px; /* Tamanho do ícone do Excel */
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ícone Base (Excel) */
.icon-excel-base {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1)); /* Sombra leve para destacar no fundo branco */
}

/* Ícone Animado (Down - Seta) */
.icon-excel-down {
    position: absolute;
    width: 14px; /* Tamanho da seta */
    height: 14px;
    
    /* Posicionamento: Canto inferior DIREITO */
    bottom: -2px;
    right: -4px;
    z-index: 2; 

    /* Estado Inicial: Invisível e deslocado para cima */
    opacity: 0;
    transform: translateY(-12px);
    
    /* Configuração da animação suave */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease-in;
    /* Filtro para garantir que a seta se destaque sobre o ícone se sobrepor */
    filter: drop-shadow(0 1px 2px rgba(255,255,255,0.8)); 
}

/* --- A Mágica da Animação (Ao passar o mouse no botão) --- */
.btn-excel-download:hover .icon-excel-down {
    opacity: 1; 
    transform: translateY(0); /* Desliza para a posição final */
}

/* --- Botão de Importar Excel (Upload) --- */
.btn-excel-upload {
    background-color: transparent;
    border: none;
    padding: 0 6px 0 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    outline: none;
    transition: transform 0.2s ease;
}

.btn-excel-upload:active {
    transform: scale(0.95);
}

.btn-excel-upload:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Ícone Animado (Up - Seta para Cima) */
.icon-excel-up {
    position: absolute;
    width: 14px;
    height: 14px;
    
    /* Posicionamento: Canto SUPERIOR Direito */
    top: -2px;
    right: -4px;
    z-index: 2; 

    /* Estado Inicial: Invisível e deslocado para BAIXO */
    opacity: 0;
    transform: translateY(12px); 
    
    /* Configuração da animação suave */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease-in;
    
    /* Filtro para destacar */
    filter: drop-shadow(0 1px 2px rgba(255,255,255,0.8)); 
}

/* --- A Mágica da Animação (Ao passar o mouse) --- */
/* A seta sobe para a posição original (0) */
.btn-excel-upload:hover .icon-excel-up {
    opacity: 1; 
    transform: translateY(0); 
}

/* --- Estilos para a Tabela de Itens do Contrato --- */

/* Quantidade Original (Riscada) */
.qty-original-strikethrough {
    font-size: 0.85em;
    color: #999;
    text-decoration: line-through;
    display: block;
    line-height: 1.2;
}

/* Saldo Restante (Destaque) */
.qty-balance-highlight {
    font-weight: bold;
    color: var(--text-color);
    display: block;
}

/* Descrição Clicável */
.clickable-description {
    cursor: pointer;
    transition: color 0.2s;
}
.clickable-description:hover {
    color: var(--primary-color);
}

/* Linha Expandida (Acordeão) */
.table-row-compact.expanded-item-row {
    align-items: flex-start !important; /* Alinha ao topo quando expandir */
    background-color: #f8f9fa; /* Destaque leve no fundo */
}

.table-row-compact.expanded-item-row .clickable-description {
    white-space: normal !important;      /* Permite quebra de linha */
    overflow: visible !important;        /* Mostra todo o texto */
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    max-height: none !important;
}

/* Barra de Pesquisa de Itens (Padronizada) */
.item-search-container {
    margin-bottom: 15px;
    width: 100%; /* Ocupa toda a largura disponível */
    display: block;
}

#item-search-input {
    width: 100%;          /* Força largura total */
    padding: 10px;        /* Padding padrão do sistema */
    border: 1px solid var(--border-color);
    border-radius: 5px;   /* Cantos padrão (igual aos outros campos) */
    background-color: var(--bg-lighter);
    color: var(--text-color);
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#item-search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(58, 126, 191, 0.25); /* Sombra de foco padrão */
}

/* Esconde coluna de ações na tabela de órgãos para Fiscais */
body.role-fiscal #orgaos-content .col-acoes,
body.role-fiscal #orgaos-content .table-header-compact div:last-child {
    display: none !important;
}

/* Ajusta o grid da tabela de órgãos para ocupar o espaço vazio */
body.role-fiscal #orgaos-content .table-row-compact,
body.role-fiscal #orgaos-content .table-header-compact {
    grid-template-columns: 80px 1fr !important; /* Apenas ID e Nome */
}

.table-header-compact,
.contratos-layout.contratos-header,
.municipios-table-header-compact,
.fornecedores-table-header,
.orgaos-table-header,
.lote-content .table-header-compact {
    /* Faz o elemento colar no topo */
    position: sticky;
    top: 0;
    
    /* Garante que fique acima das linhas de dados */
    z-index: 100; 
    
    /* Garante opacidade (para o texto não passar por trás de forma transparente) */
    background-color: #f8f9fa; 
    
    /* Adiciona uma sombra sutil para destacar que está flutuando */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    /* Mantém as bordas arredondadas no topo (já que removemos do container) */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* --- Elementos de Formulário --- */
.form-group {
    width: 100%;
    margin-bottom: 15px;
}

/* ATUALIZADO: Adicionado input[type="number"] na lista */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"], /* <-- ADICIONADO AQUI */
select,
textarea {
    width: 100%;
    padding: 10px;
    background-color: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-color);
    box-sizing: border-box; 
}

/* --- Botão de Importação PNCP (Estilo Excel) --- */

.btn-pncp-import {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    outline: none;
    transition: transform 0.2s ease;
    margin-left: 10px; /* Espaçamento do botão "+" */
}

.btn-pncp-import:active {
    transform: scale(0.95);
}

.btn-pncp-import:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Container para os ícones (PNCP base + Seta) */
.pncp-icon-wrapper {
    position: relative;
    width: 42px; /* Um pouco maior que o Excel para o logo do PNCP ficar visível */
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff; /* Fundo branco para destacar o logo */
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Ícone Base (Logo PNCP) */
.icon-pncp-base {
    width: 80%; /* Ajuste para caber no container */
    height: 80%;
    object-fit: contain;
    z-index: 1;
}

/* Ícone Animado (Down - Seta) */
.icon-pncp-down {
    position: absolute;
    width: 16px;
    height: 16px;
    
    /* Posicionamento: Canto inferior DIREITO */
    bottom: 2px;
    right: 2px;
    z-index: 2; 

    /* Estado Inicial: Invisível e deslocado para cima */
    opacity: 0;
    transform: translateY(-10px);
    
    /* Configuração da animação suave */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease-in;
    /* Filtro para garantir destaque */
    filter: drop-shadow(0 1px 1px rgba(255,255,255,1)); 
}

/* --- A Mágica da Animação (Ao passar o mouse) --- */
.btn-pncp-import:hover .icon-pncp-down {
    opacity: 1; 
    transform: translateY(0); /* Desliza para a posição final */
}

/* Efeito de hover no container */
.btn-pncp-import:hover .pncp-icon-wrapper {
    border-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* --- Abas do Modal de Medição/Ocorrência --- */
.modal-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.modal-title-area {
    flex-grow: 1;
}

.modal-tabs-area {
    display: flex;
    gap: 5px;
}

.modal-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary-color);
    transition: all 0.2s;
}

.modal-tab-btn:hover {
    color: var(--primary-color);
    background-color: var(--hover-bg-color);
    border-radius: 5px 5px 0 0;
}

.modal-tab-btn.active {
    color: var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
}

/* Conteúdo das Abas */
.tab-content {
    display: none; /* Oculto por padrão */
    animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
    display: block; /* Visível se ativo */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Estilo para os blocos de leitura (Dados do Contrato/Fiscal) */
.readonly-section {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    margin-bottom: 15px;
}

.readonly-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    font-size: 0.9em;
}

.readonly-label {
    font-weight: bold;
    color: #6c757d;
    display: block;
    margin-bottom: 2px;
}

.readonly-value {
    color: #212529;
    word-break: break-word;
}

.section-title {
    font-size: 1.1em;
    color: var(--primary-color);
    margin-top: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

/* Estilos para o botão de auditoria e dropdown */
.dropdown-container {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 200;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

/* Estilo para linha com erro na auditoria */
.table-row-compact.divergent-row {
    background-color: #ffe6e6 !important; /* Fundo vermelho claro */
    border: 2px solid #dc3545 !important;
}

/* Destaque para linha com erro de auditoria */
.divergent-row {
    background-color: #ffe6e6 !important; /* Fundo vermelho claro forçado */
    border: 2px solid #ff4444 !important; /* Borda vermelha forte */
    transition: background-color 0.3s;
}

/* Efeito ao passar o mouse na linha com erro */
.divergent-row:hover {
    background-color: #ffcccc !important;
}

/* ============================================================ */
/* === VISUALIZAÇÃO MOBILE: CONTRATOS, ITENS E HISTÓRICO === */
/* ============================================================ */

@media (max-width: 900px) {

    /* --- 1. CONTRATOS: Transformar Linha em Card --- */
    
    /* Esconde o cabeçalho da tabela */
    .contratos-header {
        display: none !important;
    }

    /* Remove o Grid inline e transforma em Bloco Flexível */
    #contratos-table-container .table-row-compact {
        display: flex !important;
        flex-direction: column;
        height: auto !important;
        gap: 8px;
        padding: 15px;
        border-bottom: 1px solid #eee;
        background-color: #fff;
    }

    /* Estilo das células individuais dentro do card */
    #contratos-table-container .table-row-compact > div {
        display: flex;
        justify-content: space-between; /* Separa rótulo do valor */
        align-items: center;
        width: 100%;
        text-align: right; /* Valor à direita */
        padding: 4px 0;
        border-bottom: 1px solid #f9f9f9;
    }
    
    /* Remove borda do último item e itens vazios */
    #contratos-table-container .table-row-compact > div:last-child {
        border-bottom: none;
    }

    /* --- Adiciona Rótulos (Labels) via CSS --- */
    /* Baseado na ordem das colunas do seu Grid atual */
    #contratos-table-container .table-row-compact > div:nth-child(1)::before { content: "Nº Contrato:"; font-weight: bold; color: #666; }
    #contratos-table-container .table-row-compact > div:nth-child(2)::before { content: "Fornecedor:"; font-weight: bold; color: #666; }
    #contratos-table-container .table-row-compact > div:nth-child(3) { display: block; text-align: left; } /* Objeto em bloco */
    #contratos-table-container .table-row-compact > div:nth-child(3)::before { content: "Objeto:"; font-weight: bold; color: #666; display: block; margin-bottom: 2px;}
    #contratos-table-container .table-row-compact > div:nth-child(4)::before { content: "Início Vigência:"; font-weight: bold; color: #666; }
    #contratos-table-container .table-row-compact > div:nth-child(5)::before { content: "Fim Vigência:"; font-weight: bold; color: #666; }
    #contratos-table-container .table-row-compact > div:nth-child(6)::before { content: "Valor Global:"; font-weight: bold; color: #666; }
    #contratos-table-container .table-row-compact > div:nth-child(7)::before { content: "Saldo:"; font-weight: bold; color: #666; }
    #contratos-table-container .table-row-compact > div:nth-child(8)::before { content: "Status:"; font-weight: bold; color: #666; }

    /* Ajuste da Barra de Ações do Contrato */
    .contratos-actions-bar {
        flex-wrap: wrap; /* Permite quebra de linha */
        justify-content: center; /* Centraliza os botões */
        gap: 10px;
        padding: 15px;
        background-color: #f8f9fa;
        border-top: 1px solid #eee;
        border-radius: 0 0 8px 8px;
    }

    .contratos-actions-bar .btn-action {
        flex-grow: 1; /* Botões ocupam espaço disponível */
        max-width: 45%; /* No máximo 2 por linha (aprox) */
        justify-content: center;
        height: 40px; /* Botões mais altos para toque */
    }

    /* --- 2. GESTÃO DE ITENS (Tela Principal) --- */

    /* Esconde cabeçalho dos itens dentro do acordeão */
    .lote-content .table-header-compact {
        display: none !important;
    }

    /* Transforma a linha do item em Card */
    .lote-content .table-row-compact {
        display: flex !important;
        flex-direction: column;
        padding: 15px;
        border: 1px solid #eee;
        margin-bottom: 10px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }

    /* Itens internos do card */
    .lote-content .table-row-compact > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 5px 0;
        border-bottom: 1px solid #f5f5f5;
    }

    /* Ajuste específico para a descrição do item */
    .lote-content .table-row-compact .col-objeto {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    /* Rótulos para Itens (Assumindo layout com Marca) */
    .lote-content .table-row-compact > div:nth-child(1)::before { content: "Item:"; font-weight: bold; color: #666; }
    /* Child 2 é a descrição, já tratada */
    .lote-content .table-row-compact > div:nth-child(3)::before { content: "Unid.:"; font-weight: bold; color: #666; }
    .lote-content .table-row-compact > div:nth-child(4)::before { content: "Marca:"; font-weight: bold; color: #666; }
    /* Ajuste os índices abaixo se não houver marca */
    .lote-content .table-row-compact > div:nth-last-child(4)::before { content: "Qtd Total:"; font-weight: bold; color: #666; }
    .lote-content .table-row-compact > div:nth-last-child(3)::before { content: "Valor Unit.:"; font-weight: bold; color: #666; }
    .lote-content .table-row-compact > div:nth-last-child(2)::before { content: "Valor Total:"; font-weight: bold; color: #666; }
    
    .lote-content .table-row-compact .col-acoes {
        justify-content: flex-end;
        border-bottom: none;
        padding-top: 10px;
    }


    /* --- 3. HISTÓRICO (MODAL) - TABELAS RESPONSIVAS --- */
    
    /* Classe que adicionaremos no JS para tabelas dentro do modal */
    .mobile-responsive-table {
        border: 0;
    }

    .mobile-responsive-table thead {
        display: none;
    }

    .mobile-responsive-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #fff;
    }

    .mobile-responsive-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding: 10px;
        text-align: right;
        font-size: 0.9em;
    }

    .mobile-responsive-table td:last-child {
        border-bottom: 0;
    }

    /* Adiciona rótulos via atributo data-label que colocaremos no JS */
    .mobile-responsive-table td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #555;
        text-transform: uppercase;
        font-size: 0.85em;
        text-align: left;
        margin-right: 15px;
    }
}

/* Estilo para data vencida (Feedback Visual) */
.checklist-row input[type="date"].cnd-expired {
    border: 2px solid #dc3545 !important; /* Borda Vermelha */
    background-color: #fff5f5 !important; /* Fundo avermelhado claro */
    font-weight: 600;
}

/* Tooltip nativo simples para o campo */
.checklist-row input[type="date"].cnd-expired:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Estilos para o Checklist no Histórico */
.historico-checklist-container {
    margin-top: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fafafa;
    padding: 10px;
    font-size: 0.9em;
}

.checklist-section-title {
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
    margin-top: 10px;
}
.checklist-section-title:first-child { margin-top: 0; }

.cnd-grid-history {
    display: grid;
    grid-template-columns: 1fr 60px 100px;
    gap: 5px;
    margin-bottom: 5px;
}
.cnd-item-row {
    border-bottom: 1px solid #eee;
    padding: 4px 0;
}
.cnd-valid-ok { color: #28a745; font-weight: bold; }
.cnd-valid-err { color: #dc3545; font-weight: bold; }

.qa-pair {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    border-bottom: 1px dotted #e0e0e0;
    padding-bottom: 2px;
}
.qa-question { color: #555; }
.qa-answer { font-weight: 600; }

/* --- Estilos para Abas de Perigo (Extinção) --- */

/* 1. Quando passar o mouse (Hover), fica vermelho */
.modal-tab-btn.tab-danger:hover {
    color: var(--danger-color);
}

/* 2. Quando estiver SELECIONADO (Active), força texto e borda vermelhos */
.modal-tab-btn.tab-danger.active {
    color: var(--danger-color) !important;
    border-bottom: 3px solid var(--danger-color) !important;
}

/* Badge simples para o dashboard do fiscal */
.badge {
    padding: 3px 8px;
    border-radius: 12px;
    color: white;
    font-weight: bold;
}
.bg-success { background-color: var(--success-color); }
.bg-danger { background-color: var(--danger-color); }
.bg-warning { background-color: var(--warning-color); }
.text-dark { color: #333 !important; }

@media (min-width: 1200px), (pointer: fine) {

    /* ==========================================================================
       1. REGRA GERAL PARA CARDS (GRID)
       Isso garante que o card sempre ocupe 100% da altura da célula do grid.
       ========================================================================== */
    .dashboard-card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* ==========================================================================
       2. PADRONIZAÇÃO DA LINHA 1 (TOPO) - Altura 190px
       Aplica-se a: 
       - Todos os cards de Estatística (.stat-card)
       - Todos os cards de Ação (.action-card)
       - Cards de Lista do Admin/Convidado (ex: Próximos Processos)
       ========================================================================== */
    
    /* Stats e Ações sempre têm 190px */
    .dashboard-grid .stat-card,
    .dashboard-grid .action-card {
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        margin-bottom: 0 !important;
    }

    /* Listas da Linha 1 do Admin/Convidado */
    .dashboard-grid:not(.layout-fiscal) .list-card:not(#entidades-card):not(#timeline-card) {
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
        justify-content: flex-start;
        overflow-y: auto;
    }

    /* ==========================================================================
       3. PADRONIZAÇÃO DA LINHA 2 (BAIXO) - ADMIN / CONVIDADO
       Ajuste específico para os gráficos de Status e Modalidade
       ========================================================================== */
    
    /* ✅ MUDANÇA: Alvos específicos pelos IDs para garantir 3 colunas e altura menor */
    #chart-card-container, 
    #modality-chart-card-container {
        grid-column: span 3 !important; /* Ocupa 3 colunas (mais largo) */
        height: 350px !important;       /* Altura reduzida (de 350px para 280px) */
        min-height: 350px !important;
        max-height: 350px !important;
    }

    /* ==========================================================================
       4. OUTROS GRÁFICOS E LISTAS (Fiscal e Fornecedor)
       ========================================================================== */
    
    /* Gráficos genéricos (ex: Fiscal) mantêm 350px se não forem os IDs acima */
    .dashboard-card.chart-card:not(#chart-card-container):not(#modality-chart-card-container) {
        height: 350px !important;
        min-height: 350px !important;
        max-height: 350px !important;
    }

    /* Listas da Linha 2 (Fornecedor e Fiscal) */
    #entidades-card,                /* Fornecedor */
    #timeline-card,                 /* Fornecedor */
    .dashboard-grid.layout-fiscal .list-card  /* Listas do Fiscal */
    {
        height: 350px !important;
        min-height: 350px !important;
        max-height: 350px !important;
        overflow-y: auto !important;
        justify-content: flex-start;
    }

    /* Pequeno ajuste visual para o botão de ação */
    .action-button {
        padding: 10px 12px;
    }

    /* 1. Define o grid com EXATAMENTE 5 colunas para fornecedores */
    .dashboard-grid.layout-fornecedor {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    /* 2. Faz o card de "Linha do Tempo" ocupar 2 colunas */
    .dashboard-grid.layout-fornecedor #timeline-card {
        grid-column: span 2 !important;
    }

    /* 3. Faz o card de "Gráfico de Modalidades" ocupar 2 colunas 
       (Sobrescrevendo a regra padrão de 3 colunas do Admin) */
    .dashboard-grid.layout-fornecedor #modality-chart-card-container {
        grid-column: span 2 !important;
    }
    
    /* Opcional: Garante que os cards da primeira linha ocupem apenas 1 coluna cada */
    .dashboard-grid.layout-fornecedor .stat-card,
    .dashboard-grid.layout-fornecedor .action-card,
    .dashboard-grid.layout-fornecedor #filtros-card,
    .dashboard-grid.layout-fornecedor #assinaturas-card,
    .dashboard-grid.layout-fornecedor #entidades-card {
        grid-column: span 1 !important;
    }
}

/* --- Correção para impedir que a foto do Google aumente a barra --- */
.user-avatar { 
    border-radius: 50%;
    height: 35px;       /* Altura fixa (um pouco menor que a logo de 40px) */
    width: 35px;        /* Largura fixa para manter a proporção */
    object-fit: cover;  /* Garante que a foto não fique distorcida */
    display: block;     /* Garante comportamento de bloco */
}

/* ========================================================= */
/* === PERSONALIZAÇÃO DA BARRA DE SCROLL (ESTILO MOBILE) === */
/* ========================================================= */

/* 1. Define a largura/altura da barra */
::-webkit-scrollbar {
    width: 8px;  /* Largura fina vertical */
    height: 8px; /* Altura fina horizontal */
    background-color: transparent; /* Ocupa espaço, mas é transparente */
}

/* 2. O "Trilho" (Fundo por onde a barra corre) */
::-webkit-scrollbar-track {
    background-color: transparent; /* Totalmente invisível */
    margin: 4px; /* Um pequeno respiro nas pontas */
}

/* 3. A "Barra" (Thumb) - Estado Padrão (Oculto/Muito Discreto) */
::-webkit-scrollbar-thumb {
    background-color: transparent; /* Invisível quando o mouse não está na área */
    border-radius: 10px; /* Bordas bem redondas */
    border: 2px solid transparent; /* Truque para "afastar" a barra da borda */
    background-clip: content-box; /* Faz a cor respeitar a borda transparente */
    transition: background-color 0.5s ease; /* Tenta suavizar (funciona em alguns contextos) */
}

/* 4. Quando o mouse passa SOBRE O ELEMENTO que tem scroll (Body, Tabela, Div) */
/* Isso faz a barra aparecer cinza clara */
*:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2); /* Cinza claro translúcido */
}

/* 5. Quando o mouse passa SOBRE A PRÓPRIA BARRA ou CLICA nela */
/* Isso faz a barra ficar mais escura para indicar interatividade */
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5); /* Cinza mais escuro */
}

/* --- Compatibilidade com Firefox (Padrão Moderno) --- */
/* O Firefox usa uma sintaxe diferente e mais limitada */
* {
    scrollbar-width: thin; /* Barra fina */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Cor da barra / Cor do fundo */
}

/* Adicione no style.css se ainda não tiver */
.icon-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: inline-flex; /* Garante alinhamento */
    align-items: center;
    justify_content: center;
}

.icon-btn:hover {
    background-color: transparent !important; /* Remove o fundo quadrado */
    box-shadow: none !important; /* Remove qualquer sombra do container quadrado se houver */
    transform: scale(1.1); /* Mantém o efeito de ampliar */
}

/* Adicione o efeito de sombra diretamente na imagem ao passar o mouse */
.icon-btn:hover img {
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3)); /* Sombra suave no círculo da imagem */
    transition: filter 0.2s ease;
}

.icon-btn:active {
    transform: scale(0.95);
}

/* --- Novo Botão de Contratos PNCP (Atualizado) --- */

/* Ajusta o label para comportar a pilha de ícones */
.image-toggle.contract-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* Container para empilhar as imagens */
.icon-stack {
    position: relative;
    width: 30px;  /* Tamanho reduzido para igualar ao botão PNCP padrão */
    height: 30px; /* Tamanho reduzido */
    transition: transform 0.2s, filter 0.3s;
    display: inline-block; /* Garante que respeite largura/altura */
}

.icon-stack:hover {
    transform: scale(1.1);
}

/* Imagem Principal (PNCP) */
.icon-stack .main-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Imagem de Status (Pequena no canto ESQUERDO) */
.icon-stack .status-overlay {
    position: absolute;
    bottom: -2px;
    left: -2px; /* Mudado de right para left */
    width: 14px; /* Levemente ajustado para o novo tamanho do pai */
    height: 14px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    padding: 1px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    z-index: 10; /* Garante que fique acima da imagem principal */
}

/* LÓGICA DE CORES (Preto e Branco vs Colorido) */

/* Quando o checkbox (que está escondido) NÃO está marcado */
.image-toggle input:not(:checked) + .icon-stack {
    filter: grayscale(100%);
    opacity: 0.6;
}

/* Quando o checkbox ESTÁ marcado */
.image-toggle input:checked + .icon-stack {
    filter: grayscale(0%);
    opacity: 1;
}


/* 1. Remove estilos padrão do botão PDF TELA ITENS */
.btn-icon-clean {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

/* 2. Configuração da Setinha (down.svg) */
.btn-icon-clean .status-overlay {
    /* Posicionamento no canto direito inferior */
    left: auto !important;
    right: -2px !important;
    bottom: -2px !important;
    
    /* ESTADO INICIAL: Invisível e deslocada para cima */
    opacity: 0; 
    transform: translateY(-10px); /* Começa 10px acima da posição final */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animação com um leve 'salto' suave */
}

/* 3. A MÁGICA: Quando passar o mouse no botão */
.btn-icon-clean:hover .status-overlay {
    opacity: 1;               /* Torna visível */
    transform: translateY(0); /* Desliza para a posição original (efeito de cima para baixo) */
}

/* 4. Garante que o ícone principal (PDF) ainda dê um leve zoom */
.btn-icon-clean:hover .icon-stack {
    transform: scale(1.1);
}

/* --- ESTILOS DO MODAL DE RELATÓRIO ITENS DO CONTRATO --- */

/* 1. Botão Fechar Absoluto (Canto Superior Direito) */
.btn-close-absolute {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 10;
}
.btn-close-absolute:hover {
    color: var(--danger-color);
}

/* 2. Cards de Seleção (Radio) */
.report-options-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
    text-align: left;
}

.report-option-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

.report-option-card:hover {
    background-color: var(--hover-bg-color);
    border-color: var(--primary-color);
}

/* Estilo quando o input dentro do label está checado (opcional, requer seletor :has ou JS, 
   mas o hover acima já ajuda. Se quiser destaque: */
.report-option-card:has(input:checked) {
    border-color: var(--primary-color);
    background-color: #f0f7ff;
}

.report-option-card input[type="radio"] {
    accent-color: var(--primary-color);
    transform: scale(1.2);
}

.option-text strong {
    display: block;
    color: var(--text-color);
}
.option-text span {
    font-size: 0.85em;
    color: #666;
}

/* 3. Barra de Execução Visual */
.visual-bar-wrapper {
    margin-top: 25px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px dashed #ddd;
}

.bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75em;
    color: #999;
    margin-bottom: 5px;
}

.progress-track {
    width: 100%;
    height: 12px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color) 0%, #4facfe 100%);
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s;
}

/* Estado da barra quando for 'Remanescente' (definiremos via JS classe ou style) */
.progress-fill.reduced {
    background: linear-gradient(90deg, var(--warning-color) 0%, #f0ad4e 100%);
}

/* Adicione ao style.css */

.animated-value-display {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-family: 'Segoe UI', Tahoma, sans-serif; /* Fonte monospaced ou tabular ficaria melhor para animação, mas Segoe é padrão */
    transition: color 0.3s;
}

/* Quando estiver no modo 'remanescente', muda a cor do texto também */
.animated-value-display.reduced-mode {
    color: var(--warning-color); /* Ou a cor laranja que você usou */
}

/* --- AJUSTE FINO DO MODAL DE RELATÓRIO --- */

#relatorio-saldo-modal {
    /* Define a largura EXATA da caixa branca */
    width: 380px; 
    
    /* Garante que não estoure em telas de celulares muito pequenos */
    max-width: 90vw; 
    
    /* Remove bordas e paddings padrões do navegador */
    padding: 0;
    border: none;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* Sombra elegante */
}

/* O conteúdo interno terá um respiro para não colar na borda */
#relatorio-saldo-modal .modal-content {
    width: 100%;
    box-sizing: border-box; /* Importante para o padding não aumentar a largura */
    padding: 25px 20px;    /* Espaçamento interno: 25px vertical, 20px horizontal */
    text-align: center;
    position: relative;
}