/* ================================================================
   CONSULTA VISUAL — drill-down progressivo
   Namespace .arh-cv-* · Story 2.14 · Forge
   Fiel a modelo-b-drill-down-progressivo.html + v01.html
   ================================================================ */

/* ── Sub-abas Consulta: Modelo B Pill Group canônico (R12 2026-05-21) ──
   Replica 1:1 do .arh-atd-pill* validado no Atendimento (LOCK D3).
   Namespace .arh-cv-pill* p/ evitar colisão com outras telas. */
.arh-cv-pill-wrap {
  display: flex;
  justify-content: center;
  margin: 24px 0 0 0;
}
.arh-cv-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-cv-pill-group {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.arh-cv-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-cv-pill:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}
[data-theme="light"] .arh-cv-pill:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}
.arh-cv-pill.active {
  background: var(--accent-brand);
  color: #fff;
  font-weight: 600;
}
.arh-cv-pill:focus-visible {
  outline: 2px solid var(--accent-brand-text);
  outline-offset: 2px;
}

/* R-D29 2026-05-24 (Matias): centralização migrada para arquivo único
   `pages/_internal/styles/_centralization.py`. Tabela Completa agora
   também centraliza em 1200px (sem mais exceção fullwidth — decisão
   Matias: TODAS telas mesma largura). Scroll horizontal interno ao
   .arh-cns-tabela-wrap aceito (overflow-x:auto já declarado). */

/* Toolbar do Modelo C (Matias 2026-06-11) — substitui o CSS da sidebar
   (morta). ⚠ O pill-group do sub-menu VAZA -16px do container markdown
   (comportamento documentado 10/06): sem compensação a toolbar SOBREPÕE as
   pills (reportado Matias 11/06 screenshot). margin-top 24px = 8px LÍQUIDOS,
   gap canônico das demais telas com sub-menu (princípio R9 — medir runtime,
   não confiar no CSS). */
[data-testid="stHorizontalBlock"]:has([class*="st-key-cv_voltar_fonte"]) {
  /* Matias 11/06 r2: respiro sub-aba→toolbar IGUAL às demais telas (~24px
     percebidos até o conteúdo; 17px davam 8px líquidos → 33px ≈ 24px). */
  margin-top: 33px;
  flex-wrap: nowrap !important;
}

/* Busca Rápida (Matias 12/06, print): o 1º bloco (input + Buscar) sofria o
   MESMO vazamento de -16px do pill-group e colava no sub-menu. Medido:
   33px CSS davam 32px líquidos AQUI (≠ tabela) → 25px = 24px (padrão). */
[data-testid="stHorizontalBlock"]:has([class*="st-key-cv_busca_q"]) {
  margin-top: 25px;
}

/* O iframe INVISÍVEL do cv_filter_bridge ocupa um slot no fluxo (gap 1rem
   antes+depois) e abria um vão toolbar→tabela (Matias 11/06 r2). Colapsa o
   slot: height 0 + margin-top compensa o gap extra do flex. */
[data-testid="stElementContainer"]:has(> iframe[title*="arh_cv"]) {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: -16px 0 0 0 !important;
}
/* Bridge de filtros da TABELA (cv_flt_bridge): o iframe é height=0, mas o container
   stCustomComponentV1 segura ~26px e abria um vão toolbar→tabela de 27px. A regra
   acima NÃO pega aqui (o iframe não é filho DIRETO — o Streamlit insere um wrapper),
   então colapsa pela st-key. Depois o canvas recria um gap LIMPO de 8px = idêntico
   ao gap KPI→grupos do Atendimento (referência Matias 2026-06-29). */
.st-key-cv_flt_bridge {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.st-key-cv_canvas { margin-top: 8px; }

/* Export XLSX (Matias 30/06): 1 botão "Exportar" faz SWAP na própria coluna do
   toolbar (st.button gera → st.download_button baixa, mesmo tamanho e lugar).
   O auto-click usa _stc_ghost_html, já colapsado por [data-rh-ghost] — nada extra
   ocupa espaço no corpo. Sem CSS de ocultar aqui. */

/* ── Cabeçalho de página ────────────────────────────────────── */
.arh-cv-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-brand-text);
  margin-bottom: 4px;
}
.arh-cv-page-h1 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.25;
  color: var(--text-primary);
}
.arh-cv-page-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.55;
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.arh-cv-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 28px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.arh-cv-bc-item {
  display: flex;
  align-items: center;
  gap: 0;
}
.arh-cv-bc-link {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 2px 0;
  background: none;
  border: none;
}
.arh-cv-bc-link.current {
  color: var(--text-primary);
  font-weight: 600;
}
.arh-cv-bc-sep {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0 6px;
  user-select: none;
}

