/* ══════════════════════════════════════════════════════════════════════════
   Asia Park — Home / Centro de Controle
   Camada ADICIONAL sobre o design system existente (variáveis definidas em
   painel-x7k2m9.html: --primary, --branco, --superficie-2, --borda, --texto,
   --cinza, --azul-med, --verde, --laranja, --verm, --raio, --transicao...).
   Este arquivo não redefine nem sobrescreve nada usado por outras telas —
   todas as classes aqui usam o prefixo `home-` para não colidir com
   `.card`, `.metric`, `.badge` etc. usados no resto do sistema.
   ══════════════════════════════════════════════════════════════════════════ */

.home-raiz { display: flex; flex-direction: column; gap: 28px; padding-bottom: 8px; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
/* Fundo sólido: gradientes/texturas muito sutis sobre quase-preto "chiam"
   (banding/dithering visível) em muitas telas Android com menos
   profundidade de cor — era um problema real de tela, não só estético. */
.home-hero {
  position: relative; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--borda);
  padding: 30px 34px;
  background: var(--superficie-2);
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 28px rgba(0,0,0,.28);
}
.home-hero-linha { position: relative; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.home-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--cinza); margin-bottom: 10px; }
.home-hero-eyebrow .ponto { width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde); box-shadow: 0 0 8px rgba(74,222,128,.7);
  animation: home-pulse 2.4s ease infinite; }
@keyframes home-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.home-hero h1 { font-size: 27px; font-weight: 800; letter-spacing: -0.7px; color: #fff;
  text-wrap: balance; }
.home-hero p { font-size: 14px; color: var(--cinza); margin-top: 7px; max-width: 62ch; }
.home-hero-competencia { font-size: 12px; color: var(--cinza); text-align: right;
  white-space: nowrap; }
.home-hero-competencia b { display: block; font-size: 15px; color: #fff; font-weight: 700;
  margin-top: 2px; }

/* ── Grid de KPIs ─────────────────────────────────────────────────────────── */
.home-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

/* ── Corpo principal: gráfico (protagonista) + coluna lateral ────────────── */
.home-corpo { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: 20px; align-items: start; }
.home-coluna { display: flex; flex-direction: column; gap: 20px; }

/* ── Ações rápidas ────────────────────────────────────────────────────────── */
.home-acoes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; }
.home-acao {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 16px 16px 15px; border-radius: 14px;
  border: 1px solid var(--borda); background: rgba(255,255,255,.03);
  color: var(--texto); text-align: left; cursor: pointer; font-family: inherit;
  transition: background var(--transicao), border-color var(--transicao),
              transform .18s cubic-bezier(.4,0,.2,1);
}
.home-acao:hover { background: var(--hover); border-color: rgba(255,255,255,.16);
  transform: translateY(-2px); }
.home-acao:active { transform: translateY(0) scale(.98); }
.home-acao .home-acao-icone { width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(225,6,0,.12); color: #FF6B62; flex: none; }
.home-acao .home-acao-icone svg { width: 17px; height: 17px; }
.home-acao span.rotulo { font-size: 13.5px; font-weight: 650; }

/* ── Atividades recentes ──────────────────────────────────────────────────── */
.home-feed { display: flex; flex-direction: column; }
.home-feed-item { display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.05); }
.home-feed-item:last-child { border-bottom: none; padding-bottom: 2px; }
.home-feed-icone { width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.home-feed-icone svg { width: 14px; height: 14px; }
.home-feed-icone.cor-verde { background: rgba(74,222,128,.12); color: var(--verde); }
.home-feed-icone.cor-azul { background: rgba(122,167,255,.12); color: var(--azul-med); }
.home-feed-icone.cor-laranja { background: rgba(245,166,35,.12); color: var(--laranja); }
.home-feed-corpo { min-width: 0; flex: 1; }
.home-feed-titulo { font-size: 13px; color: var(--texto); line-height: 1.4; }
.home-feed-titulo b { font-weight: 650; }
.home-feed-meta { font-size: 11.5px; color: var(--cinza); margin-top: 2px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.home-feed-valor { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; margin-left: 8px; }
.home-feed-vazio { padding: 18px 2px; color: var(--cinza); font-size: 13px; text-align: center; }

/* ── Widget de retiradas (reaproveita .op-card / .badge já existentes) ────── */
.home-retiradas-lista { display: flex; flex-direction: column; gap: 8px; }

/* ── Cabeçalho compacto de card usado dentro da Home (menos peso que .card-title) */
.home-card-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px; }
.home-card-head h2 { font-size: 13.5px; font-weight: 700; color: #fff; letter-spacing: -0.1px; }
.home-card-head .home-card-link { font-size: 12px; color: var(--azul-med); font-weight: 600;
  cursor: pointer; background: none; border: none; font-family: inherit;
  transition: opacity var(--transicao); }
.home-card-head .home-card-link:hover { opacity: .75; }

/* ── Responsividade ───────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
  .home-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1180px) {
  .home-corpo { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .home-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .home-hero { padding: 24px 22px; }
  .home-hero h1 { font-size: 22px; }
  .home-hero-linha { flex-direction: column; align-items: flex-start; }
  .home-hero-competencia { text-align: left; }
}
@media (max-width: 560px) {
  .home-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .home-acoes-grid { grid-template-columns: 1fr 1fr; }
  .home-raiz { gap: 20px; }
  .home-card-head { flex-wrap: wrap; row-gap: 6px; }
  .home-feed-item { flex-wrap: wrap; }
  .home-feed-corpo { flex-basis: 100%; }
  .home-feed-valor { margin-left: 42px; }
}