/* static/css/style.css - Versão Final: Botão Pílula + Site Vivo + Cookies + Suporte Home */

/* --- VARIÁVEIS DE CORES --- */
:root {
    --bg-body: #f8f9fa;
    --bg-container: #ffffff;
    --text-primary: #2c3e50;
    --text-secondary: #34495e;
    --border-color: #e9ecef;
    --card-shadow: rgba(0,0,0,0.05);
    --primary-color: #007bff;
    --primary-hover: #0056b3;
    --accent-color: #2c3e50;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --input-bg: #f8f9fa;
    --btn-pill-bg: #6c757d; /* Cor cinza do botão carregar mais */
    
    /* Variáveis Adicionais para a Home */
    --gold-portal: #FFD700;
    --blue-portal: #002366;
    --btn-read-bg: #f0f4f8;
}

[data-theme="dark"] {
    --bg-body: #121212;
    --bg-container: #1e1e1e;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b3b8;
    --border-color: #2d2d2d;
    --card-shadow: rgba(0,0,0,0.5);
    --primary-color: #4dabf7;
    --input-bg: #2d2d2d;
    --btn-pill-bg: #495057;
    --btn-read-bg: #2c2c2c; /* Fundo do botão ler artigo no dark */
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    margin: 0; 
    padding: 15px; 
    background-color: var(--bg-body); 
    color: var(--text-primary);
    scroll-behavior: smooth; 
}

.container { max-width: 900px; margin: 0 auto; padding-bottom: 50px; }

/* --- HEADER & CONTROLES --- */
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

h1 { 
    text-align: left; 
    color: var(--text-primary); 
    margin: 0; 
    font-weight: 800; 
    font-size: 1.8rem;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 40px; 
}

.btn-fav-header {
    background-color: var(--bg-container);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    color: #ff4757; 
    margin: 0;
}
.btn-fav-header:hover { transform: scale(1.05); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

/* --- SWITCH TEMA --- */
.theme-switch-wrapper { display: flex; align-items: center; }

.theme-switch {
    display: inline-block;
    height: 30px;
    position: relative;
    width: 55px;
}
.theme-switch input { display: none; }

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

.slider:before {
    background-color: #fff;
    bottom: 3px; content: ""; height: 24px; left: 3px; position: absolute;
    transition: .4s; width: 24px; border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider { background-color: #2c3e50; }
input:checked + .slider:before { transform: translateX(25px); }
.sun-icon, .moon-icon { display: none !important; }

/* --- FORMULÁRIO --- */
form { 
    background: var(--bg-container); 
    padding: 25px; 
    border-radius: 15px; 
    box-shadow: 0 10px 25px var(--card-shadow); 
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

.form-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; 
}

label { 
    font-weight: 700; 
    color: var(--text-secondary); 
    margin-bottom: 5px; 
    display: block; 
    font-size: 0.85em; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

input[type="text"], input[type="tel"], input[type="email"] { 
    padding: 10px; 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    width: 100%; 
    box-sizing: border-box; 
    font-size: 15px; 
    background: var(--input-bg); 
    color: var(--text-primary);
    transition: border 0.3s;
}
input:focus { border-color: var(--primary-color); outline: none; }

/* --- FILTROS --- */
.btn-grid, .uf-grid { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    align-items: center;
}

.filter-btn {
    background-color: var(--bg-container); 
    border: 1px solid var(--border-color); 
    border-radius: 8px;
    padding: 8px 16px; 
    cursor: pointer; 
    font-size: 0.95em; 
    font-weight: 600; 
    color: var(--text-secondary);
    transition: all 0.2s; 
    user-select: none;
}

.uf-btn {
    width: 50px;      
    height: 35px;     
    border-radius: 50px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9em;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--bg-container);
    color: var(--text-secondary);
    transition: all 0.2s;
    user-select: none;
}

.filter-btn:hover, .uf-btn:hover { 
    background-color: var(--border-color); 
    transform: translateY(-1px); 
}

.filter-btn.active, .uf-btn.active { 
    background-color: var(--primary-color); 
    color: #ffffff; 
    border-color: var(--primary-color); 
    box-shadow: 0 4px 10px rgba(0,123,255,0.3);
}

.region-btn[data-value="Nacional"].active {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.help-text { 
    font-size: 0.8em; 
    color: var(--text-secondary); 
    margin-top: 5px; 
    font-style: italic; 
    opacity: 0.8;
}

.section-divider { 
    border-top: 1px solid var(--border-color); 
    margin: 5px 0; 
    opacity: 0.5; 
}

/* --- BOTÕES DE AÇÃO --- */
.search-grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 10px; 
    margin-top: 10px;
}

#btn-buscar { 
    background-color: var(--accent-color); 
    color: #fff; 
    border: none; 
    cursor: pointer; 
    font-weight: bold; 
    height: 45px; 
    font-size: 1.1rem; 
    border-radius: 8px; 
    width: 100%; 
    transition: background 0.3s;
}
#btn-buscar:hover { background-color: #1a252f; }

.btn-clear {
    background-color: var(--border-color);
    color: var(--text-secondary);
    border: 1px solid #ced4da;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700; 
    font-size: 0.75rem; 
    height: 45px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.btn-clear:hover { background-color: #d6d8db; color: var(--danger-color); }

.share-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 5px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}
.share-btn {
    background: none; border: none; cursor: pointer;
    color: var(--primary-color); font-weight: 600; font-size: 0.9em;
    display: flex; align-items: center; gap: 6px; transition: opacity 0.2s;
}
.share-btn:hover { opacity: 0.7; }

/* --- BOTÃO CARREGAR MAIS (ESTILO PÍLULA) --- */
#btn-load-more {
    display: none; /* Controlado pelo JS */
    margin: 30px auto; /* Centraliza horizontalmente */
    background-color: var(--btn-pill-bg);
    color: white;
    border: none;
    padding: 12px 35px;
    border-radius: 50px; /* Formato Pílula */
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    width: fit-content;
}

#btn-load-more:hover {
    background-color: var(--text-secondary);
    transform: translateY(-2px);
}

/* --- CARDS CONCURSO --- */
.concurso-card { 
    background: var(--bg-container); 
    margin-bottom: 15px; 
    padding: 20px; 
    border-left: 5px solid var(--primary-color); 
    border-radius: 8px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
}

.concurso-card h3 { 
    margin: 0 0 15px 0; 
    font-size: 1.1rem; 
    line-height: 1.4; 
    color: var(--text-primary);
    font-weight: 700;
}

.card-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px; 
}