/* ── Painel drill-down ──────────────────────────────────────── */
.arh-cv-drill-panel {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  max-width: 780px;
  /* R-Onda3.3 (2026-05-26): margin auto pra centralizar dentro do container
     1200px do design system. Antes `margin-top: 24px` sozinho deixava o painel
     ancorado à esquerda. PRINCÍPIO CRAVADO Matias R9 2026-05-21: remoção do
     título "Selecionar fonte de dados" exige restaurar respiro top no 1º
     elemento visível — margin-top 24px preservado. */
  margin: 24px auto 0;
}

/* Seção de nível */
.arh-cv-drill-section {
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.arh-cv-drill-section:last-child {
  border-bottom: none;
}
/* Alinhamento à esquerda do Passo 2 (Matias 2026-06-29): no header de período o
   summary (.arh-cv-drill-done) e a seção (.arh-cv-drill-section) tinham padding-left
   24px e ficavam indentados +24px em relação aos inputs De/Até (que ficam no
   content-left do card). Zera o padding horizontal SÓ dentro do .arh-cv-periodo-head
   → summary, "Passo 2", "Período dos diários", pill e inputs alinham todos à esquerda.
   Escopado (não afeta o drill-panel de tipo/subtipo). Especificidade 0,2,0 vence a base. */
.arh-cv-periodo-head .arh-cv-drill-done,
.arh-cv-periodo-head .arh-cv-drill-section {
  padding-left: 0;
  padding-right: 0;
}

/* Seção completada (summary row clicável) */
.arh-cv-drill-done {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 150ms ease-out;
}
.arh-cv-drill-done:hover {
  background: var(--surface-hover);
}
.arh-cv-done-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--state-success);
  flex-shrink: 0;
}
.arh-cv-done-key {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  min-width: 60px;
}
.arh-cv-done-val {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.arh-cv-done-edit {
  font-size: 0.72rem;
  color: var(--accent-brand-text);
  font-weight: 600;
  margin-left: auto;
  flex-shrink: 0;
}

/* Rótulos do nível */
.arh-cv-level-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.arh-cv-level-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-primary);
}
.arh-cv-level-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 18px;
  line-height: 1.5;
}

/* ── Cards de tipo (Diário / Fechado) ───────────────────────── */
/* Matias 2026-05-22 (D3): cards QUADRADOS + CENTRALIZADOS no nicho.
   Antes: grid horizontal 2-col com cards row (icon esquerda + textos direita).
   Agora: flex centrado, cards 168×168 verticais (icon topo + label + desc). */
