/* TELA — painel do apresentador e cluster de resultado */

/* ============================================================================
   SCREEN · PANEL - Painel do apresentador + PIN gate + cluster de resultado
   ID: panel · Design System FAVO v2 (tokens do kernel apenas)
   Paleta: Mel (--accent) · Âmbar (--accent-deep) · Céu (--favo-sky-*) ·
           Menta (--favo-mint-400) / success · danger (--favo-danger-*)
   Superfícies: --surface-card / --surface-sunken · raios em tokens.
   ========================================================================== */

/* ===========================================================================
   CLUSTER DE RESULTADO
   ======================================================================== */

/* ---- Cabeçalho do resultado --------------------------------------------- */
.result-header {
  text-align: center;
  padding: var(--space-2) 0 var(--space-5);
}
.result-header .name {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--accent);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}
.result-header h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
}

/* ---- Banner "resultado salvo" (success/Menta) --------------------------- */
.saved-banner {
  background: rgba(31, 157, 87, 0.12);
  border: 1px solid rgba(31, 157, 87, 0.32);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--success-soft);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
}
.saved-banner i { font-size: 16px; line-height: 1; }

/* ---- Título de seção (eyebrow) ------------------------------------------ */
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: var(--space-6) 0 var(--space-3);
}

/* ---- Hero stat (número de destaque) ------------------------------------- */
.hero-stat {
  background: linear-gradient(155deg, rgba(243, 223, 71, 0.12), rgba(243, 223, 71, 0.02));
  border: 1px solid rgba(243, 223, 71, 0.30);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  margin: var(--space-3) 0;
}
.hero-stat.valuation {
  background: linear-gradient(155deg, rgba(118, 204, 163, 0.12), rgba(118, 204, 163, 0.02));
  border-color: rgba(118, 204, 163, 0.30);
}
.hero-stat .label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.hero-stat.valuation .label { color: var(--favo-mint-400); }
.hero-stat .value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
}
.hero-stat .sublabel {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
  line-height: var(--leading-normal);
}

/* ---- Grade de métricas -------------------------------------------------- */
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.metric-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.metric-card.amber-bd { border-color: rgba(235, 174, 52, 0.30); }
.metric-card.teal-bd  { border-color: rgba(118, 204, 163, 0.30); }
.metric-card .label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}
.metric-card .value {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-heavy);
  color: var(--text-strong);
}
.metric-card .value.yellow { color: var(--accent); }
.metric-card .value.teal   { color: var(--favo-mint-400); }
.metric-card .hint {
  font-size: var(--text-2xs);
  color: var(--text-subtle);
  margin-top: var(--space-1);
}

/* ---- Lista de breakdown ------------------------------------------------- */
.breakdown-list {
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: left;
}
.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border-subtle);
}
.breakdown-row:last-child { border-bottom: none; }
.breakdown-row.total {
  background: rgba(243, 223, 71, 0.08);
  font-weight: var(--weight-bold);
}
.breakdown-row .lbl {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.breakdown-row .lbl .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
.breakdown-row .lbl .dot.blue { background: var(--favo-sky-300); }
.breakdown-row .lbl .dot.teal { background: var(--favo-mint-400); }
.breakdown-row .val {
  font-family: var(--font-mono);            /* número em linha é dado: mono tabular */
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  white-space: nowrap;
}
.breakdown-row.total .val {
  color: var(--accent);
  font-size: var(--text-base);
}

/* ---- Citação / insight -------------------------------------------------- */
.insight-quote {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  line-height: var(--leading-relaxed);
  margin: var(--space-5) 0;
}
.insight-quote strong {
  color: var(--accent);
  font-style: normal;
  font-weight: var(--weight-bold);
}

/* ===========================================================================
   PAINEL DO APRESENTADOR
   ======================================================================== */

/* ---- Cabeçalho do painel ------------------------------------------------ */
.panel-header .eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--accent);
  font-weight: var(--weight-bold);
}
.panel-header h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-1);
}

/* ---- Contador "ao vivo" (status sutil) ---------------------------------- */
.panel-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--surface-sunken);
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  margin-top: var(--space-3);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .panel-count:hover { border-color: var(--border-default); }
}
.panel-count .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--favo-mint-400);
  flex: 0 0 auto;
}

