/* ========================================
   Elliot — complementos ao padrão ORD
======================================== */
.brand-square { height: 38px !important; width: 38px !important; max-width: none !important; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); }

.panel-intro { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.panel-intro-text { font-size: 13px; color: var(--text-muted); }
.pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pill-wpp { background: linear-gradient(90deg, #128C4A, #22C55E); }
.pill-brand { background: linear-gradient(90deg, #7C3AED, #C026D3); }
.pill-rec { background: linear-gradient(90deg, #B45309, #F59E0B); }

/* Alternância Seguidores / Reconhecimento */
.brand-switch { display: inline-flex; gap: 4px; padding: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; margin-bottom: 24px; box-shadow: var(--shadow-sm); }
.brand-switch-btn { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-muted); background: transparent; border: 0; border-radius: 999px; padding: 8px 20px; cursor: pointer; transition: background .2s, color .2s; }
.brand-switch-btn:hover { color: var(--text-strong); }
.brand-switch-btn.is-active { background: var(--raiz-green-700); color: #fff; }
:root[data-theme="dark"] .brand-switch-btn.is-active { background: var(--raiz-green-500); color: #06140C; }
.brand-switch-btn:focus-visible { outline: 2px solid var(--raiz-green-500); outline-offset: 2px; }

.pnl .kpi-grid-5 { grid-template-columns: repeat(5, 1fr); }
.pnl .kpi-grid-stack { margin-top: 12px; }
.pnl .kpi-value .kpi-sm { font-size: .65em; color: var(--text-muted); font-weight: 500; margin-left: 2px; }
.pnl .kpi[data-tip] .kpi-label { cursor: help; }
.pnl .kpi-label .tip-dot { display: inline-block; width: 13px; height: 13px; line-height: 13px; text-align: center; border-radius: 50%; border: 1px solid var(--text-light); font-size: 9px; margin-left: 4px; color: var(--text-light); }
.pnl .delta-neutral { color: var(--text-muted); }

/* Leitura do período */
.insights-list { padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.insight { font-size: 13.5px; line-height: 1.55; color: var(--text); padding: 10px 14px; border-radius: var(--radius-sm); background: var(--card-hover); border-left: 3px solid var(--text-light); }
.insight strong { color: var(--text-strong); font-family: var(--font-mono); font-weight: 600; }
.insight-good { border-left-color: var(--raiz-green-500); }
.insight-warn { border-left-color: var(--amber); }

/* Miniatura com sigla de fallback */
.thumb-wrap { position: relative; display: block; width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: linear-gradient(135deg, var(--raiz-green-800), var(--raiz-green-700)); overflow: hidden; }
.thumb-wrap::before { content: attr(data-ini); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); }
.thumb-wrap img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.pnl .data-table tbody td.td-sub { font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); font-weight: 400; display: block; padding: 0; border: 0; text-align: left; }
.pnl .data-table td .cell-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.pnl .data-table td .cell-sub { display: block; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }

.pnl #mCampaigns { table-layout: auto; }
.pnl #mCampaigns td.td-name { max-width: 260px; }

.footer { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .pnl .kpi-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .pnl .kpi-grid-5 { grid-template-columns: 1fr 1fr; }
  .brand-switch { display: flex; }
  .brand-switch-btn { flex: 1; }
}