/* ============================================================
   Dashboard EDAF — SEP Anália Franco
   Design system baseado em design-spec.json + cores reais EDAF
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('/static/assets/fonts/Inter-400.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/assets/fonts/Inter-500.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/assets/fonts/Inter-600.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/assets/fonts/Inter-700.ttf') format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/assets/fonts/JetBrainsMono-400.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/assets/fonts/JetBrainsMono-500.ttf') format('truetype');
  font-weight: 500;
}

:root {
  /* Cores EDAF */
  --edaf-primary:   #0082CB;
  --edaf-secondary: #011689;
  --edaf-azul-dark: #1B3A6B;

  /* Cores oficiais do relatório mensal */
  --st-nao-iniciado: #A9A9A9;
  --st-em-edicao:    #FDB351;
  --st-em-analise:   #1F77B4;
  --st-definido:     #2CA02C;
  --st-cancelado:    #FF0000;
  --st-nao-listado:  #7030A0;

  /* Semânticas */
  --success: #22C55E;
  --warning: #F59E0B;
  --critical: #EF4444;
  --info:    #3B82F6;

  /* Superfícies */
  --bg-page:    #F4F6F9;
  --bg-card:    #FFFFFF;
  --bg-hover:   #EFF6FF;
  --border:     #D1D5DB;
  --border-soft:#E5E7EB;

  --fg-1:       #111827;
  --fg-2:       #374151;
  --fg-3:       #6B7280;
  --fg-muted:   #9CA3AF;

  --sidebar-w:  240px;
  --topbar-h:   56px;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;

  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-modal:0 10px 40px rgba(0,0,0,0.20);

  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', Segoe UI, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: 'JetBrains Mono', Consolas, monospace; }

/* ============ LAYOUT ============ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  height: 100vh;
}

.topbar {
  grid-area: topbar;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.topbar h1 {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex: 0 0 auto;
}
.topbar-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-filter .tf-label { font-weight: 600; color: var(--fg-2); font-size: 13px; white-space: nowrap; }
.topbar-filter label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.topbar-filter select {
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12px;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--fg-1);
  outline: none;
  cursor: pointer;
}
.topbar-filter select:hover { border-color: var(--edaf-primary); }
.topbar-filter select:focus { border-color: var(--edaf-primary); }
.topbar .meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--fg-3);
  align-items: center;
  flex: 0 0 auto;
}
.topbar .conn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--tone-f3f4f6);
  font-weight: 500;
}
.topbar .conn.ok::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; }
.topbar .conn.off::before{ content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tone-6b7280); }

.sidebar {
  grid-area: sidebar;
  position: relative;
  background:
    radial-gradient(130% 55% at 0% 0%, rgba(0,130,203,0.26), transparent 62%),
    linear-gradient(180deg, #021c9e 0%, var(--edaf-secondary) 40%, #02115c 100%);
  color: #C0CFEA;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-right: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.04), 5px 0 26px rgba(2,8,40,0.38);
}
/* Faixa de destaque ciano EDAF no topo */
.sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--edaf-primary), #38BDF8 55%, transparent);
}
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sidebar .brand img { height: 34px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); }
.sidebar .brand-text { font-size: 11px; line-height: 1.25; color: #8DA4CC; letter-spacing: 0.02em; }
.sidebar .brand-text b {
  color: #fff;
  font-size: 13.5px;
  display: block;
  font-weight: 700;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: 0.01em;
  margin-bottom: 1px;
}

.sidebar nav {
  padding: 12px 10px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sidebar nav::-webkit-scrollbar { width: 6px; }
.sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.13); border-radius: 3px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  color: #B4C4E0;
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  border-radius: 9px;
  border: 1px solid transparent;
  transition: var(--t-fast);
}
.sidebar nav a:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
  transform: translateX(2px);
}
.sidebar nav a.active {
  background: linear-gradient(90deg, rgba(0,130,203,0.32), rgba(0,130,203,0.08));
  color: #fff;
  border-color: rgba(56,189,248,0.28);
  box-shadow: 0 2px 12px rgba(0,40,90,0.45), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.sidebar nav a.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #38BDF8, var(--edaf-primary));
  box-shadow: 0 0 10px rgba(56,189,248,0.7);
}
.sidebar .footer {
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 10px;
  color: #7E93B8;
  line-height: 1.5;
}

.main {
  grid-area: main;
  overflow-y: auto;
  padding: 24px;
}

/* ============ COMPONENTES ============ */

.page-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}
.page-sub {
  color: var(--fg-3);
  font-size: 13px;
  margin-bottom: 20px;
}

