/* Cuality X — Modo Web (data-os="web")
   Escritorio limpio con el fondo del usuario y un dock vertical fijo a la
   derecha. Solo aplica con data-os="web": Windows y MacOS quedan intactos. */

html[data-os="web"]{
  --cxw-dock:58px;      /* franja visible, del ancho del icono ampliado */
  --cxw-zona:58px;      /* el dock no invade la app: misma anchura */
  --cxw-bar:26px;       /* alto de la barra de la app abierta */
  --cxw-glass:rgba(10,12,16,.52);
  --cxw-glass-2:rgba(12,14,20,.86);
  --cxw-hover:rgba(255,255,255,.10);
  --cxw-line:rgba(255,255,255,.10);
  --cxw-txt:#f3f5fa;
  --cxw-txt2:rgba(243,245,250,.62);
}
html[data-os="web"][data-theme="light"]{
  --cxw-glass:rgba(255,255,255,.58);
  --cxw-glass-2:rgba(255,255,255,.92);
  --cxw-hover:rgba(0,0,0,.06);
  --cxw-line:rgba(0,0,0,.10);
  --cxw-txt:#0f1420;
  --cxw-txt2:rgba(15,20,32,.62);
}

/* ── Fuera todo lo del escritorio ──────────────────────────────── */
/* El fondo de pantalla NO se toca: es parte de la identidad del usuario. */
html[data-os="web"] .topbar,
html[data-os="web"] .dock,
html[data-os="web"] .desktop,
html[data-os="web"] .mission,
html[data-os="web"] .spotlight,
html[data-os="web"] .context,
html[data-os="web"] #context,
html[data-os="web"] #taskbar-left-controls,
html[data-os="web"] #taskbar-apps-container,
html[data-os="web"] #taskbar-systray,
html[data-os="web"] #taskbar-calendar,
html[data-os="web"] .desktop-icons,
html[data-os="web"] #desktop-icons,
html[data-os="web"] #cx-wallpaper-particles,
html[data-os="web"] #cx-wallpaper-video,
html[data-os="web"] #neural-canvas,
html[data-os="web"] .cx-pet,
html[data-os="web"] #cx-pet,
html[data-os="web"] .desktop-widget,
html[data-os="web"] #cx-widgets,
html[data-os="web"] #cx-wall-edit-panel{
  display:none !important;
}

/* Fondo quieto: sin animaciones. Los ajustes del usuario (brillo, saturacion,
   desenfoque, tono) se aplican con `filter` sobre esta capa, asi que NO se
   toca: anularlo dejaba sin efecto todo lo que editaba en Configuracion. */
html[data-os="web"] #cx-wallpaper-layer{
  animation:none !important; transition:none !important;
}

html[data-os="web"] body{overflow:hidden; color:var(--cxw-txt)}
html[data-os="web"] .wm{top:0 !important; bottom:0 !important}

/* Escritorio limpio: nada que seleccionar en el fondo */
body.cx-web-mode:not(.cxw-app-open){
  -webkit-user-select:none; user-select:none;
}

/* ── Dock vertical, siempre visible ────────────────────────────── */
#cxw-dock{
  position:fixed; top:0; right:0; bottom:0; width:var(--cxw-zona); z-index:9300;
  display:none; flex-direction:column; align-items:stretch;
  padding:12px 0 10px;
  background:transparent;
  /* La zona es ancha solo para dejar crecer al icono: no debe robar clics
     a la app que hay debajo. Solo los iconos reciben pulsaciones. */
  pointer-events:none;
  font:13px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--cxw-txt);
}
body.cx-web-mode #cxw-dock{display:flex}
/* La franja visible: solo esta parte lleva fondo */
#cxw-dock::before{
  content:""; position:absolute; top:0; right:0; bottom:0;
  width:var(--cxw-dock);
  background:var(--cxw-glass);
  border-left:1px solid var(--cxw-line);
  pointer-events:none;
}