/* ---- Controle do apresentador (família Céu / info) ---------------------- */
.master-control {
  background: rgba(0, 133, 202, 0.08);
  border: 1px solid rgba(0, 133, 202, 0.28);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-5) 0;
}
.master-control .mc-label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--favo-sky-300);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-3);
}
.master-control .mc-desc {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: 1.55;
}
.master-control .mc-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.master-control .mc-btn {
  background: var(--favo-sky-500);
  color: var(--text-strong);
  border: none;
  padding: 11px 16px;
  border-radius: var(--radius-control);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .master-control .mc-btn:hover { background: var(--favo-sky-700); transform: translateY(-1px); }
}
.master-control .mc-btn:active { transform: scale(0.98); }
.master-control .mc-hint {
  font-size: var(--text-2xs);
  color: var(--text-subtle);
  margin-top: var(--space-2);
  line-height: var(--leading-normal);
}

/* ---- Estatísticas do painel: EXTRATO, não dashboard --------------------- */
/* (2026-07-20) As três caixinhas centradas viraram linhas de razão: rótulo
   à esquerda, guia pontilhada, valor tabular em mono à direita — o painel É
   um extrato da turma, e linha de extrato é o vocabulário do funil (o
   pontilhado é o mesmo fio de "sua margem" do desvio da capa). O ::after
   no meio é um flex item (order 1) entre .lbl (0) e .val (2). */
.panel-stats {
  display: block;
  margin: var(--space-3) 0;
}
.stat-card {
  display: flex;
  align-items: baseline;
  text-align: left;
  padding: var(--space-2) var(--space-1);
}
.stat-card + .stat-card { border-top: 1px solid var(--border-subtle); }
.stat-card::after {
  content: "";
  order: 1;
  flex: 1;
  margin: 0 var(--space-3);
  border-bottom: 1px dotted rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
}
.stat-card .lbl {
  order: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-subtle);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
.stat-card .val {
  order: 2;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  white-space: nowrap;
}
.stat-card .val.yellow { color: var(--accent); }
.stat-card .val.teal   { color: var(--favo-mint-400); }

/* ---- Lista de participantes --------------------------------------------- */
.participants-list {
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.participant-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}
.participant-item:last-child { border-bottom: none; }
.participant-item > div:first-child { min-width: 0; flex: 1; }
.participant-item .name {
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.participant-item .meta {
  font-family: var(--font-mono);            /* CNPJ · anos · proj/mês: metadado é dado */
  font-size: var(--text-2xs);
  letter-spacing: 0.02em;
  color: var(--text-subtle);
  margin-top: 2px;
}
.participant-item .val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

/* ---- Ações do painel ---------------------------------------------------- */
.panel-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}
.danger-link {
  background: none;
  border: 1px solid rgba(229, 72, 77, 0.30);
  color: var(--favo-danger-500);
  padding: 0 18px;
  min-width: 120px;
  min-height: var(--tap);
  border-radius: var(--radius-control);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .danger-link:hover {
    background: rgba(229, 72, 77, 0.10);
    border-color: rgba(229, 72, 77, 0.50);
  }
}

/* ===== RESPONSIVO: 40-panel ===== */
/*
 * PAINEL DO APRESENTADOR — 40-panel.css
 *
 * Seletores tocados:
 *   .panel-header, .panel-header .eyebrow, .panel-header h2,
 *   .panel-count, .master-control, .master-control .mc-label,
 *   .section-title,
 *   .hero-stat (+ .valuation), .hero-stat .label, .hero-stat .value, .hero-stat .sublabel,
 *   .panel-stats, .stat-card, .stat-card .lbl, .stat-card .val (+ .yellow / .teal),
 *   .breakdown-list, .breakdown-row (+ .total), .breakdown-row .lbl, .breakdown-row .val,
 *   .participants-list, .participant-item,
 *   .participant-item .name, .participant-item .meta, .participant-item .val,
 *   .panel-actions, .danger-link
 *
 * Breakpoints cobertos: sm 600px · md 900px · lg 1280px · xl 1680px · xxl 2560px
 *
 * Decisões de layout e telão:
 *   - Todos os blocos de topo centralizam com max-width:var(--maxw-panel); margin-inline:auto
 *     (não há wrapper único no markup; aplica-se em cada elemento de bloco de nível raiz).
 *   - sm: .hero-stat fica horizontal (label + value lado a lado) para economizar altura.
 *   - md+: .panel-stats já tem 3 colunas no base; aumenta padding e tipografia dos cards.
 *         .breakdown-list vai a 2 colunas; .participants-list remove max-height fixo.
 *   - lg+: .participants-list vira grid de 2 colunas de cards; .breakdown-list 2 colunas.
 *         .hero-stat .value escala para var(--text-3xl) para dominar a tela.
 *         .panel-actions alinhadas à esquerda, gap maior.
 *   - xl:  .participants-list vai a 3 colunas; .hero-stat .value chega a var(--text-4xl).
 *         Tipografia de títulos e labels cresce para legibilidade a distância.
 *         .panel-stats com padding generoso, valores em --text-xl.
 *   - xxl: Escala adicional 4K — .hero-stat .value em --text-5xl, grid de 4 colunas.
 *
 * NOTA: .eyebrow só é tocado como .panel-header .eyebrow para não colidir com o cinema.
 *       .dot pertence ao Foundation; não é tocado aqui.
 */