.cards { display: grid; gap: 16px; }
.cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cards.cols-8 { grid-template-columns: repeat(8, 1fr); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.card .label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--fg-3);
  letter-spacing: 0.05em;
  font-weight: 600;
}
.card .value {
  font-size: 28px;
  font-weight: 700;
  color: var(--fg-1);
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.card .hint {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 4px;
}

.card.accent-primary { border-top: 3px solid var(--edaf-primary); }
.card.accent-success { border-top: 3px solid var(--success); }
.card.accent-warning { border-top: 3px solid var(--warning); }
.card.accent-critical{ border-top: 3px solid var(--critical); }

.kpi-pwbi {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--info);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kpi-pwbi .label { font-size: 11px; color: var(--fg-3); font-weight: 600; }
.kpi-pwbi .value { font-size: 24px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.kpi-pwbi[data-tone="enviado"] { border-top-color: #C5C7DD; background: var(--tone-eef1f8); }
.kpi-pwbi[data-tone="resolvido"] { border-top-color: #88D2BE; background: var(--tone-e8f7f2); }
.kpi-pwbi[data-tone="aberto"] { border-top-color: #E8B4B0; background: var(--tone-faedeb); }
.kpi-pwbi[data-tone="anulado"] { border-top-color: #B6D9B6; background: var(--tone-ecf6ec); }
.kpi-pwbi[data-tone="total"] { border-top-color: var(--edaf-primary); }

/* Tabelas */
.table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 16px;
}
.table-wrap .toolbar {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.table-wrap .toolbar input,
.table-wrap .toolbar select {
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.table-wrap .toolbar input:focus,
.table-wrap .toolbar select:focus { border-color: var(--edaf-primary); }
.table-wrap .toolbar .spacer { flex: 1; }
.table-wrap .toolbar .count { font-size: 12px; color: var(--fg-3); }

.table-scroll { max-height: 70vh; overflow: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
thead th {
  background: var(--tone-f4f6f9);
  color: var(--tone-374151);
  font-weight: 600;
  padding: 10px 12px;
  text-align: left;
  position: sticky;
  top: 0;
  /* O cabeçalho gruda no topo, mas grudar não basta: qualquer célula com
     `position` própria — as barras de avanço da EAP, por exemplo — cria o seu
     contexto de empilhamento e passa POR CIMA dele ao rolar. Sem z-index, o
     que se via era a porcentagem atravessando o título da coluna.
     A matriz do Planejamento já declara valores maiores (3 e 4) para o seu
     cruzamento de cabeçalho e coluna fixa, e continua vencendo este. */
  z-index: 2;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-soft);
}
.toolbar .hint { font-size: 11px; color: var(--fg-3); font-style: italic; }

/* Célula que navega para outra visão (ex.: responsável → Detalhamento) */
.link-btn {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--edaf-secondary, #011689); font-weight: 600; text-align: left;
}
.link-btn:hover { text-decoration: underline; }

/* Cabeçalho clicável (sortableTable) */
thead th.th-sort { cursor: pointer; user-select: none; }
thead th.th-sort:hover { background: var(--tone-e8edf5); color: var(--edaf-secondary, #011689); }
thead th.th-sort .sort-arrow { font-size: 10px; color: var(--edaf-secondary, #011689); }

tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: middle;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
tbody tr:hover { background: var(--bg-hover); }
tbody tr.no-resp { background: var(--tone-fef2f2); }

/* Badges de status */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.badge.b-nao-iniciado { background: var(--tone-e8e8e8); color: var(--tone-4b5563); }
.badge.b-em-edicao    { background: var(--tone-fef3d7); color: #92400E; }
.badge.b-em-analise   { background: var(--tone-dbeafe); color: #1D4ED8; }
.badge.b-definido     { background: var(--tone-dcfce7); color: #15803D; }
.badge.b-cancelado    { background: var(--tone-fee2e2); color: #B91C1C; }
.badge.b-nao-listado  { background: var(--tone-f3e8ff); color: #6B21A8; }
.badge.b-liberado     { background: var(--tone-cffafe); color: #155E75; font-weight: 700; }

/* Gráfico de barras horizontal CSS */
.bar-chart { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
.bar-row { display: grid; grid-template-columns: 100px 1fr 50px; align-items: center; gap: 8px; font-size: 12px; }
.bar-row .lbl { color: var(--fg-3); font-weight: 500; }
.bar-row .bar-track { background: var(--tone-f3f4f6); height: 18px; border-radius: 4px; overflow: hidden; }
.bar-row .bar-fill { height: 100%; border-radius: 4px; transition: width var(--t-fast); }
.bar-row .num { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-align: right; color: var(--fg-2); }

/* Pipeline */
.pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.pipe-step {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 14px;
  position: relative;
}
.pipe-step::after {
  content: '→';
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: var(--fg-muted);
  z-index: 1;
}
.pipe-step:last-child::after { display: none; }
.pipe-step h3 { font-size: 11px; text-transform: uppercase; color: var(--fg-3); letter-spacing: 0.05em; }
.pipe-step .role { font-size: 18px; font-weight: 700; color: var(--edaf-secondary); margin: 4px 0; }
.pipe-step .desc { font-size: 12px; color: var(--fg-3); }
.pipe-step ul { margin-top: 8px; padding-left: 16px; font-size: 12px; }
.pipe-step ul li { margin-bottom: 2px; }

/* Alert */
.alert {
  background: var(--tone-fef3c7);
  border: 1px solid #F59E0B;
  border-left: 4px solid #F59E0B;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 13px;
  color: #78350F;
}
.alert.critical { background: var(--tone-fee2e2); border-color: #EF4444; color: var(--tone-7f1d1d); }
.alert.info     { background: var(--tone-dbeafe); border-color: #3B82F6; color: var(--tone-1e3a8a); }

/* Gallery */

/* Pills filter */
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 11px;
  cursor: pointer;
  background: var(--bg-card);
  transition: var(--t-fast);
}
.pill.active { background: var(--edaf-primary); color: white; border-color: var(--edaf-primary); }

/* Loading */
.loading {
  text-align: center;
  padding: 40px;
  color: var(--fg-3);
}

/* PDF refs */
.pdf-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; }
.pdf-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--fg-1);
  transition: var(--t-fast);
}
.pdf-list a:hover { border-color: var(--edaf-primary); transform: translateY(-1px); }
.pdf-list .ico { width: 32px; height: 32px; background: var(--tone-fee2e2); border-radius: 6px; display: grid; place-items: center; color: #B91C1C; font-weight: 700; font-size: 10px; }
.pdf-list .meta { flex: 1; }
.pdf-list .meta .name { font-weight: 500; font-size: 13px; }
.pdf-list .meta .size { font-size: 11px; color: var(--fg-3); }

/* Status colors helper */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }

/* ---- Charts: donut / timeline / horizontal stacked ---- */
.donut-wrap { display: flex; flex-direction: column; align-items: center; padding: 8px 0; }
.donut-title { font-size: 14px; font-weight: 700; color: var(--fg-1); margin-bottom: 12px; text-align: center; }
.donut-inner svg { display: block; }
.donut-legend { min-width: 130px; }

.h-stacked .hsb-row { gap: 8px; }
.h-stacked .hsb-lbl { color: var(--fg-2); }

.timeline-wrap { padding: 8px 0; }
.timeline-wrap text { user-select: none; }

/* Tooltip flutuante para gráficos */
.chart-tooltip {
  position: fixed;
  z-index: 9999;
  background: rgba(17, 24, 39, 0.96);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  max-width: 280px;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 80ms;
}
.chart-tooltip.visible { opacity: 1; }
.chart-tooltip .tt-title { font-weight: 700; margin-bottom: 4px; font-size: 13px; }
.chart-tooltip .tt-row { display: flex; align-items: center; gap: 6px; }
.chart-tooltip .tt-row .swatch { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }
.chart-tooltip .tt-row .lbl { flex: 1; opacity: 0.9; }
.chart-tooltip .tt-row .val { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.chart-tooltip .tt-meta { font-size: 11px; color: #9CA3AF; margin-top: 4px; }

/* Hover interativo nos segmentos */
svg path, svg rect {
  transition: opacity 100ms;
}
svg path:hover, svg rect:hover {
  opacity: 0.85;
  cursor: pointer;
}

/* ============ Botões de ação (Bloco D) ============ */

.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--fg-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--t-fast);
  text-decoration: none;
  line-height: 1;
}
.btn-action:hover { background: var(--bg-hover); border-color: var(--edaf-primary); color: var(--edaf-primary); }
.btn-action:active { transform: translateY(1px); }
.btn-action.primary { background: var(--edaf-primary); color: white; border-color: var(--edaf-primary); }
.btn-action.primary:hover { background: var(--edaf-secondary); border-color: var(--edaf-secondary); color: white; }

.view-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.view-toolbar .spacer { flex: 1; }

/* ============ Painel Fontes de Dados ============ */

.fontes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.fonte-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fonte-card.live { border-left: 3px solid var(--edaf-primary); }
.fonte-card.static { border-left: 3px solid var(--fg-muted); }
.fonte-card.missing { border-left: 3px solid var(--critical); background: var(--tone-fef2f2); }
.fonte-card .fc-label { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.fonte-card .fc-path { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--fg-3); word-break: break-all; }
.fonte-card .fc-meta { display: flex; gap: 12px; font-size: 11px; color: var(--fg-3); margin-top: 4px; }
.fonte-card .fc-meta .num { font-weight: 600; color: var(--fg-2); }
.fonte-card .fc-actions { margin-top: 8px; display: flex; gap: 6px; }
.fonte-card .fc-latest {
  font-size: 11px;
  color: var(--fg-2);
  background: var(--tone-f3f4f6);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: 'JetBrains Mono', monospace;
}

/* Os arquivos que entram na leitura. Fundo próprio porque é afirmação sobre o
   que o parser fez, não metadado da pasta como a contagem ao lado. */
.fonte-card .fc-lidos {
  background: var(--tone-f3f4f6);
  border-radius: 4px;
  padding: 5px 8px;
}
.fonte-card .fc-lidos-cab {
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 3px;
}
.fonte-card .fc-lidos-cab .num { color: var(--edaf-primary); font-weight: 700; }
.fonte-card .fc-lidos ul {
  list-style: none; margin: 0; padding: 0;
  /* Dez fotos de cronograma esticariam o card e, com a grade em linhas de
     altura igual, esticariam a linha inteira. Rolar aqui dentro mostra todos
     sem deformar os vizinhos. */
  max-height: 92px; overflow-y: auto;
}
.fonte-card .fc-lidos li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; line-height: 1.5; color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fonte-card .fc-lidos-resto {
  font-size: 10px; color: var(--fg-3); font-style: italic;
  margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--border-soft);
}

/* Barra e resumo fixos juntos no topo da aba Fontes. O fundo é opaco de
   propósito: sem ele os cards passam por baixo e se leem através do texto. */
.fontes-header {
  position: sticky; top: 0; z-index: 21;
  background: var(--bg-page);
  padding-bottom: 6px;
}
.fontes-header .view-toolbar { position: static; margin-bottom: 8px; }
.fontes-header .page-sub { margin-bottom: 0; }

/* Toast efêmero (feedback de ação) */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--edaf-secondary);
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 10000;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 200ms, transform 200ms;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--critical); }

/* ===== Issues v2 — sub-abas (Bloco A) ===== */
.cards.cols-2 { grid-template-columns: repeat(2, 1fr); }

.snap-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-3); font-weight: 600; }
.snap-select { font-size: 12px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--fg-1); max-width: 340px; }
.snap-select:focus { border-color: var(--edaf-primary); outline: none; }

.subtabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border-soft); margin-bottom: 16px; }
.subtab { appearance: none; border: none; background: none; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--fg-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 6px 6px 0 0; transition: color 120ms, border-color 120ms, background 120ms; }
.subtab:hover { color: var(--edaf-primary); background: var(--bg-hover); }
.subtab.active { color: var(--edaf-primary); border-bottom-color: var(--edaf-primary); }
.subtab-content { min-height: 200px; }

.kpi-pwbi.clickable { cursor: pointer; transition: box-shadow 120ms, transform 120ms; }
.kpi-pwbi.clickable:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.kpi-pwbi .kpi-hint { font-size: 11px; color: var(--fg-muted); margin-top: 2px; }

.cmp-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cmp-arrow { font-size: 18px; color: var(--fg-3); font-weight: 700; }

.detalhe-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
/* z-index: o dropdown de multiseleção pode passar da largura da sidebar e
   precisa ficar acima do cabeçalho fixo (sticky) da tabela ao lado. */
.detalhe-sidebar { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 14px; position: sticky; top: 12px; z-index: 30; display: flex; flex-direction: column; gap: 10px; }
.detalhe-sidebar .filter-group { display: flex; flex-direction: column; gap: 3px; }
.detalhe-sidebar .filter-group label { font-size: 11px; font-weight: 600; color: var(--fg-3); }
.detalhe-sidebar select, .detalhe-sidebar input { font-size: 12px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--fg-1); width: 100%; }
.detalhe-sidebar select:focus, .detalhe-sidebar input:focus { border-color: var(--edaf-primary); outline: none; }
.detalhe-main { min-width: 0; }

/* ---- Filtro com multiseleção (multiSelect) ---- */
.ms { position: relative; }
.ms-btn {
  width: 100%; display: flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 6px 8px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--fg-1); cursor: pointer;
}
.ms-btn:hover { border-color: var(--edaf-primary); }
.ms-btn.active { border-color: var(--edaf-primary); color: var(--edaf-secondary); font-weight: 600; }
.ms-btn .ms-caption { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-btn .ms-arrow { font-size: 10px; color: var(--fg-3); }
.ms-panel {
  display: none; position: absolute; z-index: 40; top: calc(100% + 4px); left: 0;
  min-width: 100%; max-width: 320px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-card);
  padding: 6px;
}
.ms.open .ms-panel { display: block; }
.ms-search { width: 100%; font-size: 12px; padding: 5px 7px; margin-bottom: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ms-list { max-height: 240px; overflow: auto; }
.ms-opt { display: flex; align-items: center; gap: 7px; padding: 4px 6px; font-size: 12px;
  border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.ms-opt:hover { background: var(--tone-f3f4f6); }
.ms-opt input { width: auto; margin: 0; }
.ms-footer { display: flex; align-items: center; gap: 8px; padding: 6px 4px 2px; border-top: 1px solid var(--border-soft); margin-top: 4px; }
.ms-link { background: none; border: none; padding: 0; font-size: 11px; color: var(--fg-3); cursor: pointer; text-decoration: underline; }
.ms-link:hover { color: var(--critical); }
.ms-apply { font-size: 11px; font-weight: 600; padding: 4px 10px; cursor: pointer;
  border: 1px solid var(--edaf-primary); border-radius: var(--radius-sm);
  background: var(--edaf-primary); color: #fff; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ms-chip { font-size: 10px; background: var(--tone-eef2ff); color: var(--edaf-secondary); border-radius: 10px; padding: 2px 8px; }

.codigo-legenda { margin-top: 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-card); padding: 8px 12px; font-size: 12px; }
.codigo-legenda summary { cursor: pointer; font-weight: 600; color: var(--fg-2); }
.codigo-legenda .legenda-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 16px; margin-top: 10px; }
.codigo-legenda .legenda-item { display: flex; gap: 8px; align-items: baseline; }
.codigo-legenda .lg-code { font-weight: 700; color: var(--edaf-primary); min-width: 46px; }
.codigo-legenda .lg-nome { flex: 1; color: var(--fg-2); }
.codigo-legenda .lg-cat { font-size: 10px; color: var(--fg-muted); }

/* Responsivo */
@media (max-width: 1100px) {
  .cards.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cards.cols-8 { grid-template-columns: repeat(4, 1fr); }
  .cards.cols-2 { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: 1fr 1fr; }
  .pipe-step::after { display: none; }
  .detalhe-layout { grid-template-columns: 1fr; }
  .detalhe-sidebar { position: static; }
}
@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .sidebar { display: none; }
  .cards.cols-4, .cards.cols-8 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .cards.cols-3 { grid-template-columns: 1fr 1fr; }
}

/* ---- Relatório Mensal (B3) ---- */
.rm-audit { margin: 8px 0 4px; }
.rm-audit-head { font-size: 13px; font-weight: 700; color: var(--fg-2); margin-bottom: 6px; }
.rm-audit .alert { margin: 6px 0; padding: 8px 12px; font-size: 12px; }
.rm-card-tools { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-bottom: 8px; }
.rm-card-tools .count { margin-right: auto; }
.rm-total-row td { font-weight: 700; background: var(--tone-eef2ff); }
.print-header { display: none; }

/* ---- Print A4 (C3) ---- */
@media print {
  /* PAISAGEM, sem fixar o papel. Declarar "A4" travava a folha: quem
     escolhesse A3 no diálogo recebia um A4 ampliado, com as mesmas quebras.
     Só a orientação é imposta — o tamanho vem do que o usuário escolher, e o
     conteúdo flui, porque as larguras são relativas. */
  @page { size: landscape; margin: 8mm; }
  .sidebar, .topbar, .no-print, .view-toolbar, .rm-card-tools { display: none !important; }
  /* Fixo na tela, corrido no papel — sticky no impresso repetiria o bloco a
     cada página. E a lista de arquivos lidos vai inteira, sem rolagem: o papel
     não tem barra para revelar o resto. */
  .fontes-header { position: static !important; }
  .fonte-card .fc-lidos ul { max-height: none !important; overflow: visible !important; }
  .app { display: block; }
  .main { padding: 0; max-width: none; }
  .print-header { display: block; font-size: 12px; color: var(--tone-000000); border-bottom: 1.5px solid #011689; padding-bottom: 6px; margin-bottom: 12px; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; }
  /* `!important` porque `plAjustarAltura` grava um `max-height` INLINE para a
     matriz caber na janela, e estilo inline vence folha. Sem isto a impressão
     saía cortada na altura da tela: 17 das 41 classes, e a página seguinte em
     branco — o papel não tem barra de rolagem para revelar o resto. */
  .table-scroll, .pl-scroll {
    max-height: none !important; overflow: visible !important; height: auto !important;
  }
  thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .alert { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a[href]::after { content: ""; }
}

/* ---- Print A4 paisagem (Issues · Evolução Cronológica) ----
   Ativado pelo botão da aba, que injeta `@page { size: A4 landscape }` e a
   classe .print-landscape no body. */
@media print {
  body.print-landscape .subtabs { display: none !important; }

  /* Os gráficos já são redimensionados para a largura do papel em
     `beforeprint` (charts.js) — aqui só garantimos que nada corte a borda. */
  body.print-landscape .ec-chart,
  body.print-landscape .ec-chart > div { overflow: visible !important; }
  body.print-landscape .card { break-inside: avoid; page-break-inside: avoid; }

  body.print-landscape .cards.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  body.print-landscape .kpi-pwbi { break-inside: avoid; page-break-inside: avoid; }
  body.print-landscape .kpi-pwbi .value { font-size: 20px; }
  body.print-landscape .kpi-pwbi .kpi-hint { font-size: 9px; }

  /* Tabela período a período: cabeçalho repetido a cada página e compacta. */
  body.print-landscape .table-wrap { break-inside: auto; page-break-inside: auto; }
  body.print-landscape thead { display: table-header-group; }
  body.print-landscape tbody tr { break-inside: avoid; page-break-inside: avoid; }
  body.print-landscape table { font-size: 10px; }
  body.print-landscape th, body.print-landscape td { padding: 4px 6px; }
}

/* ---- Verificação de Emissões ---- */
.emi-row:hover { background: var(--bg-hover, var(--tone-f3f4f6)); }
.emi-detail .mini-table { width: 100%; border-collapse: collapse; margin-top: 4px; background: var(--bg-card); }
.emi-detail .mini-table th,
.emi-detail .mini-table td { padding: 4px 8px; font-size: 12px; border-bottom: 1px solid #EEF0F3; text-align: left; }
.emi-detail .mini-table thead th { background: var(--tone-f3f4f6); color: var(--fg-2); font-weight: 600; }

/* ---- Planejamento de Entregas (reunião EDAF × SYSTRA) ----
   A matriz repete o desenho da planilha: as cores das células vêm do arquivo,
   por isso ficam no `style` inline; aqui mora só a forma. */

.pl-filtro { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-2); font-weight: 600; }
.pl-filtro select,
.pl-filtro input[type="search"] {
  font: inherit; font-weight: 400; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card);
}
.pl-filtro input[type="search"] { min-width: 200px; }
.pl-filtro select:focus,
.pl-filtro input:focus { border-color: var(--edaf-primary); outline: none; }

.pl-fonte {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: 11px; color: var(--fg-3); margin: -4px 0 14px 2px;
}

/* Composição de status por categoria (Civil × Sistemas) */
.pl-catcard { margin-bottom: 16px; }
.pl-catlinha { display: grid; grid-template-columns: 80px 1fr 150px; align-items: center; gap: 12px; margin-top: 8px; }
.pl-catnome { font-size: 12px; font-weight: 700; color: var(--fg-2); }
.pl-catwrap { display: flex; flex-direction: column; gap: 2px; }
.pl-catbar { display: flex; height: 20px; border-radius: var(--radius-sm); overflow: hidden; background: var(--tone-f3f4f6); }
.pl-catbar-seg {
  display: grid; place-items: center; min-width: 2px; cursor: pointer;
  color: #fff; font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
  transition: filter var(--t-fast);
}
.pl-catbar-seg:hover { filter: brightness(1.15); }
.pl-catlib { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--tone-e5e7eb); }
.pl-catlib-fill { height: 100%; }
.pl-catnum { font-size: 11px; color: var(--fg-3); font-family: 'JetBrains Mono', monospace; text-align: right; }

/* Legenda — recolhida por padrão, para a matriz ficar com a altura da tela. */
.pl-legenda-wrap { margin-bottom: 12px; padding: 10px 14px; }
.pl-legenda-wrap > summary {
  cursor: pointer; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--fg-3); list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.pl-legenda-wrap > summary::-webkit-details-marker { display: none; }
.pl-legenda-wrap > summary::before { content: '▸'; font-size: 10px; }
.pl-legenda-wrap[open] > summary::before { content: '▾'; }
.pl-legenda-wrap[open] > summary { margin-bottom: 12px; }
.pl-leg-hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--fg-3); opacity: .8; }
.pl-legenda { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; }
.pl-leg-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); font-weight: 700; margin-bottom: 8px; }
.pl-leg-lista { display: flex; flex-direction: column; gap: 6px; }
.pl-leg-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-2); }
.pl-leg-status-lista { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pl-leg-status { font-size: 12px; color: var(--fg-2); display: inline-flex; align-items: center; }
.pl-leg-nota { font-size: 11px; color: var(--fg-3); font-style: italic; margin-top: 10px; line-height: 1.45; }
.pl-leg-faixa { display: flex; width: 38px; height: 10px; border-radius: 2px; overflow: hidden; flex: 0 0 38px; }
.pl-leg-faixa i { display: block; }
.pl-leg-faixa-vazia { background: repeating-linear-gradient(45deg, var(--tone-e5e7eb) 0 3px, var(--tone-f9fafb) 3px 6px); }

/* Matriz.

   Congelamento em dois eixos: o cabeçalho gruda no topo e as três colunas de
   identificação grudam à esquerda. A ordem de empilhamento importa e é a causa
   do conflito que aparecia ao rolar — as células têm `position: relative` (para
   as marcas de canto) e, sem z-index no cabeçalho, passavam por cima dele.

     4  cabeçalho × coluna fixa (o canto, tem de vencer os dois)
     3  cabeçalho
     2  coluna fixa
     0  células comuns                                                        */
/* Reserva: o valor real é calculado por `plAjustarAltura` no primeiro quadro. */
.pl-scroll { max-height: 68vh; }
.pl-tabela { font-size: 12px; border-collapse: separate; border-spacing: 0; }
.pl-tabela thead th {
  vertical-align: bottom; padding: 6px 10px;
  position: sticky; top: 0; z-index: 3;
  background: var(--tone-f4f6f9);
  box-shadow: inset 0 -1px 0 var(--border);
}
.pl-tabela tbody td { padding: 4px 10px; max-width: none; border-bottom: 1px solid #F3F4F6; }

.pl-tabela .pl-fixa {
  position: sticky; z-index: 2;
  background: var(--bg-card);
  box-shadow: inset -1px 0 0 var(--border-soft);
}
.pl-tabela thead th.pl-fixa { z-index: 4; background: var(--tone-f4f6f9); }
.pl-tabela .pl-descricao.pl-fixa { box-shadow: inset -1px 0 0 var(--border); }
/* A cor de fundo da linha tem de valer também nas colunas congeladas, senão
   elas ficam brancas enquanto o resto da linha está destacado. */
.pl-linha:hover .pl-fixa { background: var(--bg-hover); }
.pl-linha-sel .pl-fixa { background: var(--tone-eef2ff); }
.pl-grupo .pl-fixa { background: var(--edaf-azul-dark); box-shadow: none; }

.pl-th-entregavel { text-align: center !important; padding: 6px 4px !important; min-width: 48px; }
.pl-th-ordem { font-size: 9px; color: var(--fg-muted); font-weight: 500; }
.pl-th-sigla { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--fg-1); }
/* Totalizador da coluna. Discreto de propósito: é referência de leitura, não
   um dado a competir com os números das células. */
.pl-th-total {
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-muted);
}
.pl-th-total-zero { opacity: .35; font-weight: 400; }
/* Pacote contratual da coluna. Só aparece onde o Anexo 17A o fixa. */
.pl-th-pacote { margin-top: 1px; font-size: 9px; font-weight: 600; color: var(--fg-muted); letter-spacing: .2px; }
/* O que o número das quadrículas está contando, na barra da tabela. */
.pl-metrica { margin-left: 10px; font-size: 11px; color: var(--fg-3); font-family: 'JetBrains Mono', monospace; }
/* Seletor do que a quadrícula conta — encostado na matriz que ele governa. */
.pl-metrica-ctrl { display: inline-flex; align-items: center; gap: 6px; margin-left: 16px; font-size: 11px; color: var(--fg-3); }