/* ── Seccion 1: perfil y seleccion ─────────────────────────────── */
#cxw-sec-perfil{
  flex-shrink:0; width:100%;
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:calc((var(--cxw-dock) - 42px) / 2);
  padding-bottom:10px;
  position:relative;
}
#cxw-sec-perfil::after{
  content:""; position:absolute; bottom:0; right:12px;
  width:calc(var(--cxw-dock) - 24px); height:1px;
  background:var(--cxw-line);
}
#cxw-profile{
  position:relative; flex-shrink:0;
  display:grid; place-items:center; width:42px; height:42px; padding:0;
  background:transparent; border:0; border-radius:50%; cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1);
}
#cxw-profile:hover{transform:scale(1.12)}
#cxw-av{
  display:grid; place-items:center; width:42px; height:42px; flex-shrink:0;
  border-radius:50%;
  background:rgba(255,255,255,.16); color:var(--cxw-txt);
  font-size:16px; font-weight:700; overflow:hidden;
  border:1px solid var(--cxw-line);
}
#cxw-av img{width:100%; height:100%; object-fit:cover}


/* Lista desplazable, sin barra visible */
#cxw-dock-scroll{
  flex:1; width:100%; overflow-y:auto; overflow-x:hidden;
  /* el ancho extra de la zona deja crecer al icono sin que se corte */
  padding:10px 0 18px; overscroll-behavior:contain;
  scrollbar-width:none;
}
#cxw-dock-scroll::-webkit-scrollbar{width:0; height:0}
.cxw-dk{pointer-events:none}
.cxw-dk-ico,#cxw-profile{pointer-events:auto}

.cxw-dk{
  position:relative; display:flex; align-items:center; justify-content:flex-end;
  width:100%; height:58px; flex-shrink:0;
  padding-right:calc((var(--cxw-dock) - 44px) / 2);
  background:transparent; border:0; cursor:pointer;
  color:var(--cxw-txt);
}
.cxw-dk-ico{
  display:grid; place-items:center; width:44px; height:44px; flex-shrink:0;
  border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,.06);
  transform:scale(var(--e,1));
  transform-origin:center center;
  transition:transform .18s cubic-bezier(.34,1.35,.64,1);
}
/* Mientras el raton esta encima, la escala la lleva el puntero: sin
   transicion, si no el efecto va con retraso. */
#cxw-dock.cxw-mag .cxw-dk-ico{transition:none; will-change:transform}
.cxw-dk-ico img,.cxw-dk-ico .icon{
  width:100%; height:100%; border-radius:inherit; object-fit:cover;
}
.cxw-dk-ico .icon{display:grid; place-items:center}
.cxw-dk-ico .icon svg{width:68%; height:68%}

/* ── Seccion 3: ajustes rapidos, en una fila ───────────────────── */
/* Una sola fila, compacta: asi el pie roba el minimo espacio a las apps. */
#cxw-sec-pie{
  flex-shrink:0; width:100%;
  display:flex; flex-direction:row; align-items:center; justify-content:flex-end;
  gap:2px;
  padding:7px calc((var(--cxw-dock) - 50px) / 2) 1px 0;
  position:relative;
}
#cxw-sec-pie::before{
  content:""; position:absolute; top:0; right:12px;
  width:calc(var(--cxw-dock) - 24px); height:1px;
  background:var(--cxw-line);
}
#cxw-sec-pie button{
  pointer-events:auto;
  display:grid; place-items:center; width:24px; height:24px; flex-shrink:0;
  padding:0; line-height:0;
  background:transparent; border:0; border-radius:7px;
  color:var(--cxw-txt2); cursor:pointer;
  font:800 10px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.02em;
  transition:background .14s, color .14s;
}
#cxw-sec-pie button svg{display:block; width:15px; height:15px}
#cxw-sec-pie button:hover{background:var(--cxw-hover); color:var(--cxw-txt)}

/* Nombre de la app: un unico globo fijo. Dentro del dock quedaba recortado
   por el contenedor con scroll y no llegaba a verse nunca. */
#cxw-tip{
  position:fixed; z-index:9400; pointer-events:none;
  padding:6px 12px; border-radius:9px; white-space:nowrap;
  background:var(--cxw-glass-2);
  border:1px solid var(--cxw-line);
  color:var(--cxw-txt); font:550 12.5px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  opacity:0; transform:translate(10px,-50%);
  transition:opacity .14s ease, transform .2s cubic-bezier(.34,1.35,.64,1);
  box-shadow:0 6px 22px rgba(0,0,0,.3);
}
#cxw-tip.visible{opacity:1; transform:translate(0,-50%)}

/* El perfil esta fuera del scroll, asi que su etiqueta si cabe */
#cxw-profile-label{
  position:absolute; right:calc(100% + 10px); top:50%;
  transform:translate(10px,-50%);
  padding:6px 12px; border-radius:9px; white-space:nowrap;
  background:var(--cxw-glass-2);
  border:1px solid var(--cxw-line);
  color:var(--cxw-txt); font-size:12.5px; font-weight:550;
  opacity:0; pointer-events:none;
  transition:opacity .16s ease, transform .2s cubic-bezier(.34,1.35,.64,1);
  box-shadow:0 6px 22px rgba(0,0,0,.28);
}
#cxw-profile:hover #cxw-profile-label{opacity:1; transform:translate(0,-50%)}

/* ── Barra de la app abierta ───────────────────────────────────── */
#cxw-appbar{
  position:fixed; top:0; left:0; right:var(--cxw-dock); height:var(--cxw-bar);
  z-index:9200; display:none; align-items:center; gap:8px; padding:0 4px 0 10px;
  background:var(--cxw-glass-2);
  border-bottom:1px solid var(--cxw-line);
  font:12.5px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--cxw-txt);
}
body.cx-web-mode.cxw-app-open #cxw-appbar{display:flex}

.cxw-ab-ico{
  display:grid; place-items:center; width:18px; height:18px; flex-shrink:0;
  border-radius:5px; overflow:hidden; background:rgba(255,255,255,.06);
}
.cxw-ab-ico img,.cxw-ab-ico .icon{width:100%; height:100%; object-fit:cover; border-radius:inherit}
.cxw-ab-ico .icon{display:grid; place-items:center}
.cxw-ab-ico .icon svg{width:68%; height:68%}
.cxw-ab-name{font-weight:600; letter-spacing:-.2px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:52vw}
.cxw-ab-sp{flex:1}
#cxw-ab-close{
  display:grid; place-items:center; width:22px; height:22px; flex-shrink:0;
  padding:0; margin:0; line-height:0;
  background:transparent; border:0; border-radius:6px;
  color:var(--cxw-txt2); cursor:pointer;
  transition:background .15s, color .15s;
}
/* El svg es en linea por defecto: la linea base lo desplazaba y la X
   quedaba descentrada dentro del boton. */
#cxw-ab-close svg{
  display:block; width:13px; height:13px;
}
#cxw-ab-close:hover{background:#dc2626; color:#fff}

/* ── La app ocupa el resto de la pantalla ──────────────────────── */
body.cx-web-mode #wm .window{
  position:fixed !important;
  top:var(--cxw-bar) !important; left:0 !important;
  right:var(--cxw-dock) !important; bottom:0 !important;
  width:auto !important; height:auto !important;
  min-width:0 !important; min-height:0 !important;
  max-width:none !important; max-height:none !important;
  margin:0 !important; transform:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  display:flex !important; flex-direction:column !important;
  resize:none !important; z-index:200 !important;
}
body.cx-web-mode #wm .window.hidden{display:none !important}

