/* Hub de Dashboards — as áreas eram 12 páginas separadas, cada uma com seu
   próprio bloco <style> inline. Este arquivo junta todos.

   Os prefixos das áreas são disjuntos (.dash- .dg- .dcr- .dc- .dop- .du- .df-
   .dcl- .dcb- .dcx- .des- .de-) e nenhum bloco usa seletor genérico solto, por
   isso podem conviver sem conflito.

   NÃO criar aqui `.warn{}`, `.ok{}`, `.danger{}` ou `.negative{}` genéricos:
   essas classes vão soltas no DOM (ex: class="dop-stat-value warn") e hoje só
   existem em composto. Uma versão solta vazaria pra várias áreas de uma vez. */

/* ---------------------------------------------------------------------------
   Layout do hub: barra de filtros no topo + painel embaixo.

   A barra reúne num lugar só o que era espalhado: escolher a ÁREA (antes era
   navegar entre 12 páginas), o PERÍODO e, pra quem vê o time todo, a PESSOA.
   As áreas contribuem os próprios campos via filters() — por isso a barra é
   um flex-wrap, e não um grid de colunas fixas: cada área traz um número
   diferente de campos.
   --------------------------------------------------------------------------- */
.dsh-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px 60px; }
.dsh-body.is-loading { opacity: .5; transition: opacity .12s; }

.dsh-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
  padding: 12px 16px; margin-bottom: 20px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.dsh-filter { display: flex; flex-direction: column; gap: 4px; }
.dsh-filter-label { font-size: 11px; color: var(--muted); font-weight: 510; letter-spacing: 0.05em; text-transform: uppercase; }
.dsh-filter select,
.dsh-filter input {
  height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--fg); font-size: 13px;
}
.dsh-filter select { min-width: 180px; }
.dsh-filter-range { display: flex; align-items: center; gap: 6px; }
.dsh-filter-range span { font-size: 12px; color: var(--muted); }

.dsh-panel-title { font-size: 16px; font-weight: 600; margin: 0 0 2px; }
.dsh-panel-subtitle { font-size: 12px; color: var(--muted); margin: 0 0 16px; }
.dsh-error { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.dsh-error p { margin: 0 0 12px; }

@media (max-width: 720px) {
  .dsh-body { padding: 12px 16px 40px; }
  .dsh-filter select { min-width: 0; width: 100%; }
}
.dmd-section-priority{grid-column:1/-1;border-color:var(--accent)}.dmd-quality-task{padding:12px 0;border-bottom:1px solid var(--border)}.dmd-quality-fields{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:7px;margin-top:9px}.dmd-quality-fields input{min-width:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--fg);padding:7px 8px;font-size:11px}.dmd-quality-message{color:var(--danger);font-size:11px;margin-top:5px}@media(max-width:720px){.dmd-quality-fields{grid-template-columns:1fr}.dmd-section-priority{grid-column:auto}}

/* ---------------------------------------------------------------------------
   Painel (era index.html)
   --------------------------------------------------------------------------- */
.dash-widgets {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
  margin-bottom: 24px;
}
.dash-widget {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  padding: 14px 16px;
}
.dash-widget-label {
  font-size: 11px; color: var(--muted); font-weight: 510; letter-spacing: 0.06em; text-transform: uppercase;
}
.dash-widget-value {
  font-family: var(--font-mono); font-size: 24px; font-weight: 650; letter-spacing: -0.02em;
  margin-top: 4px; font-variant-numeric: tabular-nums;
}
.dash-widget-summary { grid-column: 1 / -1; }
.dash-widget-summary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 8px;
}
.dash-widget-summary-item-label { font-size: 11px; color: var(--muted); }
.dash-widget-summary-item-value {
  font-family: var(--font-mono); font-size: 20px; font-weight: 650; letter-spacing: -0.02em;
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
.dash-empty { padding: 48px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.dash-seed { margin-top: 16px; }

/* ---------------------------------------------------------------------------
   Comercial (era dashboard-comercial.html)
   --------------------------------------------------------------------------- */
.dc-wrap { flex: 1; overflow: auto; padding: 0 20px 24px; }
.dc-scope-note {
  margin: 16px 20px 0; padding: 8px 12px; border-radius: var(--radius); background: var(--info-soft);
  color: var(--info); font-size: 12.5px;
}
.dc-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 16px 20px 4px; }
.dc-stat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; }
.dc-stat-label { font-size: 11px; color: var(--muted); font-weight: 510; letter-spacing: 0.06em; text-transform: uppercase; }
.dc-stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dc-stat-hint { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.dc-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin: 20px 20px 0; }
@media (max-width: 900px) { .dc-grid { grid-template-columns: 1fr; } }
.dc-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 16px 18px; }
.dc-card-title { font-size: 13.5px; font-weight: 600; margin: 0 0 2px; }
.dc-card-subtitle { font-size: 11.5px; color: var(--muted); margin: 0 0 12px; }
.dc-empty { padding: 24px 8px; text-align: center; color: var(--muted); font-size: 12.5px; }
.dc-meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.dc-meta-row:last-child { border-bottom: none; }
.dc-meta-name { font-size: 12.5px; font-weight: 550; }
.dc-meta-who { font-size: 11px; color: var(--muted); }
.dc-meta-pct { font-family: var(--font-mono); font-size: 13px; font-weight: 650; }
.dc-headcount-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 5px 0; }
.dc-headcount-row span:last-child { font-family: var(--font-mono); font-weight: 600; }
/* .dc-period saiu: os inputs de data migraram pra barra de filtros do hub e
   agora usam .dsh-filter, que estiliza todos os campos igual. */

