/* ============================================================
   VERTENXIS — Temas e personalização da aparência
   Os atributos ficam no <html> (data-tema, data-cor, data-escala...)
   e são aplicados antes da página aparecer (sem "piscar").
   ============================================================ */

/* ── Temas ─────────────────────────────────────────────────── */
html[data-tema="escuro"]{
  --bg:#070b16; --bg-2:#0b1120; --panel:rgba(20,28,46,.72); --panel-solid:#131c2e; --panel-2:rgba(13,19,33,.6);
  --line:rgba(148,163,184,.14); --line-strong:rgba(148,163,184,.26);
  --text:#eef2fb; --muted:#aab6cf; --faint:#6f7d99; --accent-ink:#060a16;
  --ok:#2dd4a7; --erro:#f7556b; --sombra:0 24px 60px -28px rgba(0,0,0,.85); color-scheme:dark;
}
html[data-tema="claro"]{
  --bg:#eef1f7; --bg-2:#f6f8fc; --panel:rgba(255,255,255,.88); --panel-solid:#fff; --panel-2:rgba(241,244,250,.85);
  --line:rgba(15,23,42,.09); --line-strong:rgba(15,23,42,.16);
  --text:#131a2b; --muted:#56627d; --faint:#93a0b8; --accent-ink:#fff;
  --ok:#0f9d76; --erro:#e23b54; --sombra:0 22px 50px -30px rgba(20,33,71,.45); color-scheme:light;
}
html[data-tema="oled"]{
  --bg:#000; --bg-2:#000; --panel:rgba(16,16,18,.92); --panel-solid:#0c0c0e; --panel-2:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.18);
  --text:#f4f4f5; --muted:#a1a1aa; --faint:#63636b; --accent-ink:#fff;
  --ok:#34d399; --erro:#fb7185; --sombra:0 20px 50px -28px rgba(0,0,0,.95); color-scheme:dark;
}
html[data-tema="oceano"]{
  --bg:#03131c; --bg-2:#06202d; --panel:rgba(8,40,56,.7); --panel-solid:#0a2b3b; --panel-2:rgba(4,26,37,.6);
  --line:rgba(125,211,252,.14); --line-strong:rgba(125,211,252,.26);
  --text:#e7f7ff; --muted:#9fc6d8; --faint:#5f8ba1; --accent-ink:#02141c;
  --accent:#22b8cf; --accent-2:#5fd4e6; --accent-soft:rgba(34,184,207,.15); --accent-glow:rgba(34,184,207,.42);
  --ok:#34d399; --erro:#fb7185; --sombra:0 24px 60px -28px rgba(0,10,20,.9); color-scheme:dark;
}
html[data-tema="floresta"]{
  --bg:#06110b; --bg-2:#0a1a11; --panel:rgba(16,40,27,.7); --panel-solid:#11291c; --panel-2:rgba(8,26,17,.6);
  --line:rgba(134,239,172,.13); --line-strong:rgba(134,239,172,.24);
  --text:#ecfdf3; --muted:#a6c8b4; --faint:#6a8e78; --accent-ink:#04120a;
  --accent:#22c55e; --accent-2:#5ee08d; --accent-soft:rgba(34,197,94,.14); --accent-glow:rgba(34,197,94,.4);
  --ok:#4ade80; --erro:#fb7185; --sombra:0 24px 60px -28px rgba(0,12,4,.9); color-scheme:dark;
}
html[data-tema="grafite"]{
  --bg:#141518; --bg-2:#1a1b1f; --panel:rgba(38,40,46,.78); --panel-solid:#25272d; --panel-2:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --text:#ececf1; --muted:#a9abb6; --faint:#6d707c; --accent-ink:#fff;
  --ok:#3ecf8e; --erro:#f87171; --sombra:0 22px 50px -28px rgba(0,0,0,.8); color-scheme:dark;
}
html[data-tema="sepia"]{
  --bg:#ece2cf; --bg-2:#f5eddc; --panel:rgba(255,250,238,.9); --panel-solid:#fffaee; --panel-2:rgba(236,224,200,.6);
  --line:rgba(92,64,30,.12); --line-strong:rgba(92,64,30,.22);
  --text:#3a2e21; --muted:#6c5b46; --faint:#a08e76; --accent-ink:#fff;
  --accent:#b45309; --accent-2:#d97706; --accent-soft:rgba(180,83,9,.12); --accent-glow:rgba(180,83,9,.32);
  --ok:#2f7d4f; --erro:#b42318; --aviso:#b7791f; --sombra:0 22px 50px -30px rgba(70,45,10,.35); color-scheme:light;
}
html[data-tema="lavanda"]{
  --bg:#efecf9; --bg-2:#f7f5ff; --panel:rgba(255,255,255,.9); --panel-solid:#fff; --panel-2:rgba(237,233,254,.7);
  --line:rgba(76,29,149,.1); --line-strong:rgba(76,29,149,.18);
  --text:#1f1537; --muted:#5b4e7b; --faint:#9c92b7; --accent-ink:#fff;
  --accent:#7c3aed; --accent-2:#9f67ff; --accent-soft:rgba(124,58,237,.12); --accent-glow:rgba(124,58,237,.35);
  --ok:#0f9d76; --erro:#e11d48; --sombra:0 22px 50px -30px rgba(60,30,120,.35); color-scheme:light;
}
html[data-tema="contraste"]{
  --bg:#000; --bg-2:#000; --panel:#000; --panel-solid:#000; --panel-2:#0b0b0b;
  --line:rgba(255,255,255,.55); --line-strong:#fff;
  --text:#fff; --muted:#f2f2f2; --faint:#d6d6d6; --accent-ink:#000;
  --accent:#ffd400; --accent-2:#ffe45c; --accent-soft:rgba(255,212,0,.18); --accent-glow:rgba(255,212,0,.5);
  --ok:#00f59b; --erro:#ff6b6b; --aviso:#ffd400; --info:#5cd3ff; --sombra:none; color-scheme:dark;
}
html[data-tema="contraste"] a:not(.btn){text-decoration:underline}
html[data-tema="contraste"] :focus-visible{outline:3px solid #ffd400!important;outline-offset:2px}
html[data-tema="contraste"] .painel,html[data-tema="contraste"] .btn-ghost{border-width:2px}

/* ── Cor de destaque (sobrepõe a do tema) ──────────────────── */
html[data-cor]{--accent-soft:color-mix(in srgb,var(--accent) 14%,transparent);--accent-glow:color-mix(in srgb,var(--accent) 42%,transparent)}
html[data-cor="azul"]{--accent:#4f7cff;--accent-2:#6f9bff;--accent-ink:#fff}
html[data-cor="indigo"]{--accent:#6366f1;--accent-2:#818cf8;--accent-ink:#fff}
html[data-cor="violeta"]{--accent:#8b5cf6;--accent-2:#a78bfa;--accent-ink:#fff}
html[data-cor="rosa"]{--accent:#ec4899;--accent-2:#f472b6;--accent-ink:#fff}
html[data-cor="vermelho"]{--accent:#ef4444;--accent-2:#f87171;--accent-ink:#fff}
html[data-cor="laranja"]{--accent:#f97316;--accent-2:#fb923c;--accent-ink:#1a0a00}
html[data-cor="ambar"]{--accent:#f59e0b;--accent-2:#fbbf24;--accent-ink:#1a1000}
html[data-cor="verde"]{--accent:#16a34a;--accent-2:#22c55e;--accent-ink:#fff}
html[data-cor="turquesa"]{--accent:#14b8a6;--accent-2:#2dd4bf;--accent-ink:#021412}
html[data-cor="ciano"]{--accent:#0ea5e9;--accent-2:#38bdf8;--accent-ink:#fff}

/* ── Tamanho do texto ──────────────────────────────────────── */
html[data-escala="p"] body{zoom:.92}
html[data-escala="g"] body{zoom:1.1}
html[data-escala="gg"] body{zoom:1.22}

/* ── Fonte ─────────────────────────────────────────────────── */
html[data-fonte="sistema"]{--f-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--f-display:var(--f-ui)}
html[data-fonte="leitura"]{--f-ui:"Atkinson Hyperlegible",system-ui,sans-serif;--f-display:var(--f-ui)}
html[data-fonte="leitura"] body{letter-spacing:.005em;line-height:1.6}
html[data-fonte="serifa"]{--f-ui:"Literata",Georgia,serif;--f-display:"Space Grotesk","Literata",serif}
html[data-fonte="serifa"] body{letter-spacing:0}

/* ── Densidade ─────────────────────────────────────────────── */
html[data-densidade="compacta"] .painel{padding:14px 16px}
html[data-densidade="compacta"] .conteudo{padding-top:16px;padding-bottom:28px}
html[data-densidade="compacta"] .hero{margin-bottom:14px}
html[data-densidade="compacta"] .btn{padding:8px 14px}
html[data-densidade="compacta"] .btn-sm{padding:6px 10px}
html[data-densidade="compacta"] .tabela td,html[data-densidade="compacta"] .tabela th{padding-top:7px;padding-bottom:7px}
html[data-densidade="ampla"] .painel{padding:28px}
html[data-densidade="ampla"] .conteudo{padding-top:36px}
html[data-densidade="ampla"] body{line-height:1.65}

/* ── Cantos ────────────────────────────────────────────────── */
html[data-cantos="retos"]{--r-lg:6px;--r-md:5px;--r-sm:4px}
html[data-cantos="redondos"]{--r-lg:26px;--r-md:18px;--r-sm:12px}

/* ── Largura do conteúdo ───────────────────────────────────── */
html[data-largura="ampla"] .conteudo{max-width:1520px}
html[data-largura="estreita"] .conteudo{max-width:920px}

/* ── Fundo ─────────────────────────────────────────────────── */
html[data-fundo="liso"] body{background:var(--bg-2)}
html[data-fundo="malha"] body{background:
  radial-gradient(900px 520px at 90% -10%,var(--accent-soft),transparent 60%),
  radial-gradient(700px 480px at -10% 110%,color-mix(in srgb,var(--accent-2) 12%,transparent),transparent 60%),
  var(--bg-2);background-attachment:fixed}

/* ── Animações ─────────────────────────────────────────────── */
html[data-movimento="reduzido"] *,html[data-movimento="reduzido"] *::before,html[data-movimento="reduzido"] *::after{
  transition:none!important;animation:none!important;scroll-behavior:auto!important}

/* ── iPhone/iPad instalado (tela cheia): respeita o entalhe e a barra inferior ── */
.topo{padding-top:max(12px,env(safe-area-inset-top));padding-left:max(clamp(16px,3vw,36px),env(safe-area-inset-left));padding-right:max(clamp(16px,3vw,36px),env(safe-area-inset-right))}
.rodape{padding-bottom:max(18px,env(safe-area-inset-bottom))}
@media (display-mode:standalone){
  body{overscroll-behavior-y:none}
  .rodape{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}

/* ── Botão do topo ─────────────────────────────────────────── */
.vx-ap-btn{width:36px;height:36px;padding:0!important;font-size:17px;line-height:1}
@media (max-width:760px){.topo-user .vx-ap-btn{display:inline-flex}}

/* ── Painel "Aparência" ────────────────────────────────────── */
.vx-ap-fundo{position:fixed;inset:0;z-index:400;background:rgba(2,6,16,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s}
.vx-ap-fundo.on{opacity:1}
.vx-ap{position:fixed;top:0;right:0;bottom:0;z-index:401;width:min(440px,100%);display:flex;flex-direction:column;
  background:var(--panel-solid);color:var(--text);border-left:1px solid var(--line-strong);box-shadow:-30px 0 80px -30px rgba(0,0,0,.6);
  transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.8,.2,1);
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.vx-ap.on{transform:none}
.vx-ap-cab{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.vx-ap-cab h2{font-size:19px}
.vx-ap-cab p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.vx-ap-cab .x{margin-left:auto;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:16px;cursor:pointer}
.vx-ap-corpo{flex:1;overflow:auto;padding:6px 20px 24px;overscroll-behavior:contain}
.vx-ap-sec{padding:16px 0;border-bottom:1px solid var(--line)}
.vx-ap-sec:last-child{border-bottom:0}
.vx-ap-sec h3{font:700 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.vx-ap-temas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vx-ap-tema{display:flex;flex-direction:column;gap:6px;padding:0;border:2px solid var(--line);border-radius:14px;background:none;color:var(--text);cursor:pointer;overflow:hidden;text-align:left;font:600 12.5px var(--f-ui)}
.vx-ap-tema[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.vx-ap-tema .prev{height:58px;position:relative;background:var(--pb)}
.vx-ap-tema .prev i{position:absolute;left:8px;right:8px;height:9px;border-radius:4px;background:var(--pp);border:1px solid var(--pl)}
.vx-ap-tema .prev i:nth-child(1){top:8px;width:45%}
.vx-ap-tema .prev i:nth-child(2){top:22px}
.vx-ap-tema .prev i:nth-child(3){top:36px;width:30%;background:var(--pa);border-color:transparent}
.vx-ap-tema span{padding:0 9px 8px}
.vx-ap-cores{display:flex;flex-wrap:wrap;gap:9px}
.vx-ap-cor{width:34px;height:34px;border-radius:50%;border:2px solid var(--panel-solid);box-shadow:0 0 0 2px var(--line-strong);cursor:pointer;background:var(--c);display:grid;place-items:center;color:#fff;font-size:14px}
.vx-ap-cor[aria-pressed="true"]{box-shadow:0 0 0 3px var(--text)}
.vx-ap-cor.padrao{background:conic-gradient(#4f7cff,#8b5cf6,#ec4899,#f97316,#22c55e,#14b8a6,#4f7cff)}
.vx-ap-seg{display:flex;flex-wrap:wrap;gap:6px;padding:4px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line)}
.vx-ap-seg button{flex:1 1 auto;min-width:64px;padding:8px 10px;border:0;border-radius:9px;background:none;color:var(--muted);font:700 13px var(--f-ui);cursor:pointer}
.vx-ap-seg button[aria-pressed="true"]{background:var(--panel-solid);color:var(--text);box-shadow:0 2px 8px -2px rgba(0,0,0,.35)}
.vx-ap-seg button small{display:block;font-weight:500;font-size:10.5px;color:var(--faint)}
.vx-ap-rodape{display:flex;gap:10px;padding:14px 20px;border-top:1px solid var(--line)}
.vx-ap-rodape .btn{flex:1}
.vx-ap-ok{font-size:12px;color:var(--ok);min-height:16px;margin:6px 0 0}
.vx-ap-instalar{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line)}
.vx-ap-instalar img{width:46px;height:46px;border-radius:11px}
.vx-ap-instalar div{flex:1;font-size:13px;color:var(--muted)}
.vx-ap-instalar b{display:block;color:var(--text);font-size:14px}

/* ── Guia de instalação no iPhone/iPad ─────────────────────── */
.vx-ios{position:fixed;inset:auto 0 0 0;z-index:402;max-height:92vh;overflow:auto;background:var(--panel-solid);color:var(--text);
  border-radius:22px 22px 0 0;border-top:1px solid var(--line-strong);box-shadow:0 -30px 80px -20px rgba(0,0,0,.6);
  transform:translateY(102%);transition:transform .35s cubic-bezier(.2,.8,.2,1);padding:10px 20px calc(22px + env(safe-area-inset-bottom))}
.vx-ios.on{transform:none}
.vx-ios .alca{width:44px;height:5px;border-radius:9px;background:var(--line-strong);margin:4px auto 14px}
.vx-ios h2{font-size:19px;text-align:center}
.vx-ios .sub{text-align:center;color:var(--muted);font-size:13px;margin:4px 0 16px}
.vx-ios ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.vx-ios li{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);font-size:14px;line-height:1.4}
.vx-ios li .n{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font:800 13px var(--f-mono)}
.vx-ios li .ic{margin-left:auto;flex-shrink:0;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--panel-solid);border:1px solid var(--line);color:#0a84ff}
.vx-ios li .ic svg{width:22px;height:22px}
.vx-ios .aviso{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--aviso) 14%,transparent);border:1px solid color-mix(in srgb,var(--aviso) 40%,transparent);font-size:13px}
.vx-ios .seta{position:fixed;left:50%;bottom:calc(8px + env(safe-area-inset-bottom));transform:translateX(-50%);font-size:28px;animation:vxBalanca 1.2s ease-in-out infinite;pointer-events:none}
.vx-ios .btn{width:100%;margin-top:16px}
@keyframes vxBalanca{50%{transform:translate(-50%,8px)}}
@media (min-width:700px){.vx-ios{left:50%;right:auto;width:520px;bottom:24px;border-radius:22px;transform:translate(-50%,130%)}.vx-ios.on{transform:translate(-50%,0)}.vx-ios .seta{display:none}}