.badge { 
    padding: 6px 12px; 
    border-radius: 6px; 
    font-size: 0.8rem; 
    font-weight: 700; 
    display: inline-flex; 
    align-items: center; 
    gap: 5px;
    white-space: nowrap;
}
.badge.money { background-color: #d1e7dd; color: #0f5132; }
.badge.uf     { background-color: #cfe2ff; color: #084298; }
.badge.date   { background-color: #fff3cd; color: #664d03; }

.card-actions {
    display: flex;
    gap: 8px;
}

.btn-card {
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.2s;
    color: white;
}
.btn-card:hover { opacity: 0.85; }

.btn-gray { background-color: #495057; } 
.btn-red  { background-color: #dc3545; } 
.btn-blue { background-color: #0d6efd; } 

.btn-report { 
    background: none; border: none; color: #ef5350; 
    font-size: 0.8em; cursor: pointer; text-decoration: underline; 
    margin-top: 8px; opacity: 0.7; 
}

/* --- SUPORTE ESPECIAL PARA COMPONENTES DA HOME (MODO ESCURO) --- */

.news-card, .sidebar-updates {
    background-color: var(--bg-container) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Forçar títulos e textos na Home a seguirem o tema */
[data-theme="dark"] .text-dark, 
[data-theme="dark"] .news-card h5,
[data-theme="dark"] .sidebar-updates h5 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .news-card p,
[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

/* Botão Ler Artigo - Dinâmico */
.btn-read-more {
    background-color: var(--btn-read-bg) !important;
    color: var(--blue-portal) !important;
}

[data-theme="dark"] .btn-read-more {
    color: var(--gold-portal) !important;
}

/* --- RESTANTE DO CSS ORIGINAL (Newsletter, Footer, PWA, etc) --- */

.newsletter-box {
    margin-top: 25px;
    background: linear-gradient(135deg, #2c3e50, #4ca1af);
    border-radius: 12px; padding: 15px; display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; color: white; gap: 10px;
}
.news-text h3 { margin: 0; color: white; font-size: 1.1rem; }
.news-form { display: flex; gap: 5px; flex: 1; min-width: 250px; }
.news-form input { padding: 8px; }
.news-form button { background-color: #f39c12; color: white; border: none; padding: 8px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; }

.legal-footer { margin-top: 30px; text-align: center; font-size: 0.75em; color: var(--text-secondary); border-top: 1px solid var(--border-color); padding-top: 15px; }
.legal-footer a { color: var(--text-secondary); text-decoration: none; margin: 0 5px; }

@media (max-width: 600px) {
    .form-cols { grid-template-columns: 1fr; }
    .search-grid { grid-template-columns: 1fr; }
    .header-row { flex-direction: row; }
    .card-actions { width: 100%; margin-top: 10px; }
    .card-actions button, .card-actions a { flex: 1; }
    .cookie-content { flex-direction: column; text-align: center; }
}

#btn-back-to-top {
    display: none; position: fixed; bottom: 30px; right: 30px; z-index: 2000;
    border: none; outline: none; background-color: var(--primary-color);
    color: white; cursor: pointer; padding: 15px; border-radius: 50%;
    font-size: 18px; box
}