/* ---------------------------------------------------------------------------
   Operação (era dashboard-operacao.html)
   --------------------------------------------------------------------------- */
.dop-wrap { flex: 1; overflow: auto; padding: 0 20px 24px; }
.dop-scope-note {
  margin: 16px 20px 0; padding: 8px 12px; border-radius: var(--radius); background: var(--info-soft);
  color: var(--info); font-size: 12.5px;
}
.dop-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 16px 20px 4px; }
.dop-stat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; }
.dop-stat-label { font-size: 11px; color: var(--muted); font-weight: 510; letter-spacing: 0.06em; text-transform: uppercase; }
.dop-stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dop-stat-value.warn { color: var(--warn); }
.dop-stat-value.danger { color: var(--danger); }
.dop-stat-hint { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.dop-card { margin: 20px 20px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 16px 18px; }
.dop-card-title { font-size: 13.5px; font-weight: 600; margin: 0 0 12px; }

/* ---------------------------------------------------------------------------
   Financeiro (era dashboard-financeiro.html)
   --------------------------------------------------------------------------- */
.df-wrap { flex: 1; overflow: auto; padding: 0 20px 24px; }
.df-scope-note {
  margin: 16px 20px 0; padding: 8px 12px; border-radius: var(--radius); background: var(--info-soft);
  color: var(--info); font-size: 12.5px;
}
.df-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 16px 20px 4px; }
.df-stat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; }
.df-stat-label { font-size: 11px; color: var(--muted); font-weight: 510; letter-spacing: 0.06em; text-transform: uppercase; }
.df-stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.df-stat-value.negative { color: var(--danger); }
.df-stat-hint { font-size: 10.5px; color: var(--muted); margin-top: 2px; }

/* ---------------------------------------------------------------------------
   Clientes (era dashboard-clientes.html)
   --------------------------------------------------------------------------- */