/* Barra de titulo, semaforo y agarres: no existen en web */
body.cx-web-mode #wm .window > .titlebar,
body.cx-web-mode #wm .window .resize-handle,
body.cx-web-mode #wm .window .btn.fullscreen-pink,
body.cx-web-mode .window-snap-preview{
  display:none !important;
}

body.cx-web-mode #wm .window > .content{
  flex:1 1 auto !important;
  height:auto !important; min-height:0 !important; max-height:none !important;
  border-radius:0 !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch;
}

/* En movil el dock se estrecha y los layouts de dos columnas se apilan */
@media(max-width:760px){
  html[data-os="web"]{--cxw-dock:52px; --cxw-zona:92px}
  .cxw-dk-ico{width:38px; height:38px}
  .cxw-dk{height:52px}
  body.cx-web-mode #wm .window > .content{display:block !important}
  body.cx-web-mode #cfg-sidebar{
    width:100% !important; height:auto !important;
    border-right:0 !important; border-bottom:1px solid var(--cxw-line) !important;
  }
  body.cx-web-mode #cfg-content{width:100% !important; height:auto !important}
}

@media(prefers-reduced-motion:reduce){
  .cxw-dk-ico,#cxw-tip,#cxw-profile{transition:none !important}
}

/* ── Selector de perfiles (avatar del dock) ────────────────────── */
#cxw-perfiles{
  position:fixed; top:14px; right:calc(var(--cxw-dock) + 10px); z-index:9500;
  min-width:214px; max-width:290px; padding:7px;
  background:var(--cxw-glass-2);
  border:1px solid var(--cxw-line); border-radius:14px;
  box-shadow:0 14px 44px rgba(0,0,0,.42);
  font:13.5px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--cxw-txt);
  animation:cxwPf .17s cubic-bezier(.34,1.35,.64,1);
}
@keyframes cxwPf{
  from{opacity:0; transform:translateX(10px) scale(.97)}
  to{opacity:1; transform:none}
}
.cxw-pf-cab{
  display:flex; align-items:center; gap:8px;
  padding:5px 6px 8px 10px;
}
.cxw-pf-tit{
  flex:1; color:var(--cxw-txt2);
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}
.cxw-pf-cfg{
  display:grid; place-items:center; width:26px; height:26px; flex-shrink:0;
  padding:0; line-height:0;
  background:transparent; border:0; border-radius:8px;
  color:var(--cxw-txt2); cursor:pointer;
  transition:background .14s, color .14s, transform .2s cubic-bezier(.34,1.35,.64,1);
}
.cxw-pf-cfg svg{display:block}
.cxw-pf-cfg:hover{background:var(--cxw-hover); color:var(--cxw-txt); transform:rotate(45deg)}
.cxw-pf{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; margin:1px 0;
  background:transparent; border:0; border-radius:10px;
  color:var(--cxw-txt); font:inherit; text-align:left; cursor:pointer;
  transition:background .13s;
}
.cxw-pf:hover{background:var(--cxw-hover)}
.cxw-pf.activo{background:rgba(255,255,255,.09)}
.cxw-pf-av{
  display:grid; place-items:center; width:30px; height:30px; flex-shrink:0;
  border-radius:50%; overflow:hidden;
  background:rgba(255,255,255,.14); color:var(--cxw-txt);
  font-size:13px; font-weight:700;
}
.cxw-pf-av img{width:100%; height:100%; object-fit:cover}
.cxw-pf-txt{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cxw-pf-ok{color:var(--cxw-txt2); font-size:13px}
.cxw-pf-sep{height:1px; margin:6px 8px; background:var(--cxw-line)}

/* ══════════════════════════════════════════════════════════════════
   Barra personalizable: tamaño, posicion y ocultado automatico
   ══════════════════════════════════════════════════════════════════ */

/* ── Tamaños ───────────────────────────────────────────────────── */
body.cxw-tam-sm{ --cxw-dock:46px; --cxw-zona:46px; --cxw-ico:31px; --cxw-fila:44px; --cxw-av:30px }
body.cxw-tam-md{ --cxw-dock:58px; --cxw-zona:58px; --cxw-ico:40px; --cxw-fila:56px; --cxw-av:40px }
body.cxw-tam-lg{ --cxw-dock:74px; --cxw-zona:74px; --cxw-ico:51px; --cxw-fila:70px; --cxw-av:50px }

body.cx-web-mode .cxw-dk-ico{ width:var(--cxw-ico); height:var(--cxw-ico) }
body.cx-web-mode .cxw-dk{ height:var(--cxw-fila) }
body.cx-web-mode #cxw-av{ width:var(--cxw-av); height:var(--cxw-av) }
body.cx-web-mode #cxw-profile{ width:var(--cxw-av); height:var(--cxw-av) }
body.cx-web-mode #cxw-sec-perfil{ padding-right:calc((var(--cxw-dock) - var(--cxw-av)) / 2) }

/* ── Posicion: izquierda ───────────────────────────────────────── */
body.cxw-pos-left #cxw-dock{ right:auto; left:0; align-items:flex-start }
body.cxw-pos-left #cxw-dock::before{
  right:auto; left:0; border-left:0; border-right:1px solid var(--cxw-line);
}
body.cxw-pos-left #cxw-sec-perfil,
body.cxw-pos-left .cxw-dk,
body.cxw-pos-left #cxw-sec-pie{ justify-content:flex-start; padding-right:0 }
body.cxw-pos-left #cxw-sec-perfil{ padding-left:calc((var(--cxw-dock) - var(--cxw-av)) / 2) }
body.cxw-pos-left .cxw-dk{ padding-left:calc((var(--cxw-dock) - var(--cxw-ico)) / 2) }
body.cxw-pos-left #cxw-sec-pie{ padding-left:calc((var(--cxw-dock) - 50px) / 2) }
body.cxw-pos-left #cxw-sec-perfil::after,
body.cxw-pos-left #cxw-sec-pie::before{ right:auto; left:12px }
body.cxw-pos-left .cxw-dk-ico{ transform-origin:center center }
body.cxw-pos-left #cxw-appbar{ left:var(--cxw-dock); right:0 }
body.cxw-pos-left #wm .window{ left:var(--cxw-dock) !important; right:0 !important }
body.cxw-pos-left #cxw-perfiles{ right:auto; left:calc(var(--cxw-dock) + 10px) }
body.cxw-pos-left.cxw-auto.cxw-oculto #cxw-dock{ transform:translateX(-100%) }

/* ── Posicion: derecha (base) ──────────────────────────────────── */
body.cxw-pos-right.cxw-auto.cxw-oculto #cxw-dock{ transform:translateX(100%) }

/* ── Ocultado automatico ───────────────────────────────────────── */
body.cxw-auto #cxw-dock{ transition:transform .26s cubic-bezier(.33,1,.68,1) }

/* ── Menu del boton derecho ────────────────────────────────────── */
#cxw-ajustes{
  position:fixed; z-index:9600; min-width:226px; padding:6px;
  background:var(--cxw-glass-2);
  border:1px solid var(--cxw-line); border-radius:13px;
  box-shadow:0 14px 44px rgba(0,0,0,.44);
  font:13.5px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--cxw-txt);
  animation:cxwPf .15s cubic-bezier(.34,1.35,.64,1);
}
.cxw-aj-it{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; background:transparent; border:0; border-radius:9px;
  color:var(--cxw-txt); font:inherit; text-align:left; cursor:pointer;
  transition:background .13s;
}
.cxw-aj-it:hover{ background:var(--cxw-hover) }
.cxw-aj-tx{ flex:1 }
.cxw-aj-fl{ color:var(--cxw-txt2); transition:transform .18s; font-size:16px; line-height:1 }
.cxw-aj-sep{ height:1px; margin:5px 8px; background:var(--cxw-line) }

