/* CLAUDE-POLIMENTO-MOBILE-72 CLAUDE-POLIMENTO-MOBILE-73: guia visual único da Oxxy no /mobile (GUIA_VISUAL.md v1 da lane Novo site, 2026-10-12, seções 2 a 4).
   Os mesmos tokens do site e do computador, com a letra Geist, os raios do guia e o escuro quente.
   Carregado depois do app_polish.css. "html:root" vence as folhas antigas e as injetadas depois pelo JS sem usar !important nos tokens.
   Tema: claro = data-theme="light", ou sem data-theme com o sistema claro; escuro = o resto (igual ao app hoje).
   v73: ícones de traço de 1,5 px no quadro de 24 (seção 5). Fora: o Orbi do dock (seção 6, da Voz). Os painéis "cockpit" (--ck-*) são escuros de propósito e ficam. */

@font-face{font-family:"Geist";src:url("/fonts/geist-latin-wght-normal.woff2") format("woff2-variations"),url("/fonts/geist-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- escuro (padrão) ---------- */
html:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#07070a; --surface:#0e0e13; --surface-2:#16161d; --field:#16161d;
  --fill:rgba(243,239,230,.08); --fill-2:rgba(243,239,230,.14);
  --separator:rgba(243,239,230,.26); --hairline:rgba(243,239,230,.12); --hairline-strong:rgba(243,239,230,.26);
  --bar:rgba(7,7,10,.92); --glass:rgba(7,7,10,.80);
  --label:#f3efe6; --label-2:#c2bdb3; --label-3:#a9a49a; --tab-label:#c2bdb3;
  --accent:#a78bfa; --accent-fill:#5b3fd1; --accent-soft:rgba(167,139,250,.16); --on-accent:#ffffff; --tab-ind:rgba(167,139,250,.16);
  --luz:#f2c46b; --on-luz:#1a1206; --frio:#86d9ea;
  --ok:#7fdc9f; --ok-soft:rgba(127,220,159,.14); --on-ok:#06210f;
  --warn:#f2c46b; --warn-soft:rgba(242,196,107,.14);
  --danger:#ff8a80; --danger-soft:rgba(255,138,128,.14);
  --info:#86d9ea; --info-soft:rgba(134,217,234,.14);
  /* escuro sem sombra: borda fina e brilho interno sutil */
  --shadow-1:none; --shadow-2:0 0 0 1px var(--hairline-strong),inset 0 1px 0 rgba(243,239,230,.04);
  --shadow-card:0 0 0 1px var(--hairline),inset 0 1px 0 rgba(243,239,230,.03);
  --shadow-raised:0 0 0 1px var(--hairline-strong),inset 0 1px 0 rgba(243,239,230,.05);
  --scrim:rgba(0,0,0,.6);
  --h6-hero-a:#0e0e13; --h6-hero-b:#121018; --h6-hero-c:#16131f;
  --m3-page:#07070a; --seg-on:#2a2a33; --h6-orb-0:#8b3dff; --h6-orb-1:#22d3ee;
}
html:root:not([data-theme="light"]) .m4-tok{
  --m4-bg:#07070a; --m4-surface:#0e0e13; --m4-surface-2:#0b0b0f; --m4-surface-3:#16161d;
  --m4-line:rgba(243,239,230,.12); --m4-line-2:rgba(243,239,230,.26);
  --m4-ink:#f3efe6; --m4-ink-2:#c2bdb3; --m4-muted:#a9a49a; --m4-faint:#8d887f;
  --m4-accent:#a78bfa; --m4-accent-fill:#5b3fd1; --m4-accent-soft:rgba(167,139,250,.16); --m4-on-accent:#ffffff;
  --m4-ok:#7fdc9f; --m4-ok-soft:rgba(127,220,159,.13); --m4-warn:#f2c46b; --m4-warn-soft:rgba(242,196,107,.13);
  --m4-danger:#ff8a80; --m4-danger-soft:rgba(255,138,128,.14); --m4-info:#86d9ea; --m4-info-soft:rgba(134,217,234,.14);
  --m4-neutral-soft:rgba(243,239,230,.08);
  --m4-c1:#a78bfa; --m4-c4:#86d9ea; --m4-m-orbi:#a78bfa;
  --m4-m-fin:#7fdc9f; --m4-m-cob:#ffa55c; --m4-m-age:#86d9ea; --m4-m-ctb:#4fd1c1; --m4-m-mkt:#ff7fbf; --m4-m-doc:#f2c46b;
  --m4-fun-0:#8f78e6; --m4-fun-1:#7259dc; --m4-fun-2:#5b3fd1; --m4-fun-3:#4a33aa;
  --m4-sh-1:inset 0 1px 0 rgba(243,239,230,.03); --m4-sh-2:0 0 0 1px rgba(243,239,230,.12),inset 0 1px 0 rgba(243,239,230,.04);
}
html:root:not([data-theme="light"]) :is(#c-home,.m3-sheet,.nav){
  --m3-bg:#07070a; --m3-surface:#0e0e13; --m3-surface3:#16161d; --m3-line:rgba(243,239,230,.12);
  --m3-ink:#f3efe6; --m3-ink2:#c2bdb3; --m3-muted:#a9a49a;
  --m3-accent:#a78bfa; --m3-accent-soft:rgba(167,139,250,.16);
  --m3-ok:#7fdc9f; --m3-ok-soft:rgba(127,220,159,.13); --m3-warn:#f2c46b; --m3-warn-soft:rgba(242,196,107,.13);
  --m3-danger:#ff8a80; --m3-danger-soft:rgba(255,138,128,.14); --m3-info:#86d9ea; --m3-info-soft:rgba(134,217,234,.14);
  --m3-neutral-soft:rgba(243,239,230,.08); --m3-orbi:#a78bfa; --m3-c1:#a78bfa; --m3-c4:#86d9ea;
  --m3-sh1:none; --m3-sh2:0 0 0 1px rgba(243,239,230,.12);
  --m3-page:#07070a; --m3-fin:#7fdc9f; --m3-cob:#ffa55c; --m3-age:#86d9ea;
}

/* ---------- claro ---------- */
/* no app, o fundo é o --bg2 do guia (#f5f5f7) e o cartão é branco: o cartão precisa se destacar do fundo */
html:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f5f5f7; --surface:#ffffff; --surface-2:#ffffff; --field:#ececf0;
  --fill:rgba(11,11,15,.06); --fill-2:rgba(11,11,15,.12);
  --separator:rgba(11,11,15,.16); --hairline:rgba(11,11,15,.08); --hairline-strong:rgba(11,11,15,.16);
  --bar:rgba(255,255,255,.94); --glass:rgba(245,245,247,.86);
  --label:#0b0b0f; --label-2:#3c3c43; --label-3:#5f5f67; --tab-label:#3c3c43;
  --accent:#5b3fd1; --accent-fill:#5b3fd1; --accent-soft:rgba(91,63,209,.10); --on-accent:#ffffff; --tab-ind:rgba(91,63,209,.12);
  --luz:#5b3fd1; --on-luz:#ffffff; --frio:#0f6b7d;
  --ok:#17733a; --ok-soft:rgba(26,127,55,.10); --on-ok:#ffffff;
  --warn:#8f5400; --warn-soft:rgba(154,91,0,.10);
  --danger:#b42318; --danger-soft:rgba(180,35,24,.08);
  --info:#0f6b7d; --info-soft:rgba(15,107,125,.10);
  /* claro: sombra suave em 3 camadas */
  --shadow-1:0 1px 2px rgba(11,11,15,.06);
  --shadow-2:0 1px 2px rgba(11,11,15,.05),0 8px 24px -6px rgba(11,11,15,.10),0 24px 48px -24px rgba(91,63,209,.12);
  --shadow-card:0 0 0 1px var(--hairline),0 1px 2px rgba(11,11,15,.04),0 6px 18px -8px rgba(11,11,15,.08);
  --shadow-raised:0 0 0 1px var(--hairline-strong),0 2px 6px rgba(11,11,15,.06),0 18px 40px -12px rgba(11,11,15,.16);
  --scrim:rgba(11,11,15,.36);
  --h6-hero-a:#ffffff; --h6-hero-b:#f6f3ff; --h6-hero-c:#eef8fb;
  --m3-page:#f5f5f7; --seg-on:#ffffff; --h6-orb-0:#8b3dff; --h6-orb-1:#22d3ee;
}
html:root[data-theme="light"] .m4-tok{
  --m4-bg:#f5f5f7; --m4-surface:#ffffff; --m4-surface-2:#fafafb; --m4-surface-3:#ececf0;
  --m4-line:rgba(11,11,15,.08); --m4-line-2:rgba(11,11,15,.16);
  --m4-ink:#0b0b0f; --m4-ink-2:#3c3c43; --m4-muted:#5f5f67; --m4-faint:#76767e;
  --m4-accent:#5b3fd1; --m4-accent-fill:#5b3fd1; --m4-accent-soft:#efebfb; --m4-on-accent:#ffffff;
  --m4-ok:#17733a; --m4-ok-soft:#e6f3ea; --m4-warn:#8f5400; --m4-warn-soft:#f8eedd;
  --m4-danger:#b42318; --m4-danger-soft:#fbeae8; --m4-info:#0f6b7d; --m4-info-soft:#e3f1f3;
  --m4-neutral-soft:#ececf0;
  --m4-c1:#5b3fd1; --m4-c4:#0f6b7d; --m4-m-orbi:#5b3fd1;
  --m4-m-fin:#17733a; --m4-m-cob:#b4530b; --m4-m-age:#0f6b7d; --m4-m-ctb:#0f7c72; --m4-m-mkt:#b8327a; --m4-m-doc:#8f5400;
  --m4-fun-0:#4a33aa; --m4-fun-1:#5b3fd1; --m4-fun-2:#8a73e6; --m4-fun-3:#b6a6f0;
  --m4-sh-1:0 1px 2px rgba(11,11,15,.05),0 1px 1px rgba(11,11,15,.03); --m4-sh-2:0 1px 2px rgba(11,11,15,.05),0 8px 24px -6px rgba(11,11,15,.10);
}
html:root[data-theme="light"] :is(#c-home,.m3-sheet,.nav){
  --m3-bg:#f5f5f7; --m3-surface:#ffffff; --m3-surface3:#ececf0; --m3-line:rgba(11,11,15,.08);
  --m3-ink:#0b0b0f; --m3-ink2:#3c3c43; --m3-muted:#5f5f67;
  --m3-accent:#5b3fd1; --m3-accent-soft:#efebfb;
  --m3-ok:#17733a; --m3-ok-soft:#e6f3ea; --m3-warn:#8f5400; --m3-warn-soft:#f8eedd;
  --m3-danger:#b42318; --m3-danger-soft:#fbeae8; --m3-info:#0f6b7d; --m3-info-soft:#e3f1f3;
  --m3-neutral-soft:#ececf0; --m3-orbi:#5b3fd1; --m3-c1:#5b3fd1; --m3-c4:#0f6b7d;
  --m3-sh1:0 1px 2px rgba(11,11,15,.05); --m3-sh2:0 1px 2px rgba(11,11,15,.05),0 8px 24px -6px rgba(11,11,15,.10);
  --m3-page:#f5f5f7; --m3-fin:#17733a; --m3-cob:#b4530b; --m3-age:#0f6b7d;
}
/* sem escolha no app: segue o sistema (os mesmos valores do claro acima) */
@media (prefers-color-scheme: light){
  html:root:not([data-theme]){
    color-scheme:light;
    --bg:#f5f5f7; --surface:#ffffff; --surface-2:#ffffff; --field:#ececf0;
    --fill:rgba(11,11,15,.06); --fill-2:rgba(11,11,15,.12);
    --separator:rgba(11,11,15,.16); --hairline:rgba(11,11,15,.08); --hairline-strong:rgba(11,11,15,.16);
    --bar:rgba(255,255,255,.94); --glass:rgba(245,245,247,.86);
    --label:#0b0b0f; --label-2:#3c3c43; --label-3:#5f5f67; --tab-label:#3c3c43;
    --accent:#5b3fd1; --accent-fill:#5b3fd1; --accent-soft:rgba(91,63,209,.10); --on-accent:#ffffff; --tab-ind:rgba(91,63,209,.12);
    --luz:#5b3fd1; --on-luz:#ffffff; --frio:#0f6b7d;
    --ok:#17733a; --ok-soft:rgba(26,127,55,.10); --on-ok:#ffffff;
    --warn:#8f5400; --warn-soft:rgba(154,91,0,.10);
    --danger:#b42318; --danger-soft:rgba(180,35,24,.08);
    --info:#0f6b7d; --info-soft:rgba(15,107,125,.10);
    --shadow-1:0 1px 2px rgba(11,11,15,.06);
    --shadow-2:0 1px 2px rgba(11,11,15,.05),0 8px 24px -6px rgba(11,11,15,.10),0 24px 48px -24px rgba(91,63,209,.12);
    --shadow-card:0 0 0 1px var(--hairline),0 1px 2px rgba(11,11,15,.04),0 6px 18px -8px rgba(11,11,15,.08);
    --shadow-raised:0 0 0 1px var(--hairline-strong),0 2px 6px rgba(11,11,15,.06),0 18px 40px -12px rgba(11,11,15,.16);
    --scrim:rgba(11,11,15,.36);
    --h6-hero-a:#ffffff; --h6-hero-b:#f6f3ff; --h6-hero-c:#eef8fb;
    --m3-page:#f5f5f7; --seg-on:#ffffff; --h6-orb-0:#8b3dff; --h6-orb-1:#22d3ee;
  }
  html:root:not([data-theme]) .m4-tok{
    --m4-bg:#f5f5f7; --m4-surface:#ffffff; --m4-surface-2:#fafafb; --m4-surface-3:#ececf0;
    --m4-line:rgba(11,11,15,.08); --m4-line-2:rgba(11,11,15,.16);
    --m4-ink:#0b0b0f; --m4-ink-2:#3c3c43; --m4-muted:#5f5f67; --m4-faint:#76767e;
    --m4-accent:#5b3fd1; --m4-accent-fill:#5b3fd1; --m4-accent-soft:#efebfb; --m4-on-accent:#ffffff;
    --m4-ok:#17733a; --m4-ok-soft:#e6f3ea; --m4-warn:#8f5400; --m4-warn-soft:#f8eedd;
    --m4-danger:#b42318; --m4-danger-soft:#fbeae8; --m4-info:#0f6b7d; --m4-info-soft:#e3f1f3;
    --m4-neutral-soft:#ececf0;
    --m4-c1:#5b3fd1; --m4-c4:#0f6b7d; --m4-m-orbi:#5b3fd1;
    --m4-m-fin:#17733a; --m4-m-cob:#b4530b; --m4-m-age:#0f6b7d; --m4-m-ctb:#0f7c72; --m4-m-mkt:#b8327a; --m4-m-doc:#8f5400;
    --m4-fun-0:#4a33aa; --m4-fun-1:#5b3fd1; --m4-fun-2:#8a73e6; --m4-fun-3:#b6a6f0;
    --m4-sh-1:0 1px 2px rgba(11,11,15,.05),0 1px 1px rgba(11,11,15,.03); --m4-sh-2:0 1px 2px rgba(11,11,15,.05),0 8px 24px -6px rgba(11,11,15,.10);
  }
  html:root:not([data-theme]) :is(#c-home,.m3-sheet,.nav){
    --m3-bg:#f5f5f7; --m3-surface:#ffffff; --m3-surface3:#ececf0; --m3-line:rgba(11,11,15,.08);
    --m3-ink:#0b0b0f; --m3-ink2:#3c3c43; --m3-muted:#5f5f67;
    --m3-accent:#5b3fd1; --m3-accent-soft:#efebfb;
    --m3-ok:#17733a; --m3-ok-soft:#e6f3ea; --m3-warn:#8f5400; --m3-warn-soft:#f8eedd;
    --m3-danger:#b42318; --m3-danger-soft:#fbeae8; --m3-info:#0f6b7d; --m3-info-soft:#e3f1f3;
    --m3-neutral-soft:#ececf0; --m3-orbi:#5b3fd1; --m3-c1:#5b3fd1; --m3-c4:#0f6b7d;
    --m3-sh1:0 1px 2px rgba(11,11,15,.05); --m3-sh2:0 1px 2px rgba(11,11,15,.05),0 8px 24px -6px rgba(11,11,15,.10);
    --m3-page:#f5f5f7; --m3-fin:#17733a; --m3-cob:#b4530b; --m3-age:#0f6b7d;
  }
}


