@import url("/analytics-blocos.css");
/* #101 SEO do cliente — complementa analytics-blocos.css e o DS (web/ds/ds.css).
   Cor só no semáforo (Badge) e no accent do DS; nada de paleta nova. */
.seo h2 small, .seo .sub { opacity: .75; font-weight: 400; font-size: 13px; }
.seo .num { text-align: right; font-variant-numeric: tabular-nums; }
.seo-abas, .seo-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.seo-abas button, .seo-chips button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; }
.seo-chips button { min-height: 36px; font-size: 13px; }
.seo-abas button.ativa, .seo-chips button.ativa { border-color: var(--ds-accent); background: color-mix(in srgb, var(--ds-accent) 18%, transparent); font-weight: 600; }
.seo button:focus-visible, .seo a:focus-visible, .seo input:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.seo-kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin: 12px 0 20px; }
.seo-esqueleto .ds-kpi { min-height: 96px; }
.seo-fontes ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 4px 0 8px; }
.seo-fontes li { display: flex; flex-direction: column; gap: 2px; max-width: 360px; }
.seo-nota { font-size: 12px; opacity: .75; line-height: 1.4; }
.seo-sussurro { display: block; font-size: 11px; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.seo-quebra { white-space: normal; max-width: 460px; }
.seo-bloco { margin: 20px 0; min-width: 0; }
.seo-bloco h2 { margin: 0 0 8px; }
.seo-sobe { color: var(--ink-ok); }
.seo-desce { color: var(--ink-err); }
.seo-vazio { text-align: center; padding: 32px; }
.seo-erro button { margin-left: 10px; }
.seo-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 8px 0; }
.seo-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; opacity: .9; flex: 1 1 220px; }
.seo-form input { min-height: 44px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; }
.seo button, .seo-mini { min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; font: inherit; }
.seo-form button, .seo-primario { min-height: 44px; }
.seo .seo-primario { border-color: var(--ds-accent); background: var(--ds-accent); color: var(--on-accent); font-weight: 600; }
.seo-mini { display: inline-flex; align-items: center; font-size: 13px; text-decoration: none; white-space: nowrap; }
.seo button:disabled { opacity: .5; cursor: default; }
.seo-exec-topo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.seo-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.seo-grita { font-size: 24px; }
.seo-fases { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 12px 0 16px; }
.seo-fase { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.seo-barra { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.seo-barra span { display: block; height: 100%; background: var(--ds-accent); }
.seo-rel-tab { max-width: 560px; margin: 12px 0; }
@media (max-width: 1100px) { .seo-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .seo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-abas, .seo-chips { flex-wrap: nowrap; overflow-x: auto; }
  .seo-sussurro { max-width: 220px; }
}
@media print {
  .seo-abas, .seo-acoes, .ds-periodo, nav.sidebar { display: none !important; }
}