/* ============================================================
   TrackAndWarn / PREVIACOM — Design System compartilhado
   Fonte única de tokens e componentes. Não duplicar em templates.
   ============================================================ */
:root {
    --primary: #0A1F44;
    --primary-grad: #15263F;
    --accent: #15C1B8;
    --alert: #F25F5C;
    --alert-grad: #c0392b;
    --warn: #F0A202;
    --success: var(--accent);
    --tw-bg: #F5F7FA;
    --bg: var(--tw-bg);
    --text-main: #1B2433;
    --text-secondary: #8A93A5;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
    --shadow-md: 0 6px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.18);
}

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text-main);
}
h1, h2, h3, h4, h5, h6, .font-display { font-family: var(--font-display); }

.tw-section-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--primary);
}

/* ---- Cards ---- */
.tw-card, .card-custom {
    border: none;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}
.tw-card:hover, .card-custom:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tw-stat-card, .stats-card {
    border: none;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s;
}
.tw-stat-card:hover, .stats-card:hover { transform: translateY(-3px); }
.tw-stat-card .stat-value { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; }
.tw-stat-card .stat-label { color: var(--text-secondary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* Ícone circular dos stat-cards (usado em dashboard, notificações, redes sociais, ...) */
.stat-icon-circle {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.stat-icon-primary { background: rgba(10, 31, 68, 0.10); color: var(--primary); }
.stat-icon-accent  { background: rgba(21, 193, 184, 0.14); color: var(--accent); }
.stat-icon-warn    { background: rgba(240, 162, 2, 0.15); color: var(--warn); }
.stat-icon-alert   { background: rgba(242, 95, 92, 0.14); color: var(--alert); }

/* ---- Tabelas ---- */
.tw-table { --bs-table-hover-bg: rgba(10, 31, 68, 0.03); }
.tw-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    border-bottom-width: 1px;
    font-weight: 600;
}

/* ---- Badges / estados ---- */
.tw-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.75rem; padding: 3px 10px; border-radius: 12px; font-weight: 600;
}
.tw-badge-success { background: rgba(21, 193, 184, 0.14); color: #0d7d77; }
.tw-badge-warn    { background: rgba(240, 162, 2, 0.15);  color: #9a6a00; }
.tw-badge-danger  { background: rgba(242, 95, 92, 0.14);  color: #c22f2c; }
.tw-badge-neutral { background: rgba(138, 147, 165, 0.16); color: var(--text-secondary); }
.tw-badge-primary { background: rgba(10, 31, 68, 0.10);   color: var(--primary); }

/* Semáforo (tokenizado — substitui #dc3545/#ffc107/#28a745) */
.semaforo-indicator {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: 20px; font-weight: 600; font-size: 0.9rem;
}
.semaforo-critico { background-color: var(--alert); color: #fff; }
.semaforo-atencao { background-color: var(--warn); color: #fff; }
.semaforo-normal  { background-color: var(--accent); color: #fff; }
.semaforo-icon { font-size: 1.2rem; line-height: 1; }

/* Prioridade de alerta/menção */
.alert-card { border-left: 4px solid; margin-bottom: 0.75rem; }
.alert-high   { border-left-color: var(--alert); }
.alert-medium { border-left-color: var(--warn); }
.alert-low    { border-left-color: var(--accent); }
.badge-priority-1 { background-color: var(--accent); }
.badge-priority-2 { background-color: var(--warn); }
.badge-priority-3 { background-color: var(--alert); }
.feed-status-active   { color: var(--accent); }
.feed-status-inactive { color: var(--text-secondary); }

/* Badges de fonte (substituem #007bff/#17a2b8/#fd7e14) */
.badge-source { font-size: 0.75rem; padding: 3px 8px; border-radius: 12px; font-weight: 500; }
.badge-source-rss    { background-color: var(--primary); color: #fff; }
.badge-source-web    { background-color: var(--accent); color: #fff; }
.badge-source-social { background-color: var(--warn); color: #fff; }

/* Abas de fonte */
.source-tabs .nav-link {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-weight: 500; padding: 10px 20px; margin-right: 4px;
    color: var(--text-secondary);
}
.source-tabs .nav-link.active { background-color: var(--primary); color: #fff; border-color: var(--primary); }
.source-tabs .nav-link:hover:not(.active) { background-color: rgba(10, 31, 68, 0.05); }

/* Header de card com a cor primária (substitui gradiente azul Bootstrap) */
.card-header-custom {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-grad) 100%);
    color: #fff;
}

/* ---- Botões / chips ---- */
.btn-custom { border-radius: 25px; }
.tw-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 20px; padding: 4px 12px; font-size: 0.85rem; font-weight: 500;
    background: rgba(10, 31, 68, 0.07); color: var(--primary);
}
.btn-icon {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background-color: transparent; color: var(--primary); border: none;
}
.btn-icon:active { background-color: rgba(10, 31, 68, 0.05); }

/* ---- Estado vazio / loading ---- */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-secondary); }
.empty-state .empty-icon { font-size: 2.75rem; opacity: 0.45; display: block; margin-bottom: 0.75rem; }
.empty-state .empty-title { font-weight: 600; color: var(--text-main); margin-bottom: 0.25rem; }
.btn-spinner {
    display: inline-block; width: 1rem; height: 1rem;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: tw-spin 0.6s linear infinite;
    vertical-align: -0.15em; margin-right: 0.4rem;
}
@keyframes tw-spin { to { transform: rotate(360deg); } }

/* ---- Widgets analíticos (heatmap geo + nuvem de tópicos, partials/analytics_widgets.html) ---- */
.tw-wordcloud { display: flex; flex-wrap: wrap; gap: .4rem .65rem; align-items: center; line-height: 1.4; }
.tw-wordcloud .tw-word { font-family: var(--font-display); font-weight: 600; cursor: default; transition: opacity .2s; }
.tw-wordcloud .tw-word:hover { opacity: .65; }
.tw-map { height: 300px; border-radius: 12px; overflow: hidden; }
.leaflet-container { font-family: var(--font-body); }

/* ---- Modais ---- */
.modal-content { border: none; border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-header.modal-header-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-grad) 100%); color: #fff;
}
.modal-header.modal-header-danger {
    background: linear-gradient(135deg, var(--alert) 0%, var(--alert-grad) 100%); color: #fff;
}
.modal-header.modal-header-primary .btn-close,
.modal-header.modal-header-danger .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }