/* Bee360 Gym · plataforma.css (frente plataforma, 06/11/2026)
   Faz o app parecer nativo no SO em uso SEM perder a marca (amarelo --brand no logo, botão primário, item ativo, KPIs).
   Carrega DEPOIS de tokens/components/layout. Ganchos no <html> postos por assets/js/plataforma.js:
     data-os = mac | ios | windows | android | linux | outro · data-touch = true|false · data-pwa = true|false · data-tema (só escolha manual)
   Guia: design/PLATAFORMA.md */

/* ---------- controles nativos seguem o SO (rolagem, select, date, autofill) ---------- */
:root:not([data-tema]) { color-scheme: light dark; }
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }

/* ---------- cor de destaque do sistema (Safari 16.4+, Firefox 103+; Chromium cai no --accent) ---------- */
@supports (color: AccentColor) {
  :root { --accent-sistema: AccentColor; }
}
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--accent-sistema); }
:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-sistema) 55%, transparent); }
.filtros input:focus, .filtros select:focus, input.busca:focus, .campo:focus {
  border-color: var(--accent-sistema); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-sistema) 45%, transparent);
}
a:active { color: var(--accent-sistema); }
.tabela th.sortable[aria-sort="ascending"]::after, .tabela th.sortable[aria-sort="descending"]::after { color: var(--accent-sistema); }
::selection { background: Highlight; color: HighlightText; }

/* ---------- fontes do sistema por plataforma ---------- */
:root[data-os="mac"], :root[data-os="ios"] { --fonte: var(--fonte-apple); }
:root[data-os="windows"] { --fonte: var(--fonte-windows); }
:root[data-os="android"] { --fonte: var(--fonte-android); }
:root[data-os="linux"] { --fonte: var(--fonte-linux); }
/* números alinhados em coluna: KPIs, deltas e tabelas */
.kpi-valor, .kpi-delta, .kpi-rodape, .tabela td, .tabela th, .mini-kpis .kpi-valor, .barra-lista .v { font-variant-numeric: tabular-nums; }
:root[data-os="mac"] body, :root[data-os="ios"] body { -webkit-font-smoothing: antialiased; }
:root[data-os="windows"] body, :root[data-os="linux"] body, :root[data-os="android"] body { -webkit-font-smoothing: auto; }

/* ---------- toque: sem flash cinza, sem atraso de duplo toque ---------- */
a, button, .btn, .chip, .tab, .nav-item, .periodo button, summary, [role="button"], label, select {
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
:root[data-touch="true"] :is(.btn, .btn-sm, .chip, .tab, .nav-item, .periodo button, .periodo a, .campo, select.campo, input.busca, .filtros input, .filtros select, .lista-academias a) { min-height: var(--toque); }
:root[data-touch="true"] .btn-icone { width: var(--toque); min-width: var(--toque); }
:root[data-touch="true"] .tabela th.sortable { padding-top: 14px; padding-bottom: 14px; }
:root[data-touch="true"] .nav-item:hover { background: transparent; }                  /* hover "grudado" após o toque */
:root[data-touch="true"] .nav-item.ativo, :root[data-touch="true"] .nav-item[aria-current="page"] { background: var(--brand-soft); }
@media (hover: none) { input, select, textarea { font-size: max(16px, 1em); } }        /* iOS não dá zoom ao focar campo */

/* ===================== macOS / iOS / iPadOS ===================== */
:root[data-os="mac"], :root[data-os="ios"] { --r-sm: 8px; --r-md: 10px; --r-lg: 14px; }
:root[data-os="mac"] .chip, :root[data-os="ios"] .chip,
:root[data-os="ios"] .btn-sm { border-radius: var(--r-pill); }
:root[data-os="ios"] .btn { border-radius: 12px; }
:root[data-os="mac"] :focus-visible, :root[data-os="ios"] :focus-visible { border-radius: var(--r-md); }
/* switch estilo iOS: <input type="checkbox" role="switch"> */
:root[data-os="mac"] input[type="checkbox"][role="switch"], :root[data-os="ios"] input[type="checkbox"][role="switch"] {
  appearance: none; -webkit-appearance: none; position: relative; width: 51px; height: 31px; margin: 0; flex: none; cursor: pointer;
  border-radius: var(--r-pill); background: var(--panel3); border: 1px solid var(--line-forte); transition: background var(--t-medio) var(--curva);
}
:root[data-os="mac"] input[type="checkbox"][role="switch"] { width: 38px; height: 22px; }
:root[data-os="mac"] input[type="checkbox"][role="switch"]::after, :root[data-os="ios"] input[type="checkbox"][role="switch"]::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: calc(100% - 22px); aspect-ratio: 1; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform var(--t-medio) var(--curva);
}
:root[data-os="ios"] input[type="checkbox"][role="switch"]::after { width: 27px; }
:root[data-os="mac"] input[type="checkbox"][role="switch"]::after { width: 18px; }
:root[data-os="mac"] input[type="checkbox"][role="switch"]:checked, :root[data-os="ios"] input[type="checkbox"][role="switch"]:checked { background: #34c759; border-color: #34c759; }
:root[data-os="ios"] input[type="checkbox"][role="switch"]:checked::after { transform: translateX(20px); }
:root[data-os="mac"] input[type="checkbox"][role="switch"]:checked::after { transform: translateX(16px); }

/* ===================== Windows (Fluent) ===================== */
:root[data-os="windows"] { --r-sm: 4px; --r-md: 5px; --r-lg: 6px; }
:root[data-os="windows"] .chip { border-radius: var(--r-sm); }
:root[data-os="windows"] .login-card { border-radius: 8px; }
:root[data-os="windows"] .logo { border-radius: 6px; }
/* foco retangular Fluent: anel duplo (escuro por fora, claro por dentro), sem brilho */
:root[data-os="windows"] :focus-visible {
  outline: 2px solid var(--ink); outline-offset: 1px; box-shadow: inset 0 0 0 1px var(--panel); border-radius: var(--r-sm);
}
:root[data-os="windows"] .filtros input:focus, :root[data-os="windows"] .filtros select:focus,
:root[data-os="windows"] input.busca:focus, :root[data-os="windows"] .campo:focus {
  box-shadow: inset 0 -2px 0 var(--accent-sistema); border-color: var(--borda-campo);    /* sublinhado de destaque do Fluent */
}
:root[data-os="windows"] .btn-primario:hover { filter: brightness(.96); }
:root[data-os="windows"] input[type="checkbox"][role="switch"] { width: 40px; height: 20px; }

/* ===================== Android (Material) ===================== */
:root[data-os="android"] { --r-sm: 8px; --r-md: 12px; --r-lg: 16px; }
:root[data-os="android"] .chip { border-radius: 8px; }
:root[data-os="android"] .btn-primario { box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 1px 3px 1px rgba(0, 0, 0, .12); border-color: transparent; }
:root[data-os="android"] .btn-primario:active { box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .3); }
:root[data-os="android"] .btn:not(.btn-fantasma):not(.btn-primario):active { background: var(--panel3); }
:root[data-os="android"] .card, :root[data-os="android"] .kpi { box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 1px 3px 1px rgba(0, 0, 0, .05); }
:root[data-os="android"] .toast { border-radius: 4px; }

/* ===================== Linux (GNOME/KDE) ===================== */
:root[data-os="linux"] { --r-sm: 6px; --r-md: 8px; --r-lg: 12px; }

/* ---------- safe areas (notch, ilha dinâmica, barra de gestos) ---------- */
.lateral { padding-top: calc(var(--e3) + var(--safe-t)); padding-left: max(var(--e3), var(--safe-l)); padding-bottom: calc(var(--e4) + var(--safe-b)); }
.topo { height: calc(var(--topo) + var(--safe-t)); padding-top: var(--safe-t); padding-right: max(var(--e5), var(--safe-r)); }
.conteudo { padding-right: max(var(--e5), var(--safe-r)); padding-bottom: calc(var(--e5) + var(--safe-b)); }
.drawer-header { padding-top: calc(var(--e4) + var(--safe-t)); padding-right: max(var(--e5), var(--safe-r)); }
.drawer-body { padding-right: max(var(--e5), var(--safe-r)); padding-bottom: calc(var(--e5) + var(--safe-b)); }
.toasts { right: max(var(--e4), var(--safe-r)); bottom: calc(var(--e4) + var(--safe-b)); }
.login { padding: max(var(--e4), var(--safe-t)) max(var(--e4), var(--safe-r)) max(var(--e4), var(--safe-b)) max(var(--e4), var(--safe-l)); }
@media (min-width: 769px) and (max-width: 1279px) { .lateral { padding-left: max(var(--e2), var(--safe-l)); } }
@media (max-width: 768px) {
  .lateral { width: min(calc(300px + var(--safe-l)), 86vw); }
  .topo { padding-left: max(var(--e3), var(--safe-l)); padding-right: max(var(--e3), var(--safe-r)); }
  .conteudo { padding-left: max(var(--e3), var(--safe-l)); padding-right: max(var(--e3), var(--safe-r)); padding-bottom: calc(var(--e6) + var(--safe-b)); }
}
@media (max-width: 640px) {
  .drawer-header { padding-top: calc(var(--e3) + var(--safe-t)); padding-right: max(var(--e4), var(--safe-r)); padding-left: max(var(--e4), var(--safe-l)); }
  .drawer-body { padding-right: max(var(--e4), var(--safe-r)); padding-left: max(var(--e4), var(--safe-l)); }
}
/* PWA no iOS com status bar translúcida: o topo pinta atrás do relógio */
:root[data-pwa="true"] .topo { background: var(--panel); }

/* ---------- acessibilidade do sistema ---------- */
@media (prefers-contrast: more) {
  :root {
    --line: var(--line-forte); --line-forte: var(--borda-campo); --borda-campo: var(--ink2);
    --ink2: color-mix(in srgb, var(--ink) 80%, var(--panel)); --ink3: color-mix(in srgb, var(--ink) 68%, var(--panel));
    --grid: var(--line-forte); --foco: 0 0 0 3px var(--ink);
  }
  .card, .kpi, .btn, .chip, .tag, .tabela th, .tabela td { border-color: var(--line-forte); }
  .btn-fantasma { border-color: var(--line-forte); }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .topo { background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .topo { background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root { --overlay: color-mix(in srgb, var(--ink) 70%, var(--bg)); }
  .login { background: var(--bg); }
}
@media (forced-colors: active) {
  .logo, .btn-primario { forced-color-adjust: none; }
  .nav-item.ativo, .nav-item[aria-current="page"] { outline: 2px solid Highlight; }
  .kpi, .card { border: 1px solid CanvasText; }
}
/* prefers-reduced-motion: já em components.css (zera transição/animação; skeleton parado). Aqui só o toast do atalho. */
.plataforma-toast { white-space: nowrap; }