/* ════════ ROADMAP DE EVOLUTIVAS — Gantt semanal (namespace .arh-rm-*) ════════ */

/* ── Alinhamento do conteúdo com a topnav ──────────────────────────────────────
   topnav = sticky, height 56px, padding 0 20px (logo começa em x=20).
   stMainBlockContainer é full-bleed (padding 0) → sem isto o conteúdo cola na
   borda (x=0) e fica sob a topnav. rm_layout reproduz o respiro lateral (20px)
   e limpa verticalmente os 56px da topnav. */
.st-key-rm_layout {
  padding-left: 20px !important;
  padding-right: 20px !important;
  margin-top: 26px !important;
}
/* Remove "Press Enter to submit form/apply" abaixo dos inputs (forms do roadmap) */
[data-testid="InputInstructions"] { display: none !important; }

/* ── Modelo B — painel de filtros em seções (Matias V-01 08/06) ── */
.rm-sec-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; color: var(--text-muted);
  text-transform: uppercase; margin: 15px 0 7px; }
/* compacta o empilhamento vertical na coluna de filtros (chips, checkboxes, ações) */
.st-key-rm_layout [data-testid="stColumn"]:first-child [data-testid="stVerticalBlock"] { gap: .5rem; }
/* chip de frente: nome à esquerda (depois do dot ::before); contador (::after) à direita */
[class*="st-key-rm_fr_"] button [data-testid="stMarkdownContainer"] { flex: 0 1 auto; }
[class*="st-key-rm_fr_"] button [data-testid="stMarkdownContainer"] p {
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Editar/refinar — itens da lista de fases com badge de camada colorido */
.rm-fase-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border: 1px solid var(--border-default); border-radius: 9px; background: var(--surface-base); }
.rm-fase-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.rm-fase-nm { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.rm-fase-meta { font-size: 11.5px; color: var(--text-muted); }
.rm-fase-tag { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 6px; }

.arh-rm-root {
  --rm-col-info: 280px;
  --rm-col-week: 80px;
  --rm-track-h: 16px;
  --rm-track-gap: 3px;
  font-family: var(--font-family-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  color: var(--text-secondary);
  margin-top: 0;
}

/* Barra de stats / contexto acima do gantt */
.arh-rm-stats {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  font-size: 12px; color: var(--text-muted); padding: 2px 0 12px;
}
.arh-rm-stats strong { color: var(--text-primary); font-weight: 600; }
.arh-rm-stats .arh-rm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }

/* Wrapper com scroll horizontal (1 ano = ~52 semanas) */
.arh-rm-gantt-wrap { overflow-x: auto; padding-bottom: 6px; }
.arh-rm-gantt {
  min-width: max-content;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  overflow: hidden;
}

/* ── Cabeçalho 2 níveis (mês / semana) ── */
.arh-rm-head-months,
.arh-rm-head-weeks { display: grid; background: var(--surface-sunken); }
.arh-rm-head-weeks { border-bottom: 1px solid var(--border-default); }
.arh-rm-col-label {
  padding: 10px 12px; font-size: 11px; font-weight: 600;
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: .6px;
  border-right: 1px solid var(--border-default); display: flex; align-items: center;
  position: sticky; left: 0; background: var(--surface-sunken); z-index: 2;
}
.arh-rm-month-cell {
  padding: 6px 0; text-align: center; font-size: 11px; font-weight: 700;
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px;
  border-right: 1px solid var(--border-default);
}
.arh-rm-week-cell {
  padding: 5px 0; text-align: center; font-size: 9.5px;
  color: var(--text-muted); border-right: 1px solid var(--border-subtle, rgba(125,125,125,.18));
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.arh-rm-week-cell.now { background: rgba(93,179,228,.18); color: var(--text-primary); font-weight: 700; }
.arh-rm-week-cell.pre { background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(125,125,125,.10) 3px, rgba(125,125,125,.10) 6px); }

/* régua DIÁRIA — cada dia útil (seg-sex); borda forte na 2ª-feira separa as semanas */
.arh-rm-day-cell { padding: 5px 0; text-align: center; font-size: 8.5px; color: var(--text-muted);
  border-right: 1px solid var(--border-subtle, rgba(125,125,125,.08)); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; box-sizing: border-box; }
.arh-rm-day-cell.wk-start { border-left: 1px solid var(--border-default); }
.arh-rm-day-cell.now { background: rgba(93,179,228,.28); color: var(--text-primary); font-weight: 700; border-radius: 3px 3px 0 0; }
.arh-rm-day-cell.hol { background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(217,138,43,.20) 2px, rgba(217,138,43,.20) 4px); }

