/* ================================================================
   emoji-premium.css — Tratamiento CSS premium para emojis
   - Apple platforms: emoji nativo (Apple Color Emoji ya es premium).
   - Other platforms (Windows/Linux/Android): "enhanced" via CSS:
     * font-stack que prefiere fuentes premium si están instaladas
       (Segoe UI Emoji, Noto Color Emoji si el SO ya las trae)
     * filter chain: contrast + saturate + drop-shadow + 3D lift
     * antialias y subpixel-rendering forzado
     * sin asset externo, sin CDN
   ================================================================ */

/* ── Selectores universales para zonas con emojis visibles ── */
.tr-icon,
.page-icon,
#page-icon,
.emoji-orb,
.emoji-chip,
.nav-icon-orb,
.page-icon-orb,
.block-icon-orb,
.rc-icon,
.wm-ws-icon,
.cx-icon,
.gv-node-label,
.aic-msg-emoji,
.tpl-icon,
.emoji-premium {
  font-feature-settings: "ss01", "liga", "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Pack "apple-native": no tocar (Apple Color Emoji ya es premium) ── */
html[data-emoji-pack="apple-native"] .tr-icon,
html[data-emoji-pack="apple-native"] .page-icon,
html[data-emoji-pack="apple-native"] #page-icon {
  font-family: "Apple Color Emoji", system-ui, sans-serif;
}

/* ── Pack "enhanced": Windows/Linux/Android — boost CSS ──
   Stack de fuentes: prefiere las premium ya instaladas en el SO.
   - Segoe UI Emoji: incluido en Windows 10+ (premium, redondeado)
   - Noto Color Emoji: en muchos Linux/Android
   - EmojiOne Color (algunos Linux)
   - Twemoji Mozilla (Firefox usa esto en algunas builds)
   - Fallback: emoji nativo del SO
*/
html[data-emoji-pack="enhanced"] .tr-icon,
html[data-emoji-pack="enhanced"] .page-icon,
html[data-emoji-pack="enhanced"] #page-icon,
html[data-emoji-pack="enhanced"] .emoji-orb,
html[data-emoji-pack="enhanced"] .emoji-chip,
html[data-emoji-pack="enhanced"] .nav-icon-orb,
html[data-emoji-pack="enhanced"] .page-icon-orb,
html[data-emoji-pack="enhanced"] .block-icon-orb,
html[data-emoji-pack="enhanced"] .rc-icon,
html[data-emoji-pack="enhanced"] .wm-ws-icon,
html[data-emoji-pack="enhanced"] .gv-node-label,
html[data-emoji-pack="enhanced"] .emoji-premium {
  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    "EmojiOne Color",
    "Twemoji Mozilla",
    "Android Emoji",
    system-ui,
    sans-serif;
  /* Boost visual: contraste/saturación + lift 3D */
  filter:
    contrast(1.05)
    saturate(1.10)
    drop-shadow(0 1px 0 rgba(255,255,255,0.40))
    drop-shadow(0 1.5px 3px rgba(0,0,0,0.18))
    drop-shadow(0 4px 10px rgba(0,0,0,0.10));
  transform: translateZ(0); /* GPU layer */
}

/* Page icon en desktop: aún más grande y premium */
@media (min-width: 1024px) {
  html[data-emoji-pack="enhanced"] #page-icon,
  html[data-emoji-pack="apple-native"] #page-icon {
    font-size: 64px !important;
    line-height: 1 !important;
    filter:
      drop-shadow(0 2px 0 rgba(255,255,255,0.50))
      drop-shadow(0 3px 6px rgba(0,0,0,0.18))
      drop-shadow(0 8px 20px rgba(0,0,0,0.12));
    transition: transform 220ms cubic-bezier(.34,1.56,.64,1);
  }
  html[data-emoji-pack="enhanced"] #page-icon:hover,
  html[data-emoji-pack="apple-native"] #page-icon:hover {
    transform: scale(1.04) rotate(-2deg);
  }
}

/* Sidebar emoji: más sutil */
html[data-visual="liquid-glass"] .tr-icon {
  font-size: 16px !important;
}
@media (min-width: 1024px) {
  html[data-visual="liquid-glass"] .tr-icon {
    font-size: 17px !important;
  }
}

/* Workspace icon en sidebar */
html[data-emoji-pack="enhanced"] .wm-ws-icon,
html[data-emoji-pack="apple-native"] .wm-ws-icon {
  font-size: 16px;
}

/* Mind map node labels con emoji: glow sutil */
html[data-emoji-pack="enhanced"] .gv-node-label {
  filter:
    contrast(1.05)
    saturate(1.10)
    drop-shadow(0 0 6px rgba(255,255,255,0.45))
    drop-shadow(0 2px 4px rgba(0,0,0,0.20));
}

/* Slash menu icons que son emojis */
html[data-emoji-pack="enhanced"] .sm-icon {
  font-feature-settings: "kern";
}

/* Reduce motion respeta animaciones */
@media (prefers-reduced-motion: reduce) {
  html[data-emoji-pack="enhanced"] #page-icon,
  html[data-emoji-pack="apple-native"] #page-icon {
    transition: none !important;
  }
}

/* High contrast: simplifica el filter chain */
@media (prefers-contrast: more) {
  html[data-emoji-pack="enhanced"] .tr-icon,
  html[data-emoji-pack="enhanced"] .page-icon,
  html[data-emoji-pack="enhanced"] #page-icon,
  html[data-emoji-pack="enhanced"] .emoji-orb {
    filter: none !important;
  }
}