.cxw-aj-sw{
  position:relative; width:34px; height:19px; flex-shrink:0;
  background:var(--cxw-line); border-radius:99px; transition:background .18s;
}
.cxw-aj-sw::after{
  content:""; position:absolute; top:2.5px; left:2.5px; width:14px; height:14px;
  background:#fff; border-radius:50%; transition:transform .18s;
}
.cxw-aj-sw.on{ background:#22c55e }
.cxw-aj-sw.on::after{ transform:translateX(15px) }

/* Submenu flotante al lado, visible al pasar el raton */
.cxw-aj-grp{ position:relative }
.cxw-aj-sub{
  position:absolute; left:calc(100% + 5px); top:-6px; z-index:1;
  display:none; min-width:172px; padding:6px;
  background:var(--cxw-glass-2);
  border:1px solid var(--cxw-line); border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.44);
}
/* Puente invisible: deja pasar el raton del titulo al submenu */
.cxw-aj-sub::before{
  content:""; position:absolute; top:0; bottom:0; left:-9px; width:9px;
}
.cxw-aj-izq .cxw-aj-sub{ left:auto; right:calc(100% + 5px) }
.cxw-aj-izq .cxw-aj-sub::before{ left:auto; right:-9px }
.cxw-aj-grp:hover .cxw-aj-sub,
.cxw-aj-sub.abierto{ display:block }
.cxw-aj-grp:hover .cxw-aj-it,
.cxw-aj-grp:hover .cxw-aj-fl{ background:var(--cxw-hover) }
.cxw-aj-grp:hover .cxw-aj-fl{ background:transparent; transform:translateX(2px) }
.cxw-aj-op{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:7px 10px; margin:1px 0;
  background:transparent; border:0; border-radius:8px;
  color:var(--cxw-txt2); font:inherit; font-size:13px; text-align:left; cursor:pointer;
  transition:background .13s, color .13s;
}
.cxw-aj-op:hover{ background:var(--cxw-hover); color:var(--cxw-txt) }
.cxw-aj-op.activo{ color:var(--cxw-txt); font-weight:600 }
.cxw-aj-op span:first-child{ flex:1 }
.cxw-aj-ok{ font-size:12px }

/* ── Centrado dentro de la franja, sea cual sea el tamaño ──────── */
/* La zona es mas ancha que la franja: se rellena el sobrante del lado
   contrario y el contenido queda centrado en la parte visible. */
body.cx-web-mode #cxw-sec-perfil,
body.cx-web-mode .cxw-dk,
body.cx-web-mode #cxw-sec-pie{
  justify-content:center;
  padding-left:calc(var(--cxw-zona) - var(--cxw-dock));
  padding-right:0;
}
body.cxw-pos-left #cxw-sec-perfil,
body.cxw-pos-left .cxw-dk,
body.cxw-pos-left #cxw-sec-pie{
  padding-left:0;
  padding-right:calc(var(--cxw-zona) - var(--cxw-dock));
}
/* En pequeño los dos botones del pie no caben a 24px */
body.cxw-tam-sm #cxw-sec-pie button{ width:20px; height:20px; border-radius:6px }
body.cxw-tam-sm #cxw-sec-pie button svg{ width:13px; height:13px }
body.cxw-tam-sm #cxw-sec-pie{ gap:1px }
body.cxw-tam-lg #cxw-sec-pie button{ width:28px; height:28px }

/* ── Indicador de la app abierta ───────────────────────────────── */
.cxw-dk.abierta::after{
  content:""; position:absolute; top:50%; width:4px; height:4px;
  border-radius:50%; background:var(--cxw-txt);
  transform:translateY(-50%); opacity:.85;
}
body.cxw-pos-right .cxw-dk.abierta::after{ right:3px }
body.cxw-pos-left .cxw-dk.abierta::after{ left:3px }