/* Faixa de números do plano — recolhível, para dar altura à matriz. */
.pl-resumo-wrap { margin-bottom: 12px; }
.pl-resumo-wrap > summary { cursor: pointer; list-style: none; }
.pl-resumo-wrap > summary::-webkit-details-marker { display: none; }
.pl-resumo-extra { padding: 0 14px 12px; }

/* Documentos que o PW tem e a matriz não mostra. */
.pl-fora { margin-top: 8px; }
.pl-fora > summary { cursor: pointer; font-size: 12px; color: #B45309; }
.pl-fora-resumo { color: var(--fg-3); }
.pl-fora-corpo { margin-top: 8px; }
.pl-fora-tab { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 8px; }
.pl-fora-tab th, .pl-fora-tab td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.pl-fora-tab th { color: var(--fg-3); font-weight: 600; }

/* Totalizador da lista de documentos do detalhamento. */
.pl-doc-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.pl-doc-totais { font-size: 11px; color: var(--fg-3); font-family: 'JetBrains Mono', monospace; }
.pl-doc-total-item { margin-left: 10px; }

/* Total geral da matriz, na barra da tabela. */
.pl-total-geral { font-size: 11px; color: var(--fg-2); font-family: 'JetBrains Mono', monospace; margin-right: 14px; }

/* Linha e quadrícula que nasceram do cadastro, não da planilha. Discretas: são
   dado legítimo, só não estavam previstas — não são erro a corrigir na tela. */
.pl-linha-fora td:first-child, .pl-linha-fora .pl-fixa { border-left: 3px solid #B45309; }
.pl-linha-fora .pl-doc { color: #B45309; }
.pl-cell-div .pl-cell-flag { color: #B45309; }
/* Item de legenda cujo elemento está desligado na matriz. */
.pl-leg-item-off { opacity: .55; }

.pl-grupo td { background: var(--edaf-azul-dark); color: #fff; font-size: 12px; padding: 5px 12px !important; letter-spacing: 0.03em; white-space: nowrap; }
.pl-grupo td b { font-size: 13px; }

.pl-linha:hover { background: var(--bg-hover); }
.pl-linha-sel { background: var(--tone-eef2ff) !important; box-shadow: inset 3px 0 0 var(--edaf-secondary); }
.pl-doc { font-weight: 700; color: var(--edaf-secondary); }
.pl-doc .link-btn { font-family: 'JetBrains Mono', monospace; }
.pl-nota-marca { font-size: 10px; margin-left: 4px; }
.pl-descricao { overflow: hidden; }
.pl-descricao span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-vazio { text-align: center; color: var(--fg-3); padding: 20px !important; font-style: italic; }
.pl-na { color: var(--border-soft); }
.pl-na-txt { color: var(--fg-muted); }

/* Célula-entregável: plano (cor de fundo) + realidade (as duas faixas). */
.pl-td-cell { text-align: center; padding: 3px !important; }
.pl-cell {
  position: relative; display: inline-block; width: 44px; padding: 3px 4px 0;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.pl-cell:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.pl-cell-txt { display: block; height: 14px; line-height: 14px; }
.pl-cell-faixa,
.pl-cell-lib { display: flex; margin-top: 2px; border-radius: 1px; overflow: hidden; }
.pl-cell-faixa { height: 4px; }
.pl-cell-lib { height: 3px; margin-bottom: 3px; }
.pl-cell-faixa i,
.pl-cell-lib i { display: block; min-width: 1px; }
/* Prevista = preenchida na planilha, mas ainda sem sigla: hachura leve. */
.pl-cell-prevista {
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.6) 0 4px, transparent 4px 8px);
}
.pl-cell-div { box-shadow: inset 0 0 0 1px #B45309; }
.pl-cell-sel { outline: 2px solid var(--edaf-secondary); outline-offset: 1px; }
.pl-cell-mini { width: 38px; cursor: default; padding-bottom: 3px; }
.pl-cell-mini:hover { transform: none; box-shadow: none; }
.pl-cell-flag { position: absolute; top: -6px; right: -4px; font-size: 9px; color: #B45309; font-weight: 700; }
.pl-cell-nota { position: absolute; top: -7px; left: -2px; font-size: 14px; line-height: 1; color: var(--edaf-secondary); }

/* Blocos extras do tooltip global reaproveitado pela matriz. */
.chart-tooltip .tt-sep { height: 1px; background: rgba(255,255,255,0.15); margin: 6px 0; }
.chart-tooltip .tt-doc { font-family: 'JetBrains Mono', monospace; font-size: 10px; opacity: 0.85; margin-top: 2px; }
.chart-tooltip .tt-alerta { margin-top: 6px; color: #FBBF24; font-size: 11px; font-weight: 600; }
.chart-tooltip .tt-nota { margin-top: 4px; font-size: 11px; line-height: 1.35; max-width: 380px; white-space: normal; }

/* ---- Painel de detalhamento ---- */
.pl-painel-slot { margin-top: 16px; }
.pl-painel { border-top: 3px solid var(--edaf-secondary); }
.pl-painel-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.pl-painel-head > div:first-child { flex: 1; }
.pl-painel-titulo { font-size: 16px; font-weight: 700; color: var(--edaf-secondary); font-family: 'JetBrains Mono', monospace; }
.pl-painel-sub { font-family: 'Inter', sans-serif; font-weight: 500; color: var(--fg-2); font-size: 14px; }
.pl-modal-x { border: none; background: none; cursor: pointer; font-size: 15px; color: var(--fg-3); }
.pl-modal-x:hover { color: var(--critical); }

.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pl-chip {
  font-size: 11px; color: var(--fg-2); background: var(--bg-page);
  border: 1px solid var(--border-soft); border-radius: 10px; padding: 2px 9px;
}
.pl-chip b { color: var(--fg-3); font-weight: 600; }

.pl-pills { margin-bottom: 12px; }

.pl-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.pl-kpi {
  flex: 1 1 120px; background: var(--bg-page); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: 8px 12px; border-top: 3px solid var(--border);
}
.pl-kpi-valor { font-size: 20px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--fg-1); }
.pl-kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-3); font-weight: 600; }
.pl-kpi-ok     { border-top-color: var(--st-definido); }
.pl-kpi-lib    { border-top-color: #0891B2; }
.pl-kpi-alerta { border-top-color: var(--warning); }

.pl-doc-wrap { margin-top: 4px; }
.pl-doc-scroll { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.pl-doctabela { font-size: 12px; min-width: 1500px; }
.pl-doctabela thead th { padding: 7px 10px; white-space: nowrap; }
.pl-doctabela tbody td { padding: 6px 10px; max-width: 300px; }
.pl-docrow:hover { background: var(--bg-hover); }
.pl-titulo-doc { max-width: 300px !important; }
.pl-folder { max-width: 150px !important; font-size: 11px; color: var(--fg-3); }
.pl-ruim { color: #B91C1C; font-weight: 700; }
.pl-dep { color: var(--warning); }
.pl-exp { border: none; background: none; cursor: pointer; color: var(--fg-3); font-size: 11px; padding: 0 2px; }
.pl-exp:hover { color: var(--edaf-secondary); }
.pl-th-exp { width: 22px; }
.pl-assin-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; cursor: help;
  background: var(--tone-eef2ff); color: var(--edaf-secondary); border-radius: 8px; padding: 1px 7px; font-weight: 700;
}

.pl-emirow > td { background: var(--tone-fafbfc); padding: 10px 14px !important; }
.pl-ciclo .mini-table { width: 100%; border-collapse: collapse; background: var(--bg-card); }
.pl-ciclo .mini-table th,
.pl-ciclo .mini-table td { padding: 4px 8px; font-size: 11px; border-bottom: 1px solid #EEF0F3; text-align: left; white-space: nowrap; }
.pl-ciclo .mini-table thead th { background: var(--tone-f3f4f6); color: var(--fg-2); font-weight: 600; }
.pl-aviso { margin-top: 8px; font-size: 12px; color: #92400E; background: var(--tone-fef3c7); border-radius: var(--radius-sm); padding: 6px 10px; }
.pl-aviso-neutro { color: var(--fg-2); background: var(--tone-eef2ff); }

/* Anotações, dentro do painel */
.pl-anot { margin-top: 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-page); }
.pl-anot > summary { cursor: pointer; padding: 10px 14px; font-size: 13px; color: var(--fg-2); user-select: none; }
.pl-anot > summary:hover { color: var(--edaf-secondary); }
.pl-anot-marca { margin-left: 8px; font-size: 10px; background: var(--edaf-secondary); color: #fff; border-radius: 8px; padding: 1px 7px; }
.pl-anot-corpo { padding: 0 14px 14px; }
.pl-anot-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

.pl-form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.pl-form-campo { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pl-form-campo label { font-size: 11px; font-weight: 700; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; }
.pl-form-campo textarea,
.pl-form-campo input {
  font: inherit; font-size: 13px; padding: 7px 9px; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--fg-1);
}
.pl-form-campo textarea:focus,
.pl-form-campo input:focus { border-color: var(--edaf-primary); outline: none; }
.pl-form-linha { display: flex; gap: 12px; }
.pl-form-meta { font-size: 11px; color: var(--fg-3); font-style: italic; margin-top: 8px; }

/* Abas por categoria (Civil / Sistemas) — as duas tabelas são isoladas. */
.pl-abas { display: flex; gap: 8px; margin: 4px 0 14px; border-bottom: 2px solid var(--border-soft); }
.pl-aba {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  border: none; background: none; cursor: pointer; padding: 8px 16px 10px;
  border-bottom: 3px solid transparent; margin-bottom: -2px; color: var(--fg-3);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.pl-aba b { font-size: 14px; color: var(--fg-2); }
.pl-aba span { font-size: 11px; }
.pl-aba:hover { color: var(--edaf-primary); }
.pl-aba:hover b { color: var(--edaf-primary); }
.pl-aba.active { border-bottom-color: var(--edaf-secondary); color: var(--edaf-secondary); }
.pl-aba.active b { color: var(--edaf-secondary); }
.pl-aba-vazia b { color: var(--fg-muted); font-weight: 500; }
.pl-aba-vazia span { font-style: italic; }

/* Faixa de resumo do plano da categoria (não confundir com o universo). */
.pl-resumo-faixa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: 9px 14px; margin-bottom: 14px;
  font-size: 12px; color: var(--fg-3);
}
.pl-resumo-titulo { font-weight: 700; color: var(--edaf-secondary); font-size: 12px; }
.pl-resumo-item { display: inline-flex; align-items: center; gap: 4px; }
.pl-resumo-item b { color: var(--fg-1); font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.pl-resumo-sep { width: 1px; height: 16px; background: var(--border-soft); }

/* Categoria esperada cujo plano ainda não existe na planilha. */
.pl-ausente { border-top: 3px dashed var(--border); }
.pl-ausente-titulo { font-size: 15px; font-weight: 700; color: var(--fg-2); margin-bottom: 8px; }
.pl-ausente p { font-size: 13px; color: var(--fg-2); margin-bottom: 8px; line-height: 1.5; }
.pl-ausente-passos { font-size: 13px; color: var(--fg-2); line-height: 1.7; padding-left: 20px; margin-bottom: 8px; }
.pl-ausente-passos code {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  background: var(--bg-page); border: 1px solid var(--border-soft); border-radius: 3px; padding: 1px 5px;
}

/* ---- Verificações sobre as análises ---- */
.pl-verif-chips { display: inline-flex; gap: 6px; margin-left: 6px; }
.pl-verif-chip {
  font-size: 11px; border-radius: 8px; padding: 1px 8px; font-weight: 600;
  border: 1px solid transparent;
}
.pl-verif-chip b { font-family: 'JetBrains Mono', monospace; }
.pl-verif-chip.pl-verif-critico { background: var(--tone-fee2e2); color: #B91C1C; border-color: #FCA5A5; }
.pl-verif-chip.pl-verif-alerta  { background: var(--tone-fef3c7); color: #92400E; border-color: #FCD34D; }
.pl-verif-chip.pl-verif-aviso   { background: var(--tone-f3f4f6); color: var(--tone-4b5563); border-color: var(--tone-e5e7eb); }
.pl-verif-ok { font-size: 11px; color: #15803D; font-weight: 600; }

/* Marca no canto da célula: a severidade mais grave daquele entregável. */
.pl-cell-verif {
  position: absolute; right: -2px; bottom: -2px;
  width: 0; height: 0; border-style: solid;
  border-width: 0 0 8px 8px; border-color: transparent;
}
.pl-cell-verif-critico { border-bottom-color: #DC2626; background: #DC2626; }
.pl-cell-verif-alerta  { border-bottom-color: #F59E0B; background: #F59E0B; }
.pl-cell-verif-aviso   { border-bottom-color: #9CA3AF; background: #9CA3AF; }
.pl-leg-faixa-nenhuma { gap: 1px; }

.pl-verif-bloco {
  margin: 4px 0 14px; border: 1px solid var(--border-soft);
  border-left: 3px solid var(--warning); border-radius: var(--radius-md); background: var(--tone-fffbeb);
}
.pl-verif-bloco > summary { cursor: pointer; padding: 10px 14px; font-size: 13px; color: var(--fg-2); user-select: none; }
.pl-verif-bloco > summary:hover { color: var(--edaf-secondary); }
.pl-verif-corpo { padding: 0 14px 14px; }
.pl-verif-vazio {
  border-left-color: var(--success); background: var(--tone-f0fdf4);
  padding: 10px 14px; font-size: 13px; color: #15803D;
}
.pl-verif-doc { margin-top: 10px; }
.pl-verif-doc-cod { font-size: 12px; color: var(--fg-3); font-family: 'JetBrains Mono', monospace; }
.pl-verif-doc-cod b { color: var(--edaf-secondary); }
.pl-verif-doc ul { list-style: none; margin-top: 4px; }
.pl-verif-item {
  font-size: 12px; color: var(--fg-2); line-height: 1.5;
  padding: 4px 0 4px 10px; border-left: 2px solid transparent;
}
.pl-verif-item.pl-verif-critico { border-left-color: #DC2626; }
.pl-verif-item.pl-verif-alerta  { border-left-color: #F59E0B; }
.pl-verif-item.pl-verif-aviso   { border-left-color: #9CA3AF; }
.pl-verif-tag {
  display: inline-block; min-width: 52px; margin-right: 8px;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
}
.pl-verif-item.pl-verif-critico .pl-verif-tag { color: #B91C1C; }
.pl-verif-item.pl-verif-alerta  .pl-verif-tag { color: #92400E; }
.pl-verif-item.pl-verif-aviso   .pl-verif-tag { color: var(--tone-6b7280); }

@media (max-width: 1100px) {
  .pl-legenda { grid-template-columns: 1fr; }
  .pl-catlinha { grid-template-columns: 70px 1fr; }
  .pl-catnum { grid-column: 2; text-align: left; }
}

/* ---- Notas de versão (rodapé da barra lateral) ---- */
.versao-btn {
  display: block; margin-top: 8px; padding: 3px 8px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; color: #8DA4CC; font: inherit; font-size: 10px;
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.versao-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
.versao-btn span { font-family: 'JetBrains Mono', monospace; font-weight: 700; }

.notas-modal { width: min(720px, 100%); }
.notas-lista { display: flex; flex-direction: column; gap: 16px; }
.notas-item { border-left: 3px solid var(--border-soft); padding-left: 12px; }
.notas-item.atual { border-left-color: var(--edaf-primary); }
.notas-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.notas-versao { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; color: var(--edaf-secondary); }
.notas-titulo { font-size: 13px; font-weight: 600; color: var(--fg-1); flex: 1; }
.notas-data { font-size: 11px; color: var(--fg-3); }
.notas-atual { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; background: var(--edaf-primary); color: #fff; border-radius: 8px; padding: 1px 7px; font-weight: 700; }
.notas-item ul { list-style: none; }
.notas-item li { font-size: 12px; color: var(--fg-2); line-height: 1.55; padding-left: 14px; position: relative; }
.notas-item li::before { content: '·'; position: absolute; left: 4px; color: var(--fg-muted); font-weight: 700; }

/* Filtro de responsabilidade (Planejamento + Relatório de Progresso) */
.pl-filtro-hint { font-size: 11px; color: var(--fg-3); font-style: italic; }
.pl-resumo-filtrado {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--tone-fef3c7); color: #92400E; border-radius: 8px; padding: 1px 8px; font-weight: 700;
}

/* ---- Modal genérico (notas de versão) ----
   Vive fora da aba de Planejamento, por isso não usa o prefixo `pl-`: quando o
   modal de anotações virou painel inline, o CSS `.pl-modal` saiu junto e levou
   esta janela com ele. Nomes próprios evitam a repetição do acidente. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(17, 24, 39, 0.45);
  display: grid; place-items: center; padding: 24px;
}
.modal-caixa {
  background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal);
  width: min(680px, 100%); max-height: 88vh; display: flex; flex-direction: column;
}
.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-soft);
}
.modal-head b { flex: 1; font-size: 14px; color: var(--edaf-secondary); }
.modal-x { border: none; background: none; cursor: pointer; font-size: 15px; color: var(--fg-3); line-height: 1; }
.modal-x:hover { color: var(--critical); }
.modal-body { padding: 16px 18px; overflow: auto; }

.pl-catcancel { color: var(--fg-muted); }

/* ---- Resumo da reunião ---- */
.pl-aba-resumo b { color: var(--edaf-primary); }
.pl-aba-resumo.active b { color: var(--edaf-secondary); }

.res-wrap { display: flex; flex-direction: column; gap: 16px; }
.res-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: 10px 14px;
}
.res-toolbar .spacer { flex: 1; }
.res-toolbar select {
  font: inherit; font-size: 12px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card);
}
.res-cabecalho h2 { font-size: 20px; color: var(--edaf-secondary); font-weight: 700; }
.res-sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; }

.res-bloco { display: flex; flex-direction: column; gap: 10px; }
.res-bloco-cab { display: flex; align-items: baseline; gap: 12px; }
.res-bloco-cab h3 { font-size: 15px; color: var(--fg-1); font-weight: 700; flex: 1; }
.res-bloco-cab span { font-size: 11px; color: var(--fg-3); }

/* Calendário */
.res-cal-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-card); }
.res-cal-svg { display: block; }
.res-cal-legenda { display: flex; flex-wrap: wrap; gap: 14px; }

/* Recolher os meses passados: o botão faz o lote, o título de cada mês faz o
   mês. A dica fica ao lado porque um clique no título de um mês não se
   descobre sozinho. */
.res-cal-ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.res-cal-ctrl .pl-filtro-hint { flex: 1 1 260px; }

/* Reagendamento em janela. Estreita de propósito: ela é um formulário de dois
   campos sobre o calendário, não um segundo detalhamento. */
.res-rg-modal { width: min(540px, 100%); }
.res-rg { display: flex; flex-direction: column; gap: 12px; }
.res-rg-alvo { display: flex; flex-direction: column; gap: 2px; }
.res-rg-alvo b { font-size: 14px; color: var(--edaf-secondary); }
.res-rg-alvo span { font-size: 12px; color: var(--fg-3); }
.res-rg .pl-chips { margin-top: 0; align-items: center; }
.res-rg .pl-chip .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.res-rg-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.res-rg-acoes .spacer { flex: 1; }
.res-rg-grupo { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.res-sem-previsao { border-top: 1px solid var(--border-soft); padding-top: 8px; }
.res-sem-previsao > summary { cursor: pointer; font-size: 13px; color: var(--fg-2); padding: 4px 0; }
.res-sem-lista { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.res-sem-item {
  display: grid; grid-template-columns: 150px 240px 1fr; gap: 10px; align-items: baseline;
  padding: 5px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px;
}
.res-sem-item:hover { background: var(--bg-hover); }

/* Compromissos */
.res-data { border-left: 3px solid var(--border); padding-left: 12px; }
.res-data.atrasada { border-left-color: var(--critical); }
.res-data-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.res-data-cab b { font-size: 14px; color: var(--edaf-secondary); }
.res-data-dist { font-size: 11px; color: var(--fg-3); }
.res-data-n { font-size: 11px; color: var(--fg-muted); margin-left: auto; }
.res-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.res-item {
  border: 1px solid var(--border-soft); border-left: 3px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; background: var(--bg-card);
}
.res-item:hover { background: var(--bg-hover); }
.res-item-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.res-alvo { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--edaf-secondary); }
.res-sit { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; border-radius: 8px; padding: 1px 7px; font-weight: 700; margin-left: auto; }
.res-desc { font-size: 12px; color: var(--fg-2); }
.res-nota { font-size: 12px; color: var(--fg-2); font-style: italic; margin-top: 3px; }
.res-pw { font-size: 10px; color: var(--fg-3); font-family: 'JetBrains Mono', monospace; margin-top: 4px; }

/* Assuntos recorrentes */
.res-tema { border-left: 3px solid var(--edaf-primary); padding-left: 12px; }
.res-tema-cab { display: flex; align-items: baseline; gap: 8px; }
.res-tema-n { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--edaf-primary); font-size: 14px; }
.res-tema-campo { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); font-weight: 700; }
.res-tema-texto { font-size: 13px; color: var(--fg-1); margin: 3px 0 6px; }
.res-tema-alvos { display: flex; flex-wrap: wrap; gap: 5px; }
.res-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; cursor: pointer;
  background: var(--tone-eef2ff); color: var(--edaf-secondary); border: 1px solid #C7D2FE;
  border-radius: 8px; padding: 1px 8px;
}
.res-chip:hover { background: var(--edaf-secondary); color: #fff; }
.res-campo { margin-bottom: 12px; display: flex; flex-direction: column; gap: 5px; }

/* Histórico de uma anotação */
.pl-hist { margin-top: 10px; border-top: 1px solid var(--border-soft); padding-top: 8px; }
.pl-hist > summary { cursor: pointer; font-size: 12px; color: var(--fg-3); }
.pl-hist-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pl-hist-item { border-left: 2px solid var(--border); padding-left: 10px; font-size: 12px; }
.pl-hist-item.atual { border-left-color: var(--edaf-primary); }
.pl-hist-cab { display: flex; align-items: baseline; gap: 8px; color: var(--fg-3); font-size: 11px; }
.pl-hist-cab b { color: var(--fg-2); font-family: 'JetBrains Mono', monospace; }
.pl-hist-atual { background: var(--edaf-primary); color: #fff; border-radius: 8px; padding: 0 6px; font-size: 9px; font-weight: 700; }
.pl-hist-item ul { list-style: none; margin-top: 2px; }
.pl-hist-item li { color: var(--fg-2); line-height: 1.45; }
.pl-hist-item li b { color: var(--fg-3); font-weight: 600; }
.pl-hist-vazia { color: var(--fg-muted); font-style: italic; }

/* Impressão do resumo (Exportar PDF) */
@media print {
  body.print-resumo .sidebar,
  body.print-resumo .topbar,
  body.print-resumo .pl-abas,
  body.print-resumo .no-print,
  body.print-resumo .cards,
  body.print-resumo .pl-catcard,
  body.print-resumo .pl-fonte,
  body.print-resumo .view-toolbar { display: none !important; }
  body.print-resumo .app { display: block; }
  body.print-resumo .main { padding: 0; max-width: none; overflow: visible; }
  body.print-resumo .res-bloco,
  body.print-resumo .res-data,
  body.print-resumo .res-tema,
  body.print-resumo .res-item { break-inside: avoid; page-break-inside: avoid; }
  body.print-resumo .res-cal-wrap { overflow: visible; }
  body.print-resumo .card { box-shadow: none; border: 1px solid #ccc; }
  body.print-resumo details { display: block; }
  body.print-resumo details > summary { list-style: none; }
  body.print-resumo .res-sem-previsao[open] .res-sem-lista { display: flex; }
}

.res-congelado {
  margin-left: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--tone-e0e7ff); color: var(--edaf-secondary); border: 1px solid #C7D2FE;
  border-radius: 8px; padding: 2px 8px; font-weight: 700; vertical-align: middle;
}
.res-aguardando { border-top: 1px solid var(--border-soft); padding-top: 8px; }
.res-aguardando > summary { cursor: pointer; font-size: 13px; color: var(--fg-2); padding: 4px 0; }
.res-aguardando-fora {
  margin-left: 8px; font-size: 10px; background: var(--tone-fee2e2); color: #B91C1C;
  border-radius: 8px; padding: 1px 7px; font-weight: 700;
}
.res-aguardando-item { grid-template-columns: 150px 220px 56px 1fr; }
.res-espera {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  color: #15803D; text-align: right;
}
.res-espera.estourado { color: #B91C1C; }

.res-orfas { margin-top: 8px; border-left: 3px solid var(--warning); padding-left: 10px; }
.res-orfas > summary { cursor: pointer; font-size: 12px; color: #92400E; }
.res-orfas .res-sem-item { grid-template-columns: 240px 1fr 200px; cursor: default; }
.res-orfas .res-sem-item:hover { background: none; }

/* ===== Planejamento Macro (curva física de projetos, BSC 1.6) ===== */

.pm-controles {
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.pm-grupo { display: flex; flex-direction: column; gap: 6px; }
.pm-grupo-largo { flex: 1 1 320px; }
.pm-grupo > label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg-3);
}
.pm-recorte { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pm-recorte select {
  font-family: inherit; font-size: 12px; padding: 5px 8px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--bg-card); color: inherit;
}
.pm-pill-base { font-weight: 700; }

/* A árvore da EAP: a indentação é o que faz a hierarquia ser lida de relance. */
.pm-arvore td:nth-child(2) { min-width: 260px; }
.pm-arvore tr.pm-n3 td { font-weight: 700; background: var(--tone-f9fafb); }
.pm-arvore tr.pm-n4 td:nth-child(2) { padding-left: 18px; font-weight: 600; }
.pm-arvore tr.pm-n5 td:nth-child(2) { padding-left: 34px; }
.pm-arvore tr.pm-n6 td:nth-child(2) { padding-left: 50px; }
.pm-arvore tr.pm-clicavel { cursor: pointer; }
.pm-arvore tr.pm-clicavel:hover td { background: var(--tone-eff6ff); }
.pm-arvore .num, .pm-itens .num { text-align: right; }

.pm-barra {
  position: relative; height: 16px; min-width: 110px;
  background: var(--tone-f3f4f6); border-radius: 8px; overflow: hidden;
  /* Explícito e abaixo do cabeçalho (z-index 2). O `position: relative` aqui
     serve para posicionar o preenchimento, não para subir na pilha. */
  z-index: 0;
}
.pm-barra-fill { position: absolute; inset: 0 auto 0 0; border-radius: 8px; }
.pm-barra span {
  position: relative; display: block; text-align: center; line-height: 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  color: var(--tone-1f2937);
}

/* Por disciplina: a mesma massa da árvore, com a EAP 4.1/4.2 como chave. A
   hierarquia aqui tem três degraus só — ramo, disciplina, etapa —, e quem
   distingue os dois últimos é a seta, não a indentação: a coluna do meio já
   carrega nome e complemento, e indentar demais empurraria tudo para fora. */
.pm-disc td:nth-child(2) { min-width: 300px; }
.pm-disc tr.pm-disc-ramo td {
  font-weight: 700; background: var(--tone-f9fafb); border-top: 2px solid var(--border-soft);
}
.pm-disc tr.pm-disc-item { cursor: pointer; }
.pm-disc tr.pm-disc-item:hover td { background: var(--tone-eff6ff); }
.pm-disc tr.pm-disc-item td:nth-child(2) { font-weight: 600; padding-left: 18px; }
.pm-disc-caret { display: inline-block; width: 10px; color: var(--fg-3); }
.pm-disc tr.pm-disc-item.aberta .pm-disc-caret { transform: rotate(90deg); }
.pm-disc-letras { color: var(--fg-3); letter-spacing: .08em; }
.pm-disc tr.pm-disc-etapa td { background: var(--tone-fcfcfd); }
/* Quebra de linha, não reticências: o complemento (disciplina, classe, pacote)
   é justamente o que distingue duas etapas de mesma letra — o 4.1.9 tem quatro
   "Fôrmas", "Armação", "Pré-moldado" e "Furos e embutidos" dentro dele. Cortado
   no meio, ele deixa de distinguir e a linha vira ruído. */
.pm-disc tr.pm-disc-etapa td:nth-child(2) {
  padding-left: 40px; white-space: normal; line-height: 1.45;
}
.pm-disc-letra {
  display: inline-block; min-width: 18px; margin-right: 6px; padding: 0 4px;
  border-radius: 4px; background: var(--edaf-primary); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  text-align: center;
}
.pm-disc-compl { color: var(--fg-3); font-size: 11px; }
.pm-disc .num { text-align: right; }

.pm-detalhe-bloco {
  border-top: 2px solid var(--edaf-primary); background: var(--tone-fafbff); padding: 10px 12px;
}
.pm-itens { font-size: 12px; width: 100%; }
.pm-itens th { position: sticky; top: 0; background: var(--tone-f9fafb); z-index: 1; }

.pm-recolhivel > summary {
  cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 13px;
  list-style: none;
}
.pm-recolhivel > summary::before { content: '▸ '; color: var(--fg-3); }
.pm-recolhivel[open] > summary::before { content: '▾ '; }
.pm-recolhivel > summary::-webkit-details-marker { display: none; }
.pm-asbuilt { padding: 0 14px 14px; }
.pm-ab-grupo > summary { cursor: pointer; font-size: 12px; padding: 6px 0; font-weight: 600; }

.pm-nota { margin: 10px 0; font-size: 12px; }
.pm-nota pre {
  margin: 4px 0 0; padding: 8px 10px; background: var(--tone-f9fafb);
  border-left: 3px solid var(--border-soft); border-radius: 0 4px 4px 0;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  white-space: pre-wrap; color: var(--fg-2);
}

/* ===== EAP / Avanço ===== */

.eap-tabela td:nth-child(2) { min-width: 200px; }
.eap-tabela .num { text-align: right; }
.eap-tabela tr.eap-clicavel { cursor: pointer; }
.eap-tabela tr.eap-clicavel:hover td { background: var(--bg-hover); }
.eap-tabela tr.eap-vazia td { color: var(--fg-muted); }
.eap-nulo { color: var(--fg-muted); font-size: 11px; }
.eap-cancelado td { color: var(--fg-muted); text-decoration: line-through; }
.eap-fora { margin: 8px 0 0 18px; font-size: 12px; color: var(--fg-2); }
.eap-fora li { margin: 2px 0; }

/* ===== Fontes de Dados: o estado da fonte é a primeira coisa a se ler ===== */

.fc-estado {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; margin-bottom: 6px;
}
.fc-linhas {
  font-size: 12px; color: var(--fg-2); margin: 6px 0;
  padding: 5px 8px; background: var(--bg-page); border-radius: var(--radius-sm);
}
.fc-linhas b { font-family: 'JetBrains Mono', monospace; }
.fc-alerta {
  margin-top: 8px; padding: 6px 9px; font-size: 11px; line-height: 1.4;
  background: var(--tone-fef3c7); color: #92400E; border-radius: var(--radius-sm);
}
.fc-alerta.erro { background: var(--tone-fee2e2); color: #991B1B; }

/* A borda esquerda repete o estado, para o cartão se ler de longe. */
.fonte-card.fonte-velha   { border-left: 3px solid var(--warning); }
.fonte-card.fonte-travada { border-left: 3px solid var(--warning); }
.fonte-card.fonte-falha,
.fonte-card.fonte-vazia,
.fonte-card.fonte-ausente { border-left: 3px solid var(--critical); }
.fonte-card.fonte-ok      { border-left: 3px solid var(--success); }
.fonte-card.fonte-atalho  { border-left: 3px solid var(--border); opacity: .8; }

.eap-vencida { color: var(--critical); font-weight: 700; }
.fonte-card.fonte-ociosa { border-left: 3px solid var(--fg-muted); }

/* ===== Referências: catálogo navegável ===== */

.ref-busca {
  flex: 1 1 320px; max-width: 480px;
  font-family: inherit; font-size: 13px; padding: 7px 11px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); color: inherit;
}
.ref-busca:focus { outline: 2px solid var(--edaf-primary); outline-offset: -1px; }

.ref-bloco { margin-bottom: 10px; }
.ref-bloco > summary {
  cursor: pointer; padding: 11px 14px; list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.ref-bloco > summary::-webkit-details-marker { display: none; }
.ref-bloco > summary::before { content: '▸'; color: var(--fg-3); font-size: 11px; }
.ref-bloco[open] > summary::before { content: '▾'; }
.ref-titulo { font-size: 13px; font-weight: 600; }
.ref-conta {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--fg-3); background: var(--bg-page);
  padding: 1px 7px; border-radius: 9999px;
}
.ref-nota {
  padding: 0 14px 10px; font-size: 12px; line-height: 1.5; color: var(--fg-3);
}
.ref-tabela { font-size: 12px; width: 100%; }
.ref-tabela th { position: sticky; top: 0; background: var(--bg-page); z-index: 1; }
.ref-tabela td { vertical-align: top; }
.ref-tabela tr.ref-clicavel { cursor: pointer; }
.ref-tabela tr.ref-clicavel:hover td { background: var(--bg-hover); }
.ref-pill {
  display: inline-block; padding: 2px 10px; border-radius: 10px;
  color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap;
}

/* ============ INTERFACE v1.0 — sprite, grupos, atalhos ============ */

/* O sprite não desenha nada: ele só guarda os símbolos. */
.ui-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-svg {
  width: 1em; height: 1em; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none; flex: none;
}

/* Rótulo de grupo da barra lateral. Treze itens planos eram o limite.
   A cor era #5E7399 — azul-acinzentado sobre um fundo azul quase preto, algo
   como 3:1 de contraste. Para 9,5px em caixa alta e com espaçamento aberto
   isso não se lê: o texto pequeno é o que mais precisa de contraste, não o
   que menos. Clareado para ~9:1, com uma linha fina que separa os grupos sem
   depender de enxergar a palavra. */
.nav-grupo {
  margin: 15px 12px 5px; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #A9C0E4;
  padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.nav-grupo:first-child { margin-top: 2px; padding-top: 0; border-top: 0; }

.sidebar nav a .nav-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; font-size: 17px; opacity: .85;
}
.sidebar nav a.active .nav-icone { opacity: 1; }
.sidebar nav a .nav-txt { flex: 1; min-width: 0; }

/* O número do atalho fica visível: atalho que ninguém descobre não existe. */
.sidebar nav a kbd {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px; color: #6E86AD;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09);
  opacity: 0; transition: opacity var(--t-fast);
}
.sidebar nav:hover a kbd,
.sidebar nav a.active kbd { opacity: 1; }
.sidebar nav a.active kbd { color: #C9DBF5; }

.sidebar .footer .versao-btn svg { vertical-align: -2px; margin-right: 3px; }

/* ---- Barra de comando: 48 px, a mesma em toda aba ---- */
.view-toolbar {
  min-height: 48px; box-sizing: border-box;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 6px 12px; margin-bottom: 14px;
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  position: sticky; top: 0; z-index: 20;
}
.view-toolbar .btn-action svg { vertical-align: -2px; margin-right: 4px; }

/* ---- Cartão dos atalhos ---- */
.atalhos-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.atalhos-item { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.atalhos-item kbd {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  background: var(--bg-page); border: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
}
.atalhos-item span { color: var(--fg-2); }

/* ---- Foco visível: navegar por teclado exige ver onde se está ---- */
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--edaf-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Seções recolhíveis: a aba deixa de ser uma rolagem única ---- */
.secao { margin: 0 0 10px; }
.secao > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 14px; margin: 0;
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  transition: var(--t-fast);
}
.secao > summary::-webkit-details-marker { display: none; }
.secao > summary::before {
  content: '▸'; color: var(--fg-3); font-size: 11px; align-self: center;
}
.secao[open] > summary::before { content: '▾'; }
.secao > summary:hover { background: var(--bg-hover); }
.secao[open] > summary { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.secao-titulo { font-size: 14px; font-weight: 700; color: var(--edaf-secondary); }
.secao-nota { font-size: 11.5px; color: var(--fg-3); flex: 1; min-width: 0; }
.secao-corpo {
  padding: 14px; border: 1px solid var(--border-soft); border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Catálogo aberto não pode empurrar a página: a tabela rola dentro do bloco. */
.ref-bloco .table-scroll { max-height: 46vh; }

/* ============================================================
   EXPORTAÇÃO — diálogo de PNG/PDF
   ============================================================ */
.exp-modal {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.45);
}
.exp-card {
  background: var(--bg-card); border-radius: var(--radius); width: 400px; max-width: 92vw;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25); overflow: hidden;
}
.exp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 14px;
}
.exp-x { background: none; border: 0; cursor: pointer; color: var(--fg-3); font-size: 15px; }
.exp-corpo { padding: 14px 18px; }
.exp-aviso {
  background: var(--tone-fef3c7); border: 1px solid #FDE68A; color: #92400E;
  border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12px; margin-bottom: 14px;
}
.exp-bloco { margin-bottom: 16px; }
.exp-titulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--fg-3); font-weight: 700; margin-bottom: 8px;
}
.exp-opt { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; cursor: pointer; font-size: 13px; }
.exp-opt small { display: block; color: var(--fg-3); font-size: 11px; margin-top: 1px; }
.exp-linha { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-2); }
.exp-sel { flex: 1; }
.exp-rodape {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px; border-top: 1px solid var(--border); background: var(--bg-soft);
}

/* ============================================================
   IMPRESSÃO — economia de tinta e densidade de papel
   ============================================================
   Escrito depois de ler 12 PDFs impressos de verdade. Três problemas, que
   este bloco resolve na ordem em que doíam:

   1. TINTA. A tela tem fundo cinza na página, nos cards e nas faixas — na
      tela isso separa blocos, no papel é tinta gasta em nada. Some tudo. O
      cabeçalho de tabela mantém o seu, porque ali o cinza faz trabalho: é o
      que separa o título da coluna do dado.
   2. TAMANHO. Os indicadores saíam em 21pt e quatro deles comiam 40% da
      folha, empurrando a tabela — o conteúdo de verdade — para a página
      seguinte. No papel o número não precisa gritar: ele está sozinho.
   3. HOVER. A linha sob o cursor era impressa azul, como se estivesse
      selecionada. Quem lê o papel não sabe que aquilo era o mouse.
   ============================================================ */
@media print {
  /* 1 · Tinta */
  body, .app, .main, .card, .view-corpo,
  .pl-legenda-wrap, .pl-resumo-wrap, .table-wrap, .exp-modal { background: #FFF !important; }
  .card, .table-wrap { box-shadow: none !important; }
  tbody tr, tbody tr:hover, .pl-linha:hover, .pl-docrow:hover, .emi-row:hover {
    background: transparent !important;
  }
  .pl-linha:hover .pl-fixa { background: transparent !important; }
  /* O cinza que fica: cabeçalho de tabela. */
  thead th, .pl-tabela thead th {
    background: var(--tone-f1f5f9) !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* 2 · Densidade */
  .card { padding: 7px 9px !important; border: 1px solid #D6DCE5 !important; border-radius: 4px !important; }
  .card .value { font-size: 15pt !important; margin-top: 1px !important; }
  .card .label { font-size: 7pt !important; }
  .card .hint  { font-size: 7pt !important; margin-top: 1px !important; }
  .cards { gap: 6px !important; }
  /* Quatro indicadores cabem lado a lado numa folha deitada; em duas linhas
     eles ocupavam metade da página. */
  .cards.cols-2 { grid-template-columns: repeat(4, 1fr) !important; }
  .pl-kpi-valor { font-size: 13pt !important; }
  .pl-kpis { gap: 6px !important; }

  table { font-size: 7.5pt !important; }
  td, th { padding: 2.5px 6px !important; }
  thead th { font-size: 7pt !important; }

  /* 3 · O que não é conteúdo */
  .btn-action, .exp-modal, .ms, .pl-filtro, .pl-metrica-ctrl { display: none !important; }
}

/* Observação de uma fonte — contexto, não alarme: fica discreta. */
.fc-nota {
  margin-top: 6px; font-size: 11px; line-height: 1.45;
  color: var(--fg-3); border-left: 2px solid var(--border); padding-left: 8px;
}