.arh-cv-tipo-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 100%;
}
.arh-cv-tipo-card {
  width: 168px;
  height: 168px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md, 8px);
  padding: 16px 12px;
  cursor: pointer;
  background: var(--surface-sunken);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  transition: border-color 150ms, background 150ms, box-shadow 150ms;
}
.arh-cv-tipo-card:hover {
  border-color: var(--accent-brand-text);
  background: var(--surface-hover);
}
.arh-cv-tipo-card.selected {
  border-color: var(--accent-brand);
  background: rgba(29,78,216,.10);
  box-shadow: 0 0 0 1px var(--accent-brand);
}
.arh-cv-tipo-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-base, 4px);
  background: var(--surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.arh-cv-tipo-card.selected .arh-cv-tipo-icon {
  background: rgba(29,78,216,.15);
  color: var(--accent-brand-text);
}
.arh-cv-tipo-label {
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 0;
  color: var(--text-primary);
}
.arh-cv-tipo-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* ── Presets de período (Diário) ────────────────────────────── */
.arh-cv-periodo-container {
  max-width: 440px;
}

/* R-D30 2026-05-24 (Matias): container do form de periodo (st.date_input REAL).
   Visual coerente com .arh-cv-drill-panel — mesmo bg surface-raised, border,
   padding. Spacer no botão pra alinhar com baseline dos labels dos date inputs.
   R-Onda3.4 (2026-05-26): max-width 780px + margin auto sincroniza com
   .arh-cv-drill-panel pra coerência visual (passo 2 não vaza). */
.st-key-cv_periodo_form {
  max-width: 780px;
  /* Matias 2026-06-10: respiro pill-group→card IDÊNTICO às demais telas com
     sub-menu (8px líquidos, ref .arh-cv-drill-panel/Atendimento). 16px dava
     0px líquido no flex do Streamlit — princípio cravado R9 = 24px. */
  margin: 24px auto 0;
  padding: 16px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  box-sizing: border-box;
}
/* Spacer pra alinhar botão com fundo dos inputs (que tem label em cima). */
.arh-cv-periodo-btn-spacer { height: 24px; }

/* Calendário NATIVO PT do Passo 2 (Matias 11/06 r2 — substitui st.date_input,
   cujo popup é inglês-only). Look idêntico aos inputs do form. */
.arh-cv-dt-row { display: flex; gap: 16px; }
.arh-cv-dt-nativo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}
.arh-cv-dt-nativo input[type="date"] {
  height: var(--field-height-md, 36px);
  padding: 0 10px;
  background: var(--auth-input-bg);
  border: 1px solid var(--auth-input-border);
  border-radius: var(--radius-base);
  color: var(--auth-input-text);
  font-family: inherit;
  font-size: 0.85rem;
  color-scheme: dark;
}
[data-theme="light"] .arh-cv-dt-nativo input[type="date"] {
  color-scheme: light;
}
/* Botão "Ir para filtros" altura unificada com inputs (--field-height-md=36px). */
.st-key-cv_ir_filtros_diario button {
  height: var(--field-height-md) !important;
}

/* R-D30 2026-05-24 (Matias): st.date_input dentro do container cv_periodo_form
   precisa herdar tema light/dark coerente. CSS de ui_components.py só aplica
   inputs dentro de stForm; aqui usamos st.container — override explicito. */
.st-key-cv_periodo_form [data-testid="stDateInput"] [data-baseweb="input"],
.st-key-cv_periodo_form [data-testid="stDateInput"] [data-baseweb="input"] > div,
.st-key-cv_periodo_form [data-testid="stDateInput"] input {
  background-color: var(--auth-input-bg) !important;
  border-color: var(--auth-input-border) !important;
  color: var(--auth-input-text) !important;
  min-height: var(--field-height-md) !important;
  border-radius: var(--radius-base) !important;
  box-shadow: none !important;
}
/* Labels acima dos date inputs com contraste WCAG visivel no light mode. */
.st-key-cv_periodo_form [data-testid="stWidgetLabel"] label,
.st-key-cv_periodo_form [data-testid="stWidgetLabel"] p {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.arh-cv-info-d1 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.25);
  border-radius: var(--radius-base, 4px);
  padding: 8px 12px;
  margin-bottom: 14px;
}
.arh-cv-info-d1-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--accent-brand-text);
}
.arh-cv-info-d1-text {
  font-size: 0.74rem;
  color: var(--accent-brand-text);
  line-height: 1.5;
}
.arh-cv-info-d1-text strong {
  font-weight: 700;
}
.arh-cv-presets-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.arh-cv-preset-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.arh-cv-preset-chip {
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.arh-cv-preset-chip:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.arh-cv-preset-chip.active {
  background: rgba(29,78,216,.15);
  border-color: var(--accent-brand-text);
  color: var(--accent-brand-text);
  font-weight: 600;
}

/* ── Cards de escopo (AMS / N2) ─────────────────────────────── */
.arh-cv-subtipo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 500px;
}
.arh-cv-subtipo-card {
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md, 8px);
  padding: 14px;
  cursor: pointer;
  background: var(--surface-sunken);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: border-color 150ms, background 150ms, box-shadow 150ms;
}
.arh-cv-subtipo-card:hover {
  border-color: var(--accent-brand-text);
  background: var(--surface-hover);
}
.arh-cv-subtipo-card.selected {
  border-color: var(--accent-brand);
  background: rgba(29,78,216,.10);
  box-shadow: 0 0 0 1px var(--accent-brand);
}
.arh-cv-subtipo-card.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.arh-cv-subtipo-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-base, 4px);
  background: var(--surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.arh-cv-subtipo-label {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--text-primary);
}
.arh-cv-subtipo-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.arh-cv-soon-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(217,160,32,.12);
  border: 1px solid rgba(217,160,32,.3);
  color: var(--state-warning);
  margin-top: 4px;
}