/* ── Animacion al abrir una app ────────────────────────────────── */
/* La ventana se ve al instante: mientras el HTML y el script llegan,
   aqui se muestra el icono de la app y una barra de progreso. */
#cxw-cargando{
  position:fixed; z-index:210;
  top:var(--cxw-bar); bottom:0; left:0; right:var(--cxw-dock);
  display:none; align-items:center; justify-content:center;
  background:var(--cxw-glass-2);
}
body.cxw-pos-left #cxw-cargando{ left:var(--cxw-dock); right:0 }
body.cx-web-mode.cxw-cargando #cxw-cargando{ display:flex }

.cxw-cg-caja{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  animation:cxwCgEntra .28s cubic-bezier(.34,1.3,.64,1);
}
@keyframes cxwCgEntra{
  from{ opacity:0; transform:translateY(8px) scale(.96) }
  to{ opacity:1; transform:none }
}

.cxw-cg-ico{
  width:66px; height:66px; border-radius:18px; overflow:hidden;
  background:rgba(255,255,255,.06);
  display:grid; place-items:center;
  animation:cxwCgLate 1.5s ease-in-out infinite;
}
.cxw-cg-ico img,.cxw-cg-ico .icon{
  width:100%; height:100%; object-fit:cover; border-radius:inherit;
}
.cxw-cg-ico .icon{ display:grid; place-items:center }
.cxw-cg-ico .icon svg{ width:68%; height:68% }
@keyframes cxwCgLate{
  0%,100%{ transform:scale(1); opacity:1 }
  50%{ transform:scale(1.07); opacity:.86 }
}

.cxw-cg-nom{
  color:var(--cxw-txt); font:600 14.5px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:-.2px;
}

.cxw-cg-barra{
  position:relative; width:132px; height:3px; border-radius:99px;
  background:var(--cxw-line); overflow:hidden;
}
.cxw-cg-barra span{
  position:absolute; top:0; bottom:0; left:0; width:42%;
  border-radius:99px; background:var(--cxw-txt); opacity:.75;
  animation:cxwCgBarra 1.15s ease-in-out infinite;
}
@keyframes cxwCgBarra{
  0%{ transform:translateX(-110%) }
  100%{ transform:translateX(275%) }
}

/* ── Transicion entre aplicaciones ─────────────────────────────── */
/* La ventana lleva transform:none !important (para ocupar toda la pantalla),
   asi que el movimiento se anima en su contenido y la opacidad en la ventana. */
body.cx-web-mode #wm .window.cxw-sale{
  animation:cxwWinSale .16s ease-in forwards;
  pointer-events:none;
}
body.cx-web-mode #wm .window.cxw-sale > .content{
  animation:cxwCntSale .16s ease-in forwards;
}
@keyframes cxwWinSale{ from{ opacity:1 } to{ opacity:0 } }
@keyframes cxwCntSale{ from{ transform:none } to{ transform:scale(.985) } }

/* Y entra cuando ya esta lista */
body.cx-web-mode:not(.cxw-cargando) #wm .window:not(.hidden){
  animation:cxwWinEntra .2s ease-out;
}
body.cx-web-mode:not(.cxw-cargando) #wm .window:not(.hidden) > .content{
  animation:cxwCntEntra .26s cubic-bezier(.33,1,.68,1);
}
@keyframes cxwWinEntra{ from{ opacity:0 } to{ opacity:1 } }
@keyframes cxwCntEntra{
  from{ transform:scale(1.012); opacity:.4 }
  to{ transform:none; opacity:1 }
}

@media(prefers-reduced-motion:reduce){
  .cxw-cg-caja,.cxw-cg-ico,.cxw-cg-barra span,
  body.cx-web-mode #wm .window,
  body.cx-web-mode #wm .window > .content{
    animation:none !important;
  }
}