.dcl-wrap { flex: 1; overflow: auto; padding: 0 20px 24px; }
.dcl-scope-note {
  margin: 16px 20px 0; padding: 8px 12px; border-radius: var(--radius); background: var(--info-soft);
  color: var(--info); font-size: 12.5px;
}
.dcl-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 16px 20px 4px; }
.dcl-stat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; }
.dcl-stat-label { font-size: 11px; color: var(--muted); font-weight: 510; letter-spacing: 0.06em; text-transform: uppercase; }
.dcl-stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dcl-card { margin: 20px 20px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 16px 18px; }
.dcl-card-title { font-size: 13.5px; font-weight: 600; margin: 0 0 12px; }
.dcl-empty { padding: 30px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* ---------------------------------------------------------------------------
   Cobrança (era dashboard-cobranca.html)
   --------------------------------------------------------------------------- */
.dcb-wrap { flex: 1; overflow: auto; padding: 0 20px 24px; }
.dcb-scope-note {
  margin: 16px 20px 0; padding: 8px 12px; border-radius: var(--radius); background: var(--info-soft);
  color: var(--info); font-size: 12.5px;
}
.dcb-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 16px 20px 4px; }
.dcb-stat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; }
.dcb-stat-label { font-size: 11px; color: var(--muted); font-weight: 510; letter-spacing: 0.06em; text-transform: uppercase; }
.dcb-stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dcb-card { margin: 20px 20px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 16px 18px; }
.dcb-card-title { font-size: 13.5px; font-weight: 600; margin: 0 0 12px; }
.dcb-empty { padding: 30px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* ---------------------------------------------------------------------------
   Caixa (era dashboard-caixa.html)
   --------------------------------------------------------------------------- */
.dcx-wrap { flex: 1; overflow: auto; padding: 0 20px 24px; }
.dcx-scope-note {
  margin: 16px 20px 0; padding: 8px 12px; border-radius: var(--radius); background: var(--info-soft);
  color: var(--info); font-size: 12.5px;
}
.dcx-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 16px 20px 4px; }
.dcx-stat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; }
.dcx-stat-label { font-size: 11px; color: var(--muted); font-weight: 510; letter-spacing: 0.06em; text-transform: uppercase; }
.dcx-stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dcx-stat-value.negative { color: var(--danger); }
.dcx-card { margin: 20px 20px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 16px 18px; }
.dcx-card-title { font-size: 13.5px; font-weight: 600; margin: 0 0 12px; }
.dcx-empty { padding: 30px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* ---------------------------------------------------------------------------
   Usuários (era dashboard-usuarios.html)
   --------------------------------------------------------------------------- */
.du-wrap { flex: 1; overflow: auto; padding: 0 20px 24px; }
.du-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 16px 20px 4px; }
.du-stat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; }
.du-stat-label { font-size: 11px; color: var(--muted); font-weight: 510; letter-spacing: 0.06em; text-transform: uppercase; }
.du-stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.du-stat-value.warn { color: var(--warn); }
.du-stat-hint { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.du-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 20px 0; }
@media (max-width: 900px) { .du-grid { grid-template-columns: 1fr; } }
.du-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 16px 18px; }
.du-card-title { font-size: 13.5px; font-weight: 600; margin: 0 0 12px; }
.du-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 12.5px; }
.du-list-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.du-list-row:last-child { border-bottom: none; }

/* ---------------------------------------------------------------------------
   Estoque (era dashboard-estoque.html)
   --------------------------------------------------------------------------- */
.des-wrap { flex: 1; overflow: auto; padding: 0 20px 24px; }
.des-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 16px 20px 4px; }
.des-stat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; }
.des-stat-label { font-size: 11px; color: var(--muted); font-weight: 510; letter-spacing: 0.06em; text-transform: uppercase; }
.des-stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.des-stat-value.warn { color: var(--warn); }
.des-card { margin: 20px 20px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 16px 18px; }
.des-card-title { font-size: 13.5px; font-weight: 600; margin: 0 0 12px; }
.des-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* ---------------------------------------------------------------------------
   Executivo (era dashboard-executivo.html)
   --------------------------------------------------------------------------- */
