: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: hidden;
    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 {
    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 {
    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;
}