/* Plan 04-11 — S2 design tokens (04-UI-SPEC §S2: ink-slate canvas + warm-amber accent). */
:root {
  /* S2 palette (60/30/10) */
  --ink-slate:       #14161D;  /* dominante 60% — canvas */
  --raised-slate:    #1E212B;  /* secundária 30% — cards/tabela */
  --warm-amber:      #E8A33D;  /* accent 10% — grand total, série-1 do chart, loja selecionada */
  --teal-positive:   #3FB68B;  /* data-positive — ▲ */
  --clay-negative:   #D9534F;  /* data-negative / erro — ▼ */
  --text-primary:    #ECEAE3;  /* neutro — texto primário */
  --text-muted:      #9AA0AC;  /* neutro — texto secundário */
  --row-hover:       #262A35;

  /* S2 spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

/*
  S2 fontes self-hosted. Os woff2 vivem em /fonts/ (ver wwwroot/fonts/README.md).
  Enquanto não embarcados, o fallback web-safe (Georgia/Segoe UI/Courier) mantém o
  layout funcional — alinhado ao contrato de fallback do 04-UI-SPEC §S3.
*/
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/fonts/publicsans-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/fonts/publicsans-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibmplexmono-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Layout da página consolidada */
.consolidado-page {
  background: var(--ink-slate);
  color: var(--text-primary);
  font-family: 'Public Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  min-height: 100vh;
  padding: var(--space-3xl) var(--space-xl);
}

.consolidado-page h1,
.consolidado-page h2,
.consolidado-page h3,
.consolidado-page .fraunces {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* Hero — grand total card */
.consolidado-hero {
  background: var(--raised-slate);
  border-radius: 8px;
  padding: var(--space-lg);
  margin-bottom: var(--space-2xl);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px -12px rgba(0, 0, 0, .6);
  /* Hairline âmbar no topo do card do total — ancora o olho (S2 Atmosphere). */
  border-top: 2px solid var(--warm-amber);
}

.consolidado-total-label {
  font-family: 'Public Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.consolidado-total-value {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 40px;
  font-weight: 600;
  color: var(--warm-amber);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Colunas de dinheiro na tabela por loja */
.money-mono {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Deltas período-a-período (D-30) */
.delta-positive { color: var(--teal-positive); }
.delta-negative { color: var(--clay-negative); }

/* Avisos de somente leitura (S2 Copywriting) */
.readonly-notice {
  font-size: 13px;
  color: var(--text-muted);
  border-left: 2px solid var(--warm-amber);
  padding-left: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* Carregamento orquestrado (respeita prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  .kpi-card-animate {
    animation: fadeRise 240ms ease-out both;
  }
  .kpi-card-animate:nth-child(1) { animation-delay: 0ms; }
  .kpi-card-animate:nth-child(2) { animation-delay: 60ms; }
  .kpi-card-animate:nth-child(3) { animation-delay: 120ms; }
}

@keyframes fadeRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hover de linha da tabela */
.consolidado-page .mud-table-row:hover {
  background-color: var(--row-hover);
  transition: background-color 120ms ease;
}