/*
 * direcionamento.css — CSS canônico extraído de _direcionamento_hibernacao.py (R-2 refundação)
 *
 * Fonte: apps/analytics-rh/pages/_internal/styles/_direcionamento_hibernacao.py (320 LOC)
 * Extração: byte-identical — removido apenas wrapper Python (docstring + CSS = """...""")
 * Story: 2.8 — Direcionamento Hibernação
 * Owner: design-multicamadas (Forge) + analytics-rh
 * Proto canônico: prototipos/2026-05-06-direcionamento-redesign/dora-hibernacao.html linhas 304-468
 * Validado: V-01 Matias 2026-05-06 (conceito único, IMUTÁVEL)
 *
 * Namespace: .dir-*
 * Hex hardcoded: 1 ocorrência (#fff em .dir-btn-ligar color — foreground sobre accent-brand)
 * Ressalvas aceitas (Aria + rh-manager):
 *   R2: st.tabs não aceita HTML na label → ícone moon inline omitido nas sub-abas Correções/Saúde
 *   R3: botão Ligar Dora dentro do HTML card via <button disabled> — disabled nativo, sem JS
 */

/* ================================================================
   CONTAINER DE PÁGINA — Centralização 900px via Opção B do anti-pattern
   wrapper st.markdown (KB feedback_streamlit_markdown_wrapper_anti_pattern
   + matriz pre-flight feedback_pre_flight_estrutural_streamlit).

   Histórico:
   - V1 (2026-05-18 Nyx): wrapper div via st.markdown('<div>')+'</div>'.
     FALHOU — Streamlit auto-fecha cada fragmento, wrapper fica VAZIO.
   - V2 (2026-05-19 manhã): Opção A (span marker + `:has() ~`).
     FALHOU — combinador `~` não atravessa o `stTabs > stTabPanel`,
     conteúdo das tabs Visão/Correções/Saúde manteve largura nativa.
   - V3 (2026-05-19 tarde): Opção B = `st.container(key="arh_dir_main")`
     em Python (direcionamento_visual.py) + seletor `.st-key-arh_dir_main`
     aqui. CSS atinge stVerticalBlock REAL que envolve o stTabs — tabs
     e seu conteúdo herdam max-width:900px naturalmente.

   Requer Streamlit ≥1.36 (`st.container(key=...)`). Projeto roda 1.55. OK.

   Classes legadas (.arh-dir-page-content, .arh-dir-main-content) mantidas
   vazias para não quebrar referências históricas.
   ================================================================ */
/* R-D29 2026-05-24 (Matias): centralização migrada para arquivo único
   `pages/_internal/styles/_centralization.py`. A key arh_dir_main continua
   sendo emitida via st.container(key='arh_dir_main') — apenas o CSS saiu daqui. */

/* Classes legadas — INTENCIONALMENTE VAZIAS (V1+V2 não funcionaram) */
.arh-dir-page-content {
  /* V1 legado — wrapper st.markdown não funciona em Streamlit. */
}
.arh-dir-main-content {
  /* V2 legado — combinador `~` não atravessa stTabs. */
}

/* ================================================================
   DIRECIONAMENTO HIBERNAÇÃO — namespace .dir-*
   Story 2.8 · protótipo dora-hibernacao.html linhas 304-468
   ================================================================ */

/* ----------------------------------------------------------------
   CARD DE HIBERNAÇÃO — ESTADO PRINCIPAL (Visão Geral)
   .dir-hibernation-wrap > .dir-hibernation-card
   ---------------------------------------------------------------- */
.dir-hibernation-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 0 0;
  min-height: 380px;
  margin-bottom: 32px;
}

.dir-hibernation-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 48px 40px 40px;
  text-align: center;
  max-width: 480px;
  width: 100%;
}

/* Ícone central — círculo surface-sunken 80×80px */
.dir-hibernation-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.dir-ph-icon-wrap {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunken);
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  font-size: 38px;
  line-height: 1;
}

.dir-ph-icon-wrap i {
  font-size: 38px;
  color: var(--text-muted);
}

/* Título "Dora em modo hibernação" — especificidade dupla via seletor
   de atributo + classe para vencer os estilos de bloco Streamlit.
   Usamos <div> em vez de <h2> para evitar heading resets. */
[data-testid="stMarkdownContainer"] .dir-hibernation-card .dir-hibernation-title,
.dir-hibernation-card .dir-hibernation-title {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px 0;
  line-height: 1.3;
}

/* Descrição explicativa */
.dir-hibernation-desc {
  font-size: 0.88em;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------------------------
   BOTÃO "LIGAR DORA" — dentro do card HTML (.dir-hibernation-card)
   <button disabled aria-disabled="true" class="dir-btn-ligar">
   Sem handler JS. disabled nativo bloqueia interação.
   a11y equivalente a st.button(disabled=True).
   ---------------------------------------------------------------- */
.dir-btn-ligar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: var(--radius-base);
  border: none;
  background: var(--accent-brand);
  color: #fff;
  font-size: 0.88em;
  font-weight: 600;
  cursor: not-allowed;
  opacity: 0.38;
  transition: opacity 150ms;
  /* Reset browser defaults */
  font-family: inherit;
  line-height: 1;
}

.dir-btn-ligar:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Hint abaixo do botão "Ligar Dora" — dentro do card */
.dir-btn-hint {
  margin-top: 12px;
  font-size: 0.78em;
  color: var(--text-muted);
  text-align: center;
}

