/* ── Sub-tabs Atendimento: Modelo B Pill Group (Vercel/Stripe) ──
   Margin-top: 24px = padding interno que st.tabs nativo aplica entre seu
   container (Y=40 do stMainBlockContainer) e a barra de tabs visual (Y=64).
   Mensurado via Playwright 2026-05-19: tab-list Dir/Cfg Y=64, .arh-atd-pill
   sem margin estava em Y=40 → 24px desalinhado. Add 24px iguala visualmente.
   [[feedback_streamlit_vertical_spacing]] §Causa 3 + matriz canônica. */
.arh-atd-pill-wrap {
  display: flex;
  justify-content: center;
  margin: 24px 0 0 0;  /* respiro de topo do sub-menu (Y=64 cross-tela; IGUAL à Geral). */
}

/* ──────────────────────────────────────────────────────────────────────
   SPACING VERTICAL CANÔNICO — stElementContainer:has() pattern.
   ──────────────────────────────────────────────────────────────────────
   Por que aqui e não no .arh-atd-* direto?
   stVerticalBlock pai do Atendimento tem `gap:0`. Margens internas
   (.arh-atd-page-meta margin-top:16) NÃO contribuem para spacing real
   porque stElementContainer encapsula e não propaga margin do filho.
   Solução: aplicar margin-top NO stElementContainer via :has(.classe).
   Valores canônicos: gap 16px (= gap nativo do tab-panel Dir/Cfg, mensurado).
   [[feedback_streamlit_vertical_spacing]] §Causa 1+2 (wrappers + gap pai).
   ────────────────────────────────────────────────────────────────────── */
/* TOKENS CANÔNICOS DO PROTÓTIPO b-lista-agrupada-final.html (2026-05-20 fix):
   - .page-header margin-bottom: 16px (linha 219)
   - .seg-row margin-bottom: 12px (linha 242)
   - .ua-section height (banner→KPI): 32px = --space-8 (linha 351)
   - .kpi-bar margin-bottom: 16px (linha 580)
   - .grupo-section margin-bottom: 6px (linha 596)
   Substitui gaps EVIDENTES de 2026-05-19 que não rastreavam pro protótipo.
   [[feedback_impl_fiel_extrair_do_prototipo]] aplicado. */
[data-testid="stElementContainer"]:has(.arh-atd-page-meta) {
  /* Fila: gap sub-menu→page-meta = 8px (= Geral). margin-top 24px rende 8px porque
     há um stElementContainer vazio intermediário + o pill-group ocupa ~16px do gap. */
  margin-top: 24px !important;
}
[data-testid="stElementContainer"]:has(.arh-gv-gseg) {
  /* Grupos: o card AMS/N2 (.arh-gv-gseg) NÃO tem o container-vazio intermediário da
     Fila, então o margin-top rende CHEIO (24px→24px, grande demais). 8px iguala o
     gap visual da Geral/Fila. Referência do Matias 13/06: copiar a Geral (8px). */
  margin-top: 8px !important;
}
[data-testid="stElementContainer"]:has(.arh-atd-filter-row) {
  margin-top: 24px !important;  /* SDM → filter — print Matias 20/05: 16 era apertado, ajustado para 24 + page-meta padding-bottom 4 */
}
[data-testid="stElementContainer"]:has(.ua-sticky) {
  margin-top: 24px !important;  /* filter → banner — Matias R3 2026-05-20: "ainda grudados" → 12px insuficiente, aumentado para 24 */
}
[data-testid="stElementContainer"]:has(.kpi-bar) {
  margin-top: 24px;  /* banner → KPI = 8px efetivo (Matias 14/06: igualar sub-menu→1a info; transbordo ~16 do banner) */
}
[data-testid="stElementContainer"]:has(.grupo-section) {
  margin-top: 8px;  /* KPI → grupos = 8px (Matias 14/06: igualar sub-menu→1a info) */
}
.arh-atd-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
}
[data-theme="light"] .arh-atd-pill-group {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.arh-atd-pill {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, color 120ms;
  font-family: var(--font-sans);
  border: none;
  background: transparent;
}
.arh-atd-pill:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}
[data-theme="light"] .arh-atd-pill:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}
.arh-atd-pill.active {
  background: var(--accent-brand);
  color: #fff;
  font-weight: 600;
}
.arh-atd-pill:focus-visible {
  outline: 2px solid var(--accent-brand-text);
  outline-offset: 2px;
}

