/* Poxtal — temas. "Violet" es el aspecto de siempre (sin cambios).
   "Light": blanco y gris neutro, solo el acento en violeta.
   "Dark": modo oscuro de toda la app. Se carga la ÚLTIMA. */

/* ---------- LIGHT ---------- */
html[data-theme="light"]{
  --paper:#FFFFFF;--line:#E5E7EB;--violet-soft:#F1F2F5;--violet-faint:#F7F8FA;--violet-soft-2:#F1F2F5;
}
html[data-theme="light"] body,html[data-theme="light"] .frame,
html[data-theme="light"] .screen:not(.onb){background:#FFFFFF !important;}
html[data-theme="light"] .topbar,html[data-theme="light"] .sub-header,html[data-theme="light"] .bottomnav{border-color:#E5E7EB !important;}
html[data-theme="light"] .menu-shortcuts>div{background:#F3F4F6 !important;}
html[data-theme="light"] .navbtn.active>span{background:#F1F2F5 !important;}

/* ---------- DARK ----------
   Se invierte la luz de toda la página y se devuelven a su color normal
   las fotos, vídeos, mapas, QR y emojis (los iconos de línea sí se invierten con la página). */
html[data-theme="dark"]{filter:invert(1) hue-rotate(180deg);background:#fff;}
html[data-theme="dark"] img,
html[data-theme="dark"] video,
html[data-theme="dark"] canvas,
html[data-theme="dark"] .leaflet-tile-pane,
html[data-theme="dark"] .emo,
html[data-theme="dark"] .screen.onb,
html[data-theme="dark"] #qrBox,
html[data-theme="dark"] [class*="qr"] canvas{filter:hue-rotate(180deg) invert(1);}

/* Dark: lo violeta y lo amarillo de marca conservan su color */
html[data-theme="dark"] .hero-banner,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .navbtn-center,
html[data-theme="dark"] .mox-add-btn,
html[data-theme="dark"] .tab-btn.active,
html[data-theme="dark"] .tab-btn-icon.active,
html[data-theme="dark"] .album-pill.active,
html[data-theme="dark"] .chip.active{filter:hue-rotate(180deg) invert(1);}