/* ----------------------------------------------------------------
   SLEEPING CARDS — SUB-ABAS SECUNDÁRIAS (Correções, Saúde Dora)
   Estrutura compacta: sem card central de destaque
   ---------------------------------------------------------------- */
.dir-sleeping-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 0 0;
}

.dir-sleeping-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  text-align: center;
  max-width: 440px;
  width: 100%;
}

/* Ícone ph-moon 28px */
.dir-sleeping-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.dir-sleeping-icon i {
  font-size: 28px;
  color: var(--text-muted);
}

/* Título do sleeping card — especificidade dupla via seletor
   de atributo + classe para vencer os estilos de bloco Streamlit. */
[data-testid="stMarkdownContainer"] .dir-sleeping-card .dir-sleeping-title,
.dir-sleeping-card .dir-sleeping-title {
  font-size: 0.95em;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 6px 0;
  line-height: 1.3;
}

/* Descrição do sleeping card */
[data-testid="stMarkdownContainer"] .dir-sleeping-card .dir-sleeping-desc,
.dir-sleeping-card .dir-sleeping-desc {
  font-size: 0.83em;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* Override link color bleed in desc paragraphs — Streamlit injeta cor de link em texto.
   Especificidade via seletor de atributo composto (sem overrides agressivos). */
[data-testid="stMarkdownContainer"] .dir-hibernation-card .dir-hibernation-desc,
.dir-hibernation-card .dir-hibernation-desc {
  color: var(--text-secondary);
}
[data-testid="stMarkdownContainer"] .dir-hibernation-desc *,
[data-testid="stMarkdownContainer"] .dir-sleeping-desc * {
  color: inherit;
}

/* FIX-4 (Lupa R-4.7 SP-01): margin-bottom para abas secundárias Correções + Saúde.
   .dir-hibernation-wrap já tem margin-bottom:32px (Visão Geral).
   empty_state primitive (variant="sleeping") emite .arh-es--sleeping sem essa margem.
   Adicionada contextualmente via seletor scoped por .st-key-arh_dir_main para
   não afetar outros empty_state sleeping na aplicação.
   Rastreio: direcionamento.css L67 + empty_state.py L192-195. */
.st-key-arh_dir_main .arh-es--sleeping {
  margin-bottom: 32px;
}

/* ── stTabs underline override — Direcionamento (A4 refinamentos 2026-05-08) ──
   BLOCKER: st.tabs nativo usa borda SUPERIOR no tab ativo (BaseWeb default).
   Proto dora-hibernacao.html usa border-bottom: 2px solid accent-brand.
   Override idêntico ao de _painel_bi.py e _configuracoes_tabs.py.
   Seletor [data-baseweb="tab"] é estável (BaseWeb v14+, Streamlit 1.55).
   NÃO usar emotion-cache classes (frágeis — vetado KB §6).
   Especificidade aumentada via seletores compostos para vencer BaseWeb
   sem overrides agressivos. */
/* DEC-R-4.7 FIX-5: top:56px aguarda topnav R-5 (app_shell_r4.py não tem topnav — DEFER R-5).
   Piloto R-4 usa top:0. Em R-5 com topnav Pattern A, restaurar top:56px.
   TODO R-5: remover este comentário e ajustar valor após altura topnav definida. */
[data-testid="stTabs"] [data-baseweb="tab-list"] {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--surface-base);
  border-bottom: 1px solid var(--border-subtle);
  gap: 4px;
}
[data-testid="stTabs"] [data-baseweb="tab-list"] [data-baseweb="tab"] {
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 120ms, border-color 120ms;
}
[data-testid="stTabs"] [data-baseweb="tab-list"] [data-baseweb="tab"]:hover {
  color: var(--text-primary);
  border-bottom-color: var(--border-default);
}
[data-testid="stTabs"] [data-baseweb="tab-list"] [aria-selected="true"][data-baseweb="tab"] {
  color: var(--accent-brand-text);
  border-bottom-color: var(--accent-brand);
  font-weight: 600;
}
[data-testid="stTabs"] [data-baseweb="tab-list"] [data-baseweb="tab"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
[data-testid="stTabs"] [data-baseweb="tab-panel"] {
  padding-top: 16px;
}

/* ----------------------------------------------------------------
   BADGE STATUS — "Hibernando" no slot_direita do header
   ---------------------------------------------------------------- */
.dir-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

[data-testid="stMarkdownContainer"] .dir-hibernation-card .dir-status-badge.hibernate,
.dir-status-badge.hibernate {
  background: var(--surface-sunken);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

/* FIX-3 (Lupa R-4.7): margem inferior do badge — movida de inline style para classe.
   Rastreio: direcionamento.py L242 antes era style="margin-bottom:16px;" inline.
   Valor 16px preservado do proto dora-hibernacao.html (sem token de spacing equivalente). */
[data-testid="stMarkdownContainer"] .dir-hibernation-card .dir-status-badge.hibernate,
.dir-hibernation-card .dir-status-badge.hibernate {
  margin-bottom: 16px;
}

/* Dot indicador 6×6px */
[data-testid="stMarkdownContainer"] .dir-hibernation-card .dir-status-badge .dot,
.dir-status-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.6;
  flex-shrink: 0;
}