/* Visão geral. ⚠️ É o ecrã de ENTRADA: mostra pouco e aponta para os outros.
   A especificação pedia dez indicadores, gráfico, sete cartões, despesas e alertas tudo
   aqui. No computador cabe, mas o que faz falta ao abrir a app não é ver tudo: é saber se
   há alguma coisa a arder e para onde ir. O detalhe vive nos nove painéis. */

/* ===== ALERTAS ============================================================
   ⚠️ Antes dos números, de propósito. Um alerta debaixo de três gráficos não se lê. */
.vg-alertas { padding: 18px 24px 0; display: grid; gap: 10px; }
.vg-alerta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px; border-radius: var(--ilha-raio);
  border-left: 4px solid var(--ilha-cor2);
  background: rgba(239, 137, 46, .08);
}
.vg-alerta.e-alta { border-left-color: var(--ilha-promo); background: rgba(216, 31, 38, .07); }
.vg-alerta__texto { flex: 1 1 340px; font-size: 15px; }
/* ⚠️ Cada alerta leva um botão. Um alerta sem saída é uma queixa. */
.vg-alerta__botao {
  font: inherit; font-size: 15px; padding: 7px 15px; text-decoration: none;
  border-radius: var(--ilha-raio-pastilha); white-space: nowrap;
  background: #fff; color: inherit; border: 1px solid var(--ilha-linha-forte);
}
.vg-alerta__botao:hover { background: var(--ilha-fundo-suave); }

.vg-tudo-bem {
  padding: 13px 16px; border-radius: var(--ilha-raio);
  background: rgba(10, 125, 63, .08); color: #0a7d3f; font-size: 15px;
}

/* ===== UNIDADES ===========================================================
   Cartões pequenos, um por unidade, com a fatia do lucro ao lado da das vendas. */
.vg-unidades { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.vg-unidade {
  border: 1px solid var(--ilha-linha); border-radius: var(--ilha-raio);
  padding: 13px 15px; text-decoration: none; color: inherit; display: block;
}
.vg-unidade:hover { border-color: var(--ilha-cor); }
.vg-unidade.e-fraca { opacity: .6; }
.vg-unidade__nome { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.vg-unidade__vendas { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vg-unidade__linha { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ilha-apagado); margin-top: 7px; }
/* ⚠️ Quando a fatia do lucro fica muito abaixo da das vendas, marca-se. */
.vg-unidade__linha .e-mau { color: var(--ilha-promo); font-weight: 600; }

/* ===== ATALHOS ============================================================ */
.vg-atalhos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.vg-atalho {
  border: 1px solid var(--ilha-linha); border-radius: var(--ilha-raio);
  padding: 15px; text-decoration: none; color: inherit;
}
.vg-atalho:hover { border-color: var(--ilha-cor); background: var(--ilha-fundo-suave); }
.vg-atalho__nome { font-weight: 600; margin-bottom: 4px; }
.vg-atalho__nota { font-size: 13px; color: var(--ilha-apagado); }

@media (max-width: 760px) { .vg-alertas { padding: 14px 14px 0; } }

/* ===== A TESOURARIA, BANCO A BANCO ========================================
   ⚠️ Ordem do Silva (11/08/2026): o caixa saiu da frente do painel — que passou
   a ser as vendas do mês — e desceu para aqui, mais pequeno e repartido por
   onde o dinheiro está. Um número solto de 30 608 € não dizia nem onde estava
   nem se tinha subido. */

/* ⚠️ O quadro do caixa esteve aqui («.vg-tesouraria»). Mudou-se para `caixa.css` a 12/08/2026
   com o prefixo do ecrã novo (.cx-tes). Não ficou cópia: CSS órfão é o que faz uma regra
   morta continuar a ganhar a uma viva meses depois. */