/* ── KPIs do Roadmap real (6 cards, modelo Alessandro) ── */
.arh-rmx-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 4px 0 14px; }
.arh-rmx-kpi { background: var(--surface-raised); border: 1px solid var(--border-default);
  border-radius: 10px; padding: 11px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.arh-rmx-kpi-val { font-size: 26px; font-weight: 800; color: var(--text-primary); line-height: 1.05;
  font-variant-numeric: tabular-nums; }
.arh-rmx-kpi-tit { font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase;
  letter-spacing: .4px; margin-top: 4px; line-height: 1.2; }
.arh-rmx-kpi-sub { font-size: 9.5px; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 1200px){ .arh-rmx-kpis { grid-template-columns: repeat(3, 1fr); } }

/* ── GANTT real: linha do tempo semanal com marcações EST/DEV/HOM (modelo Alessandro) ── */
.arh-rmg-wrap { overflow-x: auto; border: 1px solid var(--border-default); border-radius: 10px; }
.arh-rmg { min-width: max-content; }
.arh-rmg-head { display: grid; background: var(--surface-sunken); }
.arh-rmg-head2 { border-bottom: 1px solid var(--border-default); }
.arh-rmg-corner { padding: 6px 12px; font-size: 10px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .5px; position: sticky; left: 0; z-index: 3;
  background: var(--surface-sunken); border-right: 1px solid var(--border-default); display: flex; align-items: center; }
.arh-rmg-m { text-align: center; font-size: 10px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; padding: 5px 0; border-left: 1px solid var(--border-default); }
.arh-rmg-w { text-align: center; font-size: 8px; color: var(--text-muted); padding: 4px 0;
  border-left: 1px solid var(--border-subtle, rgba(125,125,125,.10)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.arh-rmg-row { display: grid; border-bottom: 1px solid var(--border-subtle, rgba(125,125,125,.12)); }
.arh-rmg-row:hover .arh-rmg-info { background: var(--surface-sunken); }
.arh-rmg-info { padding: 7px 12px; border-right: 1px solid var(--border-default); position: sticky; left: 0;
  z-index: 1; background: var(--surface-raised); overflow: hidden; }
.arh-rmg-info-top { display: flex; align-items: center; gap: 6px; }
.arh-rmg-num { font-weight: 700; font-size: 12px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.arh-rmg-resumo { font-size: 10.5px; color: var(--text-secondary); margin: 3px 0; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arh-rmg-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.arh-rmg-w.now { background: rgba(77,159,255,.18); color: var(--text-primary); font-weight: 700; border-radius: 4px 4px 0 0; }
.arh-rmg-w.now b { display: block; font-size: 7px; color: var(--accent-brand-text, #4D9FFF); letter-spacing: 0; }
/* timeline = grade de fundo + BARRAS absolutas (estilo determinado, NÃO tabela do gerente) */
.arh-rmg-tl { position: relative; min-height: 40px; }
.arh-rmg-bg { position: absolute; top: 0; bottom: 0; border-right: 1px solid var(--border-subtle, rgba(125,125,125,.07)); }
.arh-rmg-bg.now { background: rgba(77,159,255,.10); border-left: 2px solid var(--accent-brand-text, #4D9FFF);
  border-right-color: rgba(77,159,255,.22); }
.arh-rmg-bar { position: absolute; top: 7px; height: 26px; border-radius: 5px; display: flex; align-items: center;
  justify-content: center; font-size: 9px; font-weight: 800; color: #0a2540; text-transform: uppercase; letter-spacing: .3px;
  cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.28); box-sizing: border-box; overflow: hidden;
  transition: filter .1s ease, outline-color .1s ease; }
.arh-rmg-bar.projetado { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.45) 0 3px, transparent 3px 6px); }
.arh-rmg-bar.planejado { opacity: .45; }
.arh-rmg-bar:hover { filter: brightness(1.12); outline: 1.5px solid var(--accent-brand-text, #4D9FFF); z-index: 5; }
/* legenda das marcações */
.arh-rmg-leg { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; padding: 12px 2px 2px;
  font-size: 9.5px; color: var(--text-secondary); }
.arh-rmg-leg-item { display: inline-flex; align-items: center; gap: 5px; }
.arh-rmg-leg-sw { width: 16px; height: 11px; border-radius: 3px; display: inline-block; }
.arh-rmg-leg-sw.proj { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 3px, transparent 3px 6px); }
.arh-rmg-leg-sw.plan { opacity: .42; }
.arh-rmg-leg-sep { width: 1px; height: 14px; background: var(--border-default); margin: 0 2px; }

/* ── Linha de chamado ── */
.arh-rm-row { display: grid; border-bottom: 1px solid var(--border-default); }
.arh-rm-row:last-child { border-bottom: none; }
.arh-rm-row:hover .arh-rm-info { background: var(--surface-sunken); }

.arh-rm-info {
  padding: 10px 12px; border-right: 1px solid var(--border-default);
  background: var(--surface-raised); position: sticky; left: 0; z-index: 1; min-width: 0;
}
.arh-rm-info-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.arh-rm-info-num { font-weight: 700; color: var(--text-primary); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.arh-rm-info-desc { color: var(--text-secondary); font-size: 11px; line-height: 1.3; margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.arh-rm-meta { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }

/* badges */
.arh-rm-badge { font-size: 9.5px; padding: 2px 7px; border-radius: 9px; background: var(--surface-sunken);
  color: var(--text-secondary); border: 1px solid var(--border-default); font-weight: 600; white-space: nowrap; }
.arh-rm-badge-frente { background: rgba(31,111,235,.14); color: var(--accent-brand-text, #4D9FFF); border-color: rgba(31,111,235,.4); }
.arh-rm-badge-manual { background: rgba(245,184,107,.14); color: #b06a12; border-color: rgba(245,184,107,.4); }
[data-theme="dark"] .arh-rm-badge-manual { color: #f5b86b; }
.arh-rm-badge-import { background: rgba(63,185,80,.14); color: #1a7f37; border-color: rgba(63,185,80,.4); }
[data-theme="dark"] .arh-rm-badge-import { color: #3fb950; }
.arh-rm-badge-status { background: var(--surface-sunken); color: var(--text-muted); }

/* ── Timeline (barras posicionadas por DIA ÚTIL — position absolute) ── */
.arh-rm-timeline { position: relative; }

.arh-rm-bar {
  height: var(--rm-track-h); border-radius: 3px; display: flex; align-items: center;
  padding: 0 5px; font-size: 9px; font-weight: 700; color: rgba(0,0,0,.78);
  letter-spacing: .12px; white-space: nowrap; overflow: hidden; text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(0,0,0,.12); cursor: help; box-sizing: border-box; gap: 4px;
  transition: filter .12s ease, outline-color .12s ease; }
.arh-rm-bar.dark-text { color: rgba(255,255,255,.96); }
.arh-rm-bar:hover { filter: brightness(1.22); outline: 1.5px solid var(--accent-brand-text, #4D9FFF);
  z-index: 5; overflow: visible; }
/* camadas: projetado = tracejado translúcido; realizado = borda destacada */
.arh-rm-bar.projetado { opacity: .55; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px); }
.arh-rm-bar.realizado { box-shadow: 0 0 0 2px var(--accent-brand, #1F6FEB) inset, 0 1px 0 rgba(0,0,0,.12); }

/* ── Legenda ── */
.arh-rm-legend { padding: 14px 2px 2px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-size: 10.5px; color: var(--text-secondary); }
.arh-rm-legend-title { font-weight: 700; color: var(--text-primary); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.arh-rm-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.arh-rm-legend-sw { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.arh-rm-legend-sep { width: 1px; height: 16px; background: var(--border-default); }
.arh-rm-cam { display: inline-flex; align-items: center; gap: 5px; }
.arh-rm-cam-sw { width: 18px; height: 11px; border-radius: 2px; background: #9aa6b2; }
.arh-rm-cam-sw.proj { opacity:.55; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 3px, transparent 3px 6px); }
.arh-rm-cam-sw.real { background:#9aa6b2; box-shadow: 0 0 0 2px var(--accent-brand,#1F6FEB) inset; }

/* ── Empty state ── */
.arh-rm-empty { text-align: center; padding: 56px 24px; color: var(--text-muted); }
.arh-rm-empty-icon { font-size: 40px; opacity: .5; margin-bottom: 10px; }
.arh-rm-empty-title { font-size: 15px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.arh-rm-empty-sub { font-size: 12.5px; line-height: 1.5; max-width: 460px; margin: 0 auto; }

/* ── Swimlane por Frente (A3) ── */
.arh-rm-inner { position: relative; }
.arh-rm-lane {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--surface-sunken); border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default); position: sticky; left: 0; z-index: 3;
  font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px;
}
.arh-rm-lane-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.arh-rm-lane-cnt { margin-left: auto; background: var(--border-default); color: var(--text-secondary);
  border-radius: 10px; padding: 1px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0; }

/* ── Overlay: linha do "hoje" + feriados (rolam junto com o Gantt) ── */
.arh-rm-overlay { position: absolute; left: 0; top: 59px; bottom: 0; pointer-events: none; z-index: 4; }
.arh-rm-today { position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--accent-brand-text, #4D9FFF); box-shadow: 0 0 7px rgba(77,159,255,.7); }
/* badge do HOJE: ABAIXO do cabeçalho de datas (no espaço em branco), não cobrindo os dias (Matias 09/06) */
.arh-rm-today::before { content: attr(data-lbl); position: absolute; top: 6px; left: 50%;
  transform: translateX(-50%); background: var(--accent-brand, #1F6FEB); color: #fff; font-size: 9px;
  font-weight: 700; padding: 2px 6px; border-radius: 5px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.arh-rm-holiday { position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, rgba(245,184,107,.12) 0 5px, transparent 5px 10px);
  border-left: 1px dashed rgba(245,184,107,.5); border-right: 1px dashed rgba(245,184,107,.5); }
.arh-rm-week-cell.hol { background: rgba(245,184,107,.18); color: #b06a12; font-weight: 700; }

/* ── Tela de SELEÇÃO (Evolutivas | Sustentação) — COPIADO dos cards-tipo da Consulta (.arh-cv-tipo-*) ── */
.arh-rm-sel-title { text-align:center; font-size:22px; font-weight:800; color:var(--text-primary); margin:0 0 4px; }
.arh-rm-sel-sub { text-align:center; font-size:13px; color:var(--text-muted); margin:0 0 26px; }
/* NICHO dos cards (item 6, Matias 11/06): painel replicado do .arh-cv-drill-panel da
   Consulta (surface-raised + border + radius-lg + shadow-elevated, 780px centrado). */
.arh-rm-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; margin:0 auto; }
.arh-rm-drill-section { padding:24px 24px 22px; }
.arh-rm-level-label { font-size:0.65rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:14px; text-align:center; }
.arh-rm-tipo-row { display:flex; justify-content:center; align-items:stretch; gap:16px; flex-wrap:wrap; margin:0 auto; max-width:100%; }
.arh-rm-tipo-card { width:210px; 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-rm-tipo-card:hover { border-color:var(--accent-brand-text); background:var(--surface-hover); }
.arh-rm-tipo-card.selected { border-color:var(--accent-brand); background:rgba(29,78,216,.10); box-shadow:0 0 0 1px var(--accent-brand); }
.arh-rm-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); }
.arh-rm-tipo-card:hover .arh-rm-tipo-icon { background:rgba(29,78,216,.15); color:var(--accent-brand-text); }
.arh-rm-tipo-label { font-size:0.95rem; font-weight:700; color:var(--text-primary); }
.arh-rm-tipo-desc { font-size:0.74rem; color:var(--text-muted); line-height:1.35; }
/* st.button reais escondidos (disparados pelo bridge JS via data-rm-trigger) */
.st-key-rm_modo_evo, .st-key-rm_modo_sus { display:none !important; }