/* Estilos específicos do Pace Progress (o restante vem do design system). */

.boot { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: var(--s-6); padding: var(--s-12); text-align: center; }
.boot__logo { width: 56px; height: 56px; border-radius: var(--r-xl); }
.noscript { padding: var(--s-12); text-align: center; }
.offline-page { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: var(--s-8); padding: var(--s-12); text-align: center; }

/* Topbar com o indicador de sincronização */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); max-width: var(--container); margin: 0 auto var(--s-8); }
.brand--mobile { font-size: 1rem; }
@media (min-width: 720px) { .brand--mobile { display: none; } .topbar { justify-content: flex-end; } }
.syncbadge { height: var(--h-chip); padding: 0 var(--s-6); cursor: pointer; border: 0; }
.syncbadge svg { width: 14px; height: 14px; }
.syncbadge:hover { filter: brightness(.97); }
#update-slot { max-width: var(--container); margin: 0 auto var(--s-8); }
#update-slot:empty { display: none; }
#view { min-width: 0; }
.foot__name { font-size: .875rem; font-weight: 600; }
.foot__sub { font-size: .75rem; }

/* Hoje */
.hero__type { font-size: 1.25rem; letter-spacing: -.02em; }
.hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s-6); }
.stat { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-6) var(--s-7); border-radius: var(--r-xl); background: var(--surface-2); border: 1px solid var(--divider); }
.stat__label { font-size: .75rem; color: var(--muted); font-weight: 500; }
.stat__value { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }

/* Plano */
.acc__pad { padding: var(--s-8); }
.row__real { color: var(--text-3); }
.row { min-height: 52px; }
.zone-edit { display: flex; flex-direction: column; gap: var(--s-4); padding-bottom: var(--s-8); border-bottom: 1px solid var(--divider); }
.zone-edit:last-of-type { border-bottom: 0; }

/* Gráficos */
.chart { position: relative; height: 280px; }
.chart canvas { width: 100% !important; }

/* Cores de destaque */
.swatches { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.swatch { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sw); color: #fff; border: 2px solid transparent; outline-offset: 3px; box-shadow: inset 0 0 0 2px var(--surface); }
.swatch svg { width: 18px; height: 18px; opacity: 0; }
.swatch[aria-checked="true"] { border-color: var(--sw); }
.swatch[aria-checked="true"] svg { opacity: 1; animation: check-pop var(--dur-fast) var(--ease-out); }

/* Onboarding */
.onboard-wrap { flex: 1; min-width: 0; }
.onboard { max-width: 640px; margin: 0 auto; padding: calc(var(--s-12) + var(--safe-top)) var(--s-8) calc(var(--s-24) + var(--safe-bottom)); display: flex; flex-direction: column; gap: var(--s-10); }
.onboard h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.onboard__intro { display: flex; flex-direction: column; gap: var(--s-4); }
.onboard__login { justify-content: center; }

.dialog__body > .row-flex { align-items: center; }
output { font-family: var(--font-mono); font-weight: 600; }

/* Três indicadores lado a lado, mesmo no celular */
.grid-kpi--tight { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.grid-kpi--tight .kpi { padding: var(--s-6) var(--s-6); }
.grid-kpi--tight .kpi__value { font-size: 1.5rem; }