.de-wrap { flex: 1; overflow: auto; padding: 0 20px 24px; }
.de-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 16px 20px 4px; }
.de-stat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; }
.de-stat-label { font-size: 11px; color: var(--muted); font-weight: 510; letter-spacing: 0.06em; text-transform: uppercase; }
.de-stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.de-section { margin: 24px 20px 0; }
.de-empty { padding: 40px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------------------
   Geral/Visão Geral (era dashboard-geral.html)
   --------------------------------------------------------------------------- */
.dg-wrap { flex: 1; overflow: auto; padding: 0 20px 24px; }
.dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 16px 20px 4px; }
.dg-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: border-color .12s, transform .08s;
}
.dg-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.dg-card-head { display: flex; align-items: center; gap: 8px; }
.dg-card-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.dg-card-icon svg { width: 15px; height: 15px; }
.dg-card-title { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dg-card-value { font-family: var(--font-mono); font-size: 24px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dg-card-sub { font-size: 11.5px; color: var(--muted); }
.dg-card-value.negative, .dg-card-sub.negative { color: var(--danger); }

/* ---------------------------------------------------------------------------
   Crise (era dashboard-crise.html)
   --------------------------------------------------------------------------- */
.dcr-wrap { flex: 1; overflow: auto; padding: 0 20px 24px; }
.dcr-note { margin: 16px 20px 0; padding: 8px 12px; border-radius: var(--radius); background: var(--info-soft); color: var(--info); font-size: 12.5px; }
.dcr-alerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 16px 20px 4px; }
.dcr-alert { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; }
.dcr-alert.ok { border-color: var(--success); }
.dcr-alert.warn { border-color: var(--warn); background: var(--warn-soft); }
.dcr-alert.danger { border-color: var(--danger); background: var(--danger-soft); }
.dcr-alert-label { font-size: 11px; color: var(--muted); font-weight: 510; letter-spacing: 0.06em; text-transform: uppercase; }
.dcr-alert-value { font-family: var(--font-mono); font-size: 20px; font-weight: 650; margin-top: 4px; }
.dcr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 20px 0; }
@media (max-width: 900px) { .dcr-grid { grid-template-columns: 1fr; } }
.dcr-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 16px 18px; }
.dcr-card-title { font-size: 13.5px; font-weight: 600; margin: 0 0 2px; }
.dcr-card-subtitle { font-size: 11.5px; color: var(--muted); margin: 0 0 12px; }
.dcr-metric-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.dcr-metric-row:last-child { border-bottom: none; }
.dcr-metric-row span:last-child { font-family: var(--font-mono); font-weight: 600; }
.dcr-hero { text-align: center; padding: 10px 0; }
.dcr-hero-value { font-family: var(--font-mono); font-size: 32px; font-weight: 700; }
.dcr-hero-label { font-size: 12px; color: var(--muted); margin-top: 4px; }
.dcr-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* ---------------------------------------------------------------------------
   Reset de container
   Os blocos acima foram escritos quando cada wrapper era filho direto de
   <main class="main"> — daí `flex:1; overflow:auto` e o gutter de 20px
   repetido em -wrap/-kpis/-card. Dentro do hub quem rola é .dsh-body e quem
   dá gutter é ele também, então isso viraria margem e barra de rolagem
   duplicadas.

   Lista explícita, sem curinga: algo como [class$="-card"] pegaria junto o
   padding INTERNO dos cards e achataria o conteúdo.

   Cresce a cada área migrada.
   --------------------------------------------------------------------------- */
.dsh-body .dash-wrap,
.dsh-body .dc-wrap,
.dsh-body .dop-wrap,
.dsh-body .df-wrap,
.dsh-body .dcl-wrap,
.dsh-body .dcb-wrap,
.dsh-body .dcx-wrap,
.dsh-body .du-wrap,
.dsh-body .des-wrap,
.dsh-body .de-wrap,
.dsh-body .dg-wrap,
.dsh-body .dcr-wrap { flex: none; overflow: visible; padding: 0; }

/* gutter que era margin */
.dsh-body .dc-scope-note, .dsh-body .dc-grid,
.dsh-body .dop-scope-note, .dsh-body .dop-card,
.dsh-body .df-scope-note,
.dsh-body .dcl-scope-note, .dsh-body .dcl-card,
.dsh-body .dcb-scope-note, .dsh-body .dcb-card,
.dsh-body .dcx-scope-note, .dsh-body .dcx-card,
.dsh-body .du-grid, .dsh-body .du-card,
.dsh-body .des-card,
.dsh-body .de-section,
.dsh-body .dcr-note, .dsh-body .dcr-grid { margin-left: 0; margin-right: 0; }

/* o primeiro card de cada área não precisa do respiro de topo: a barra de
   filtros já separa visualmente */
.dsh-body .dc-grid, .dsh-body .dop-card,
.dsh-body .dcl-card, .dsh-body .dcb-card, .dsh-body .dcx-card,
.dsh-body .du-grid, .dsh-body .des-card,
.dsh-body .de-section,
.dsh-body .dcr-note, .dsh-body .dcr-grid { margin-top: 16px; }

/* gutter que era padding */
.dsh-body .dc-kpis, .dsh-body .dop-kpis,
.dsh-body .df-kpis,
.dsh-body .dcl-kpis,
.dsh-body .dcb-kpis,
.dsh-body .dcx-kpis,
.dsh-body .du-kpis,
.dsh-body .des-kpis,
.dsh-body .de-kpis,
.dsh-body .dcap-kpis,
.dsh-body .dg-grid,
.dsh-body .dcr-alerts { padding-left: 0; padding-right: 0; padding-top: 0; }

/* ---------------------------------------------------------------------------
   Visão Executiva 360 (área nova do hub — /api/dashboard-executivo)
   --------------------------------------------------------------------------- */