/* ── Header da Fila (Fila equipe STF + SDM chip) — fiel protótipo linha 776 ──
   Margens internas REMOVIDAS — não funcionam (stElementContainer não propaga
   margin do filho). Spacing real vem do bloco stElementContainer:has() acima.
   [[feedback_streamlit_vertical_spacing]] §Causa 2 (gap pai flexbox). */
.arh-atd-page-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  /* Matias R5 2026-05-20: "altura inferior igual à superior — simetria".
     padding-top = padding-bottom = 0, min-height: 16 com align-items:center
     centraliza o texto verticalmente → simétrico acima/abaixo. */
  min-height: 16px;
  padding-top: 0;
  padding-bottom: 0;
}
.arh-atd-sdm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.arh-atd-sdm-chip strong {
  color: var(--text-secondary);
}

/* ── Filter row: Frente (esquerda) + Status (extrema direita) ──
   margin-bottom removido — spacing externo vem do stElementContainer:has(.ua-sticky)
   acima. Margens internas em flex não propagam. */
.arh-atd-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.arh-atd-status-group {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
@media (max-width: 720px) {
  /* Em telas estreitas, status vai pra linha de baixo (mantém margin-left auto irrelevante) */
  .arh-atd-status-group {
    margin-left: 0;
  }
}

/* ── Status filter — pills HTML LEGADO (vazio, mantido p/ não quebrar refs) ── */
.status-filter-row {
  /* INTENCIONALMENTE VAZIO — pills STF/SAEB/Resolvidos migraram pro segmented
     unificado dentro de .arh-atd-filter-row .arh-atd-status-group. */
}

/* ── Centralização 900px — fix Playwright 2026-05-19 ──────────────────────
   Contexto: st.markdown('<div>') + st.markdown('</div>') NÃO criam wrapper
   real em Streamlit — cada chamada gera um stElementContainer isolado e o
   Streamlit fecha o <div> automaticamente, resultando em div vazio.
   Comprovado via Playwright: mdContainerHTML = "<div class=...></div>" vazio.

   Solução correta: CSS :has() no stElementContainer que contém o marcador
   .arh-atd-main-content + combinador ~ para todos os irmãos seguintes.
   Referência: streamlit-native-reference.md §5.2 (padrão canônico kicker).

   Aplica a: segmented (seg-row) + status filter + banner + KPI + grupos + rodapé.
   Sub-tabs Pill Group ficam FORA (têm centralização própria via arh-atd-pill-wrap).
*/
/* R-D29 2026-05-24 (Matias): centralização migrada para arquivo único
   `pages/_internal/styles/_centralization.py`. O marker .arh-atd-main-content
   continua emitido por monitoramento_visual.render() — apenas o CSS saiu daqui. */

/* Classe removida — legado do approach HTML wrapper */
.arh-atd-content-wrap {
  /* INTENCIONALMENTE VAZIO — st.markdown div wrapper não funciona em Streamlit.
     Mantido para não quebrar qualquer referência externa. */
}

/* Fix R5 2026-05-20 Matias print: bug visual sub-tabs duplicadas (st.button
   reais flash antes do _JS_HIDE_BUTTONS rodar). CSS via key elimina o flash —
   sem esperar JS. Cada st.button(key='X') cria .st-key-X no stElementContainer. */
.st-key-atd_subtab_fila,
.st-key-atd_subtab_grupos,
.st-key-atd_subtab_gerenciar,
.st-key-seg_ams,
.st-key-seg_n2,
.st-key-sf_stf,
.st-key-sf_saeb,
.st-key-sf_res,
.st-key-gv_nav_gerenciar_hidden,
.st-key-gv_nav_grupos_hidden,
.st-key-gv_mg_btn_novo_master,
.st-key-gv_mg_btn_novo {
  display: none !important;
}