/* Tema Zero2 (aprovado em 30/10/2026): identidade do site zero2solucoes.com.br na Gestão e no Ponto.
   Troca só variáveis de cor e fonte e alguns acabamentos (botões em pílula, menu lateral azul-marinho,
   destaque em ciano). Nenhuma medida de layout muda. Carregar por último em cada página.
   O mesmo arquivo existe em loja/assets e ponto/assets (subdomínios diferentes); o teste test_tema_zero2.js exige que sejam iguais.
   Prefixo :root:root vence os temas atuais (:root[data-theme=...]). Para voltar ao visual anterior, remova a linha deste CSS dos index.html. */

/* ---------- cores: claro ---------- */
:root:root, :root:root[data-theme="light"] {
  --bg: #F0F1F4; --surface: #FFFFFF; --surface-2: #EEF1F8; --line: #E3E6EF;
  --fg: #0B1947; --muted: #5A6383;
  --accent: #254CF9; --accent-ink: #FFFFFF; --accent-soft: #E7ECFF;
  --cyan: #00E8D7; --cyan-ink: #0B1947; --cyan-soft: #D7FAF7;
  --side: #0B1947; --side-fg: rgba(229, 235, 255, .78); --side-active: rgba(255, 255, 255, .08);
  --good: #00897B; --good-soft: #DDF6F2; --info: #254CF9; --info-soft: #E7ECFF;
  --top: #0B1947; --top-fg: #FFFFFF;
  --f-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-body: "Inter", "Segoe UI", system-ui, sans-serif;
}
/* ---------- cores: escuro (automático e escolhido) ---------- */
@media (prefers-color-scheme: dark) {
  :root:root:not([data-theme="light"]) {
    --bg: #070F2B; --surface: #0E1A42; --surface-2: #13234F; --line: #1E2E5E;
    --fg: #EDF2FC; --muted: #A0AFCA;
    --accent: #6F8BFF; --accent-ink: #07102C; --accent-soft: #1A2A66;
    --cyan: #00E8D7; --cyan-ink: #07102C; --cyan-soft: #0F3B44;
    --side: #050B22; --side-fg: rgba(229, 235, 255, .74); --side-active: rgba(255, 255, 255, .07);
    --good: #22D6A5; --good-soft: #0F3B35; --info: #6F8BFF; --info-soft: #1A2A66;
    --top: #050B22; --top-fg: #FFFFFF;
  }
}
:root:root[data-theme="dark"] {
  --bg: #070F2B; --surface: #0E1A42; --surface-2: #13234F; --line: #1E2E5E;
  --fg: #EDF2FC; --muted: #A0AFCA;
  --accent: #6F8BFF; --accent-ink: #07102C; --accent-soft: #1A2A66;
  --cyan: #00E8D7; --cyan-ink: #07102C; --cyan-soft: #0F3B44;
  --side: #050B22; --side-fg: rgba(229, 235, 255, .74); --side-active: rgba(255, 255, 255, .07);
  --good: #22D6A5; --good-soft: #0F3B35; --info: #6F8BFF; --info-soft: #1A2A66;
  --top: #050B22; --top-fg: #FFFFFF;
}

/* ---------- tipografia ---------- */
:root:root h1, :root:root h2, :root:root h3 { font-family: var(--f-display); letter-spacing: -.02em; }
:root:root body { font-family: var(--f-body); }

/* ---------- menu lateral azul-marinho com indicador ciano ---------- */
:root:root aside.side, :root:root .side, :root:root .app > aside.side { background: var(--side); color: var(--side-fg); box-shadow: none; }
:root:root .side a, :root:root .app .side a { color: var(--side-fg); border-radius: 12px; }
:root:root .side a:hover, :root:root .app .side a:hover { background: var(--side-active); color: #FFFFFF; }
:root:root .side a.on, :root:root .app .side a.on { background: var(--side-active); color: #FFFFFF; box-shadow: inset 3px 0 0 var(--cyan); }
:root:root .side .grp, :root:root .app .side .grp { color: rgba(229, 235, 255, .5); }
:root:root .side .brand { color: #FFFFFF; font-size: 18px; white-space: nowrap; letter-spacing: -.02em; }
:root:root .side .foot { color: var(--side-fg); border-top-color: rgba(255, 255, 255, .1); }
:root:root .side .foot div { color: #FFFFFF !important; }
:root:root .side .foot button { color: #FFFFFF; border-color: rgba(255, 255, 255, .25); background: transparent; }

/* ---------- botões em pílula, primário azul, destaque ciano ---------- */
:root:root .btn { border-radius: 999px; }
:root:root .btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 20px rgba(37, 76, 249, .25); }
:root:root .btn.pri:hover { filter: brightness(1.06); }

/* ---------- cards e campos ---------- */
:root:root .panel, :root:root .stat { border-radius: 20px; }
:root:root .field input:focus, :root:root .field select:focus, :root:root .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); outline: none; }

/* ---------- login (Gestão) ---------- */
:root:root .auth-page { background: radial-gradient(60% 45% at 50% 0%, rgba(37, 76, 249, .45), transparent 70%), linear-gradient(180deg, #0B1947, #0E2160); }
:root:root .auth-brand { color: #FFFFFF; font-family: var(--f-display); }
:root:root .auth-brand span { color: var(--cyan); }
:root:root .auth-page > :not(.auth-card), :root:root .auth-page .auth-invite { color: rgba(229, 235, 255, .82); }
:root:root .auth-page > :not(.auth-card) a, :root:root .auth-page .auth-invite a { color: var(--cyan); }

/* ---------- PDV: total e finalizar ---------- */
:root:root .pdv-classico .footer-total { background: linear-gradient(135deg, #0B1947, #13297A); box-shadow: inset 4px 0 0 var(--cyan); color: #FFFFFF; }
:root:root .pdv-classico .footer-total strong { color: var(--cyan); }
:root:root .pdv-classico .relogio { color: var(--accent); }
:root:root .pdv-classico .sale-footer .fin { background: var(--cyan) !important; border-color: var(--cyan) !important; color: var(--cyan-ink) !important; }