.dex-wrap { padding: 16px 20px 24px; }
.dex-group { margin-bottom: 20px; }
.dex-group:last-child { margin-bottom: 0; }
.dex-group-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 10px; }
.dex-group-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.dex-stat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; border-left: 3px solid var(--border); }
.dex-stat-label { font-size: 11px; color: var(--muted); font-weight: 510; letter-spacing: 0.04em; text-transform: uppercase; }
.dex-stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dex-stat.dex-ok { border-left-color: var(--success); }
.dex-stat.dex-warn { border-left-color: var(--warn); }
.dex-stat.dex-danger { border-left-color: var(--danger); }

/* ---------------------------------------------------------------------------
   Capacidade de Equipes (área nova do hub)
   --------------------------------------------------------------------------- */
.dcap-wrap { padding: 0 20px 24px; }
.dcap-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 16px 20px 4px; }
.dcap-stat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; }
.dcap-stat-label { font-size: 11px; color: var(--muted); font-weight: 510; letter-spacing: 0.06em; text-transform: uppercase; }
.dcap-stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dcap-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 16px 18px; margin-top: 16px; }
.dcap-card-title { font-size: 13px; font-weight: 590; margin: 0 0 12px; }
.dcap-empty { padding: 32px; text-align: center; color: var(--muted); font-size: 13px; }
.dcap-row { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr auto; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.dcap-row:last-child { border-bottom: none; }
.dcap-person-name { font-size: 13px; font-weight: 590; }
.dcap-person-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.dcap-gauge-track { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.dcap-gauge-fill { height: 100%; border-radius: 99px; transition: width .3s ease; }
.dcap-pct { font-family: var(--font-mono); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
.dcap-ok { background-color: var(--success); color: var(--success); }
.dcap-warn { background-color: var(--warn); color: var(--warn); }
.dcap-danger { background-color: var(--danger); color: var(--danger); }
/* O texto do % usa a mesma classe da barra; só a cor interessa nele, não o
   background — daí o override pra não pintar um retângulo atrás do número. */
.dcap-pct.dcap-ok, .dcap-pct.dcap-warn, .dcap-pct.dcap-danger { background-color: transparent; }
@media (max-width: 720px) {
  .dcap-row { grid-template-columns: 1fr auto; }
  .dcap-gauge { grid-column: 1 / -1; order: 3; }
}

/* ---------------------------------------------------------------------------
   Meu Dia (landing page do hub — era Painel)
   --------------------------------------------------------------------------- */
.dmd-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.dmd-section {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  padding: 16px;
}
.dmd-section-title {
  font-size: 13px; font-weight: 600; margin: 0 0 12px; color: var(--fg);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.dmd-section-content { }
.dmd-section-empty {
  padding: 20px 8px; text-align: center; color: var(--muted); font-size: 12.5px;
}
.dmd-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dmd-item {
  padding: 10px 12px; border-radius: var(--radius); background: var(--bg);
  border-left: 3px solid var(--info); font-size: 13px;
}
.dmd-item-type {
  display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: var(--radius);
  margin-bottom: 4px;
}
.dmd-item-title {
  font-weight: 500; color: var(--fg); margin-bottom: 2px;
}
.dmd-item-date {
  font-size: 11px; color: var(--muted);
}
.dmd-item-warning { border-left-color: var(--warn); }
.dmd-item-actions {
  display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
}
.dmd-item-actions .btn {
  flex: 1; font-size: 11px; padding: 4px 8px;
}
.dmd-document-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px;
}
.dmd-doc-stat {
  padding: 10px 8px; border-radius: var(--radius); background: var(--bg);
  text-align: center;
}
.dmd-doc-stat-value {
  font-size: 20px; font-weight: 650; font-family: var(--font-mono);
  line-height: 1;
}
.dmd-doc-stat-label {
  font-size: 11px; color: var(--muted); margin-top: 4px;
}
.dmd-doc-vencido { border-top: 3px solid var(--danger); }
.dmd-doc-vencendo { border-top: 3px solid var(--warn); }
.dmd-doc-valido { border-top: 3px solid var(--success); }
.dmd-doc-link {
  font-size: 12px; margin: 0; text-align: center;
}
.dmd-doc-link a { color: var(--info); text-decoration: none; }
.dmd-doc-link a:hover { text-decoration: underline; }
.dmd-error {
  padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13px;
}
.dmd-error p { margin: 0 0 12px; }

@media (max-width: 720px) {
  .dmd-sections { grid-template-columns: 1fr; }
  .dmd-item-actions { flex-direction: column; }
  .dmd-item-actions .btn { width: 100%; }
}