/* =========================================================================
   sm — 600px: celular grande / tablet pequeno em pé
   ========================================================================= */
@media (min-width: 600px) {

  /* Centralização do bloco de topo */
  .panel-header {
    max-width: var(--maxw-panel);
    margin-inline: auto;
  }

  /* Hero stat: padding ligeiramente maior */
  .hero-stat {
    max-width: var(--maxw-panel);
    margin-inline: auto;
    padding: var(--space-6);
  }

  .section-title {
    max-width: var(--maxw-panel);
    margin-inline: auto;
  }

  .master-control {
    max-width: var(--maxw-panel);
    margin-inline: auto;
    padding: var(--space-5);
  }

  .panel-stats {
    max-width: var(--maxw-panel);
    margin-inline: auto;
  }

  .breakdown-list {
    max-width: var(--maxw-panel);
    margin-inline: auto;
  }

  .participants-list {
    max-width: var(--maxw-panel);
    margin-inline: auto;
  }

  .panel-actions {
    max-width: var(--maxw-panel);
    margin-inline: auto;
  }
}

/* =========================================================================
   md — 900px: tablet / notebook pequeno
   ========================================================================= */
@media (min-width: 900px) {

  /* Cabeçalho */
  .panel-header h2 {
    font-size: var(--text-2xl);
  }

  .panel-header .eyebrow {
    font-size: var(--text-xs);
    letter-spacing: 0.2em;
  }

  /* Contador ao vivo */
  .panel-count {
    font-size: var(--text-sm);
    padding: 0 18px;
  }

  /* Master control */
  .master-control {
    padding: var(--space-5) var(--space-6);
  }

  .master-control .mc-label {
    font-size: var(--text-xs);
    margin-bottom: var(--space-3);
  }

  /* Section title */
  .section-title {
    font-size: var(--text-xs);
    margin: var(--space-7) 0 var(--space-3);
  }

  /* Hero stat: ligeiramente maior */
  .hero-stat {
    padding: var(--space-7) var(--space-6);
  }

  .hero-stat .value {
    font-size: var(--text-3xl);
  }

  .hero-stat .sublabel {
    font-size: var(--text-base);
    margin-top: var(--space-3);
  }

  /* Linhas de extrato: um degrau de tipografia, sem virar caixa */
  .stat-card {
    padding: var(--space-3) var(--space-1);
  }

  .stat-card .lbl {
    font-size: var(--text-xs);
  }

  .stat-card .val {
    font-size: var(--text-base);
  }

  /* Breakdown list: 2 colunas no tablet */
  .breakdown-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* A linha de total ocupa as 2 colunas inteiras */
  .breakdown-row.total {
    grid-column: 1 / -1;
  }

  .breakdown-row {
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-5);
  }

  .breakdown-row .val {
    font-size: var(--text-md);
  }

  /* Lista de participantes: remove max-height para mostrar todos no tablet */
  .participants-list {
    max-height: none;
    overflow-y: visible;
  }

  .participant-item {
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-5);
  }

  .participant-item .meta {
    font-size: var(--text-sm);
    margin-top: var(--space-1);
  }

  /* Ações do painel */
  .panel-actions {
    gap: var(--space-4);
    margin-top: var(--space-6);
  }
}