/* Equipe, Jurídico (--mp-*) e Qualidade (--mq-*): a mesma paleta */
html:root:not([data-theme="light"]) :is(#c-team,#c-juridico){--mp-bg:#07070a; --mp-surface:#0e0e13; --mp-soft:#16161d; --mp-line:rgba(243,239,230,.12); --mp-ink:#f3efe6; --mp-muted:#a9a49a; --mp-accent:#a78bfa; --mp-accent-soft:rgba(167,139,250,.16); --mp-ok:#7fdc9f; --mp-warn:#f2c46b; --mp-danger:#ff8a80; --mp-info:#86d9ea;}
html:root:not([data-theme="light"]) #c-quality{--mq-bg:#07070a; --mq-panel:#0e0e13; --mq-soft:#16161d; --mq-line:rgba(243,239,230,.12); --mq-ink:#f3efe6; --mq-muted:#a9a49a; --mq-accent:#a78bfa; --mq-accent-soft:rgba(167,139,250,.16); --mq-ok:#7fdc9f; --mq-warn:#f2c46b; --mq-danger:#ff8a80; --mq-info:#86d9ea;}
html:root[data-theme="light"] :is(#c-team,#c-juridico){--mp-bg:#f5f5f7; --mp-surface:#ffffff; --mp-soft:#ececf0; --mp-line:rgba(11,11,15,.08); --mp-ink:#0b0b0f; --mp-muted:#5f5f67; --mp-accent:#5b3fd1; --mp-accent-soft:#efebfb; --mp-ok:#17733a; --mp-warn:#8f5400; --mp-danger:#b42318; --mp-info:#0f6b7d;}
html:root[data-theme="light"] #c-quality{--mq-bg:#f5f5f7; --mq-panel:#ffffff; --mq-soft:#ececf0; --mq-line:rgba(11,11,15,.08); --mq-ink:#0b0b0f; --mq-muted:#5f5f67; --mq-accent:#5b3fd1; --mq-accent-soft:#efebfb; --mq-ok:#17733a; --mq-warn:#8f5400; --mq-danger:#b42318; --mq-info:#0f6b7d;}
@media (prefers-color-scheme: light){
  html:root:not([data-theme]) :is(#c-team,#c-juridico){--mp-bg:#f5f5f7; --mp-surface:#ffffff; --mp-soft:#ececf0; --mp-line:rgba(11,11,15,.08); --mp-ink:#0b0b0f; --mp-muted:#5f5f67; --mp-accent:#5b3fd1; --mp-accent-soft:#efebfb; --mp-ok:#17733a; --mp-warn:#8f5400; --mp-danger:#b42318; --mp-info:#0f6b7d;}
  html:root:not([data-theme]) #c-quality{--mq-bg:#f5f5f7; --mq-panel:#ffffff; --mq-soft:#ececf0; --mq-line:rgba(11,11,15,.08); --mq-ink:#0b0b0f; --mq-muted:#5f5f67; --mq-accent:#5b3fd1; --mq-accent-soft:#efebfb; --mq-ok:#17733a; --mq-warn:#8f5400; --mq-danger:#b42318; --mq-info:#0f6b7d;}
}

/* ---------- letra, raios e movimento (iguais nos dois temas) ---------- */
html:root{
  --font:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,system-ui,sans-serif;
  --r-xs:8px; --r-sm:10px; --r-card-sm:12px; --r-md:16px; --r-lg:24px; --r-full:999px;
  --ease:cubic-bezier(.2,.8,.2,1); --dur:200ms; --dur-fast:160ms;
}
html:root .m4-tok{--m4-font:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,system-ui,sans-serif}
html,body,button,input,select,textarea{font-family:var(--font)}
/* títulos: peso 600/700, espaçamento negativo do guia */
h1,.m4-ph h1{letter-spacing:-.03em;line-height:1.1}
h2{letter-spacing:-.025em;line-height:1.15}
h3{letter-spacing:-.018em;line-height:1.15}
/* números: dinheiro, tabelas e contadores alinhados */
.tabular,.stat .v,.amt,.ponto-clock,.ops-kpis strong,.crm-kpis strong,.f13g-amt,.plan .price,.account-row dd,.m4-kpi,.m4-kpi b,.m4-kpi strong,.m4-num,.m3-kpi,.m3-kpi b,table td,time{font-variant-numeric:tabular-nums}
/* botão principal: no escuro, o dourado --luz com texto escuro; no claro, o roxo (seção 2, "--luz") */
html:root .btn-primary,html:root .cta,html:root a.cta{background:var(--luz,var(--accent-fill));color:var(--on-luz,var(--on-accent))}
html:root .m4-pill.primary{background:var(--luz,var(--m4-accent-fill))!important;color:var(--on-luz,var(--m4-on-accent))!important}
/* folhas e painéis com o raio de 24 px; cartões com 16 px */
html:root .m3-sheet,html:root .m4-sheet-wrap{border-top-left-radius:24px;border-top-right-radius:24px}
/* botão "Fazer" dos passos da área (clinic_area_passos.js) usava o acento de texto como fundo: no escuro dava 2,7:1 com o branco */
html:root .oxp-b{background:var(--m4-accent-fill,var(--accent-fill));color:var(--m4-on-accent,#fff)}

/* v73 · ícones (seção 5): traço de 1,5 px num quadro de 24, cantos e pontas arredondados, cor do texto.
   Vale para o sprite do app (oxxy_icons.js, .ti-svg), a casca M4 (.m4-ic), os ícones soltos de 24 (1,75, 1,8 e 2 viram 1,5),
   o .ti e o indicador de puxar para atualizar (.oxxy-ptr) do oxxy_ui.css.
   Os ícones do Orbi são da Voz e não mudam aqui: os do clinic_orbi.js põem o traço em cada linha, dentro de contêiner orbi-*,
   e os do dock (orbi_v2_mobile.js) não têm o atributo stroke (o traço vem do clinic_orbi.css).
   As ilustrações de lista vazia (quadro de 64) e os gráficos ficam como estão. */
html:root svg[viewBox="0 0 24 24"][stroke="currentColor"],html:root .ti>svg,html:root svg.ti,html:root .oxxy-ptr svg{stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* Ícones de 24 que põem o traço na própria forma (o "Enviar relatório" do Início): a mesma linha, fora do Orbi da Voz. */
html:root svg[viewBox="0 0 24 24"]:not(:is([class^="orbi-"],[class*=" orbi-"]) svg)>[stroke="currentColor"][stroke-width]{stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}