/* ── Zona de destino / convergência ─────────────────────────── */
.arh-cv-destino-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(46,204,113,.08);
  border: 1px solid rgba(46,204,113,.25);
  border-radius: var(--radius-md, 8px);
  padding: 16px 18px;
}
.arh-cv-destino-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md, 8px);
  background: rgba(46,204,113,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.arh-cv-destino-title {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--state-success);
}
.arh-cv-destino-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ── Botão "Ir para filtros" ─────────────────────────────────── */
.arh-cv-btn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.arh-cv-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 18px;
  background: var(--accent-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-base, 4px);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms, box-shadow 150ms;
}
.arh-cv-btn-primary:hover {
  background: var(--accent-brand-hover);
  box-shadow: 0 2px 8px rgba(29,78,216,.35);
}
.arh-cv-btn-primary:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.arh-cv-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base, 4px);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 150ms, color 150ms;
}
.arh-cv-btn-secondary:hover {
  border-color: var(--border-default);
  color: var(--text-primary);
}

/* ── Ocultar botões Streamlit funcionais abaixo de .arh-cv-drill-panel ── */
/* KB §5.2: sentinel pattern. Botões Streamlit ficam logo após o HTML visual.
   Usamos o padrão sibling para ocultá-los preservando JS interno. */
.arh-cv-drill-panel ~ [data-testid="stElementContainer"]:has([data-testid="stBaseButton-secondary"]),
.arh-cv-drill-panel ~ [data-testid="stElementContainer"]:has([data-testid="stBaseButton-primary"]) {
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
}

/* Oculta label de sentinel */
.arh-cv-sentinel {
  display: none !important;
  visibility: hidden !important;
}

/* PRINCÍPIO CRAVADO Matias R9 2026-05-21: remoção de título exige restaurar
   respiro top no 1º elemento visível de cada sub-aba Consulta. */
.arh-cns-busca-wrapper {
  margin-top: 24px;
}

/* Matias R8 2026-05-21: esconde st.button reais (pattern .st-key-{X} canônico
   R5 — sem flash visual). R13 2026-05-21: keys CORRIGIDAS para bater com
   _render_drill_down/_render_filtros/_render_tabela reais. */
.st-key-cv_tab_busca,
.st-key-cv_tab_tabela,
.st-key-cv_tab_historico,
.st-key-cv_tipo_diario,
.st-key-cv_tipo_fechado,
.st-key-cv_p_hoje,
.st-key-cv_p_7d,
.st-key-cv_p_30d,
.st-key-cv_p_custom,
.st-key-cv_esc_ams,
.st-key-cv_esc_n2,
.st-key-cv_ir_filtros_d,
.st-key-cv_ir_filtros_f,
.st-key-cv_reset_tipo,
.st-key-cv_filtros_voltar,
.st-key-cv_filtros_carregar,
[class*="st-key-cv_pg_"] {
  display: none !important;
}

/* ── View TABELA: respiro pill→conteúdo (Matias 2026-06-10) ──
   MEDIDO: com margin 0 a toolbar SOBREPUNHA as pills em -16px (o pill group
   vaza do container markdown). +24px ⇒ toolbar a 8px líquidos do pill group
   — canônico cross-telas. Sempre medir com nós VISÍVEIS (anti-stale). */
[data-testid="stHorizontalBlock"]:has(.st-key-cv_sidebar) {
  margin-top: 24px;
}

/* ── Busca Rápida: campo do nº compacto, MESMA altura do botão (36px) ── */
.st-key-cv_busca_q [data-baseweb="input"],
.st-key-cv_busca_q [data-baseweb="input"] > div,
.st-key-cv_busca_q input {
  min-height: var(--field-height-md, 36px) !important;
  height: var(--field-height-md, 36px) !important;
}
.st-key-cv_busca_go button {
  min-height: var(--field-height-md, 36px) !important;
  height: var(--field-height-md, 36px) !important;
}

/* ── Tabela: scroll INTERNO + cabeçalho fixo (Matias 2026-06-10: a página
   descia demais — agora a rolagem fica dentro do quadro da tabela).
   Matias 2026-06-29 (Opção A): reserva 330→255px → tabela +75px de altura,
   gap abaixo da tabela cai de ~150px para ~75px (−50%) sem encostar no fim. ── */