/* =========================================================================
   lg — 1280px: desktop (alvo principal)
   ========================================================================= */
@media (min-width: 1280px) {

  /* Cabeçalho */
  .panel-header h2 {
    font-size: var(--text-3xl);
    margin-top: var(--space-2);
  }

  .panel-header .eyebrow {
    font-size: var(--text-sm);
  }

  /* Contador ao vivo */
  .panel-count {
    font-size: var(--text-base);
    padding: 0 20px;
    margin-top: var(--space-4);
  }

  /* Section title */
  .section-title {
    font-size: var(--text-sm);
    margin: var(--space-8) 0 var(--space-4);
  }

  /* Hero stat: destaque máximo no desktop */
  .hero-stat {
    padding: var(--space-8) var(--space-7);
  }

  .hero-stat .label {
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
  }

  .hero-stat .value {
    font-size: var(--text-4xl);
  }

  .hero-stat .sublabel {
    font-size: var(--text-md);
    margin-top: var(--space-3);
  }

  /* Extrato: mais respiro entre linhas */
  .panel-stats {
    margin: var(--space-4) 0;
  }

  .stat-card {
    padding: var(--space-3) var(--space-1);
  }

  .stat-card .lbl {
    font-size: var(--text-xs);
  }

  .stat-card .val {
    font-size: var(--text-md);
  }

  /* Breakdown: 2 colunas confortáveis */
  .breakdown-row {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-md);
  }

  .breakdown-row .val {
    font-size: var(--text-lg);
  }

  .breakdown-row.total .val {
    font-size: var(--text-xl);
  }

  /* Participants: grid de 2 colunas de cards no desktop */
  .participants-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--surface-sunken);
  }

  /* Cada card de participante vira card com borda visível */
  .participant-item {
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
  }

  /* Remove borda direita na segunda coluna */
  .participant-item:nth-child(2n) {
    border-right: none;
  }

  .participant-item .name {
    font-size: var(--text-base);
  }

  .participant-item .meta {
    font-size: var(--text-sm);
  }

  .participant-item .val {
    font-size: var(--text-md);
  }

  /* Ações */
  .panel-actions {
    gap: var(--space-4);
    margin-top: var(--space-7);
  }

  .danger-link {
    font-size: var(--text-sm);
    padding: 0 24px;
  }
}

/* =========================================================================
   xl — 1680px: TELÃO dedicado (1920px fullscreen cai aqui)
   ========================================================================= */

