/* Relatórios (barras) + estado "aguardando integração" — Fases 3/4/5 */

.rel-bars { display: flex; flex-direction: column; gap: 10px; }
.rel-bar { display: grid; grid-template-columns: 160px 1fr 40px; align-items: center; gap: 12px; }
.rel-bar__label { font-size: 12.6px; font-weight: 600; color: var(--slate-700); }
.rel-bar__track { height: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.rel-bar__fill { height: 100%; background: linear-gradient(90deg, var(--blue-600), var(--blue-700)); border-radius: 999px; }
.rel-bar__val { font-size: 12.6px; font-weight: 700; color: var(--slate-900); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .rel-bar { grid-template-columns: 100px 1fr 32px; } }

.gate-box { display: flex; gap: 16px; align-items: flex-start; background: var(--bg-input); border: 1px dashed var(--slate-300); border-radius: 16px; padding: 20px 22px; }
.gate-box__icon { font-size: 22px; flex: none; }
.gate-box__body h3 { margin: 0 0 6px; font-size: 15px; }
.gate-box__body p { margin: 0 0 12px; font-size: 12.8px; color: var(--slate-500); max-width: 52ch; }

/* ---------------- Marketing — seletor de período ---------------- */
.mkt-daterange { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.mkt-daterange label { font-size: 12.6px; font-weight: 700; color: var(--slate-600); display: flex; align-items: center; gap: 6px; }
.mkt-daterange input[type="date"] { font: inherit; font-size: 12.6px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; background: var(--bg-input); }

/* ---------------- Marketing — grid de posts com prévia ---------------- */
.mkt-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mkt-post { display: block; background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.mkt-post:hover { border-color: var(--blue-600); }
.mkt-post__thumb { width: 100%; aspect-ratio: 1; background: var(--bg-input) center/cover no-repeat; display: flex; align-items: center; justify-content: center; }
.mkt-post__thumb span { font-size: 11px; color: var(--slate-400); }
.mkt-post__body { padding: 10px 12px 12px; }
.mkt-post__type { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--blue-700); background: var(--blue-50); padding: 2px 7px; border-radius: 6px; margin-bottom: 6px; }
.mkt-post__caption { font-size: 12px; color: var(--slate-600); line-height: 1.45; margin: 0 0 8px; min-height: 34px; }
.mkt-post__stats { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; font-weight: 600; color: var(--slate-500); }

/* ---------------- Marketing — stories ---------------- */
.mkt-stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.mkt-story { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.mkt-story__thumb { width: 100%; aspect-ratio: 9/16; background: var(--bg-input) center/cover no-repeat; }
.mkt-story__stats { display: flex; flex-direction: column; gap: 2px; padding: 8px 9px; font-size: 10.5px; font-weight: 600; color: var(--slate-500); }

/* ---------------- IA — versões geradas ---------------- */
.ia-versions { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.ia-version { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg-input); }
.ia-version__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ia-version__head b { font-size: 13px; }
.ia-version__text { white-space: pre-wrap; font-family: var(--font); font-size: 12.8px; color: var(--slate-700); line-height: 1.6; margin: 0; }
.ia-version__error { font-size: 12.6px; color: var(--danger); margin: 0; }