.arh-cns-tabela-wrap {
  max-height: calc(100vh - 255px);
  min-height: 340px;
  overflow: auto;
}
.arh-cns-data-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-raised);
  z-index: 3;
  box-shadow: 0 1px 0 var(--border-subtle);
}

/* ── Tela Pré-Filtro (v01.html) — reutiliza .arh-cns-pf-* já definido ── */

/* ── Tabela completa — reutiliza .arh-cns-* já definido ────────────── */

/* ── Busca Rápida — reutiliza .arh-cns-* já definido ───────────────── */

/* ── Placeholder Histórico ──────────────────────────────────────────── */
.arh-cv-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  color: var(--text-muted);
  text-align: center;
  gap: 16px;
}
.arh-cv-placeholder-icon {
  font-size: 2.5rem;
  opacity: 0.4;
}
.arh-cv-placeholder-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.arh-cv-placeholder-desc {
  font-size: 0.82rem;
  line-height: 1.55;
  max-width: 280px;
}

/* ── Stepper horizontal — fiel ao modelo v01.html ──────────────── */
.arh-cv-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
  flex-wrap: nowrap;
}
.arh-cv-step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.arh-cv-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1.5px solid var(--border-subtle);
  background: transparent;
  color: var(--text-disabled);
  flex-shrink: 0;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.arh-cv-step-label {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-disabled);
  white-space: nowrap;
  transition: color 200ms;
}
.arh-cv-step-connector {
  flex: 1;
  min-width: 20px;
  max-width: 56px;
  height: 1px;
  background: var(--border-subtle);
  margin: 0 8px;
}

/* Estado: ativo */
.arh-cv-step-item.active .arh-cv-step-num {
  background: var(--accent-brand);
  border-color: var(--accent-brand);
  color: #fff;
}
.arh-cv-step-item.active .arh-cv-step-label {
  color: var(--text-primary);
  font-weight: 600;
}

/* Estado: concluido */
.arh-cv-step-item.done .arh-cv-step-num {
  background: rgba(46,204,113,.12);
  border-color: var(--state-success);
  color: var(--state-success);
}
.arh-cv-step-item.done .arh-cv-step-label {
  color: var(--state-success);
}
.arh-cv-step-connector.done {
  background: var(--state-success);
  opacity: 0.4;
}

/* ── Inputs de data (Passo 2A Diário) ───────────────────────────── */
.arh-cv-periodo-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.arh-cv-periodo-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.arh-cv-periodo-field-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.arh-cv-periodo-input {
  height: 34px;
  padding: 0 10px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-base, 4px);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 150ms;
}
/* Echo BLOCKER-3: accent-brand 2.0:1 falha SC 1.4.11 (UI contrast 3:1).
   Usar focus-ring (#4D9FFF dark / #1D4ED8 light) — AAA/AA confirmado sessão 04-05/05. */
.arh-cv-periodo-input:focus,
.arh-cv-periodo-input:focus-visible {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
  outline: none;
}
.arh-cv-periodo-sep {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 18px;
}

/* Exemplo inline D-1 */
.arh-cv-periodo-exemplo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base, 4px);
  margin-bottom: 14px;
  font-size: 0.73rem;
  color: var(--text-muted);
}
.arh-cv-periodo-exemplo-tag {
  background: var(--surface-hover);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-base, 4px);
  padding: 1px 7px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.arh-cv-periodo-exemplo-ref {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.73rem;
}

/* Preview dinamico de arquivos */
.arh-cv-periodo-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(46,204,113,.08);
  border: 1px solid rgba(46,204,113,.25);
  border-radius: var(--radius-base, 4px);
  margin-bottom: 14px;
  font-size: 0.74rem;
  color: var(--state-success);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .arh-cv-tipo-row,
  .arh-cv-subtipo-row {
    grid-template-columns: 1fr;
  }
  .arh-cv-drill-panel {
    border-radius: var(--radius-md, 8px);
  }
  .arh-cv-stepper {
    flex-wrap: wrap;
    gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .arh-cv-tipo-card,
  .arh-cv-subtipo-card,
  .arh-cv-preset-chip {
    transition: none !important;
  }
}