/* Recuperado de _responsive/40-panel.css — painel (xl/xxl) */
@media (min-width: 1680px) {

  /* Cabeçalho */
  .panel-header h2 {
    font-size: clamp(2.5rem, 3vw, 4rem);
    margin-top: var(--space-3);
  }

  .panel-header .eyebrow {
    font-size: var(--text-base);
    letter-spacing: 0.22em;
  }

  /* Contador ao vivo */
  .panel-count {
    font-size: var(--text-md);
    padding: 0 24px;
    min-height: 52px;
    margin-top: var(--space-4);
  }

  /* Master control */
  .master-control {
    padding: var(--space-6) var(--space-7);
  }

  .master-control .mc-label {
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
  }

  /* Section title */
  .section-title {
    font-size: var(--text-base);
    letter-spacing: 0.18em;
    margin: var(--space-9) 0 var(--space-4);
  }

  /* Hero stat: domina a tela no telão */
  .hero-stat {
    padding: var(--space-9) var(--space-8);
  }

  .hero-stat .label {
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
    letter-spacing: 0.18em;
  }

  .hero-stat .value {
    font-size: clamp(3.75rem, 5vw, 5.5rem);
  }

  .hero-stat .sublabel {
    font-size: var(--text-lg);
    margin-top: var(--space-4);
  }

  /* Extrato: um degrau pequeno, não escala de telão */
  .panel-stats {
    margin: var(--space-5) 0;
  }

  .stat-card {
    padding: var(--space-3) var(--space-1);
  }

  .stat-card .lbl {
    font-size: var(--text-sm);
    letter-spacing: 0.12em;
  }

  .stat-card .val {
    font-size: var(--text-md);
  }

  /* Breakdown: 2 colunas com espaçamento generoso */
  .breakdown-row {
    padding: var(--space-5) var(--space-7);
    font-size: var(--text-lg);
  }

  .breakdown-row .val {
    font-size: var(--text-xl);
  }

  .breakdown-row.total {
    padding: var(--space-6) var(--space-7);
  }

  .breakdown-row.total .val {
    font-size: var(--text-2xl);
  }

  /* Participants: 3 colunas no telão */
  .participants-list {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .participant-item:nth-child(2n) {
    border-right: 1px solid var(--border-subtle);
  }

  .participant-item:nth-child(3n) {
    border-right: none;
  }

  .participant-item {
    padding: var(--space-5) var(--space-6);
  }

  .participant-item .name {
    font-size: var(--text-md);
  }

  .participant-item .meta {
    font-size: var(--text-base);
    margin-top: var(--space-2);
  }

  .participant-item .val {
    font-size: var(--text-lg);
  }

  /* Ações */
  .panel-actions {
    gap: var(--space-5);
    margin-top: var(--space-8);
  }

  .danger-link {
    font-size: var(--text-base);
    padding: 0 28px;
    min-height: 56px;
  }
}
@media (min-width: 2560px) {

  /* Cabeçalho */
  .panel-header h2 {
    font-size: clamp(4rem, 3.5vw, 5rem);
    margin-top: var(--space-4);
  }

  .panel-header .eyebrow {
    font-size: var(--text-md);
    letter-spacing: 0.25em;
  }

  /* Contador ao vivo */
  .panel-count {
    font-size: var(--text-lg);
    padding: 0 28px;
    min-height: 60px;
  }

  /* Master control */
  .master-control {
    padding: var(--space-7) var(--space-8);
  }

  .master-control .mc-label {
    font-size: var(--text-base);
    margin-bottom: var(--space-5);
  }

  /* Section title */
  .section-title {
    font-size: var(--text-md);
    letter-spacing: 0.2em;
    margin: calc(var(--space-9) * 1.25) 0 var(--space-5);
  }

  /* Hero stat: número monumental em 4K */
  .hero-stat {
    padding: calc(var(--space-9) * 1.25) var(--space-9);
  }

  .hero-stat .label {
    font-size: var(--text-md);
    margin-bottom: var(--space-5);
    letter-spacing: 0.2em;
  }

  .hero-stat .value {
    font-size: var(--text-5xl);
  }

  .hero-stat .sublabel {
    font-size: var(--text-xl);
    margin-top: var(--space-5);
  }

  /* Extrato: segue linha, nunca "monumental" */
  .panel-stats {
    margin: var(--space-6) 0;
  }

  .stat-card {
    padding: var(--space-4) var(--space-1);
  }

  .stat-card .lbl {
    font-size: var(--text-base);
  }

  .stat-card .val {
    font-size: var(--text-lg);
  }

  /* Breakdown */
  .breakdown-row {
    padding: var(--space-6) var(--space-8);
    font-size: var(--text-xl);
  }

  .breakdown-row .val {
    font-size: var(--text-2xl);
  }

  .breakdown-row.total {
    padding: var(--space-7) var(--space-8);
  }

  .breakdown-row.total .val {
    font-size: var(--text-3xl);
  }

  /* Participants: 4 colunas em 4K */
  .participants-list {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  /* Reajuste de bordas para 4 colunas */
  .participant-item:nth-child(3n) {
    border-right: 1px solid var(--border-subtle);
  }

  .participant-item:nth-child(4n) {
    border-right: none;
  }

  .participant-item {
    padding: var(--space-6) var(--space-7);
  }

  .participant-item .name {
    font-size: var(--text-lg);
  }

  .participant-item .meta {
    font-size: var(--text-md);
    margin-top: var(--space-2);
  }

  .participant-item .val {
    font-size: var(--text-xl);
  }

  /* Ações */
  .panel-actions {
    gap: var(--space-6);
    margin-top: calc(var(--space-9) * 1.25);
  }

  .danger-link {
    font-size: var(--text-md);
    padding: 0 32px;
    min-height: 64px;
  }
}

/* ---- Estado de erro (Task 15 — distinto do estado vazio) ---------------- */
.empty-state.error-state .icon { color: var(--favo-danger-500); }
.empty-state.error-state .btn { margin-top: var(--space-4); }

/* ---- Espaçamento do CTA "Apresentar tela do ecossistema" ---------------- */
.panel-cta-gap { margin-bottom: 1.25rem; }