/* =====================================================================
   LENORE · Espacio de trabajo (diseño "Espacio de trabajo V3")
   Fijos: barra superior, reloj/clima, barra lateral, dock. Paneles: .wp (se mueven, se cierran, se configuran).
   ===================================================================== */
.wsx-root { position: fixed; inset: 0; z-index: 1; overflow: clip; /* clip: ni siquiera un scrollIntoView puede desplazar el espacio */ color: #fff; font: 400 13px/1.3 "Outfit", "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.wsx-root svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wsx-root button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.wsx-bg { position: absolute; inset: -40px; background: #353030 center / cover no-repeat; transition: filter .4s; }
.wsx-veil { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 42%, rgba(226, 224, 224, .22), transparent 72%), linear-gradient(180deg, rgba(58, 54, 54, .08), rgba(49, 45, 45, .28)); }
.wsx-root.focusing .wsx-bg { filter: blur(18px) brightness(.7) !important; }
/* Cristal del diseño */
.wsx-glass, .wp:not(.app), .wsx-rail, .wsx-dock, .wsx-search, .wsx-exitfocus {
  background: linear-gradient(155deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .32); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 40px rgba(29, 26, 26, .28); }
/* Sin backdrop-filter en los paneles: el fondo ya va desenfocado y así el espacio va fluido en cualquier ordenador */

/* ---------- Fijos ---------- */
/* Barra superior, barra lateral y dock siempre por encima; el reloj y el clima pueden quedar debajo de una sección abierta */
.wsx-top, .wsx-rail, .wsx-dock, .wsx-exitfocus { position: absolute; z-index: 2; }
.wsx-clock, .wsx-weather { position: absolute; z-index: 0; }
.wsx-top { left: 0; right: 0; top: 0; height: 86px; pointer-events: none; }
.wsx-top > * { pointer-events: auto; }
.wsx-logo { position: absolute; left: 24px; top: 22px; display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.wsx-logo img { height: 34px; width: auto; }
.wsx-logo svg { height: 15px; width: auto; fill: none; stroke: #fff; stroke-width: 2px; stroke-linecap: square; }
.wsx-search { position: absolute; left: 50%; top: 32px; width: min(473px, 34vw); height: 44px; transform: translateX(-50%); border-radius: 22px !important; display: flex; align-items: center; gap: 16px; padding: 0 26px 0 22px !important;
  border: 1.5px solid rgba(255, 255, 255, .55) !important; box-shadow: 0 0 22px rgba(205, 200, 200, .45), inset 0 0 12px rgba(255, 255, 255, .15) !important; text-align: left; transition: box-shadow .2s; }
.wsx-search:hover { box-shadow: 0 0 30px rgba(205, 200, 200, .7), inset 0 0 12px rgba(255, 255, 255, .2) !important; }
.wsx-search svg.i { width: 22px; height: 22px; color: #dcd9d9; filter: drop-shadow(0 0 6px #c8c3c3); }
.wsx-search span { font-size: 12.5px; opacity: .85; flex: 1; }
.wsx-search kbd { font: 11.5px "Outfit", sans-serif; opacity: .75; }
.wsx-icons { position: absolute; right: 48px; top: 30px; height: 46px; display: flex; align-items: center; gap: 22px; }
.wsx-ic { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; transition: background .2s; }
button.wsx-ic:hover, .wsx-cred:hover { background: rgba(255, 255, 255, .12); }
.wsx-ic svg.i { width: 20px; height: 20px; }
.wsx-bell i { position: absolute; top: -8px; right: -9px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; font: 500 10px "Outfit", sans-serif; font-style: normal;
  background: linear-gradient(135deg, #ccc8c8, #e85b6e); box-shadow: 0 0 10px rgba(195, 190, 190, .8); }
.wsx-cred { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22) !important; font-size: 12.5px; }
.wsx-cred svg.i { width: 16px; height: 16px; color: #e5e2e2; }
.wsx-cred b { font-weight: 500; font-variant-numeric: tabular-nums; }
.wsx-user { display: flex; align-items: center; gap: 12px; text-align: left; padding: 3px 8px 3px 3px !important; border-radius: 26px; transition: background .2s; }
.wsx-user:hover { background: rgba(255, 255, 255, .1); }
.wsx-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 500 16px "Outfit", sans-serif; background: linear-gradient(135deg, #ccc8c8, #e84c61); box-shadow: 0 4px 14px rgba(18, 17, 17, .4), inset 0 1px 0 rgba(255, 255, 255, .4); }
.wsx-user b { display: block; font-size: 13px; font-weight: 400; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsx-user span { display: block; font-size: 11px; opacity: .75; }
.wsx-user svg.i { width: 13px; height: 13px; opacity: .8; }
.wsx-clock { left: 62px; top: 90px; display: flex; flex-direction: column; pointer-events: none; text-shadow: 0 2px 12px rgba(18, 17, 17, .35); }
.wsx-clock b { font-size: 37px; font-weight: 300; line-height: 1.12; font-variant-numeric: tabular-nums; }
.wsx-clock span { font-size: 15.5px; font-weight: 300; line-height: 1.3; }
.wsx-weather { left: 60px; top: 180px; display: flex; align-items: center; gap: 12px; padding: 4px 8px 4px 4px !important; border-radius: 12px; text-align: left; }
.wsx-weather:hover { background: rgba(255, 255, 255, .1); }
.wsx-weather svg.i { width: 30px; height: 30px; color: #fff; }
.wsx-weather b { display: block; font-size: 12.5px; font-weight: 400; }
.wsx-weather span { display: block; font-size: 10.5px; opacity: .72; }
.wsx-rail { left: 38px; top: 253px; width: 57px; border-radius: 30px !important; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 10px 0 12px; }
.wsx-rail button { width: 40px; height: 39px; display: grid; place-items: center; border-radius: 12px; transition: background .2s; }
.wsx-rail button:hover { background: rgba(255, 255, 255, .12); }
.wsx-rail button.on { height: 40px; margin-bottom: 3px; background: linear-gradient(145deg, #cbc7c7, #e84c61); box-shadow: 0 0 18px rgba(190, 185, 185, .85), inset 0 1px 0 rgba(255, 255, 255, .5); }
.wsx-rail svg.i { width: 19px; height: 19px; }
.wsx-dock { left: 50%; bottom: 37px; transform: translateX(-50%); height: 60px; border-radius: 30px !important; display: flex; align-items: center; gap: 10px; padding: 0 20px 0 9px; font-size: 12px; max-width: calc(100% - 520px); }
.wsx-dock button { display: flex; align-items: center; gap: 8px; white-space: nowrap; height: 42px; padding: 0 8px; border-radius: 21px; transition: background .2s; }
.wsx-dock button:hover { background: rgba(255, 255, 255, .12); }
.wsx-dock button.on { padding: 0 22px 0 18px; background: linear-gradient(135deg, rgba(205, 200, 200, .92), rgba(231, 94, 112, .88)); box-shadow: 0 0 18px rgba(195, 190, 190, .7), inset 0 1px 0 rgba(255, 255, 255, .5); }
.wsx-dock svg.i { width: 16px; height: 16px; }
.wsx-dock em { width: 1px; height: 20px; background: rgba(255, 255, 255, .22); flex: none; }
.wsx-mask { width: 16px; height: 16px; display: inline-block; flex: none; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; background: #fff; }
.wsx-exitfocus { left: 50%; top: 96px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 18px !important; border-radius: 22px !important; }

/* ---------- Área de paneles ---------- */
.wsx-area { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wp { position: absolute; pointer-events: auto; transition: opacity .3s, transform .3s, box-shadow .2s; }
.wp.dragging, .wp.resizing { transition: none; box-shadow: 0 30px 70px rgba(21, 19, 19, .5), 0 0 0 1px rgba(221, 219, 219, .6), 0 0 30px rgba(200, 195, 195, .5) !important; }
.wp.dragging { cursor: grabbing; }
.wp:not(.app) { cursor: grab; }
.wp:not(.app) :is(button, textarea, input) { cursor: pointer; }
.wp textarea { cursor: text !important; }
.wp.flash { animation: wpflash 1s ease; }
@keyframes wpflash { 0% { box-shadow: 0 0 0 0 rgba(217, 213, 213, .9); } 100% { box-shadow: 0 0 0 16px rgba(217, 213, 213, 0); } }
.wp-body { position: relative; width: 100%; height: 100%; overflow: clip; border-radius: inherit; }
/* Botones al pasar el ratón: configurar, mover, quitar */
.wp-ctl { position: absolute; right: 10px; top: -14px; z-index: 3; display: flex; gap: 4px; opacity: 0; transform: translateY(4px); transition: .2s; pointer-events: none; }
.wp:hover > .wp-ctl, .wp.dragging > .wp-ctl { opacity: 1; transform: none; pointer-events: auto; }
.wp-ctl button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(44, 40, 40, .78); border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); backdrop-filter: blur(10px); }
.wp-ctl button:hover { background: rgba(241, 99, 118, .9); }
.wp-ctl button[data-wp="drag"] { cursor: grab; }
.wp-ctl svg.i { width: 14px; height: 14px; }
.wp-resize { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; cursor: nwse-resize; z-index: 3; opacity: 0; transition: opacity .2s;
  background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, .7) 58%, transparent 58%, transparent 70%, rgba(255, 255, 255, .7) 70%, rgba(255, 255, 255, .7) 78%, transparent 78%); border-radius: 0 0 14px 0; }
.wp:hover > .wp-resize { opacity: 1; }
/* Modo Focus y "ver escritorio" */
.wsx-area.focus .wp:not(.app) { opacity: 0; transform: scale(.96); pointer-events: none; }
.wsx-area.desk .wp.app { opacity: 0; transform: scale(.97); pointer-events: none; }

/* ---------- Paneles (contenido) ---------- */
/* Música */
.wp-music .wp-body { padding: 16px 14px 12px 12px; }
.wm-art { position: absolute; left: 12px; top: 16px; width: 60px; height: 60px; border-radius: 8px; object-fit: cover; }
.wm-song { position: absolute; left: 84px; top: 22px; }
.wm-song small { display: block; font-size: 9px; opacity: .7; }
.wm-song b { display: block; font-size: 12.5px; font-weight: 400; margin-top: 6px; }
.wm-song span { display: block; font-size: 9.5px; opacity: .7; margin-top: 2px; }
.wm-top { position: absolute; right: 14px; top: 14px; opacity: .85; }
.wm-top svg.i { width: 15px; height: 15px; }
.wm-prog { position: absolute; left: 12px; right: 14px; top: 89px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.wm-prog i { display: block; width: 0; height: 100%; border-radius: 3px; background: #fff; }
.wm-times { position: absolute; left: 12px; right: 14px; top: 99px; display: flex; justify-content: space-between; font-size: 9.5px; opacity: .8; }
.wm-ctrl { position: absolute; left: 14px; right: 16px; top: 116px; height: 38px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.wm-ctrl svg.i { width: 15px; height: 15px; }
.wm-play { width: 38px; height: 38px; border-radius: 50% !important; display: grid !important; place-items: center; border: 1px solid rgba(255, 255, 255, .6) !important;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .5), rgba(200, 195, 195, .45)) !important; box-shadow: 0 0 18px rgba(205, 200, 200, .85); }
.wm-vol { position: absolute; left: 14px; right: 14px; top: 162px; display: flex; align-items: center; gap: 10px; }
.wm-vol svg.i { width: 13px; height: 13px; opacity: .85; }
.wm-vol div { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.wm-vol div i { display: block; position: relative; width: 30%; height: 100%; border-radius: 3px; background: #fff; }
.wm-vol div i::after { content: ""; position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(217, 213, 213, .9); }
/* Herramientas rápidas */
.wp-tools .wp-body { padding: 12px 12px 0 16px; }
.wp-tools h6, .wp-activity h6, .wp-notes h6 { margin: 0 0 7px; font-size: 12px; font-weight: 400; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wp-tools h6 svg.i { width: 12px; height: 12px; }
.wt-row { display: flex !important; align-items: center; gap: 12px; width: 100%; height: 38.3px; text-align: left; border-radius: 12px; transition: background .2s; }
.wt-row:hover { background: rgba(255, 255, 255, .1); }
.wt-row b { display: block; font-size: 11.5px; font-weight: 400; }
.wt-row small { display: block; font-size: 9px; opacity: .6; }
.wt-row > svg.i { margin-left: auto; margin-right: 8px; width: 12px; height: 12px; opacity: .7; }
.wt-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .45); box-shadow: 0 0 10px rgba(205, 200, 200, .45); }
.wt-ic svg.i { width: 14px; height: 14px; }
/* Frase */
.wp-quote .wp-body { padding: 14px 52px 14px 16px; }
.wp-quote p { margin: 0; font-size: 11px; }
.wp-quote .wp-body > span { display: block; font-size: 10.5px; opacity: .85; margin-top: 6px; }
.wq-wave { position: absolute; right: 12px; top: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid !important; place-items: center; background: radial-gradient(circle, rgba(214, 211, 211, .6), transparent 70%) !important; }
/* Panel personalizable */
.wp-custom { border: 1.5px solid rgba(255, 255, 255, .55) !important; box-shadow: 0 0 0 1px rgba(214, 211, 211, .35), 0 0 30px rgba(205, 200, 200, .6), inset 0 0 50px rgba(221, 219, 219, .2) !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)) !important; border-radius: 22px !important; }
.wp-custom .wp-body { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 20px; }
.wc-plus { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .55); box-shadow: 0 0 16px rgba(205, 200, 200, .5); cursor: pointer; transition: .2s; }
.wc-plus:hover { background: rgba(255, 255, 255, .2); box-shadow: 0 0 26px rgba(205, 200, 200, .8); }
.wc-plus svg.i { width: 24px; height: 24px; stroke-width: 1.4; }
.wp-custom .wp-body > b { margin-top: 10px; font-size: 17px; font-weight: 400; }
.wp-custom .wp-body > span:not(.wc-plus) { margin-top: 4px; font-size: 11.5px; opacity: .78; }
.wc-add { margin-top: 22px; width: 146px; height: 38px; border-radius: 10px !important; display: flex !important; align-items: center; justify-content: center; gap: 8px; font-size: 12px;
  background: rgba(255, 255, 255, .12) !important; border: 1.5px solid rgba(255, 255, 255, .7) !important; box-shadow: 0 0 16px rgba(205, 200, 200, .7); transition: .2s; }
.wc-add:hover { background: rgba(255, 255, 255, .22) !important; }
.wc-add svg.i { width: 14px; height: 14px; }
/* Actividad reciente */
.wp-activity .wp-body { padding: 14px 12px 8px 19px; display: flex; flex-direction: column; }
.wp-activity h6 { font-size: 13.5px; padding-right: 4px; }
.wp-activity h6 button { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #dddada; }
.wp-activity h6 svg.i { width: 11px; height: 11px; }
.wa-list { flex: 1; overflow-y: auto; margin-right: -6px; padding-right: 4px; scrollbar-width: thin; }
.wa-item { display: flex !important; align-items: center; gap: 14px; width: 100%; min-height: 64px; text-align: left; border-radius: 12px; padding: 0 4px !important; transition: background .2s; }
.wa-item:hover { background: rgba(255, 255, 255, .08); }
.wa-item img, .wa-vid { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 4px 14px rgba(18, 17, 17, .4); }
.wa-vid { display: grid; place-items: center; background: linear-gradient(135deg, #f16b7d, #9a3240); }
.wa-item div { min-width: 0; flex: 1; }
.wa-item b { display: block; font-size: 12.5px; font-weight: 400; }
.wa-item small { display: block; font-size: 10px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-item .wa-t { opacity: .5; }
.wa-item > svg.i { width: 16px; height: 16px; opacity: .6; margin-right: 4px; }
.wa-empty { padding: 30px 10px; text-align: center; font-size: 12px; opacity: .8; line-height: 1.6; }
.wa-empty button { margin-top: 10px; padding: 7px 14px !important; border-radius: 10px; background: rgba(255, 255, 255, .14) !important; border: 1px solid rgba(255, 255, 255, .4) !important; }
/* Acciones */
.wp-actions .wp-body { padding: 12px; display: flex; flex-direction: column; gap: 7.7px; }
.wp-actions button { height: 40px; border-radius: 12px; display: flex !important; align-items: center; gap: 12px; padding-left: 12px !important; font-size: 12px; background: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(255, 255, 255, .12) !important; transition: background .2s; text-align: left; }
.wp-actions button:hover { background: rgba(255, 255, 255, .16) !important; }
.wp-actions button > span { width: 30px; height: 30px; display: grid; place-items: center; }
.wp-actions svg.i { width: 19px; height: 19px; }
.wp-actions .wx-circ { border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); }
.wp-actions .wx-circ svg.i { width: 15px; height: 15px; }
/* Modo Focus */
.wp-focus { background: rgba(21, 19, 19, .62) !important; border-color: rgba(255, 255, 255, .18) !important; }
.wf { width: 100%; height: 100%; display: flex !important; align-items: center; gap: 14px; padding: 0 18px !important; text-align: left; }
.wf > svg.i:first-child { width: 28px; height: 28px; filter: drop-shadow(0 0 5px rgba(221, 219, 219, .9)); }
.wf b { display: block; font-size: 10.5px; font-weight: 400; }
.wf span { display: block; font-size: 9px; opacity: .7; }
.wf > svg.i:last-child { margin-left: auto; width: 15px; height: 15px; }
/* Notas */
.wp-notes .wp-body { padding: 12px 14px 14px; display: flex; flex-direction: column; }
.wp-notes h6 { justify-content: flex-start; }
.wp-notes h6 svg.i { width: 15px; height: 15px; }
.wp-notes textarea { flex: 1; resize: none; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: rgba(17, 16, 16, .25); color: #fff; font: 12.5px/1.5 "Outfit", sans-serif; padding: 10px 12px; outline: none; }
.wp-notes textarea:focus { border-color: rgba(221, 219, 219, .6); }

/* ---------- Secciones (Imágenes, Vídeos, Chat…) como paneles ---------- */
.wp.app { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: rgba(16, 14, 14, .92); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 24px 70px rgba(12, 11, 11, .55), 0 0 0 1px rgba(202, 198, 198, .12); }
.wp-head { flex: none; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 16px; cursor: grab; user-select: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.wp.dragging .wp-head { cursor: grabbing; }
.wp-head > svg.i { color: #dcd9d9; }
.wp-head div { flex: 1; min-width: 0; }
.wp-head b { font-size: 13.5px; font-weight: 500; margin-right: 10px; }
.wp-head span { font-size: 11.5px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-head button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; opacity: .8; }
.wp-head button:hover { background: rgba(255, 255, 255, .12); opacity: 1; }
.wp-head button svg.i { width: 16px; height: 16px; }
.wp.app .wp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 0; font-family: var(--font); }
.wp.app .view { flex: 1; min-height: 0; }
.wp.app .view.single { height: 100%; }

/* ---------- Hojas flotantes (agregar panel, fondo, configurar, buscar, avisos) ---------- */
.wsx-sheet-bg { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(15, 13, 13, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-family: "Outfit", "Inter", sans-serif; color: #fff; animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; } }
.wsx-sheet { width: 100%; max-width: 460px; max-height: 86vh; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, rgba(84, 78, 78, .72), rgba(34, 32, 32, .82)); border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .25); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); }
.wsx-sheet.wide { max-width: 760px; }
.wsx-sheet.pal { max-width: 560px; align-self: start; margin-top: 12vh; }
.wsx-sheet svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wsx-sheet button { font: inherit; color: inherit; cursor: pointer; }
.wsx-sheet-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px 22px; }
.wsx-sheet-hd b { font-size: 16px; font-weight: 500; }
.wsx-sheet-hd button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: none; border: 0; }
.wsx-sheet-hd button:hover { background: rgba(255, 255, 255, .12); }
.wsx-sheet-bd { padding: 4px 22px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.wsx-sheet h6 { margin: 6px 0 0; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.wsx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wsx-cards button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 14px; text-align: left; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: .2s; }
.wsx-cards button:hover { background: rgba(255, 255, 255, .16); border-color: rgba(221, 219, 219, .6); transform: translateY(-2px); }
.wsx-cards button.on { border-color: rgba(205, 200, 200, .8); box-shadow: inset 0 0 0 1px rgba(205, 200, 200, .5); }
.wsx-cards button.soon { opacity: .55; }
.wsx-cards svg.i { width: 22px; height: 22px; color: #e0dede; margin-bottom: 4px; }
.wsx-cards b { font-size: 13px; font-weight: 500; }
.wsx-cards span { font-size: 11px; opacity: .65; line-height: 1.4; }
.wsx-hint { margin: 2px 0 0; font-size: 12px; opacity: .6; }
.wsx-bgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wsx-bgs button, .wsx-up { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1.5px solid transparent; cursor: pointer; font-size: 11.5px; text-align: left; }
.wsx-bgs button.on { border-color: #d4d1d1; box-shadow: 0 0 16px rgba(205, 200, 200, .5); }
.wsx-bgs i { display: block; aspect-ratio: 16 / 10; border-radius: 10px; background: center / cover; }
.wsx-up { align-items: center; justify-content: center; border: 1.5px dashed rgba(255, 255, 255, .35); min-height: 90px; }
.wsx-up svg.i { width: 22px; height: 22px; }
.wsx-range { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.wsx-range input { flex: 1; accent-color: #c8c3c3; }
.wsx-range b { width: 24px; text-align: right; font-weight: 500; }
.wsx-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.wsx-field span { opacity: .7; }
.wsx-field div { display: flex; gap: 8px; }
.wsx-field input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(17, 16, 16, .35); color: #fff; font: 13px "Outfit", sans-serif; outline: none; }
.wsx-field input:focus { border-color: rgba(221, 219, 219, .7); }
.wsx-field button, .wsx-acts button { padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .12); display: flex; align-items: center; gap: 10px; }
.wsx-field button:hover, .wsx-acts button:hover { background: rgba(255, 255, 255, .22); }
.wsx-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.wsx-acts button.danger { border-color: rgba(255, 110, 140, .45); color: #ffc3d0; }
.wsx-check { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
.wsx-check input { width: 16px; height: 16px; accent-color: #c8c3c3; }
.wsx-pal { display: flex; flex-direction: column; gap: 10px; }
.wsx-pal-in { display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 48px; border-radius: 14px; background: rgba(17, 16, 16, .4); border: 1px solid rgba(255, 255, 255, .22); }
.wsx-pal-in input { flex: 1; border: 0; outline: none; background: none; color: #fff; font: 15px "Outfit", sans-serif; }
.wsx-pal-list { display: flex; flex-direction: column; gap: 2px; }
.wsx-pal-list button { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; text-align: left; background: none; border: 0; }
.wsx-pal-list button.on, .wsx-pal-list button:hover { background: rgba(255, 255, 255, .12); }
.wsx-pal-list b { font-size: 13.5px; font-weight: 400; flex: 1; }
.wsx-pal-list span { font-size: 11px; opacity: .55; }
.wsx-notes { display: flex; flex-direction: column; gap: 6px; }
.wsx-notes div { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.wsx-notes i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #34c38f; flex: none; }
.wsx-notes .err i { background: #f46a6a; }
.wsx-notes p { margin: 0; flex: 1; font-size: 12.5px; line-height: 1.45; }
.wsx-notes span { font-size: 10.5px; opacity: .55; white-space: nowrap; }

/* ---------- Pantallas pequeñas: los paneles se apilan (sin arrastrar) ---------- */
@media (max-width: 1100px) {
  .wsx-dock { max-width: calc(100% - 40px); overflow-x: auto; scrollbar-width: none; }
  .wsx-dock span { display: none; }
  .wsx-dock button.on span { display: inline; }
  .wsx-user div { display: none; }
}
@media (max-width: 900px) {
  .wsx-root { overflow-y: auto; }
  .wsx-top { position: sticky; height: 64px; background: rgba(31, 29, 29, .55); backdrop-filter: blur(14px); }
  .wsx-logo { left: 16px; top: 18px; } .wsx-logo img { height: 28px; }
  .wsx-search { left: 60px; right: auto; width: 44px; transform: none; top: 10px; padding: 0 !important; justify-content: center; }
  .wsx-search span, .wsx-search kbd { display: none; }
  .wsx-icons { right: 12px; top: 9px; gap: 8px; }
  .wsx-ic#wsNet, #wsAi { display: none; }
  .wsx-clock { position: relative; left: auto; top: auto; padding: 18px 20px 0; }
  .wsx-weather { position: relative; left: 16px; top: auto; margin: 8px 0 12px; }
  .wsx-rail { display: none; }
  .wsx-area { position: relative; inset: auto; display: flex; flex-direction: column; gap: 14px; padding: 0 14px 110px; pointer-events: auto; }
  .wp { position: relative !important; left: auto !important; top: auto !important; width: auto !important; }
  .wp:not(.app) { cursor: default; }
  .wp-custom { height: 220px !important; }
  .wp.app { height: 78vh !important; }
  .wp-ctl { opacity: 1; transform: none; pointer-events: auto; }
  .wp-ctl button[data-wp="drag"], .wp-resize { display: none; }
  .wsx-dock { position: fixed; bottom: 14px; }
}

/* =====================================================================
   Ventanas de sección con el cristal del diseño (sustituyen a la interfaz antigua oscura)
   ===================================================================== */
.wp.app { background: linear-gradient(160deg, rgba(87, 81, 81, .84), rgba(36, 34, 34, .92)) !important; border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: 0 30px 80px rgba(12, 11, 11, .5), inset 0 1px 0 rgba(255, 255, 255, .25) !important; border-radius: 20px !important; font-family: "Outfit", "Inter", sans-serif; }
.wp.app .wp-body { font-family: "Outfit", "Inter", sans-serif; }
.wp-head { background: none; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.wapp-soon { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 30px; }
.wapp-soon svg.i.big { width: 44px; height: 44px; color: #e0dede; filter: drop-shadow(0 0 12px rgba(205, 200, 200, .6)); }
.wapp-soon b { font-size: 18px; font-weight: 400; }
.wapp-soon p { margin: 0; font-size: 13px; opacity: .7; line-height: 1.6; }

/* =====================================================================
   Panel "Crear imagen" (p-img.js)
   ===================================================================== */
.pi { container-type: inline-size; height: 100%; display: grid; grid-template-columns: 250px minmax(0, 1fr) 190px; min-height: 0; }
.pi svg.i { width: 15px; height: 15px; }
.pi select, .pi input:not([type=checkbox]), .pi textarea { font: 12.5px "Outfit", sans-serif; color: #fff; }
.pi select option { background: #312e2e; color: #fff; }
.pi-models, .pi-recent { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 12px; background: rgba(255, 255, 255, .035); }
.pi-models { border-right: 1px solid rgba(255, 255, 255, .08); }
.pi-recent { border-left: 1px solid rgba(255, 255, 255, .08); }
.pi-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border-radius: 12px; background: rgba(17, 16, 16, .35); border: 1px solid rgba(255, 255, 255, .18); }
.pi-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; }
.pi-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pi-chips button { padding: 4px 10px !important; border-radius: 20px; font-size: 11px; background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .14) !important; transition: .15s; }
.pi-chips button:hover { background: rgba(255, 255, 255, .16) !important; }
.pi-chips button.on { background: linear-gradient(135deg, rgba(205, 200, 200, .9), rgba(231, 94, 112, .85)) !important; border-color: transparent !important; }
.pi-chips small { margin-left: 5px; opacity: .6; }
.pi-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.pi-model { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; text-align: left; padding: 9px 10px !important; border-radius: 11px; border: 1px solid transparent !important; transition: .15s; }
.pi-model:hover { background: rgba(255, 255, 255, .08) !important; }
.pi-model.on { background: rgba(255, 255, 255, .14) !important; border-color: rgba(217, 213, 213, .55) !important; box-shadow: 0 0 14px rgba(200, 195, 195, .25); }
.pi-model b { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-model em { font-style: normal; font-size: 10.5px; opacity: .65; grid-row: 1 / 3; grid-column: 2; align-self: center; max-width: 64px; text-align: right; line-height: 1.25; }
.pi-model span { display: flex; flex-wrap: wrap; gap: 4px; }
.pi-btn[hidden], .pi-sel[hidden], .pi-chk[hidden] { display: none !important; }
.pi-model i { font-style: normal; font-size: 9.5px; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); opacity: .8; }
.pi-empty { font-size: 12px; opacity: .6; text-align: center; margin: 20px 0; }
.pi-main { display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 0; min-width: 0; }
.pi-main.drop .pi-stage { outline: 2px dashed rgba(221, 219, 219, .8); outline-offset: -6px; }
.pi-stage { flex: 1; min-height: 120px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(17, 16, 16, .28); display: grid; place-items: center; overflow: hidden; }
.pi-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.pi-results { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 12px; overflow: auto; align-content: start; }
.pi-results figure, .pi-grid figure { margin: 0; border-radius: 12px; overflow: hidden; border: 2px solid transparent; cursor: pointer; aspect-ratio: 1; background: rgba(255, 255, 255, .05); }
.pi-results figure.on, .pi-grid figure.on { border-color: #d4d1d1; box-shadow: 0 0 14px rgba(205, 200, 200, .5); }
.pi-results img, .pi-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pi-results .fail { display: grid; place-items: center; padding: 12px; font-size: 11.5px; color: #ffc3d0; text-align: center; cursor: default; }
.pi-empty-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 24px; max-width: 380px; }
.pi-empty-stage > span { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 0 18px rgba(205, 200, 200, .4); }
.pi-empty-stage > span svg.i { width: 22px; height: 22px; }
.pi-empty-stage b { font-size: 14.5px; font-weight: 500; }
.pi-empty-stage p { margin: 0; font-size: 12px; opacity: .65; line-height: 1.5; }
.pi-spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .15); border-top-color: #dcd9d9; animation: pispin .9s linear infinite; }
@keyframes pispin { to { transform: rotate(360deg); } }
.pi-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pi-meta { margin-left: auto; font-size: 10.5px; opacity: .55; }
.pi-compose { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); }
.pi-prompt { width: 100%; resize: vertical; min-height: 58px; max-height: 220px; border: 0; outline: none; background: none; line-height: 1.5; }
.pi-prompt::placeholder, .pi input::placeholder { color: rgba(255, 255, 255, .45); }
.pi-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.pi-sp { flex: 1; }
.pi-btn { display: inline-flex !important; align-items: center; gap: 7px; height: 34px; padding: 0 12px !important; border-radius: 10px; font-size: 12px; white-space: nowrap; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .18) !important; transition: .15s; }
.pi-btn:hover { background: rgba(255, 255, 255, .18) !important; }
.pi-btn.on { background: linear-gradient(135deg, rgba(205, 200, 200, .85), rgba(231, 94, 112, .8)) !important; }
.pi-btn.danger:hover { background: rgba(244, 106, 106, .35) !important; }
.pi-btn.icon { padding: 0 10px !important; }
.pi-btn:disabled { opacity: .5; cursor: default; }
.pi-sel { display: flex; flex-direction: column; gap: 3px; }
.pi-sel.grow { flex: 1; min-width: 200px; }
.pi-sel > span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .55; }
.pi-sel select, .pi-sel input { height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(17, 16, 16, .35); outline: none; }
.pi-sel select:focus, .pi-sel input:focus { border-color: rgba(221, 219, 219, .7); }
.pi-go { height: 38px; padding: 0 20px !important; border-radius: 12px; font-size: 13px !important; font-weight: 500; white-space: nowrap; background: linear-gradient(135deg, #c1bbbb, #e84c61) !important;
  box-shadow: 0 0 20px rgba(190, 185, 185, .6), inset 0 1px 0 rgba(255, 255, 255, .4); transition: .15s; }
.pi-go:hover { box-shadow: 0 0 28px rgba(200, 195, 195, .85), inset 0 1px 0 rgba(255, 255, 255, .4); }
.pi-go:disabled { opacity: .5; cursor: default; box-shadow: none; }
.pi-more { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .1); }
.pi-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; height: 34px; cursor: pointer; }
.pi-chk input { accent-color: #c8c3c3; }
.pi-note { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; opacity: .85; line-height: 1.45; }
.pi-note.warn { color: #ffc3d0; }
.pi-refs { display: flex; flex-wrap: wrap; gap: 8px; }
.pi-ref { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .3); }
.pi-ref.unused { opacity: .35; }
.pi-ref img { width: 100%; height: 100%; object-fit: cover; }
.pi-ref span { position: absolute; left: 3px; bottom: 3px; font-size: 8.5px; padding: 1px 4px; border-radius: 4px; background: rgba(31, 29, 29, .8); }
.pi-ref button { position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; display: grid !important; place-items: center; background: rgba(31, 29, 29, .85) !important; }
.pi-ref button svg.i { width: 11px; height: 11px; }
.pi-recent h6 { margin: 0; font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.pi-recent h6 span { font-size: 10.5px; opacity: .55; }
.pi-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.pi-grid .pi-empty { grid-column: 1 / -1; }
.pi-recent > .pi-btn { justify-content: center; }
/* Si el panel es estrecho, las columnas se apilan */
@container (max-width: 860px) {
  .pi { grid-template-columns: 210px minmax(0, 1fr); }
  .pi-recent { display: none; }
}
@container (max-width: 600px) {
  .pi { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .pi-models { max-height: 190px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
}

/* Proveedor (solo lo ve el admin) */
.pi-model i.prov, .pc-model i.prov { background: rgba(200, 16, 46, .28); opacity: 1; }
.pi-extra { display: contents; }
.pi-extra[hidden] { display: none; }

/* =====================================================================
   Panel "Vídeos" (p-vid.js) — misma estructura que "Crear imagen"
   ===================================================================== */
.pv-frames { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-frames[hidden] { display: none; }
.pv-slot { display: inline-flex !important; align-items: center; gap: 8px; height: 56px; padding: 0 14px !important; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .3) !important; background: rgba(255, 255, 255, .04) !important; font-size: 12px; opacity: .85; transition: .15s; }
.pv-slot:hover { opacity: 1; background: rgba(255, 255, 255, .09) !important; }
.pv-recent { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.pv-recent figure { margin: 0; border-radius: 10px; overflow: hidden; cursor: pointer; border: 1px solid rgba(255, 255, 255, .12); aspect-ratio: 16 / 9; background: #000; flex: none; }
.pv-recent figure.on { border-color: rgba(230, 226, 226, .8); box-shadow: 0 0 12px rgba(200, 195, 195, .3); }
.pv-recent video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.pv-job { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: 11.5px; flex: none; }
.pv-job b { display: block; font-weight: 500; }
.pv-job span { opacity: .7; }
.pv-job.fail { background: rgba(200, 16, 46, .18); }
.pi-spin.sm { width: 22px; height: 22px; border-width: 2px; flex: none; }
.pv video.pi-img { width: 100%; height: 100%; background: #000; border-radius: 12px; }

/* =====================================================================
   Panel "Chat con IA" (p-chat.js)
   ===================================================================== */
.pc { container-type: inline-size; height: 100%; display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 0; }
.pc svg.i { width: 15px; height: 15px; }
.pc select, .pc input:not([type=checkbox]), .pc textarea { font: 12.5px "Outfit", sans-serif; color: #fff; }
.pc select option { background: #312e2e; color: #fff; }
.pc-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 12px; background: rgba(255, 255, 255, .035); border-right: 1px solid rgba(255, 255, 255, .08); }
.pc-new { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; }
.pc-convs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.pc-conv { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 9px 34px 9px 10px; border-radius: 11px; cursor: pointer; border: 1px solid transparent; transition: .15s; }
.pc-conv:hover { background: rgba(255, 255, 255, .08); }
.pc-conv.on { background: rgba(255, 255, 255, .14); border-color: rgba(217, 213, 213, .45); }
.pc-conv b { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-conv span { font-size: 10.5px; opacity: .55; }
.pc-conv button { position: absolute; right: 6px; top: 50%; translate: 0 -50%; opacity: 0; padding: 5px !important; background: none !important; border: 0 !important; }
.pc-conv:hover button { opacity: .7; }
.pc-main { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 0; min-width: 0; }
.pc-head { display: flex; align-items: center; gap: 12px; }
.pc-model { display: inline-flex !important; align-items: center; gap: 8px; height: 36px; padding: 0 12px !important; border-radius: 12px; background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .16) !important; }
.pc-model b { font-weight: 500; font-size: 13px; }
.pc-model i { font-style: normal; font-size: 9.5px; padding: 1px 6px; border-radius: 6px; }
.pc-info { font-size: 11px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-picker { position: absolute; z-index: 5; left: 14px; top: 58px; width: min(460px, calc(100% - 28px)); max-height: min(520px, calc(100% - 80px)); display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: rgba(28, 26, 26, .97); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.pc-picker[hidden] { display: none; }
.pc-mlist { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.pc-msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 6px 4px; }
.pc-msg { max-width: min(760px, 92%); font-size: 13.5px; line-height: 1.6; }
.pc-msg.me { align-self: flex-end; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: rgba(255, 255, 255, .12); }
.pc-msg.me img { display: block; max-width: 220px; max-height: 160px; border-radius: 10px; margin-bottom: 8px; }
.pc-msg.ai { align-self: flex-start; }
.pc-md p { margin: 0 0 10px; } .pc-md p:last-child { margin: 0; }
.pc-md pre { background: rgba(0, 0, 0, .35); padding: 12px; border-radius: 10px; overflow-x: auto; font-size: 12px; }
.pc-md code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: rgba(255, 255, 255, .08); padding: 1px 5px; border-radius: 5px; }
.pc-md pre code { background: none; padding: 0; }
.pc-md table { border-collapse: collapse; margin: 8px 0; font-size: 12.5px; }
.pc-md th, .pc-md td { border: 1px solid rgba(255, 255, 255, .15); padding: 5px 9px; }
.pc-md blockquote { margin: 6px 0; padding-left: 12px; border-left: 3px solid rgba(255, 255, 255, .25); opacity: .85; }
.pc-md ul, .pc-md ol { margin: 4px 0 10px; padding-left: 22px; }
.pc-md a { color: inherit; text-decoration: underline; }
.pc-think { margin-bottom: 8px; font-size: 12px; opacity: .7; }
.pc-think summary { cursor: pointer; }
.pc-think div { white-space: pre-wrap; padding: 8px 10px; margin-top: 6px; border-left: 2px solid rgba(255, 255, 255, .2); max-height: 260px; overflow-y: auto; }
.pc-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10.5px; opacity: .5; }
.pc-foot button { padding: 3px !important; background: none !important; border: 0 !important; opacity: .8; }
.pc-cost { font-size: 11px; opacity: .6; }
.pc-dots { display: inline-flex; gap: 4px; } .pc-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; animation: pcDot 1s infinite; } .pc-dots i:nth-child(2) { animation-delay: .15s; } .pc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pcDot { 50% { opacity: 1; translate: 0 -2px; } }
.pc-compose .pi-prompt { min-height: 44px; resize: none; }
@container (max-width: 640px) { .pc { grid-template-columns: minmax(0, 1fr); } .pc-side { display: none; } }

/* Bandeja de paneles minimizados (encima del dock) */
.wsx-tray { position: absolute; z-index: 3; left: 50%; bottom: 108px; transform: translateX(-50%); display: flex; gap: 8px; max-width: calc(100% - 520px); overflow-x: auto; scrollbar-width: none; }
.wsx-tray[hidden] { display: none; }
.wsx-tray button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 17px; font: 12px "Outfit", sans-serif; color: #fff; white-space: nowrap;
  background: rgba(33, 31, 31, .72); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); cursor: pointer; transition: .15s; }
.wsx-tray button:hover { background: rgba(241, 99, 118, .85); }
.wsx-tray svg.i { width: 15px; height: 15px; }
.wp.app { transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.wp.app.dragging, .wp.app.resizing { transition: none; }

/* =====================================================================
   Fijos con auto-ocultar (ojo en la esquina) · divisores · encajar · sin selección al arrastrar
   ===================================================================== */
.wsx-fix { position: absolute; }
.wsx-fsearch { left: 50%; top: 32px; width: min(473px, 34vw); height: 44px; transform: translateX(-50%); }
.wsx-fsearch .wsx-search { position: relative; left: 0; top: 0; width: 100%; transform: none; }
.wsx-fclock { left: 0; top: 80px; width: 250px; height: 160px; z-index: 0; }
.wsx-fclock .wsx-clock { top: 10px; }
.wsx-fclock .wsx-weather { top: 100px; }
.wsx-frail { left: 38px; top: 253px; z-index: 2; }
.wsx-frail .wsx-rail { position: relative; left: 0; top: 0; }
.wsx-fdock { left: 50%; bottom: 37px; transform: translateX(-50%); z-index: 2; max-width: calc(100% - 520px); }
.wsx-fdock .wsx-dock { position: relative; left: 0; bottom: 0; transform: none; max-width: none; }
/* El ojo: aparece al pasar el ratón por el elemento */
.wsx-eye { position: absolute; z-index: 5; width: 26px; height: 26px; display: grid !important; place-items: center; border-radius: 50%; color: #fff; cursor: pointer;
  background: rgba(33, 31, 31, .85); border: 1px solid rgba(255, 255, 255, .3) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s, background .2s; }
.wsx-eye svg.i { width: 14px; height: 14px; }
.wsx-eye:hover { background: rgba(241, 99, 118, .95); }
.wsx-fix:hover > .wsx-eye { opacity: 1; transform: none; }
.wsx-fsearch .wsx-eye { right: -34px; top: 9px; }
.wsx-fclock .wsx-eye { left: 200px; top: 6px; }
.wsx-frail .wsx-eye { right: -12px; top: -12px; }
.wsx-fdock .wsx-eye { right: -12px; top: -12px; }
.wsx-fclock .wsx-clock { pointer-events: auto; }
/* Oculto: se desvanece y vuelve al pasar el ratón por su sitio */
.wsx-fix.ah > :not(.wsx-eye) { opacity: 0; transition: opacity .3s, transform .3s; }
.wsx-fix.ah:hover > :not(.wsx-eye) { opacity: 1; transform: none; }
.wsx-fdock.ah > .wsx-dock { transform: translateY(26px); }
.wsx-frail.ah > .wsx-rail { transform: translateX(-26px); }
.wsx-fsearch.ah > .wsx-search { transform: translateY(-14px); }
.wsx-fdock.ah { padding-top: 30px; margin-bottom: -10px; }   /* zona para hacerlo reaparecer un poco más alta */
.wsx-fix.ah > .wsx-eye { background: rgba(241, 99, 118, .9); }
.wsx-fclock.ah { z-index: 2; }
/* Divisores entre secciones */
.wsx-split { position: absolute; z-index: 900; pointer-events: auto; display: grid; place-items: center; }
.wsx-split.v { width: 12px; cursor: col-resize; }
.wsx-split.h { height: 12px; cursor: row-resize; }
.wsx-split::after { content: ""; border-radius: 3px; background: rgba(255, 255, 255, .35); box-shadow: 0 0 10px rgba(205, 200, 200, .6); transition: .2s; }
.wsx-split.v::after { width: 4px; height: 46px; }
.wsx-split.h::after { width: 46px; height: 4px; }
.wsx-split:hover::after { background: #e0dede; box-shadow: 0 0 16px rgba(205, 200, 200, .95); }
.wsx-split.v:hover::after { height: 80px; } .wsx-split.h:hover::after { width: 80px; }
body.wsx-v, body.wsx-v * { cursor: col-resize !important; }
body.wsx-h, body.wsx-h * { cursor: row-resize !important; }
/* Vista previa al encajar */
.wsx-snap { position: absolute; z-index: 1; pointer-events: none; border-radius: 18px; border: 1.5px solid rgba(221, 219, 219, .85);
  background: rgba(195, 190, 190, .14); box-shadow: 0 0 40px rgba(195, 190, 190, .35), inset 0 0 30px rgba(205, 200, 200, .2); transition: left .15s, top .15s, width .15s, height .15s; }
.wsx-snap[hidden] { display: none; }
/* Nada de texto azul seleccionado al mover o estirar */
body.wsx-nosel, body.wsx-nosel * { user-select: none !important; -webkit-user-select: none !important; }
.wp-head, .wp:not(.app) { user-select: none; -webkit-user-select: none; }
.wp textarea, .wp input, .wp-body .pi-prompt { user-select: text; -webkit-user-select: text; }
@media (max-width: 900px) {
  .wsx-fix { position: static; transform: none; width: auto; height: auto; }
  .wsx-eye, .wsx-split, .wsx-snap { display: none !important; }
  .wsx-fsearch .wsx-search { position: absolute; left: 60px; width: 44px; top: 10px; }
  .wsx-fdock .wsx-dock { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); }
}
.wp.appear { animation: wpin .35s cubic-bezier(.2,.8,.2,1); }
@keyframes wpin { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }

/* =====================================================================
   Programa de escritorio: barras flotantes del modo juego (desk.js) y pregunta rápida a la IA
   ===================================================================== */
html.ovmode, html.ovmode body { background: transparent !important; overflow: hidden; }
html.ovmode body { background: rgba(0, 0, 0, .01) !important; }   /* casi invisible, pero recibe el ratón */
.dk-ov { position: fixed; inset: 0; background: none !important; font-family: "Outfit", sans-serif; color: #fff; }
.dk-ov > * { opacity: 0; transition: opacity .2s, transform .25s; }
.dk-ov.open > * { opacity: 1; transform: none; }
.dk-top .dk-bar { position: absolute; left: 0; right: 0; top: 0; height: 84px; display: flex; align-items: center; gap: 28px; padding: 0 28px; transform: translateY(-20px);
  background: linear-gradient(180deg, rgba(13, 12, 12, .92), rgba(13, 12, 12, .7)); border-bottom: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.dk-logo { height: 34px; }
.dk-search { flex: 1; max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 20px; border-radius: 23px;
  background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .45); box-shadow: 0 0 22px rgba(205, 200, 200, .4); }
.dk-search svg.i { width: 20px; height: 20px; color: #dcd9d9; }
.dk-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: 14px "Outfit", sans-serif; }
.dk-search input::placeholder { color: rgba(255, 255, 255, .55); }
.dk-search kbd { font: 11px "Outfit", sans-serif; opacity: .6; }
.dk-icons { display: flex; align-items: center; gap: 14px; }
.dk-back { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 18px; color: #fff; font: 12.5px "Outfit", sans-serif; cursor: pointer;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); }
.dk-back:hover { background: rgba(241, 99, 118, .8); }
.dk-back svg.i, .dk-icons svg.i { width: 16px; height: 16px; }
.dk-res { position: absolute; left: 50%; top: 92px; width: min(640px, 90vw); transform: translateX(-50%); padding: 8px; border-radius: 18px; display: flex; flex-direction: column; gap: 2px;
  background: rgba(19, 17, 17, .95); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.dk-res[hidden] { display: none; }
.dk-res button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-align: left; color: #fff; background: none; border: 0; cursor: pointer; font: 13px "Outfit", sans-serif; }
.dk-res button.on, .dk-res button:hover { background: rgba(195, 190, 190, .22); }
.dk-res button span { font-size: 11px; opacity: .6; }
.dk-res p { margin: 10px; font-size: 12.5px; opacity: .7; }
.dk-dock-wrap, .dk-dock { position: absolute !important; left: 50% !important; bottom: 18px !important; transform: translate(-50%, 20px) !important; }
.dk-ov.open .dk-dock { transform: translate(-50%, 0) !important; }
.dk-dock { background: rgba(19, 17, 17, .92) !important; border: 1px solid rgba(255, 255, 255, .2) !important; }
/* Respuesta rápida de la IA */
.dk-answer { position: fixed; z-index: 9000; left: 50%; top: 96px; width: min(640px, 92vw); transform: translateX(-50%); padding: 16px 18px 12px; border-radius: 18px; color: #fff; font-family: "Outfit", sans-serif;
  background: rgba(19, 17, 17, .96); border: 1px solid rgba(221, 219, 219, .35); box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 30px rgba(185, 180, 180, .25); }
.dk-answer[hidden] { display: none; }
.dk-a-hd { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.dk-a-hd b { flex: 1; font-weight: 500; font-size: 14px; }
.dk-a-hd button { border: 0; background: rgba(255, 255, 255, .1); color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; }
.dk-a-bd { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; max-height: 360px; overflow-y: auto; opacity: .92; }
.dk-answer small { display: block; margin-top: 10px; font-size: 10.5px; opacity: .5; }
.dk-dots { display: inline-flex; gap: 5px; } .dk-dots i { width: 7px; height: 7px; border-radius: 50%; background: #dcd9d9; animation: dkd 1s infinite; }
.dk-dots i:nth-child(2) { animation-delay: .15s; } .dk-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dkd { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* =====================================================================
   LOGIN (index.html #authView.lx): Login V3/V4 + identidad Lenore (seda clara → negro, tarjeta de cristal con filo violeta)
   ===================================================================== */
.auth.lx { position: fixed; inset: 0; display: block; overflow: hidden; color: #fff; font-family: "Outfit", sans-serif; background: #090808; }
.auth.lx[hidden] { display: none; }
.lx-bg { position: absolute; inset: 0; background: url('/img/fondo-seda.jpg?v=rojo3') 30% 50% / cover; filter: blur(14px) saturate(.6); transform: scale(1.06); }
.lx-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(248, 247, 247, .55) 0%, rgba(240, 238, 238, .4) 34%, rgba(90, 86, 104, .55) 56%, rgba(17, 16, 16, .96) 74%, #070606 100%); }
.lx-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 34px 56px; z-index: 2; }
.lx-logo img { height: 46px; display: block; }
.lx-clock { display: flex; flex-direction: column; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .78); }
.lx-clock b { font-weight: 300; font-size: 15px; } .lx-clock span { font-size: 15px; font-weight: 300; }
.lx-art { position: absolute; left: 4%; top: 50%; width: min(34vw, 520px); transform: translateY(-50%); filter: drop-shadow(0 30px 40px rgba(29, 27, 27, .25)); animation: lxfloat 9s ease-in-out infinite; pointer-events: none; }
@keyframes lxfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.lx-copy { position: absolute; left: 33%; top: 50%; transform: translateY(-58%); width: min(330px, 26vw); z-index: 1; color: #252323; }
.lx-eyebrow { margin: 0 0 18px; font-size: 10px; letter-spacing: .5em; text-transform: uppercase; color: #6c6363; }
.lx-copy h2 { margin: 0; font: 400 clamp(30px, 2.6vw, 42px)/1.12 "Newsreader", Georgia, serif; letter-spacing: -.02em; color: #252323; }
.lx-copy h2 em { font-style: italic; color: #ff4c64; }
.lx-rule { display: block; width: 34px; height: 1.5px; margin: 26px 0 22px; background: #252323; }
.lx-copy p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #595353; max-width: 230px; }
.lx-foot { position: absolute; left: 56px; bottom: 56px; padding-left: 18px; border-left: 1px solid rgba(37, 35, 35, .5); font-size: 9.5px; letter-spacing: .45em; text-transform: uppercase; line-height: 2; color: #363131; }
/* Tarjeta de cristal con esquinas cortadas y filo de luz violeta */
.lx-card { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); width: min(450px, 90vw); padding: 44px 44px 30px; z-index: 2;
  background: linear-gradient(160deg, rgba(69, 63, 63, .55), rgba(20, 19, 19, .82) 55%, rgba(13, 12, 12, .9));
  clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 38px 100%, 0 calc(100% - 38px));
  box-shadow: inset 0 0 0 1px rgba(224, 221, 221, .38); }
.lx-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; clip-path: inherit;
  background: linear-gradient(180deg, rgba(190, 185, 185, .9), transparent 18%, transparent 82%, rgba(190, 185, 185, .9)) left / 2px 100% no-repeat,
              linear-gradient(180deg, rgba(190, 185, 185, .9), transparent 18%, transparent 82%, rgba(190, 185, 185, .9)) right / 2px 100% no-repeat;
  filter: drop-shadow(0 0 8px rgba(190, 185, 185, .9)); opacity: .8; }
.lx-hd { display: flex; align-items: center; gap: 14px; }
.lx-hd img { width: 34px; height: 34px; }
.lx-hd h1 { margin: 0; font: 300 30px/1.1 "Outfit", sans-serif; letter-spacing: -.01em; }
.lx-sub { margin: 10px 0 30px; font-size: 13px; color: rgba(255, 255, 255, .62); }
#authForm { display: flex; flex-direction: column; gap: 16px; }
.lx-field { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04); transition: border-color .2s, box-shadow .2s; }
.lx-field[hidden] { display: none; }
.lx-field:focus-within { border-color: rgba(217, 213, 213, .8); box-shadow: 0 0 18px rgba(190, 185, 185, .3); }
.lx-field > svg.i { width: 19px; height: 19px; flex: none; color: rgba(255, 255, 255, .75); }
.lx-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: #fff; font: 14px "Outfit", sans-serif; }
.lx-field input::placeholder { color: rgba(255, 255, 255, .45); }
.lx-field input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s; }
.lx-eye { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: rgba(255, 255, 255, .7); cursor: pointer; }
.lx-eye svg.i { width: 19px; height: 19px; } .lx-eye:hover, .lx-eye.on { color: #e0dede; background: rgba(255, 255, 255, .08); }
.lx-checks { display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.lx-checks[hidden] { display: none; }
.lx-checks .check { display: flex; gap: 10px; align-items: flex-start; } .lx-checks input { accent-color: #b9b3b3; margin-top: 2px; }
.lx-checks a { color: #d5d2d2; }
.auth.lx .err { padding: 10px 14px; border-radius: 10px; font-size: 12.5px; color: #ffc3d0; background: rgba(244, 106, 106, .14); border: 1px solid rgba(244, 106, 106, .35); }
.lx-go { margin-top: 10px; height: 54px; display: flex; align-items: center; justify-content: center; gap: 14px; border-radius: 12px; cursor: pointer; color: #fff; font: 400 15px "Outfit", sans-serif;
  background: linear-gradient(180deg, #1b1919, #0e0c0c); border: 1.5px solid rgba(221, 219, 219, .85); box-shadow: 0 0 18px rgba(255, 100, 121, .65), inset 0 0 14px rgba(190, 185, 185, .35); transition: box-shadow .2s, transform .15s; }
.lx-go:hover { box-shadow: 0 0 28px rgba(190, 185, 185, .9), inset 0 0 18px rgba(200, 195, 195, .5); }
.lx-go:active { transform: translateY(1px); }
.lx-go:disabled { opacity: .6; cursor: default; }
.lx-go svg.i { width: 20px; height: 20px; }
.lx-or { display: flex; align-items: center; gap: 14px; margin: 22px 40px 14px; font-size: 11px; color: rgba(255, 255, 255, .45); }
.lx-or i { flex: 1; height: 1px; background: rgba(255, 255, 255, .2); }
.lx-switch { text-align: center; font-size: 13px; color: rgba(255, 255, 255, .6); }
.lx-switch button { border: 0; background: none; color: #c8c3c3; font: inherit; cursor: pointer; padding: 0 0 0 6px; }
.lx-switch button:hover { color: #e0dede; text-decoration: underline; }
.lx-legal { margin-top: 22px; text-align: center; font-size: 11px; color: rgba(255, 255, 255, .4); }
.lx-legal a { color: rgba(255, 255, 255, .55); }
@media (max-width: 1100px) { .lx-copy { display: none; } .lx-art { left: -4%; opacity: .55; } }
@media (max-width: 760px) {
  .lx-top { padding: 22px 20px; } .lx-logo img { height: 36px; } .lx-foot { display: none; }
  .lx-bg::after { background: linear-gradient(180deg, rgba(243, 241, 241, .4), rgba(17, 16, 16, .95) 45%); }
  .lx-art { width: 60vw; top: 22%; left: 20%; }
  .lx-card { right: 50%; transform: translate(50%, -40%); padding: 34px 26px 24px; }
}
.lx-art { left: 5%; width: min(25vw, 400px); }
.lx-copy { left: 37%; }

/* Puestos de las secciones (tipo OBS) */
.wsx-area.has-apps:not(.show-widgets) .wp:not(.app) { opacity: 0; transform: scale(.97); pointer-events: none; }
.wsx-area.has-apps .wsx-split { opacity: 1; }
.wp.app .wp-resize { display: none; }           /* el tamaño lo reparten los divisores */
.wp.app { background: linear-gradient(160deg, rgba(72, 66, 66, .96), rgba(31, 28, 28, .98)) !important; }
.wsx-snap.swap { border-style: dashed; background: rgba(195, 190, 190, .2); }
.wsx-snap::after { content: "Soltar aquí"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 16px; border-radius: 20px; font: 500 13px "Outfit", sans-serif; color: #fff; background: rgba(29, 27, 27, .8); border: 1px solid rgba(255, 255, 255, .3); }
.wsx-snap.swap::after { content: "Intercambiar"; }
.wp.app.dragging { opacity: .82; }
/* Login: 3D, copia mejorada y sin reloj ni lema */
.lx-card { transform: translateY(-50%) perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.lx-copy { transform: translateY(-55%) perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); width: min(380px, 28vw); }
.lx-art { transform: translateY(-50%) translate(var(--px, 0px), var(--py, 0px)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.lx-eyebrow { letter-spacing: .32em; white-space: nowrap; font-size: 10.5px; margin-bottom: 16px; }
.lx-copy h2 { font-size: clamp(32px, 2.8vw, 46px); }
.lx-rule { margin: 22px 0 18px; width: 44px; background: linear-gradient(90deg, #252323, #b9b3b3); height: 2px; border-radius: 2px; }
.lx-copy > p { max-width: 300px; }
.lx-feats { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lx-feats li { display: flex; align-items: center; gap: 14px; }
.lx-feats img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 6px 10px rgba(29, 27, 27, .18)); }
.lx-feats b { display: block; font-weight: 500; font-size: 13.5px; color: #252323; }
.lx-feats span { display: block; font-size: 12px; color: #6c6363; margin-top: 2px; }
@media (max-width: 760px) { .lx-card { transform: translate(50%, -40%); } }
/* Login: solo la tarjeta, en el centro */
.lx-card { right: auto; left: 50%; transform: translate(-50%, -50%) perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
@media (max-width: 760px) { .lx-card { left: 50%; right: auto; transform: translate(-50%, -45%); } }
/* Dock: siempre del ancho de su contenido (antes el contenido se salía del borde) */
.wsx-fdock { max-width: none; }
.wsx-fdock .wsx-dock { width: max-content; max-width: calc(100vw - 80px); }
.lx-logo img { filter: drop-shadow(0 2px 10px rgba(15, 13, 13, .45)); }
/* Dock: en pantallas medianas solo iconos (salvo el activo) para no pisar Modo Focus */
.wsx-fdock .wsx-dock { max-width: calc(100vw - 560px); overflow: hidden; }
@media (max-width: 1750px) { .wsx-dock button:not(.on) > span { display: none; } .wsx-dock button { padding: 0 10px; } }

/* =====================================================================
   Apariencia: claridad de los paneles (se ajusta sola al fondo) · velo sobre fondos claros
   ===================================================================== */
.wsx-glass, .wp:not(.app), .wsx-rail, .wsx-dock, .wsx-search, .wsx-exitfocus {
  background: linear-gradient(155deg, var(--g1, rgba(255, 255, 255, .22)), var(--g2, rgba(255, 255, 255, .06)));
  border-color: var(--gline, rgba(255, 255, 255, .32)); transition: background .5s, border-color .5s; }
.wsx-veil::after { content: ""; position: absolute; inset: 0; background: var(--veil, transparent); transition: background .5s; }
.wsx-bg { transition: filter .3s, inset .3s; }

/* Créditos: cápsula con aire */
.wsx-cred { gap: 8px; height: 34px; min-width: 86px; padding: 0 15px 0 12px !important; justify-content: center; border-radius: 17px; font-size: 13px; }
.wsx-cred svg.i { width: 17px; height: 17px; }
.wsx-cred b { font-size: 13.5px; letter-spacing: .2px; }

/* =====================================================================
   Reloj y clima en la barra superior cuando una sección ocupa todo (no quedan tapados)
   ===================================================================== */
.wsx-fclock { transition: left .45s cubic-bezier(.2, .8, .2, 1), top .45s cubic-bezier(.2, .8, .2, 1); }
.wsx-fclock .wsx-clock, .wsx-fclock .wsx-weather { transition: left .45s cubic-bezier(.2, .8, .2, 1), top .45s cubic-bezier(.2, .8, .2, 1), font-size .45s; }
.wsx-root.clock-top .wsx-fclock { left: 140px; top: 18px; width: 420px; height: 56px; z-index: 3; }
.wsx-root.clock-top .wsx-fclock .wsx-clock { left: 0; top: 6px; flex-direction: row; align-items: baseline; gap: 12px; white-space: nowrap; }
.wsx-root.clock-top .wsx-fclock .wsx-clock b { font-size: 26px; }
.wsx-root.clock-top .wsx-fclock .wsx-clock span { font-size: 12.5px; opacity: .85; }
.wsx-root.clock-top .wsx-fclock .wsx-weather { left: 290px; top: 4px; }
.wsx-root.clock-top .wsx-fclock .wsx-weather svg.i { width: 24px; height: 24px; }
.wsx-root.clock-top .wsx-fclock .wsx-eye { display: none !important; }
@media (max-width: 1500px) { .wsx-root.clock-top .wsx-fclock .wsx-clock span:last-child, .wsx-root.clock-top .wsx-fclock .wsx-weather div span { display: none; } .wsx-root.clock-top .wsx-fclock .wsx-weather { left: 220px; } }

/* =====================================================================
   Redimensionar desde cualquier borde o esquina
   ===================================================================== */
.wp-rz { position: absolute; z-index: 4; }
.wp-rz.n, .wp-rz.s { left: 14px; right: 14px; height: 10px; cursor: ns-resize; }
.wp-rz.e, .wp-rz.w { top: 14px; bottom: 14px; width: 10px; cursor: ew-resize; }
.wp-rz.n { top: -5px; } .wp-rz.s { bottom: -5px; } .wp-rz.e { right: -5px; } .wp-rz.w { left: -5px; }
.wp-rz.ne, .wp-rz.nw, .wp-rz.se, .wp-rz.sw { width: 18px; height: 18px; }
.wp-rz.ne { top: -6px; right: -6px; cursor: nesw-resize; } .wp-rz.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.wp-rz.nw { top: -6px; left: -6px; cursor: nwse-resize; } .wp-rz.se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.wp-rz.se::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 10px; height: 10px; border-right: 2px solid rgba(255, 255, 255, .7); border-bottom: 2px solid rgba(255, 255, 255, .7); border-radius: 0 0 4px 0; opacity: 0; transition: opacity .2s; }
.wp:hover > .wp-rz.se::after, .wp.resizing > .wp-rz.se::after { opacity: 1; }
.wp:not(.app) { transition: opacity .3s, transform .3s, box-shadow .2s, left .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1); }
.wp:not(.app).dragging, .wp:not(.app).resizing { transition: none; }
@media (max-width: 900px) { .wp-rz { display: none; } }

/* =====================================================================
   Colores del espacio de trabajo · atajos a programas · descarga
   ===================================================================== */
.wsx-colors { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 6px; }
.wsx-colors button { width: 30px; height: 30px; border-radius: 50%; background: var(--c) !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); transition: transform .15s, box-shadow .15s; }
.wsx-colors button:hover { transform: scale(1.12); }
.wsx-colors button.on { box-shadow: 0 0 0 2px rgba(20, 18, 18, .9), 0 0 0 4px #fff; }
.wsx-cpick { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 4px; border-radius: 16px; background: rgba(255, 255, 255, .1); cursor: pointer; font-size: 12px; }
.wsx-cpick input { width: 24px; height: 24px; border: 0; border-radius: 50%; padding: 0; background: none; cursor: pointer; }
.wsx-sheet h6 { margin: 16px 0 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; font-weight: 500; }
.wsx-sheet h6:first-child { margin-top: 0; }
.wsx-pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 50vh; overflow-y: auto; margin-top: 10px; }
.wsx-pins button { display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 10px; align-items: center; text-align: left; padding: 10px 12px !important; border-radius: 12px; background: rgba(255, 255, 255, .06) !important; border: 1px solid transparent !important; }
.wsx-pins button svg { grid-row: 1 / 3; }
.wsx-pins button b { font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsx-pins button span { font-size: 10.5px; opacity: .6; }
.wsx-pins button.on { border-color: rgba(255, 255, 255, .5) !important; background: rgba(255, 255, 255, .14) !important; }
.wsx-dl { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; color: #fff; text-decoration: none; background: linear-gradient(135deg, #e0233f, #a50d26); font-weight: 500; }
.wsx-dl svg.i { rotate: 180deg; }

/* Música (Spotify) */
.wm-ctrl > button:not(.wm-play) { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; opacity: .85; transition: background .2s, opacity .2s; }
.wm-ctrl > button:not(.wm-play):hover { background: rgba(255, 255, 255, .12); opacity: 1; }
.wm-ctrl > button.on { color: #e0233f; opacity: 1; }
.wm-song { cursor: pointer; } .wm-prog, .wm-vol > div { cursor: pointer; }
.wm-prog i, .wm-vol > div i { transition: width .9s linear; }

/* Barra superior adaptable: el buscador se estrecha y nada se monta en pantallas pequeñas */
@media (max-width: 1560px) { .wsx-fsearch { width: clamp(200px, calc(100vw - 1040px), 473px); } .wsx-fsearch kbd { display: none; } .wsx-icons { gap: 16px; right: 28px; } }
@media (max-width: 1400px) { .wsx-root.clock-top .wsx-fclock .wsx-weather { display: none; } .wsx-user > div { display: none; } }
@media (max-width: 1250px) { .wsx-root.clock-top .wsx-fclock .wsx-clock span { display: none; } .wsx-icons { gap: 10px; } .wsx-fsearch .wsx-search span { display: none; } .wsx-fsearch { width: 52px; } }

/* =====================================================================
   Invita y gana (p-invita.js) · Compartir creación
   ===================================================================== */
.wsx-gift { color: #ff8a9b; } .wsx-gift::after { content: ""; position: absolute; top: 2px; right: 1px; width: 7px; height: 7px; border-radius: 50%; background: #e0233f; box-shadow: 0 0 8px #e0233f; animation: ivPing 2.4s ease-in-out infinite; }
@keyframes ivPing { 50% { transform: scale(1.5); opacity: .5; } }
.iv { container-type: inline-size; height: 100%; overflow-y: auto; padding: 26px clamp(18px, 3.5cqi, 44px) 40px; display: flex; flex-direction: column; gap: 22px; font-family: "Outfit", sans-serif; }
.iv svg.i { width: 16px; height: 16px; }
.iv h6 { margin: 0 0 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; font-weight: 500; }
.iv-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 30px 32px; border-radius: 24px; position: relative; overflow: hidden;
  background: radial-gradient(600px 260px at 85% 20%, rgba(200, 16, 46, .35), transparent 70%), linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .14); }
.iv-copy small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #ff8a9b; }
.iv-copy h2 { margin: 10px 0 12px; font: 400 clamp(28px, 4.2cqi, 44px)/1.08 "Newsreader", Georgia, serif; }
.iv-copy h2 em { font-style: italic; color: #ffb3bf; }
.iv-copy p { margin: 0; max-width: 560px; font-size: 14px; line-height: 1.65; opacity: .82; }
.iv-copy b { color: #fff; font-weight: 500; }
.iv-medal { position: relative; width: 150px; height: 150px; flex: none; display: grid; place-items: center; text-align: center; }
.iv-medal svg { position: absolute; inset: 0; rotate: -90deg; }
.iv-medal circle { fill: none; stroke-width: 6; } .iv-medal .t { stroke: rgba(255, 255, 255, .1); }
.iv-medal .f { stroke: #e0233f; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: calc(326.7 * (1 - var(--p))); filter: drop-shadow(0 0 8px rgba(224, 35, 63, .7)); transition: stroke-dashoffset 1s; }
.iv-medal span { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.iv-medal b { display: block; font: italic 400 26px/1.1 "Newsreader", Georgia, serif; margin: 2px 0; }
.iv-medal small { font-size: 11px; opacity: .65; }
.iv-medal.lv-oro .f, .iv-medal.lv-platino .f, .iv-medal.lv-leyenda .f { stroke: #f2c14e; filter: drop-shadow(0 0 8px rgba(242, 193, 78, .7)); }
.iv-link { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.iv-field { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 16px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .14); }
.iv-field input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: #fff; font: 14px "Outfit", sans-serif; letter-spacing: .02em; }
.iv-go { display: inline-flex !important; align-items: center; gap: 8px; height: 42px; padding: 0 18px !important; border-radius: 12px; font-weight: 500; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, #e0233f, #a50d26) !important; box-shadow: 0 10px 24px rgba(200, 16, 46, .35); transition: transform .2s; }
.iv-go:hover { transform: translateY(-1px); } .iv-go.ok, .iv-nets button.ok { background: linear-gradient(135deg, #1fa86a, #12784b) !important; }
.iv-code { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; }
.iv-code span { opacity: .6; } .iv-code b { font-size: 16px; letter-spacing: .14em; font-weight: 500; padding: 4px 12px; border-radius: 10px; background: rgba(255, 255, 255, .08); }
.iv-code button { display: inline-flex !important; align-items: center; gap: 6px; opacity: .75; } .iv-code button:hover { opacity: 1; }
.iv-badge { font-style: normal; font-size: 11px; padding: 3px 10px; border-radius: 20px; background: rgba(242, 193, 78, .18); color: #f2c14e; }
.iv-nets { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-nets button { display: inline-flex !important; align-items: center; gap: 7px; height: 36px; padding: 0 16px !important; border-radius: 12px; font-size: 12.5px; background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .12) !important; transition: background .2s; }
.iv-nets button:hover { background: rgba(255, 255, 255, .15) !important; }
.iv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.iv-steps > div { padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.iv-steps i { font: italic 400 30px/1 "Newsreader", Georgia, serif; color: #ff8a9b; }
.iv-steps b { display: block; margin: 10px 0 6px; font-weight: 500; font-size: 14px; }
.iv-steps span { font-size: 12.5px; opacity: .7; line-height: 1.55; }
.iv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.iv-stats > div { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.iv-stats b { display: block; font: 300 30px/1.1 "Outfit", sans-serif; font-variant-numeric: tabular-nums; }
.iv-stats span { font-size: 11.5px; opacity: .6; }
.iv-stats .gold b { color: #f2c14e; }
.iv-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; position: relative; }
.iv-track > div { padding: 14px 10px; border-radius: 16px; text-align: center; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); opacity: .55; transition: .3s; }
.iv-track > div.on { opacity: 1; } .iv-track > div.cur { border-color: rgba(224, 35, 63, .7); box-shadow: 0 0 22px rgba(224, 35, 63, .25); background: rgba(224, 35, 63, .08); }
.iv-track i { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.iv-track > div.on i { background: linear-gradient(135deg, #e0233f, #a50d26); }
.iv-track b { display: block; margin-top: 8px; font: italic 400 17px "Newsreader", Georgia, serif; }
.iv-track span { display: block; font-size: 11px; opacity: .6; }
.iv-track em { display: block; margin-top: 6px; font-style: normal; font-size: 11.5px; color: #f2c14e; }
.iv-list { display: flex; flex-direction: column; gap: 6px; }
.iv-list > div { display: grid; grid-template-columns: auto 1fr auto auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); }
.iv-av { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); }
.iv-list b { font-weight: 500; } .iv-list small { grid-column: 2; font-size: 11px; opacity: .5; }
.iv-list i { grid-row: 1 / 3; grid-column: 3; font-style: normal; font-size: 11px; padding: 4px 10px; border-radius: 20px; background: rgba(255, 255, 255, .08); opacity: .8; }
.iv-list i.active { background: rgba(31, 168, 106, .2); color: #5fe0a4; opacity: 1; }
.iv-list em { grid-row: 1 / 3; grid-column: 4; font-style: normal; color: #f2c14e; font-size: 13px; }
.iv-empty { margin: 0; padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, .03); font-size: 13px; opacity: .7; text-align: center; }
.iv-admin { padding: 20px; border-radius: 18px; border: 1px dashed rgba(242, 193, 78, .4); }
.iv-admin p { margin: 0 0 12px; font-size: 12.5px; opacity: .7; }
.iv-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.iv-form input { flex: 1 1 140px; height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .25); color: #fff; font: 13px "Outfit", sans-serif; outline: none; }
.iv-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .iv-table th { text-align: left; opacity: .55; font-weight: 400; padding: 6px 8px; } .iv-table td { padding: 8px; border-top: 1px solid rgba(255, 255, 255, .08); }
@container (max-width: 760px) { .iv-hero { flex-direction: column; align-items: flex-start; } .iv-steps, .iv-stats { grid-template-columns: 1fr 1fr; } .iv-track { grid-template-columns: repeat(3, 1fr); } }
/* Compartir creación (ventana) */
.sh-box p { margin: 0 0 14px; font-size: 13px; opacity: .8; line-height: 1.55; }
.sh-link { display: flex; gap: 8px; } .sh-link input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .25); color: inherit; font: 13px "Outfit", sans-serif; }
.sh-link button, .sh-nets button { height: 40px; padding: 0 16px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); color: inherit; cursor: pointer; font: 13px "Outfit", sans-serif; }
.sh-link button { background: linear-gradient(135deg, #e0233f, #a50d26); border: 0; color: #fff; }
.sh-nets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.auth-ref { margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; background: rgba(200, 16, 46, .1); border: 1px solid rgba(200, 16, 46, .25); font-size: 13px; }
.iv > section { flex: none; }

/* =====================================================================
   PANELES NUEVOS: Galería · Créditos · Gastos · Administración (p-galeria/p-creditos/p-gastos/p-admin.js)
   Sistema común .pn: cristal oscuro, títulos Newsreader en cursiva, acento de Lenore (se recolorea con el tema).
   ===================================================================== */
.pn { container-type: inline-size; height: 100%; overflow-y: auto; padding: 26px clamp(18px, 3.2cqi, 40px) 40px; display: flex; flex-direction: column; gap: 20px; font-family: "Outfit", sans-serif; color: #f4f1f1; }
.pn > * { flex: none; }
.pn svg.i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pn h6 { margin: 0 0 14px; display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; font-weight: 500; }
.pn-eyebrow { display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #ff8a9b; }
.pn-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; }
.pn-head h2, .pn-hero h2 { margin: 8px 0 6px; font: 400 clamp(26px, 3.6cqi, 40px)/1.08 "Newsreader", Georgia, serif; letter-spacing: -.01em; }
.pn-head h2 em, .pn-hero h2 em { font-style: italic; color: #ffb3bf; }
.pn-head p, .pn-hero p { margin: 0; font-size: 13.5px; line-height: 1.6; opacity: .72; max-width: 560px; }
.pn-hero p b { color: #fff; font-weight: 500; }
.pn-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pn .pn-search { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .13); min-width: 220px; }
.pn .pn-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: #fff; font: 13px "Outfit", sans-serif; }
.pn .pn-search:focus-within { border-color: rgba(224, 35, 63, .6); box-shadow: 0 0 0 3px rgba(224, 35, 63, .15); }
.pn .pn-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .1); }
.pn .pn-seg button { height: 32px; padding: 0 14px; border-radius: 9px; font-size: 12.5px; opacity: .7; transition: background .2s, opacity .2s; display: inline-flex; align-items: center; gap: 6px; }
.pn .pn-seg button:hover { opacity: 1; }
.pn .pn-seg button.on { opacity: 1; background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 12px rgba(0, 0, 0, .25); }
.pn-dot { width: 7px; height: 7px; border-radius: 50%; background: #e0233f; box-shadow: 0 0 8px #e0233f; }
.pn .pn-select { height: 38px; padding: 0 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .13); color: #fff; font: 13px "Outfit", sans-serif; outline: none; }
.pn .pn-select option { background: #1c1919; }
.pn .pn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; font-size: 13px; font-weight: 500; color: #fff; text-decoration: none; white-space: nowrap;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: background .2s, transform .2s, box-shadow .2s; }
.pn .pn-btn:hover { background: rgba(255, 255, 255, .15); transform: translateY(-1px); }
.pn .pn-btn.pri { border-color: transparent; background: linear-gradient(135deg, #e0233f, #a50d26); box-shadow: 0 10px 24px rgba(200, 16, 46, .35); }
.pn .pn-btn.pri:hover { box-shadow: 0 14px 30px rgba(200, 16, 46, .45); }
.pn .pn-btn.on { background: rgba(242, 193, 78, .18); border-color: rgba(242, 193, 78, .5); color: #f2c14e; }
.pn .pn-btn.ghost { background: none; border-color: rgba(255, 255, 255, .1); opacity: .75; } .pn .pn-btn.ghost:hover { opacity: 1; }
.pn .pn-btn.sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 10px; }
.pn .pn-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.pn .pn-link { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #ffb3bf; opacity: .9; } .pn .pn-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.pn .pn-x { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; opacity: .7; } .pn .pn-x:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.pn-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pn-card { padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.pn-card .pn-acts { justify-content: flex-start; margin-top: 14px; }
.pn-p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; opacity: .8; } .pn-p:last-child { margin-bottom: 0; } .pn-p b { color: #fff; }
.pn-fine { margin: 14px 0 0; font-size: 12px; line-height: 1.55; opacity: .55; } .pn-fine a { color: inherit; }
.pn-note { margin: 0; display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 14px; font-size: 12.5px; line-height: 1.55; background: rgba(242, 193, 78, .08); border: 1px solid rgba(242, 193, 78, .22); color: #f3e2b8; }
.pn-note svg.i { flex: none; margin-top: 1px; }
.pn-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 20px; font-size: 11px; font-style: normal; letter-spacing: .02em; text-transform: none; background: rgba(255, 255, 255, .09); opacity: 1; }
.pn-pill.ok { background: rgba(31, 168, 106, .18); color: #66e2a9; } .pn-pill.warn { background: rgba(242, 193, 78, .16); color: #f2c14e; } .pn-pill.bad { background: rgba(224, 35, 63, .2); color: #ff8a9b; }
.pn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.pn-stats > div { padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
.pn-stats span { display: block; font-size: 11.5px; opacity: .6; }
.pn-stats b { display: block; margin: 4px 0 2px; font: 300 clamp(22px, 2.6cqi, 30px)/1.1 "Outfit", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pn-stats small { font-size: 11px; opacity: .5; }
.pn-stats .ok b { color: #66e2a9; } .pn-stats .warn b { color: #f2c14e; } .pn-stats .acc b { color: #ffb3bf; }
.pn-stats .acc::after, .pn-stats .ok::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(224, 35, 63, .25), transparent 70%); }
.pn-stats .ok::after { background: radial-gradient(circle, rgba(31, 168, 106, .22), transparent 70%); }
.pn-stats.in { margin-top: 16px; }
.pn-table { overflow-x: auto; margin: 0 -6px; }
.pn-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pn-table th { text-align: left; font-weight: 400; opacity: .5; padding: 8px 10px; font-size: 11.5px; white-space: nowrap; }
.pn-table td { padding: 11px 10px; border-top: 1px solid rgba(255, 255, 255, .07); vertical-align: middle; }
.pn-table tr:hover td { background: rgba(255, 255, 255, .025); }
.pn-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn-table .pos { color: #66e2a9; } .pn-table .neg { color: #ffb3bf; }
.pn-table a { color: #ffb3bf; }
.pn-table code, .pn-p code, .pn dd code { font: 12px "JetBrains Mono", monospace; padding: 3px 8px; border-radius: 8px; background: rgba(0, 0, 0, .3); word-break: break-all; }
.pn-meter { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pn-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a50d26, #ff6b81); }
.pn-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 40px 20px; max-width: 420px; }
.pn-empty b { font: 400 22px/1.2 "Newsreader", Georgia, serif; } .pn-empty p { margin: 0 0 10px; font-size: 13px; opacity: .65; line-height: 1.6; }
.pn-empty.big { padding: 60px 20px; }
.pn-empty-line { margin: 0; padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, .03); font-size: 13px; opacity: .65; text-align: center; }
.pn-orb { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 6px; flex: none; background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 12px 30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
.pn-orb svg.i { width: 24px; height: 24px; }
.pn-orb.ok { color: #66e2a9; box-shadow: 0 0 30px rgba(31, 168, 106, .3); } .pn-orb.warn { color: #f2c14e; } .pn-orb.bad { color: #ff8a9b; box-shadow: 0 0 30px rgba(224, 35, 63, .35); }
.pn-loading { margin: auto; display: flex; gap: 8px; padding: 60px; } .pn-loading i { width: 9px; height: 9px; border-radius: 50%; background: #fff; opacity: .3; animation: pnDot 1s infinite; }
.pn-loading i:nth-child(2) { animation-delay: .15s; } .pn-loading i:nth-child(3) { animation-delay: .3s; }
@keyframes pnDot { 50% { opacity: 1; translate: 0 -4px; } }
.pn-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); border-top-color: #fff; animation: pispin .9s linear infinite; flex: none; }

/* ---------- Galería ---------- */
.gx-grid { columns: 4 230px; column-gap: 12px; }
.gx-grid figure { position: relative; margin: 0 0 12px; break-inside: avoid; border-radius: 16px; overflow: hidden; cursor: zoom-in; background: rgba(255, 255, 255, .05);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.gx-grid figure:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .18); }
.gx-grid img, .gx-grid video { display: block; width: 100%; height: auto; }
.gx-over { position: absolute; inset: auto 0 0; padding: 40px 12px 10px; background: linear-gradient(transparent, rgba(8, 6, 7, .88)); opacity: 0; translate: 0 8px; transition: opacity .25s, translate .3s; }
.gx-grid figure:hover .gx-over { opacity: 1; translate: 0 0; }
.gx-over p { margin: 0 0 8px; font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gx-over > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gx-over small { font-size: 10.5px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-over span { display: flex; gap: 4px; }
.gx-over button, .gx-over a { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .12); backdrop-filter: blur(8px); transition: background .2s; }
.gx-over button:hover, .gx-over a:hover { background: rgba(255, 255, 255, .25); }
.gx-over button.on { color: #f2c14e; }
.gx-over svg.i { width: 14px; height: 14px; }
.gx-fav { position: absolute; top: 10px; right: 10px; color: #f2c14e; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); } .gx-fav svg.i { fill: currentColor; width: 16px; height: 16px; }
.gx-dur { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 20px; font-size: 11px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); }
.gx-dur svg.i { width: 10px; height: 10px; fill: currentColor; }
.gx-view { position: fixed; inset: 0; z-index: 400; display: grid; grid-template-columns: minmax(0, 1fr) 340px; background: rgba(8, 6, 7, .9); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  opacity: 0; transition: opacity .25s; font-family: "Outfit", sans-serif; color: #f4f1f1; }
.gx-view.in { opacity: 1; }
.gx-view svg.i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gx-stage { position: relative; display: grid; place-items: center; overflow: hidden; padding: 30px; }
.gx-stage img, .gx-stage video { max-width: 100%; max-height: calc(100vh - 60px); border-radius: 14px; box-shadow: 0 40px 100px rgba(0, 0, 0, .6); transform-origin: 0 0; transition: transform .12s; cursor: zoom-in; user-select: none; }
.gx-view.zoomed .gx-stage img { cursor: grab; box-shadow: none; }
.gx-nav { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 0; color: #fff; cursor: pointer; background: rgba(255, 255, 255, .1); backdrop-filter: blur(10px); transition: background .2s; }
.gx-nav:hover { background: rgba(255, 255, 255, .22); } .gx-nav.prev { left: 22px; } .gx-nav.next { right: 22px; }
.gx-zoom { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, .5); backdrop-filter: blur(10px); }
.gx-zoom button { height: 34px; min-width: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: #fff; font: 12.5px "Outfit", sans-serif; cursor: pointer; display: grid; place-items: center; }
.gx-zoom button:hover { background: rgba(255, 255, 255, .12); }
.gx-side { position: relative; padding: 34px 26px; overflow-y: auto; border-left: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035); display: flex; flex-direction: column; gap: 14px; }
.gx-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 11px; border: 0; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; display: grid; place-items: center; }
.gx-x:hover { background: rgba(255, 255, 255, .18); }
.gx-side h3 { margin: -6px 0 0; font: 400 26px/1.15 "Newsreader", Georgia, serif; }
.gx-prompt { margin: 0; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, .3); font-size: 13px; line-height: 1.6; max-height: 200px; overflow-y: auto; }
.gx-side dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 12.5px; } .gx-side dt { opacity: .5; } .gx-side dd { margin: 0; text-align: right; }
.gx-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.gx-view .pn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 12px; font: 500 13px "Outfit", sans-serif; color: #fff; text-decoration: none; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: background .2s; }
.gx-view .pn-btn:hover { background: rgba(255, 255, 255, .16); }
.gx-view .pn-btn.pri { border-color: transparent; background: linear-gradient(135deg, #e0233f, #a50d26); box-shadow: 0 10px 24px rgba(200, 16, 46, .35); }
.gx-view .pn-btn.on { color: #f2c14e; border-color: rgba(242, 193, 78, .5); background: rgba(242, 193, 78, .12); }
.gx-view .pn-btn.ghost { background: none; opacity: .7; } .gx-view .pn-btn.ghost:hover { opacity: 1; color: #ff8a9b; }
.gx-view .pn-eyebrow { color: #ff8a9b; }
.gx-hint { margin: auto 0 0; font-size: 11px; opacity: .4; }
@media (max-width: 900px) { .gx-view { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; } .gx-side { max-height: 45vh; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); } }

/* ---------- Créditos ---------- */
.cr-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 30px 32px; border-radius: 24px; position: relative; overflow: hidden;
  background: radial-gradient(600px 300px at 0% 0%, rgba(224, 35, 63, .28), transparent 70%), radial-gradient(500px 260px at 100% 100%, rgba(242, 193, 78, .12), transparent 70%), rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.cr-balance { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; padding: 18px 22px; border-radius: 20px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .1); }
.cr-balance span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .55; }
.cr-balance b { font: 300 44px/1.05 "Outfit", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cr-balance small { font-size: 12px; opacity: .55; margin-bottom: 10px; }
.cr-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; padding-top: 10px; }
.cr-pack { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 24px 20px 20px; border-radius: 22px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1); transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s; }
.cr-pack:hover, .cr-pack.sel { transform: translateY(-3px); border-color: rgba(255, 255, 255, .22); box-shadow: 0 20px 44px rgba(0, 0, 0, .35); }
.cr-pack.pop { background: radial-gradient(260px 180px at 50% 0%, rgba(224, 35, 63, .3), transparent 75%), rgba(255, 255, 255, .06); border-color: rgba(224, 35, 63, .55); box-shadow: 0 0 0 1px rgba(224, 35, 63, .2), 0 22px 50px rgba(200, 16, 46, .22); }
.cr-tag { position: absolute; top: -11px; left: 20px; height: 22px; padding: 0 11px; border-radius: 20px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 500; color: #fff; background: linear-gradient(135deg, #e0233f, #a50d26); box-shadow: 0 6px 16px rgba(200, 16, 46, .4); }
.cr-pack h4 { margin: 0; font: italic 400 24px/1.1 "Newsreader", Georgia, serif; }
.cr-for { font-size: 12px; opacity: .55; }
.cr-price { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; } .cr-price b { font: 300 40px/1 "Outfit", sans-serif; letter-spacing: -.02em; } .cr-price small { font-size: 12px; opacity: .5; }
.cr-cr { font-size: 14px; font-weight: 500; }
.cr-bonus { margin: 2px 0 16px; font-size: 11.5px; color: #66e2a9; min-height: 1.5em; }
.cr-pack .pn-btn { margin-top: auto; width: 100%; }
.cr-rinde { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cr-rinde > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, .2); }
.cr-rinde i { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); }
.cr-rinde b { font-weight: 500; font-size: 15px; } .cr-rinde span { font-size: 11.5px; opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.cr-why > div { padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); }
.cr-why svg.i { width: 20px; height: 20px; color: #ffb3bf; } .cr-why b { display: block; margin: 10px 0 4px; font-weight: 500; font-size: 14px; } .cr-why span { font-size: 12px; opacity: .6; line-height: 1.5; }
.cr-ramps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 4px; }
.cr-ramps a { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .08); color: inherit; text-decoration: none; transition: border-color .2s, background .2s; }
.cr-ramps a:hover { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); } .cr-ramps b { font-weight: 500; } .cr-ramps span { font-size: 12px; opacity: .6; line-height: 1.5; }
.cr-co { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; border-color: rgba(242, 193, 78, .35); }
.cr-qr { aspect-ratio: 1; border-radius: 18px; background: #fff; padding: 10px; display: grid; place-items: center; } .cr-qr svg { width: 100%; height: 100%; }
.cr-co-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .cr-co-hd h3 { margin: 0; font: 400 22px "Newsreader", Georgia, serif; } .cr-co-hd .pn-x { margin-left: auto; }
.cr-co dl { margin: 0 0 14px; display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: center; font-size: 13px; } .cr-co dt { opacity: .55; }
.cr-co dd { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cr-co dd small { font-size: 11.5px; opacity: .55; }
.cr-amt { font: 400 22px "Outfit", sans-serif; font-variant-numeric: tabular-nums; }
.cr-wait { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 13px; opacity: .8; }
.cr-co details summary { cursor: pointer; font-size: 12.5px; opacity: .6; }
.cr-claim { display: flex; gap: 8px; margin-top: 10px; } .cr-claim input { flex: 1; height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .25); color: #fff; font: 13px "Outfit", sans-serif; outline: none; }
.cr-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px; } .cr-done h3 { margin: 0; font: 400 28px "Newsreader", Georgia, serif; } .cr-done p { margin: 0 0 14px; opacity: .75; }
@container (max-width: 640px) { .cr-hero { flex-direction: column; align-items: flex-start; } .cr-balance { align-items: flex-start; text-align: left; } .cr-co { grid-template-columns: 1fr; } .cr-qr { max-width: 200px; } }

/* ---------- Gastos ---------- */
.sp-chart { width: 100%; height: 230px; display: block; overflow: visible; }
.sp-chart line { stroke: rgba(255, 255, 255, .07); } .sp-chart text { fill: rgba(255, 255, 255, .42); font: 11px "Outfit", sans-serif; }
.sp-chart .a { fill: url(#spG); } .sp-chart .l { fill: none; stroke: #ff5c74; stroke-width: 2.2; filter: drop-shadow(0 4px 10px rgba(224, 35, 63, .5)); }
.sp-chart circle { fill: #fff; stroke: #e0233f; stroke-width: 2; }
.sp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.sp-split { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.sp-donut { position: relative; width: 150px; height: 150px; flex: none; } .sp-donut svg { width: 100%; height: 100%; rotate: -90deg; }
.sp-donut circle { fill: none; stroke-width: 14; } .sp-donut .t { stroke: rgba(255, 255, 255, .06); }
.sp-donut > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .sp-donut b { font: 300 20px "Outfit", sans-serif; } .sp-donut span { font-size: 11px; opacity: .5; }
.sp-legend { flex: 1; min-width: 170px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sp-legend li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; font-size: 12.5px; }
.sp-legend i { width: 10px; height: 10px; border-radius: 4px; } .sp-legend small { opacity: .45; } .sp-legend b { font-weight: 500; font-variant-numeric: tabular-nums; }
.sp-models { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sp-models li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(60px, 1fr) auto; gap: 14px; align-items: center; }
.sp-models b { display: block; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-models small { font-size: 11px; opacity: .5; }
.sp-models em { font-style: normal; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ---------- Administración ---------- */
.ad-cov { border-color: rgba(31, 168, 106, .35); } .ad-cov.warn { border-color: rgba(242, 193, 78, .4); } .ad-cov.bad { border-color: rgba(224, 35, 63, .55); box-shadow: 0 0 40px rgba(224, 35, 63, .15); }
.ad-cov-hd { display: flex; gap: 18px; align-items: flex-start; } .ad-cov-hd h6 { margin-bottom: 6px; } .ad-cov-hd h3 { margin: 0 0 6px; font: 400 24px "Newsreader", Georgia, serif; }
.ad-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ad-people li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .03); }
.ad-people b { display: block; font-weight: 500; font-size: 13px; } .ad-people small { font-size: 11px; opacity: .5; } .ad-people em { font-style: normal; font-size: 12.5px; color: #f2c14e; }
.ad-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: linear-gradient(135deg, rgba(224, 35, 63, .7), rgba(120, 10, 30, .8)); }
.ad-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .ad-bar > span { font-size: 12px; opacity: .5; }
.ad-mail { display: block; font-size: 11.5px; opacity: .5; }
.ad-acts { white-space: nowrap; text-align: right; } .ad-acts .pn-btn + .pn-btn { margin-left: 6px; }
.ad-txt { max-width: 420px; overflow-wrap: anywhere; font-size: 12px; opacity: .8; }
.ad-kv { margin: 0 0 6px; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: 13px; max-width: 620px; } .ad-kv dt { opacity: .55; } .ad-kv dd { margin: 0; }

/* =====================================================================
   BARRA LATERAL: nombre de cada icono al pasar el ratón (Inicio, Apps y paneles, Modelos IA, Biblioteca…)
   ===================================================================== */
.wsx-rail button { position: relative; }
.wsx-tip { position: absolute; left: calc(100% + 16px); top: 50%; translate: -6px -50%; display: flex; flex-direction: column; gap: 1px; padding: 9px 14px; border-radius: 12px; white-space: nowrap; pointer-events: none; text-align: left;
  background: rgba(18, 16, 17, .88); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  opacity: 0; transition: opacity .18s, translate .25s cubic-bezier(.2, .8, .2, 1); z-index: 60; font-family: "Outfit", sans-serif; }
.wsx-tip::before { content: ""; position: absolute; left: -5px; top: 50%; width: 9px; height: 9px; translate: 0 -50%; rotate: 45deg; background: rgba(18, 16, 17, .88); border-left: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.wsx-tip b { font-size: 13px; font-weight: 500; color: #fff; } .wsx-tip small { font-size: 11px; color: rgba(255, 255, 255, .55); }
.wsx-rail button:hover .wsx-tip, .wsx-rail button:focus-visible .wsx-tip { opacity: 1; translate: 0 -50%; transition-delay: .12s; }

/* =====================================================================
   MENÚ DE LA CUENTA (botón con tu nombre)
   ===================================================================== */
.wsx-user.open { background: rgba(255, 255, 255, .14); }
.wsx-user.open > svg.i:last-child { rotate: 180deg; }
.wsx-user > svg.i:last-child { transition: rotate .25s; }
.wsx-umenu { position: fixed; z-index: 300; width: 320px; padding: 10px; border-radius: 22px; font-family: "Outfit", sans-serif; color: #f4f1f1;
  background: linear-gradient(160deg, rgba(58, 52, 53, .9), rgba(22, 19, 20, .94)); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(26px) saturate(140%); -webkit-backdrop-filter: blur(26px) saturate(140%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12); opacity: 0; translate: 0 -8px; scale: .98; transform-origin: 100% 0; transition: opacity .18s, translate .25s cubic-bezier(.2, .8, .2, 1), scale .25s cubic-bezier(.2, .8, .2, 1); }
.wsx-umenu.in { opacity: 1; translate: 0 0; scale: 1; }
.wsx-umenu svg.i { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wsx-umenu button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.wsx-um-hd { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 12px 14px; }
.wsx-um-av { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 400 20px "Newsreader", Georgia, serif; color: #fff;
  background: radial-gradient(circle at 30% 25%, #ff8a9b, #c8102e 55%, #5e0716); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 8px 20px rgba(200, 16, 46, .4); }
.wsx-um-hd b { display: block; font-weight: 500; font-size: 15px; } .wsx-um-hd span { display: block; font-size: 12px; opacity: .55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsx-um-hd i { grid-column: 2; justify-self: start; margin-top: 6px; font-style: normal; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; background: rgba(255, 255, 255, .1); color: #ffb3bf; }
.wsx-umenu .wsx-um-cr { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; text-align: left;
  background: radial-gradient(240px 120px at 0 0, rgba(224, 35, 63, .3), transparent 70%), rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: border-color .2s; }
.wsx-umenu .wsx-um-cr:hover { border-color: rgba(255, 255, 255, .25); }
.wsx-um-cr > span { flex: 1; } .wsx-um-cr small { display: block; font-size: 11px; opacity: .55; } .wsx-um-cr b { font-weight: 500; font-size: 16px; font-variant-numeric: tabular-nums; }
.wsx-um-cr em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12px; color: #ffb3bf; } .wsx-um-cr em svg.i { width: 13px; height: 13px; }
.wsx-um-list { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.wsx-um-list:last-child { border-bottom: 0; padding-bottom: 2px; }
.wsx-umenu .wsx-um-list button { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; text-align: left; transition: background .15s; }
.wsx-umenu .wsx-um-list button:hover { background: rgba(255, 255, 255, .08); }
.wsx-um-list button > svg.i { opacity: .75; } .wsx-um-list b { display: block; font-weight: 400; font-size: 13.5px; } .wsx-um-list small { display: block; font-size: 11px; opacity: .5; }
.wsx-um-list.sm button { padding: 8px 12px; } .wsx-um-list.sm b { font-size: 13px; opacity: .85; }
.wsx-umenu [data-u="out"]:hover { color: #ff8a9b; }

/* =====================================================================
   VISTAS A PANTALLA COMPLETA (vistas.js): Modelos IA y Biblioteca de juegos
   ===================================================================== */
.wsx-full { position: absolute; left: 112px; right: 24px; top: 92px; bottom: 112px; z-index: 30; border-radius: 26px; overflow: hidden; color: #f4f1f1; font-family: "Outfit", sans-serif;
  background: linear-gradient(160deg, rgba(58, 52, 53, .8), rgba(18, 15, 16, .9)); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(30px) saturate(130%); -webkit-backdrop-filter: blur(30px) saturate(130%);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1); opacity: 0; translate: 0 12px; transition: opacity .35s, translate .5s cubic-bezier(.2, .8, .2, 1); }
.wsx-full.in { opacity: 1; translate: 0 0; }
.wsx-full[hidden] { display: none; }
.wsx-root.viewing .wsx-area, .wsx-root.viewing .wsx-tray { opacity: 0; pointer-events: none; }
.wsx-root.viewing .wsx-fclock { opacity: 0; pointer-events: none; }
.wsx-full svg.i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wsx-full button { font: inherit; color: inherit; }
.wsx-full h6 { margin: 0 0 12px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; font-weight: 500; }
.gl, .ml { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); }
.ml { grid-template-rows: minmax(0, 1fr); }
.gl-main, .ml-main { min-height: 0; overflow-y: auto; padding: 0 26px 30px; }
.ml-main { padding-top: 22px; }
.gl-side, .ml-side { min-height: 0; overflow-y: auto; padding: 22px 22px 30px 4px; display: flex; flex-direction: column; gap: 14px; }
.gl-side { grid-row: 1 / 3; grid-column: 2; padding-top: 22px; }
.gl-hero, .ml-hero { position: relative; margin: 22px 26px 18px; min-height: 190px; border-radius: 22px; overflow: hidden; display: flex; align-items: center; padding: 30px 36px;
  background: radial-gradient(500px 260px at 70% 40%, rgba(255, 255, 255, .16), transparent 70%), linear-gradient(120deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .12); }
.ml-hero { margin: 0 0 18px; }
.gl-hero h1, .ml-hero h1 { margin: 0; font: 400 clamp(34px, 4vw, 54px)/1.02 "Newsreader", Georgia, serif; letter-spacing: -.015em; position: relative; z-index: 2; }
.gl-hero h1 em { font-style: italic; color: #ffd3da; }
.gl-hero-tx p { margin: 14px 0 0; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; opacity: .65; position: relative; z-index: 2; }
.gl-hero-art { position: absolute; left: 46%; top: 50%; height: 140%; translate: -30% -50%; opacity: .95; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .5)); pointer-events: none; }
.gl-hero blockquote, .ml-hero blockquote { margin: 0 0 0 auto; position: relative; z-index: 2; max-width: 230px; font: italic 300 16px/1.5 "Newsreader", Georgia, serif; opacity: .8; }
.gl-hero blockquote i, .ml-hero blockquote i { display: block; width: 26px; height: 2px; margin-top: 10px; background: #e0233f; box-shadow: 0 0 8px #e0233f; }
.ml-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; mask: linear-gradient(90deg, transparent 0%, #000 45%); -webkit-mask: linear-gradient(90deg, transparent 0%, #000 45%); }
.ml-hero > div { position: relative; z-index: 2; max-width: 560px; }
.ml-up { margin: 12px 0 6px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; font-weight: 500; opacity: .85; }
.ml-hero p:not(.ml-up) { margin: 0; font-size: 13.5px; opacity: .7; }
.gl-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0 14px; background: linear-gradient(rgba(34, 30, 31, .92), rgba(34, 30, 31, .0)); }
.gl-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.wsx-full .gl-tabs button { height: 36px; padding: 0 16px; border-radius: 12px; font-size: 13px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); cursor: pointer; transition: background .2s; }
.wsx-full .gl-tabs button:hover { background: rgba(255, 255, 255, .12); }
.wsx-full .gl-tabs button.on { background: #f4f1f1; color: #161314; border-color: transparent; font-weight: 500; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.gl-search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .12); }
.gl-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: #fff; font: 13px "Outfit", sans-serif; }
.gl-sort { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: .8; }
.gl-sort select { height: 36px; padding: 0 10px; border-radius: 11px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .12); color: #fff; font: 13px "Outfit", sans-serif; outline: none; } .gl-sort option { background: #1c1919; }
.gl-h { margin: 22px 0 12px; font: 400 21px "Newsreader", Georgia, serif; } .gl-h small { font: 400 13px "Outfit", sans-serif; opacity: .45; margin-left: 6px; }
.wsx-full .gl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 12px; font-size: 13px; font-weight: 500; color: #fff; text-decoration: none; cursor: pointer;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); transition: background .2s, transform .2s; }
.wsx-full .gl-btn:hover { background: rgba(255, 255, 255, .18); transform: translateY(-1px); }
.wsx-full .gl-btn.pri { background: linear-gradient(135deg, #e0233f, #a50d26); border-color: transparent; box-shadow: 0 12px 28px rgba(200, 16, 46, .4); }
.wsx-full .gl-btn.sm { height: 34px; padding: 0 14px; font-size: 12.5px; }
.gl-mute { margin: 0; font-size: 12.5px; line-height: 1.6; opacity: .6; }
.gl-sc { padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); }

/* Biblioteca */
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-flow: dense; gap: 14px; }
.gl-card { position: relative; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; cursor: pointer; background: #1a1617; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); isolation: isolate;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.gl-card.big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(224, 35, 63, .4), 0 26px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(224, 35, 63, .25); }
.gl-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .35); }
.gl-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .8s cubic-bezier(.2, .8, .2, 1); z-index: -2; }
.gl-card > img.h { object-position: center; }
.gl-card:hover > img { scale: 1.06; }
.gl-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(8, 6, 7, .9)); }
.gl-fb { position: absolute; inset: 0; z-index: -2; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px; text-align: center;
  background: radial-gradient(circle at 30% 20%, rgba(224, 35, 63, .45), transparent 60%), radial-gradient(circle at 80% 90%, rgba(120, 140, 255, .3), transparent 60%), #1b1718; }
.gl-fb b { font: 400 22px/1.15 "Newsreader", Georgia, serif; } .gl-fb small { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .55; }
.gl-rc .gl-fb b { font-size: 16px; }
.gl-tag { position: absolute; top: 10px; right: 10px; height: 22px; padding: 0 9px; border-radius: 20px; display: inline-flex; align-items: center; font-size: 10.5px; background: rgba(8, 6, 7, .55); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(8px); }
.gl-tag.hot { right: auto; left: 10px; background: rgba(224, 35, 63, .75); border-color: transparent; }
.gl-card .gl-fav { position: absolute; top: 40px; right: 10px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; opacity: 0; background: rgba(8, 6, 7, .5); border: 0; cursor: pointer; transition: opacity .2s; }
.gl-card .gl-fav svg.i { width: 13px; height: 13px; } .gl-card:hover .gl-fav, .gl-card .gl-fav.on { opacity: 1; } .gl-card .gl-fav.on { color: #f2c14e; }
.gl-ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; display: flex; flex-direction: column; gap: 3px; }
.gl-ov b { font-size: 14px; font-weight: 500; line-height: 1.25; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); } .gl-ov small { font-size: 11px; opacity: .6; }
.wsx-full .gl-play { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 0; margin-top: 0; overflow: hidden; border-radius: 12px; font-size: 12.5px; font-weight: 500; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #161314; opacity: 0; transition: height .3s cubic-bezier(.2, .8, .2, 1), margin .3s, opacity .25s; }
.gl-play svg.i { fill: currentColor; width: 13px; height: 13px; }
.gl-card:hover .gl-play, .gl-card.big .gl-play { height: 36px; margin-top: 8px; opacity: 1; }
.gl-card.big .gl-ov { padding: 22px; } .gl-card.big .gl-ov b { font: 400 30px/1.1 "Newsreader", Georgia, serif; } .gl-card.big .gl-play { align-self: flex-start; padding: 0 18px; height: 42px; }
.gl-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.gl-rc { position: relative; aspect-ratio: 460 / 215; border-radius: 16px; overflow: hidden; cursor: pointer; background: #1a1617; isolation: isolate; box-shadow: 0 12px 26px rgba(0, 0, 0, .3); transition: transform .3s; }
.gl-rc:hover { transform: translateY(-3px); }
.gl-rc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.gl-rc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 6, 7, .85), transparent 75%); }
.gl-rc > div { position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; align-items: center; gap: 10px; }
.wsx-full .gl-play.sm { width: 34px; height: 34px; margin: 0; opacity: 1; border-radius: 50%; flex: none; }
.gl-rc b { display: block; font-size: 13px; font-weight: 500; } .gl-rc small { font-size: 11px; opacity: .6; }
.gl-big { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } .gl-big b { font: 300 40px/1 "Outfit", sans-serif; } .gl-big span { font-size: 12.5px; opacity: .6; }
.gl-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; margin-top: 8px; }
.gl-row i { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; } .gl-row em { display: block; height: 100%; background: linear-gradient(90deg, #a50d26, #ff6b81); border-radius: inherit; }
.gl-row small { opacity: .55; }
.gl-ring { position: relative; width: 96px; height: 96px; margin: 2px auto 10px; display: grid; place-items: center; }
.gl-ring svg { position: absolute; inset: 0; rotate: -90deg; } .gl-ring circle { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 7; }
.gl-ring .f { stroke: #e0233f; stroke-linecap: round; stroke-dasharray: 213.6; stroke-dashoffset: calc(213.6 * (1 - var(--p))); filter: drop-shadow(0 0 6px rgba(224, 35, 63, .6)); }
.gl-ring b { font: 400 15px "Outfit", sans-serif; }
.gl-now { position: relative; overflow: hidden; padding: 0; min-height: 150px; isolation: isolate; }
.gl-now > img, .gl-now > .gl-fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.gl-now::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 6, 7, .2), rgba(8, 6, 7, .9)); }
.gl-now > div { padding: 60px 18px 18px; display: flex; flex-direction: column; gap: 2px; } .gl-now b { font: 400 20px "Newsreader", Georgia, serif; } .gl-now small { font-size: 11.5px; opacity: .65; margin-bottom: 10px; }
.gl-now .gl-btn { align-self: flex-start; }
.gl-web { position: relative; min-height: 420px; display: grid; place-items: center; }
.gl-ghosts { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; align-content: center; opacity: .35; filter: blur(1px); }
.gl-ghosts i { aspect-ratio: 3 / 4; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1); animation: glPulse 2.4s ease-in-out var(--d) infinite; }
@keyframes glPulse { 50% { opacity: .5; } }
.gl-web-tx { position: relative; max-width: 520px; padding: 34px; border-radius: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: rgba(20, 17, 18, .82); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(18px); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.gl-web-tx h3 { margin: 0; font: 400 28px "Newsreader", Georgia, serif; } .gl-web-tx p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; opacity: .72; } .gl-web-tx small { font-size: 11.5px; opacity: .5; }

/* Modelos IA */
.ml-feat { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.ml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.ml-card { position: relative; border-radius: 18px; overflow: hidden; cursor: pointer; isolation: isolate; min-height: 150px; background: #1a1617; border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .3s; }
.ml-card.big { min-height: 280px; }
.ml-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .35); box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
.ml-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: scale .9s cubic-bezier(.2, .8, .2, 1); }
.ml-card:hover > img { scale: 1.07; }
.ml-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 6, 7, .1) 20%, rgba(8, 6, 7, .88) 80%); }
.ml-card.big::after { background: linear-gradient(180deg, rgba(8, 6, 7, .25), rgba(8, 6, 7, .2) 35%, rgba(8, 6, 7, .9) 85%); }
.ml-tag { position: absolute; top: 12px; left: 12px; height: 22px; padding: 0 9px; border-radius: 20px; display: inline-flex; align-items: center; font-size: 10.5px; background: rgba(224, 35, 63, .8); }
.ml-c { position: absolute; inset: auto 0 0; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ml-card.big .ml-c { inset: 0; justify-content: flex-end; }
.ml-logo { align-self: center; margin: auto 0; }
.mk.lg { width: 64px; height: 64px; border-radius: 20px; } .mk.lg i { width: 58%; height: 58%; }
.ml-id { display: flex; align-items: center; gap: 10px; min-width: 0; } .ml-id > div { min-width: 0; }
.ml-id .mk { width: 34px; height: 34px; border-radius: 11px; }
.ml-id b { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-card.big .ml-id b { font: 400 22px/1.15 "Newsreader", Georgia, serif; white-space: normal; text-align: center; }
.ml-card.big .ml-id { justify-content: center; text-align: center; }
.ml-id small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.ml-c p { margin: 0; font-size: 12px; line-height: 1.5; opacity: .75; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ml-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; } .ml-ft small { opacity: .55; font-size: 10.5px; }
.wsx-full .ml-use { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 10px; font-size: 12px; font-weight: 500; border: 0; cursor: pointer; background: rgba(255, 255, 255, .92); color: #161314; flex: none; }
.ml-use svg.i { width: 12px; height: 12px; }
.ml-more { display: flex; justify-content: center; margin-top: 18px; }
.ml-f { display: flex; flex-direction: column; gap: 4px; }
.wsx-full .ml-f button { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; border: 0; cursor: pointer; background: none; text-align: left; font-size: 13px; transition: background .15s; }
.wsx-full .ml-f button:hover { background: rgba(255, 255, 255, .07); } .wsx-full .ml-f button.on { background: rgba(255, 255, 255, .12); }
.ml-f b { font-weight: 400; font-size: 12px; opacity: .55; font-variant-numeric: tabular-nums; }
.ml-pop { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ml-pop li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.ml-pop li:hover { background: rgba(255, 255, 255, .07); } .ml-pop .mk { width: 36px; height: 36px; border-radius: 11px; }
.ml-pop b { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ml-pop small { font-size: 11px; opacity: .5; }
@media (max-width: 1200px) { .gl, .ml { grid-template-columns: minmax(0, 1fr); } .gl-side, .ml-side { display: none; } }
@media (max-width: 900px) { .wsx-full { left: 12px; right: 12px; top: 76px; bottom: 90px; } .gl-hero-art, .gl-hero blockquote, .ml-hero blockquote { display: none; } }
/* Avatar de la barra superior: la inicial centrada (una regla general de .wsx-user span la desplazaba) */
.wsx-user .wsx-av { display: grid; place-items: center; font: 400 18px "Newsreader", Georgia, serif; opacity: 1; color: #fff;
  background: radial-gradient(circle at 30% 25%, #ff8a9b, #c8102e 55%, #5e0716); box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 6px 16px rgba(200, 16, 46, .35); }
/* El buscador nunca pisa los iconos de la derecha */
.wsx-fsearch { width: clamp(200px, calc(100vw - 1180px), 473px); }
@media (max-width: 1500px) { .wsx-fsearch kbd { display: none; } }
.gl-sort { white-space: nowrap; }
.wsx-um-hd .wsx-um-av { display: grid; font-size: 20px; opacity: 1; overflow: visible; }
.pn .pn-select { width: auto; }
.gx-grid:has(> .pn-empty) { columns: auto; display: flex; }
.pn-note { display: block; } .pn-note svg.i { display: inline-block; vertical-align: -3px; margin-right: 8px; }

/* Aviso: confirma tu correo (mientras no esté confirmado) */
.wsx-verify { position: absolute; left: 50%; top: 96px; z-index: 80; translate: -50% -12px; opacity: 0; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 12px; max-width: min(640px, calc(100vw - 40px));
  border-radius: 18px; font-family: "Outfit", sans-serif; color: #f4f1f1; background: linear-gradient(135deg, rgba(70, 30, 38, .86), rgba(26, 22, 23, .9)); border: 1px solid rgba(255, 138, 155, .35);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 50px rgba(0, 0, 0, .4), 0 0 30px rgba(200, 16, 46, .2); transition: opacity .35s, translate .5s cubic-bezier(.2, .8, .2, 1); }
.wsx-verify.in { opacity: 1; translate: -50% 0; }
.wsx-vf-ic { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #e0233f, #a50d26); box-shadow: 0 6px 16px rgba(200, 16, 46, .45); }
.wsx-verify svg.i { width: 17px; height: 17px; }
.wsx-verify b { display: block; font-weight: 500; font-size: 13.5px; } .wsx-verify div span { display: block; font-size: 12px; opacity: .65; }
.wsx-root .wsx-verify [data-resend] { height: 36px; padding: 0 16px; border-radius: 11px; font-size: 12.5px; font-weight: 500; background: #f4f1f1; color: #1a1617; flex: none; }
.wsx-root .wsx-verify [data-resend]:disabled { opacity: .7; cursor: default; }
.wsx-root .wsx-verify .x { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; opacity: .6; flex: none; } .wsx-root .wsx-verify .x:hover { opacity: 1; background: rgba(255, 255, 255, .1); }

/* =====================================================================
   ESPACIOS COMPLETOS (Invita, Créditos, Galería, Chat, Imagen, Vídeo, Modelos, Biblioteca…)
   Cada uno ocupa toda la pantalla con su propio fondo: solo quedan el logo, la barra lateral y la barra de arriba.
   Temas: "noche" (negro con estelas plata y carmesí) y "seda" (seda blanca con cintas rojas, Biblioteca).
   ===================================================================== */
.wsx-spacebg { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .6s ease; background: #0b0909 url('/img/espacios/noche.jpg') center / cover no-repeat; }
.wsx-spacebg i { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 30% 10%, rgba(255, 255, 255, .05), transparent 60%), linear-gradient(180deg, rgba(8, 6, 7, .45), rgba(8, 6, 7, .2) 30%, rgba(8, 6, 7, .55)); }
.wsx-root[data-space] .wsx-spacebg { opacity: 1; }
.wsx-root[data-space="seda"] .wsx-spacebg { background-image: url('/img/espacios/seda.jpg'); }
.wsx-root[data-space="seda"] .wsx-spacebg i { background: linear-gradient(180deg, rgba(22, 18, 20, .62), rgba(22, 18, 20, .18) 140px, rgba(40, 34, 36, .08) 60%, rgba(22, 18, 20, .35)); }
.wsx-root.viewing .wsx-fdock, .wsx-root.viewing .wsx-tray, .wsx-root.viewing .wsx-exitfocus, .wsx-root.viewing .wsx-verify { opacity: 0; pointer-events: none; }
.wsx-root.viewing .wsx-fclock, .wsx-root.viewing .wsx-area { opacity: 0 !important; pointer-events: none !important; }
.wsx-root .wsx-full { left: 130px; right: 26px; top: 100px; bottom: 22px; border-radius: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; }
.wsx-root .wsx-frail { z-index: 40; }

/* ---------- Componentes comunes (.sx) ---------- */
.sx { height: 100%; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; padding-right: 4px; color: #f5f2f2; font-family: "Outfit", sans-serif; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.sx.full { grid-template-columns: minmax(0, 1fr); }
.sx svg.i { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sx button { font: inherit; color: inherit; cursor: pointer; }
.sx-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding-bottom: 20px; }
.sx-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; padding-bottom: 20px; }
.sx-card { position: relative; border-radius: 24px; padding: 24px; background: linear-gradient(160deg, rgba(40, 36, 38, .62), rgba(16, 14, 15, .62)); border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%); box-shadow: 0 24px 60px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08); }
.sx-card.flat { padding: 0; overflow: hidden; }
.sx-t { margin: 0 0 16px; display: flex; align-items: center; gap: 10px; font: 400 17px "Outfit", sans-serif; letter-spacing: -.005em; }
.sx-t small { margin-left: auto; font-size: 12px; opacity: .55; }
.sx-t a, .sx-t button.lnk { margin-left: auto; font-size: 12px; opacity: .7; background: none; border: 0; color: inherit; text-decoration: none; } .sx-t a:hover, .sx-t button.lnk:hover { opacity: 1; }
.sx-h { margin: 6px 0 0; font: 400 26px/1.15 "Newsreader", Georgia, serif; letter-spacing: -.01em; }
.sx-h small { font: 400 13px "Outfit", sans-serif; opacity: .5; margin-left: 8px; }
.sx-sub { margin: 4px 0 0; font-size: 13px; opacity: .6; }
.sx-eyebrow { display: block; font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 500; opacity: .85; }
.sx-hero { position: relative; overflow: hidden; min-height: 280px; padding: 42px 46px; display: flex; flex-direction: column; justify-content: center; }
.sx-hero h1 { position: relative; z-index: 2; margin: 14px 0 12px; max-width: 640px; font: 400 clamp(36px, 3.6vw, 58px)/1.04 "Newsreader", Georgia, serif; letter-spacing: -.02em; }
.sx-hero h1 em { font-style: italic; color: #ffd0d7; }
.sx-hero > p, .sx-hero .sx-lead { position: relative; z-index: 2; margin: 0; max-width: 520px; font-size: 14.5px; line-height: 1.6; opacity: .78; }
.sx-art { position: absolute; right: 18%; top: 50%; translate: 50% -50%; width: min(380px, 34%); aspect-ratio: 1; object-fit: contain; mix-blend-mode: screen; pointer-events: none; z-index: 1; filter: drop-shadow(0 0 40px rgba(224, 35, 63, .25)); animation: sxFloat 9s ease-in-out infinite; }
@keyframes sxFloat { 50% { translate: 50% calc(-50% - 10px); rotate: 2deg; } }
.sx-quote { position: absolute; right: 40px; top: 50%; translate: 0 -50%; z-index: 2; max-width: 200px; margin: 0; font: italic 300 18px/1.5 "Newsreader", Georgia, serif; opacity: .85; }
.sx-quote::after { content: ""; display: block; width: 30px; height: 2px; margin-top: 14px; background: #e0233f; box-shadow: 0 0 10px #e0233f; }
.sx .sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); color: #fff; font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .2s, transform .2s, box-shadow .2s; }
.sx .sx-btn:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.sx .sx-btn.pri { background: linear-gradient(180deg, #ffffff, #e9e4e5); color: #1a1617; border-color: transparent; box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .5) inset; }
.sx .sx-btn.acc { background: linear-gradient(135deg, #e0233f, #a50d26); border-color: transparent; box-shadow: 0 12px 28px rgba(200, 16, 46, .4); }
.sx .sx-btn.sm { height: 34px; padding: 0 13px; font-size: 12.5px; border-radius: 11px; }
.sx .sx-btn.wide { width: 100%; }
.sx .sx-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.sx .sx-ico { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; transition: background .2s, transform .2s; }
.sx .sx-ico:hover { background: rgba(255, 255, 255, .15); transform: translateY(-2px); }
.sx .sx-ico i.wsx-mask { width: 17px; height: 17px; }
.sx-search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .12); }
.sx-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: #fff; font: 13.5px "Outfit", sans-serif; }
.sx-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.sx-tabs button { height: 38px; padding: 0 18px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); font-size: 13px; transition: background .2s; }
.sx-tabs button:hover { background: rgba(255, 255, 255, .12); }
.sx-tabs button.on { background: #f5f2f2; color: #181415; border-color: transparent; font-weight: 500; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.sx-tabs button small { margin-left: 6px; opacity: .55; font-size: 11px; }
.sx-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sx-bar .sx-search { flex: 1; min-width: 220px; }
.sx-row { display: flex; align-items: center; gap: 12px; }
.sx-mute { margin: 0; font-size: 12.5px; line-height: 1.6; opacity: .6; }
.sx-big { font: 300 44px/1 "Outfit", sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sx-gem { width: 64px; height: 64px; object-fit: contain; mix-blend-mode: screen; flex: none; }
.sx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sx-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; transition: background .15s; }
.sx-list li.btn { cursor: pointer; } .sx-list li.btn:hover { background: rgba(255, 255, 255, .06); }
.sx-list b { display: block; font-weight: 500; font-size: 13.5px; } .sx-list small { display: block; font-size: 11.5px; opacity: .55; }
.sx-li-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.sx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; position: relative; }
.sx-steps::before { content: ""; position: absolute; left: 19px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, .05)); }
.sx-steps li { display: grid; grid-template-columns: auto 1fr; gap: 14px; position: relative; }
.sx-steps i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 500 14px "Outfit", sans-serif; font-style: normal; border: 1px solid rgba(255, 255, 255, .25); background: rgba(20, 17, 18, .9); }
.sx-steps b { display: block; font-weight: 500; font-size: 14px; margin-top: 2px; } .sx-steps span { font-size: 12.5px; opacity: .6; line-height: 1.5; }
.sx-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 20px; font-size: 11px; background: rgba(255, 255, 255, .1); }
.sx-pill.ok { background: rgba(31, 168, 106, .2); color: #6fe3ae; } .sx-pill.acc { background: rgba(224, 35, 63, .85); color: #fff; } .sx-pill.warn { background: rgba(242, 193, 78, .18); color: #f2c14e; }
.sx-pill.ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.sx-empty { padding: 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sx-empty b { font: 400 22px "Newsreader", Georgia, serif; } .sx-empty p { margin: 0 0 10px; font-size: 13px; opacity: .65; max-width: 420px; line-height: 1.6; }
.sx-ring { position: relative; width: 108px; height: 108px; display: grid; place-items: center; flex: none; }
.sx-ring svg { position: absolute; inset: 0; rotate: -90deg; } .sx-ring circle { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 8; }
.sx-ring .f { stroke: url(#sxGrad); stroke: #e0233f; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: calc(289 * (1 - var(--p, 0))); filter: drop-shadow(0 0 6px rgba(224, 35, 63, .6)); transition: stroke-dashoffset 1s; }
.sx-ring b { font: 400 22px "Outfit", sans-serif; }
.sx-meter { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; } .sx-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a50d26, #ff6b81); }
.sx-cta { display: flex; align-items: center; gap: 18px; padding: 18px 22px; }
.sx-cta > div { flex: 1; } .sx-cta b { display: block; font-weight: 500; font-size: 15px; } .sx-cta span { font-size: 12.5px; opacity: .6; }
@media (max-width: 1300px) { .sx { grid-template-columns: minmax(0, 1fr); } .sx-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .sx-quote { display: none; } .sx-art { right: 14%; } }
@media (max-width: 900px) { .wsx-root .wsx-full { left: 12px; right: 12px; top: 76px; bottom: 12px; } .sx-art { opacity: .35; } }

/* Biblioteca (tema seda): paneles de cristal gris translúcido, como la referencia */
.wsx-root[data-space="seda"] .sx-card { background: linear-gradient(160deg, rgba(70, 64, 66, .52), rgba(38, 34, 36, .58)); border-color: rgba(255, 255, 255, .22); box-shadow: 0 24px 60px rgba(40, 30, 34, .25), inset 0 1px 0 rgba(255, 255, 255, .18); }

/* ---------- Espacio Invita y gana ---------- */
.iv2 .sx-hero { min-height: 400px; }
.iv2-link { position: relative; z-index: 2; display: flex; gap: 10px; margin-top: 26px; max-width: 560px; flex-wrap: wrap; }
.iv2-field { flex: 1; min-width: 260px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 6px 0 16px; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .14); }
.iv2-field input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: #fff; font: 13.5px "Outfit", sans-serif; }
.iv2-field button { width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .08); display: grid; place-items: center; }
.iv2-field button:hover, .iv2-field button.ok { background: rgba(255, 255, 255, .18); }
.iv2 .sx-btn.pri { height: 46px; }
.iv2-nets { position: relative; z-index: 2; display: flex; gap: 10px; margin-top: 16px; }
.iv2-nets .sx-ico.ok { background: rgba(31, 168, 106, .35); }
.iv2-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; overflow: hidden; }
.iv2-why > div { padding: 28px 30px; display: flex; flex-direction: column; }
.iv2-why > div + div { border-left: 1px solid rgba(255, 255, 255, .08); }
.iv2-why .sx-gem { width: 70px; height: 70px; margin: -6px 0 10px -8px; }
.iv2-why b { font: 300 46px/1 "Newsreader", Georgia, serif; } .iv2-why span { font-size: 15px; opacity: .85; margin: 4px 0 10px; } .iv2-why p { margin: 0; font-size: 12.5px; line-height: 1.6; opacity: .6; }
.iv2-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.iv2-track > div { padding: 16px 10px; border-radius: 18px; text-align: center; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); opacity: .55; }
.iv2-track > div.on { opacity: 1; } .iv2-track > div.cur { border-color: rgba(224, 35, 63, .7); background: rgba(224, 35, 63, .1); box-shadow: 0 0 26px rgba(224, 35, 63, .2); }
.iv2-track i { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(255, 255, 255, .08); }
.iv2-track > div.on i { background: linear-gradient(135deg, #e0233f, #a50d26); }
.iv2-track b { display: block; margin-top: 8px; font: italic 400 18px "Newsreader", Georgia, serif; } .iv2-track span { display: block; font-size: 11px; opacity: .6; } .iv2-track em { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: #f2c14e; }
.iv2-act { display: flex; align-items: center; gap: 16px; } .iv2-act small { font-size: 12px; opacity: .65; }
.iv2-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12px; }
.iv2-code span { opacity: .6; } .iv2-code b { font-size: 15px; letter-spacing: .14em; font-weight: 500; padding: 4px 10px; border-radius: 9px; background: rgba(255, 255, 255, .08); }
.iv2 .iv-form input { color: #fff; }
@media (max-width: 1100px) { .iv2-why { grid-template-columns: 1fr; } .iv2-why > div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); } .iv2-track { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Espacio Tienda de créditos ---------- */
.cr2-perks { position: relative; z-index: 2; display: flex; gap: 26px; flex-wrap: wrap; margin-top: 26px; }
.cr2-perks > div { display: flex; align-items: center; gap: 12px; }
.cr2-perks svg.i { width: 36px; height: 36px; padding: 9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); }
.cr2-perks b { display: block; font-weight: 500; font-size: 13px; } .cr2-perks small { font-size: 11.5px; opacity: .6; }
.cr2-note { margin: 0; padding: 12px 16px; border-radius: 14px; font-size: 12.5px; background: rgba(242, 193, 78, .1); border: 1px solid rgba(242, 193, 78, .25); color: #f3e2b8; display: flex; gap: 10px; align-items: center; }
.cr2-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.cr2-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.cr2-pack { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 18px 18px; transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s; }
.cr2-pack:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .25); }
.cr2-pack.pop { border-color: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 26px 60px rgba(0, 0, 0, .4), 0 0 50px rgba(224, 35, 63, .18); background: linear-gradient(160deg, rgba(70, 60, 64, .7), rgba(26, 22, 24, .7)); }
.cr2-tag { position: absolute; top: 14px; left: 14px; height: 24px; padding: 0 10px; border-radius: 20px; display: inline-flex; align-items: center; font-size: 11px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); }
.cr2-pack img { width: 104px; height: 104px; object-fit: contain; mix-blend-mode: screen; margin: 8px 0 4px; transition: transform .5s; }
.cr2-pack:hover img { transform: translateY(-4px) scale(1.05); }
.cr2-pack > b { font: 400 34px/1 "Newsreader", Georgia, serif; } .cr2-pack > span { font-size: 13px; opacity: .65; margin: 4px 0 14px; }
.cr2-price { font: 400 20px "Outfit", sans-serif; } .cr2-pack small { display: block; font-size: 12px; opacity: .6; margin: 4px 0 16px; min-height: 1.4em; }
.cr2-q { display: flex; flex-direction: column; gap: 10px; } .cr2-q span { font-size: 22px; color: #ff8a9b; } .cr2-q p { margin: 0; font: italic 300 16px/1.6 "Newsreader", Georgia, serif; opacity: .85; }
.pn.pn-inline { height: auto; overflow: visible; padding: 0; gap: 0; }
.pn.pn-inline:empty { display: none; }
.cr2 .pn-table { margin: 0; }
/* El arte ya es PNG transparente (sin fondo negro) */
.sx .sx-art, .sx .sx-gem, .cr2-pack img { mix-blend-mode: normal; }
.sx .sx-art { right: 24%; width: min(360px, 32%); }
.sx-quote { right: 34px; max-width: 170px; font-size: 16px; }
@media (max-width: 1800px) { .sx-quote { display: none; } .sx .sx-art { right: 16%; } }
.iv2-link .sx-btn { flex: none; }

/* ---------- Espacio Chat (también base de Imagen y Vídeo) ---------- */
.sc { display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.sc-hero { flex: none; min-height: 210px; padding: 30px 34px; display: flex; align-items: center; gap: 28px; overflow: hidden; }
.sc-hbg { position: absolute; right: 0; top: 0; width: 58%; height: 100%; object-fit: cover; opacity: .85; -webkit-mask: linear-gradient(90deg, transparent, #000 45%); mask: linear-gradient(90deg, transparent, #000 45%); pointer-events: none; }
.sc-hl, .sc-ht { position: relative; z-index: 1; }
.mk.xl { width: 118px; height: 118px; border-radius: 30px; box-shadow: 0 24px 50px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .15), inset 0 1px 0 rgba(255, 255, 255, .4); }
.mk.xl i { width: 56%; height: 56%; }
.mk.lg { width: 70px; height: 70px; border-radius: 20px; }
.sc-hn { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sc-hn h1 { margin: 0; font: 400 clamp(32px, 3vw, 48px)/1.05 "Newsreader", Georgia, serif; letter-spacing: -.015em; text-shadow: 0 4px 20px rgba(0, 0, 0, .4); }
.sc-hm { display: flex; align-items: center; gap: 12px; margin: 10px 0 12px; font-size: 14px; opacity: .8; } .sc-hm i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; }
.sc-ht p { margin: 0; max-width: 620px; font-size: 13.5px; line-height: 1.65; opacity: .75; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.sc-chips span { height: 30px; padding: 0 13px; border-radius: 20px; display: inline-flex; align-items: center; font-size: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(10, 8, 9, .4); backdrop-filter: blur(8px); }
.sx .sc-change { height: 30px; padding: 0 13px; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .92); color: #161314; font-weight: 500; }
.sc-change svg.i { width: 13px; height: 13px; }
.sc-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 270px minmax(0, 1fr) 320px; gap: 18px; }
.sc-nav { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 18px; }
.sc-nav .pc-convs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 0 -6px; padding: 0 6px; }
.sc .pc-conv { display: grid; grid-template-columns: 1fr auto; padding: 10px 12px; border-radius: 13px; cursor: pointer; transition: background .15s; }
.sc .pc-conv:hover { background: rgba(255, 255, 255, .06); } .sc .pc-conv.on { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.sc .pc-conv b { font-weight: 400; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc .pc-conv span { grid-column: 1; font-size: 11px; opacity: .45; }
.sc .pc-conv button { grid-row: 1 / 3; grid-column: 2; opacity: 0; background: none; border: 0; } .sc .pc-conv:hover button { opacity: .6; }
.sc-chat { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.sc-ch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sc-ch b { display: block; font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 460px; } .sc-ch small { font-size: 11.5px; opacity: .5; }
.sc .pc-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; }
.sc .pc-msg { max-width: 78%; } .sc .pc-msg.me { align-self: flex-end; } .sc .pc-msg.ai { align-self: flex-start; }
.sc .pc-msg.me > div { padding: 12px 16px; border-radius: 18px 18px 6px 18px; background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08)); border: 1px solid rgba(255, 255, 255, .14); font-size: 14px; line-height: 1.55; }
.sc .pc-msg.ai .pc-md { padding: 14px 18px; border-radius: 18px 18px 18px 6px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .08); font-size: 14px; line-height: 1.65; }
.sc .pc-msg img { max-width: 220px; border-radius: 12px; display: block; margin-bottom: 6px; }
.sc-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 520px; }
.sc-empty b { font: 400 30px "Newsreader", Georgia, serif; } .sc-empty p { margin: 0; font-size: 13.5px; opacity: .65; }
.sc-sug { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; width: 100%; }
.sx .sc-sug button { padding: 12px 14px; border-radius: 14px; text-align: left; font-size: 12.5px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); transition: background .2s; }
.sx .sc-sug button:hover { background: rgba(255, 255, 255, .12); }
.sc-compose { margin: 0 18px 18px; padding: 12px 12px 10px 16px; border-radius: 18px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .12); transition: border-color .2s, box-shadow .2s; }
.sc-compose:focus-within { border-color: rgba(255, 255, 255, .28); box-shadow: 0 0 0 4px rgba(255, 255, 255, .04); }
.sc-compose textarea { width: 100%; min-height: 46px; max-height: 220px; resize: none; border: 0; outline: none; background: none; color: #fff; font: 14px/1.55 "Outfit", sans-serif; }
.sc-crow { display: flex; align-items: center; gap: 6px; }
.sx .sc-ib { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; border: 0; background: none; opacity: .7; transition: background .15s, opacity .15s; }
.sx .sc-ib:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.sc-crow .pc-cost { margin-left: auto; font-size: 11.5px; opacity: .45; }
.sx .sc-send { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #161314; background: #f5f2f2; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); transition: transform .2s; }
.sx .sc-send:hover { transform: scale(1.06); } .sx .sc-send.stop { background: linear-gradient(135deg, #e0233f, #a50d26); color: #fff; }
.sc-right { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; }
.sc-mi { display: flex; align-items: center; gap: 12px; } .sc-mi .mk { width: 52px; height: 52px; border-radius: 15px; } .sc-mi b { display: block; font-weight: 500; font-size: 15px; } .sc-mi small { font-size: 12px; opacity: .55; }
.sc-dl { margin: 0 0 16px; display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; font-size: 12.5px; } .sc-dl dt { opacity: .55; } .sc-dl dd { margin: 0; text-align: right; }
.sc-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); cursor: pointer; }
.sc-set[hidden] { display: none; }
.sc-set b { display: block; font-weight: 400; font-size: 13.5px; } .sc-set small { font-size: 11.5px; opacity: .5; }
.sc-set select { height: 34px; padding: 0 10px; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font: 12.5px "Outfit", sans-serif; } .sc-set option { background: #1c1919; }
.sx-sw { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: 20px; background: rgba(255, 255, 255, .15); position: relative; cursor: pointer; transition: background .25s; flex: none; margin: 0; }
.sx-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .25s; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.sx-sw:checked { background: linear-gradient(135deg, #e0233f, #a50d26); } .sx-sw:checked::after { transform: translateX(18px); }
.sc-picker { position: absolute; z-index: 6; inset: 64px 14px 14px; width: auto; max-height: none; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: rgba(20, 17, 18, .97); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.sc-picker[hidden] { display: none; }
.sc-pk-hd { display: flex; align-items: center; justify-content: space-between; } .sc-pk-hd b { font: 400 20px "Newsreader", Georgia, serif; }
.sc-picker .pc-mlist { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; align-content: start; }
.sx .sc-model { display: grid !important; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03); }
.sx .sc-model:hover { background: rgba(255, 255, 255, .08); } .sx .sc-model.on { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .1); }
.sx .sc-model .mk { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 11px; } .sx .sc-model b { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx .sc-model span { grid-column: 2; display: flex; gap: 4px; flex-wrap: wrap; } .sx .sc-model span i { font-style: normal; font-size: 10px; opacity: .55; }
.sx .sc-model em { grid-row: 1 / 3; grid-column: 3; font-style: normal; font-size: 11px; opacity: .55; }
@media (max-width: 1400px) { .sc-body { grid-template-columns: 230px minmax(0, 1fr); } .sc-right { display: none; } }
.sx.sc { align-items: stretch; }
.sc-empty b { font: inherit; } .sc-empty > b { font: 400 30px "Newsreader", Georgia, serif; }
/* ---------- Espacios Imagen y Vídeo ---------- */
.si-body { grid-template-columns: 290px minmax(0, 1fr) 270px; }
.si .pi-models, .si .pi-recent { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 16px; background: linear-gradient(160deg, rgba(40, 36, 38, .62), rgba(16, 14, 15, .62)); border-radius: 24px; border: 1px solid rgba(255, 255, 255, .1); }
.si .pi-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin: 0 -4px; padding: 0 4px; }
.si .pi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.si .pi-chips button { height: 28px; padding: 0 10px; border-radius: 9px; font-size: 11.5px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); }
.si .pi-chips button.on { background: #f5f2f2; color: #181415; } .si .pi-chips small { margin-left: 4px; opacity: .55; }
.si .pi-main { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; position: relative; }
.si .pi-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 18px; overflow: auto; background: none; border: 0; }
.si .pi-img, .si .pi-stage video { max-width: 100%; max-height: 100%; border-radius: 16px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.si .pi-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 10px; align-items: center; }
.si .pi-compose { margin: 0 16px 16px; padding: 12px 14px; border-radius: 18px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .12); }
.si .pi-prompt { width: 100%; resize: none; border: 0; outline: none; background: none; color: #fff; font: 14px/1.55 "Outfit", sans-serif; }
.si .pi-recent .pi-grid, .si .pv-recent { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-content: start; }
.si .pi-grid figure, .si .pv-recent > * { margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 1; cursor: pointer; }
.si .pi-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.si .pi-empty-stage b { font: 400 26px "Newsreader", Georgia, serif; }
@media (max-width: 1400px) { .si-body { grid-template-columns: 250px minmax(0, 1fr); } .si .pi-recent { display: none; } }
.sx .sc-model > .mk { grid-column: 1; grid-row: 1 / 3; }
.sx .sc-model > b { grid-column: 2; grid-row: 1; }
.sx .sc-model > span { grid-column: 2; grid-row: 2; min-height: 0; }
.sx .sc-model > em { grid-column: 3; grid-row: 1 / 3; max-width: 70px; text-align: right; }
.sx .sc-model span i { font-style: normal; font-size: 10px; opacity: .55; padding: 0; background: none; }
.si .pi-sel { display: flex; flex-direction: column; gap: 4px; }
.si .pi-sel span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
.si .pi-sel select, .si .pi-sel input { height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .35); color: #fff; font: 12.5px "Outfit", sans-serif; outline: none; }
.si .pi-sel option { background: #1c1919; color: #fff; }
.si .pi-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.si .pi-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07); color: #fff; font-size: 12.5px; }
.si .pi-go { height: 40px; padding: 0 18px; border-radius: 12px; border: 0; color: #161314; background: #f5f2f2; font-weight: 500; font-size: 13px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.si .pi-go:disabled { opacity: .5; }

/* ---------- Espacio Biblioteca (tema seda) ---------- */
.gl2-hero { position: relative; overflow: hidden; min-height: 230px; display: flex; align-items: center; padding: 36px 44px;
  background: radial-gradient(500px 260px at 62% 50%, rgba(255, 255, 255, .5), transparent 70%), linear-gradient(120deg, rgba(255, 255, 255, .55), rgba(235, 230, 231, .25)) !important; border-color: rgba(255, 255, 255, .7) !important; color: #1f1a1c; }
.gl2-hero h1 { margin: 0; position: relative; z-index: 2; font: 400 clamp(38px, 3.8vw, 60px)/1.02 "Newsreader", Georgia, serif; letter-spacing: -.02em; }
.gl2-hero p { margin: 18px 0 0; position: relative; z-index: 2; font-size: 11.5px; letter-spacing: .32em; text-transform: uppercase; opacity: .75; }
.gl2-hero img { position: absolute; left: 50%; top: 50%; height: 150%; translate: -35% -50%; filter: invert(1) drop-shadow(0 20px 30px rgba(0, 0, 0, .15)); opacity: .95; }
.gl2-hero .sx-quote { color: #2a2325; opacity: .8; }
.gl2-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
.gl2-sp { flex: 1; }
.gl2-q { width: 240px; flex: none; }
.gl2-views { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: rgba(30, 26, 28, .45); border: 1px solid rgba(255, 255, 255, .15); }
.sx .gl2-views button { width: 34px; height: 30px; border-radius: 9px; border: 0; background: none; display: grid; place-items: center; }
.sx .gl2-views button.on { background: rgba(224, 35, 63, .85); }
.gl2-sort { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 13px; background: rgba(30, 26, 28, .45); border: 1px solid rgba(255, 255, 255, .15); font-size: 12.5px; white-space: nowrap; }
.gl2-sort select { border: 0; background: none; color: #fff; font: 500 12.5px "Outfit", sans-serif; outline: none; } .gl2-sort option { background: #2a2526; }
.wsx-root[data-space="seda"] .sx-tabs button { background: rgba(30, 26, 28, .42); border-color: rgba(255, 255, 255, .2); }
.wsx-root[data-space="seda"] .sx-tabs button.on { background: #fff; color: #1a1617; }
.wsx-root[data-space="seda"] .sx-search { background: rgba(30, 26, 28, .45); border-color: rgba(255, 255, 255, .2); }
.gl2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-flow: dense; gap: 14px; }
.gl2-card { position: relative; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; cursor: pointer; isolation: isolate; background: #2a2526; box-shadow: 0 16px 34px rgba(30, 20, 24, .35); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.gl2-card.big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(224, 35, 63, .35), 0 30px 60px rgba(30, 20, 24, .45), 0 0 40px rgba(224, 35, 63, .25); }
.gl2-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px rgba(30, 20, 24, .5), 0 0 0 1px rgba(255, 255, 255, .6); }
.gl2-card > img, .gl2-card > .gl-fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: scale .8s cubic-bezier(.2, .8, .2, 1); }
.gl2-card:hover > img { scale: 1.06; }
.gl2-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 50%, rgba(10, 8, 9, .88)); }
.gl2-tag { position: absolute; top: 10px; right: 10px; height: 24px; padding: 0 10px; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; background: rgba(12, 10, 11, .5); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(10px); }
.gl2-tag.l { right: auto; left: 10px; } .gl2-tag.l i { width: 7px; height: 7px; border-radius: 50%; background: #3fd17f; box-shadow: 0 0 6px #3fd17f; }
.sx .gl2-fav { position: absolute; top: 42px; right: 10px; width: 28px; height: 28px; border-radius: 9px; border: 0; display: grid; place-items: center; background: rgba(12, 10, 11, .5); opacity: 0; transition: opacity .2s; }
.gl2-card:hover .gl2-fav, .sx .gl2-fav.on { opacity: 1; } .sx .gl2-fav.on { color: #f2c14e; } .gl2-fav svg.i { width: 13px; height: 13px; }
.gl2-ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; display: flex; align-items: center; gap: 10px; }
.gl2-ov b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.25; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); } .gl2-ov small { font-size: 11px; opacity: .65; }
.sx .gl2-play { width: 38px; height: 38px; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, .95); color: #161314; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); transition: transform .2s; }
.sx .gl2-play:hover { transform: scale(1.1); } .gl2-play svg.i { fill: currentColor; width: 14px; height: 14px; margin-left: 2px; }
.gl2-card:not(.big) .gl2-play { display: none; } .gl2-card:not(.big):hover .gl2-play { display: grid; }
.gl2-card.big .gl2-ov { padding: 22px; } .gl2-card.big .gl2-ov b { font: 400 32px/1.1 "Newsreader", Georgia, serif; } .sx .gl2-card.big .gl2-play { width: 52px; height: 52px; }
.gl2-rh { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 12px; }
.gl2-recent { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.gl2-recent::-webkit-scrollbar { display: none; }
.gl2-rc { position: relative; aspect-ratio: 460 / 215; border-radius: 16px; overflow: hidden; cursor: pointer; isolation: isolate; scroll-snap-align: start; box-shadow: 0 14px 30px rgba(30, 20, 24, .35); background: #2a2526; }
.gl2-rc > img, .gl2-rc > .gl-fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.gl2-rc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 8, 9, .85), transparent 75%); }
.gl2-rc > div { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; }
.sx .gl2-play.sm { width: 32px; height: 32px; } .gl2-rc b { display: block; font-size: 13px; font-weight: 500; } .gl2-rc small { font-size: 11px; opacity: .65; }
.gl2-rows { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.gl2-row { display: grid; grid-template-columns: 120px 1fr auto auto; gap: 14px; align-items: center; padding: 8px; border-radius: 14px; cursor: pointer; }
.gl2-row:hover { background: rgba(255, 255, 255, .08); }
.gl2-th { position: relative; aspect-ratio: 460 / 215; border-radius: 10px; overflow: hidden; background: #2a2526; } .gl2-th > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gl2-th .gl-fb b { font-size: 12px; }
.gl2-row b { display: block; font-weight: 500; } .gl2-row small { font-size: 11.5px; opacity: .6; } .gl2-size { font-size: 12px; opacity: .65; }
.gl2-on::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #3fd17f; box-shadow: 0 0 6px #3fd17f; vertical-align: 1px; }
.gl2-av { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 400 17px "Newsreader", Georgia, serif; background: radial-gradient(circle at 30% 25%, #ff8a9b, #c8102e 55%, #5e0716); }
.gl2-av i { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #8a8385; border: 2px solid #2b2628; } .gl2-av i.on { background: #3fd17f; }
.gl2-now { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.gl2-nc { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #2a2526; } .gl2-nc > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gl2-nc .gl-fb b { font-size: 11px; }
.gl2-now b { display: block; font-weight: 500; font-size: 14px; } .gl2-now small { display: block; font-size: 11.5px; opacity: .6; margin-bottom: 10px; }
.gl2-medal { width: 42px; height: 42px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .06)); }
.gl2-medal.ok { background: linear-gradient(160deg, #f6d27a, #b88a2c); color: #2a1e08; }
.gl2-logros em { font-style: normal; font-size: 11px; opacity: .6; } .gl2-logros .sx-meter { margin-top: 6px; height: 4px; }
.gl2-disk { font-size: 13px; opacity: .8; } .gl2-disk b { font: 400 18px "Outfit", sans-serif; opacity: 1; }
.gl2 .gl-web { min-height: 420px; }
.gl2-hero img { filter: drop-shadow(0 20px 30px rgba(60, 20, 30, .2)); }
.wsx-root[data-space="seda"] .sx-search input::placeholder { color: rgba(255, 255, 255, .75); }
.ml .gl-bar, .gl .gl-bar { position: static; background: none; padding: 4px 0 14px; }
.ml-main { padding: 0 6px 30px 0 !important; overflow-y: auto; }
.ml .ml-hero { margin-top: 0; }
.wsx-full > .pn { padding: 6px 8px 30px 4px; }

/* =====================================================================
   HOJAS (Agregar al espacio, Apariencia, Configurar, Buscar…): rediseño de lujo
   ===================================================================== */
.wsx-sheet-bg { background: radial-gradient(1000px 600px at 50% 30%, rgba(40, 20, 26, .35), rgba(8, 6, 7, .72)); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); animation: shIn .25s ease; }
@keyframes shIn { from { opacity: 0; } }
.wsx-sheet { border-radius: 28px !important; background: linear-gradient(160deg, rgba(48, 43, 45, .92), rgba(18, 15, 16, .96)) !important; border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: 0 50px 120px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1) !important; animation: shUp .4s cubic-bezier(.2, .8, .2, 1); color: #f5f2f2; font-family: "Outfit", sans-serif; }
@keyframes shUp { from { transform: translateY(14px) scale(.98); opacity: 0; } }
.wsx-sheet.wide { max-width: 880px; }
.wsx-sheet-hd { padding: 26px 26px 10px 32px; }
.wsx-sheet-hd b { font: 400 30px/1.1 "Newsreader", Georgia, serif; letter-spacing: -.01em; }
.wsx-sheet-hd button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14) !important; background: rgba(255, 255, 255, .05) !important; }
.wsx-sheet-bd { padding: 8px 32px 30px; gap: 14px; }
.wsx-sheet h6 { margin: 14px 0 2px; font-size: 11px; letter-spacing: .24em; opacity: .5; }
.wsx-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.wsx-cards button { position: relative; padding: 18px; gap: 6px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)) !important; border: 1px solid rgba(255, 255, 255, .1) !important; overflow: hidden; }
.wsx-cards button::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(224, 35, 63, .22), transparent 70%); opacity: 0; transition: opacity .3s; }
.wsx-cards button:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .3) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }
.wsx-cards button:hover::after { opacity: 1; }
.wsx-cards svg.i { width: 22px; height: 22px; padding: 11px; box-sizing: content-box; border-radius: 14px; margin-bottom: 8px; color: #fff; background: linear-gradient(150deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .14); }
.wsx-cards b { font-size: 14.5px; } .wsx-cards span { font-size: 12px; opacity: .55; }
.wsx-cards button.on { border-color: rgba(255, 255, 255, .35) !important; } .wsx-cards button.on::before { content: "En tu espacio"; position: absolute; top: 14px; right: 14px; font-size: 10px; padding: 3px 8px; border-radius: 20px; background: rgba(31, 168, 106, .2); color: #6fe3ae; }
.wsx-hint { opacity: .45; font-size: 12px; }
.sx .sc-model .mk i { display: block; width: 56%; height: 56%; padding: 0; margin: 0; border-radius: 0; opacity: 1; background: var(--ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

/* =====================================================================
   ENCABEZADO DEL MODELO COMPACTO (Chat, Imagen, Vídeo): una franja fina; el espacio es para crear
   ===================================================================== */
.sc-hero { min-height: 0; height: 84px; padding: 0 20px 0 14px; gap: 16px; border-radius: 22px; }
.sc-hero .mk.xl { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 12px 26px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .15); }
.sc-hbg { width: 44%; opacity: .7; }
.sc-ht { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 22px; align-items: center; }
.sc-hn { grid-column: 1; grid-row: 1; min-width: 0; }
.sc-hn h1 { font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.sc-hm { grid-column: 1; grid-row: 2; margin: 3px 0 0; font-size: 12.5px; white-space: nowrap; }
.sc-ht p { display: none; }
.sc-chips { grid-column: 2; grid-row: 1 / 3; margin: 0; justify-content: flex-end; flex-wrap: nowrap; overflow: hidden; gap: 6px; }
.sc-chips span { height: 28px; padding: 0 11px; font-size: 11.5px; flex: none; }
.sx .sc-change { height: 32px; padding: 0 14px; flex: none; }
@media (max-width: 1500px) { .sc-chips span { display: none; } }
/* Las columnas de abajo ganan el alto: lista de modelos, lienzo y recientes más cómodos */
.sc { gap: 14px; }
.si .pi-list { gap: 4px; }
.sx .sc-model { padding: 9px 10px; }
.si .pi-recent .pi-grid, .si .pv-recent { gap: 10px; }
.wsx-root .wsx-logo { cursor: pointer; padding: 0; background: none; border: 0; }
.wsx-root .wsx-logo:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 6px; border-radius: 8px; }

/* =====================================================================
   BIBLIOTECA (Steam + Epic con el diseño de Lenore)
   ===================================================================== */
.gl3-hero { position: relative; overflow: hidden; min-height: 132px; display: flex; align-items: center; padding: 22px 34px; color: #1f1a1c;
  background: radial-gradient(500px 220px at 70% 50%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(120deg, rgba(255, 255, 255, .62), rgba(235, 230, 231, .28)) !important; border-color: rgba(255, 255, 255, .7) !important; }
.gl3-ht { position: relative; z-index: 2; }
.gl3-hero h1 { margin: 0; font: 400 clamp(34px, 3vw, 48px)/1.02 "Newsreader", Georgia, serif; letter-spacing: -.02em; }
.gl3-hero p { margin: 10px 0 0; font-size: 13.5px; opacity: .75; } .gl3-hero p b { font-weight: 600; }
.gl3-hero img { position: absolute; right: 6%; top: 50%; height: 190%; translate: 0 -50%; opacity: .95; filter: drop-shadow(0 18px 26px rgba(60, 20, 30, .18)); pointer-events: none; }
.gl3-nav { display: flex; gap: 6px; padding: 6px; border-radius: 18px; background: rgba(22, 18, 20, .55); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); align-self: flex-start; }
.sx .gl3-nav button { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px; border-radius: 13px; border: 0; background: none; font-size: 14px; color: rgba(255, 255, 255, .78); transition: background .2s, color .2s; }
.sx .gl3-nav button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sx .gl3-nav button.on { background: #fff; color: #1a1617; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.gl3-nav em { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font: 600 10.5px/18px "Outfit", sans-serif; font-style: normal; text-align: center; color: #fff; background: #e0233f; box-shadow: 0 0 10px rgba(224, 35, 63, .6); }
.gl3-nav em[hidden] { display: none; }
.gl3-rh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 -6px; flex-wrap: wrap; }
.gl3-rh .sx-h { margin: 0; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); color: #fff; }
.gl3-rh-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.gl3-store { display: inline-block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.gl3-none { padding: 30px 6px; }
.gl3-note { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 12px; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.gl3-note svg.i { width: 15px; height: 15px; flex: none; }
.gl3-chips button small { margin-left: 7px; font-size: 11px; opacity: .55; }
.wsx-root[data-space="seda"] .gl3-chips button.on small { opacity: .5; }
/* Seguir jugando */
.gl3-cont { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gl3-cc { position: relative; aspect-ratio: 16 / 7; border-radius: 20px; overflow: hidden; cursor: pointer; isolation: isolate; background: #2a2526; box-shadow: 0 18px 40px rgba(30, 20, 24, .4); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.gl3-cc:hover { transform: translateY(-4px); }
.gl3-cc > img, .gl3-cc > .gl-fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: scale .8s cubic-bezier(.2, .8, .2, 1); }
.gl3-cc:hover > img { scale: 1.05; }
.gl3-cc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 8, 9, .88), rgba(10, 8, 9, .25) 70%, transparent); }
.gl3-cc-tx { position: absolute; left: 18px; right: 70px; bottom: 16px; }
.gl3-cc-tx b { display: block; margin-top: 4px; font: 400 22px/1.1 "Newsreader", Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl3-cc-tx small { font-size: 11.5px; opacity: .7; }
.sx .gl3-cc .gl2-play { position: absolute; right: 16px; bottom: 16px; width: 46px; height: 46px; }
/* Juegos no instalados */
.gl2-card.off > img { filter: grayscale(.75) brightness(.7); }
.gl2-card.off:hover > img { filter: grayscale(.2) brightness(.85); }
.gl2-card.off .gl2-tag { background: rgba(255, 255, 255, .14); }
.gl2-card.off .gl2-play { background: rgba(255, 255, 255, .9); }
.gl2-row.off .gl2-th img { filter: grayscale(.7) brightness(.75); }
/* Ficha de un juego y lector de noticias */
.gl3 { position: relative; }
.gl3-ficha { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 40px; background: rgba(10, 8, 9, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s; }
.gl3-ficha.in { opacity: 1; }
.gl3-f-card { position: relative; width: min(880px, 100%); max-height: calc(100vh - 80px); overflow-y: auto; border-radius: 28px; color: #f5f2f2; font-family: "Outfit", sans-serif;
  background: linear-gradient(160deg, rgba(44, 39, 41, .97), rgba(16, 13, 14, .98)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 50px 120px rgba(0, 0, 0, .6); translate: 0 14px; transition: translate .35s cubic-bezier(.2, .8, .2, 1); }
.gl3-ficha.in .gl3-f-card { translate: 0 0; }
.gl3-f-hero { position: relative; height: 260px; overflow: hidden; border-radius: 28px 28px 0 0; isolation: isolate; }
.gl3-f-hero > img, .gl3-f-hero > .gl-fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.gl3-f-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(22, 19, 20, .98)); }
.sx .gl3-f-x, .gl3-f-x { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); background: rgba(10, 8, 9, .55); color: #fff; cursor: pointer; }
.gl3-f-bd { display: grid; grid-template-columns: 150px 1fr; gap: 26px; padding: 0 32px 28px; margin-top: -90px; position: relative; }
.gl3-f-cv { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .2); background: #2a2526; isolation: isolate; }
.gl3-f-cv > img, .gl3-f-cv > .gl-fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gl3-f-tx { padding-top: 70px; min-width: 0; }
.gl3-f-tx h2 { margin: 6px 0 16px; font: 400 36px/1.08 "Newsreader", Georgia, serif; letter-spacing: -.01em; }
.gl3-f-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.gl3-f-stats div { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.gl3-f-stats b { display: block; font-weight: 500; font-size: 15px; } .gl3-f-stats small { font-size: 11px; opacity: .55; }
.gl3-f-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.gl3-f-news { padding: 0 32px 30px; }
.gl3-f-nl { display: flex; flex-direction: column; gap: 6px; }
.gl3-f-nl button { text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); color: inherit; font: inherit; cursor: pointer; transition: background .2s; }
.gl3-f-nl button:hover { background: rgba(255, 255, 255, .1); } .gl3-f-nl b { display: block; font-weight: 500; font-size: 13.5px; } .gl3-f-nl small { font-size: 11.5px; opacity: .55; }
.gl3-read .gl3-f-hero { height: 220px; }
.gl3-r-bd { padding: 6px 34px 32px; } .gl3-r-bd h2 { margin: 8px 0 14px; font: 400 30px/1.15 "Newsreader", Georgia, serif; } .gl3-r-bd p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.75; opacity: .82; }
/* Tienda */
.gl3-feat { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; }
.gl3-feat-main { position: relative; aspect-ratio: 616 / 300; border-radius: 22px; overflow: hidden; cursor: pointer; isolation: isolate; background: #2a2526; box-shadow: 0 24px 50px rgba(30, 20, 24, .45); animation: glFade .6s ease; }
@keyframes glFade { from { opacity: .3; } }
.gl3-feat-main > img, .gl3-feat-main > .gl-fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: scale 1s cubic-bezier(.2, .8, .2, 1); }
.gl3-feat-main:hover > img { scale: 1.04; }
.gl3-feat-main::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(10, 8, 9, .9)); }
.gl3-feat-tx { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.gl3-feat-tx b { font: 400 32px/1.08 "Newsreader", Georgia, serif; }
.gl3-pr { display: flex; align-items: center; gap: 10px; font-size: 14px; } .gl3-pr i { font-style: normal; font-weight: 600; padding: 3px 9px; border-radius: 8px; background: #e0233f; }
.gl3-pr s, .gl3-cap-tx s { opacity: .55; font-size: .88em; } .gl3-pr em, .gl3-cap-tx em { font-style: normal; font-weight: 600; }
.gl3-feat-side { display: flex; flex-direction: column; gap: 8px; }
.sx .gl3-feat-side button { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-end; padding: 10px 12px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); background: #2a2526; isolation: isolate; text-align: left; transition: transform .2s, border-color .2s; }
.gl3-feat-side button > img, .gl3-feat-side button > .gl-fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .75; }
.gl3-feat-side button::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 8, 9, .85), rgba(10, 8, 9, .2)); }
.gl3-feat-side button span { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx .gl3-feat-side button.on { border-color: #fff; box-shadow: 0 0 0 1px rgba(224, 35, 63, .5), 0 0 22px rgba(224, 35, 63, .35); }
.sx .gl3-feat-side button:hover { transform: translateX(-3px); }
.gl3-cap { position: relative; aspect-ratio: 616 / 353; border-radius: 16px; overflow: hidden; cursor: pointer; isolation: isolate; background: #2a2526; box-shadow: 0 14px 30px rgba(30, 20, 24, .35); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.gl3-cap:hover { transform: translateY(-4px); }
.gl3-cap > img, .gl3-cap > .gl-fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.gl3-cap::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(10, 8, 9, .9)); }
.gl3-off { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 9px; font-size: 12px; font-weight: 700; background: #e0233f; box-shadow: 0 6px 16px rgba(224, 35, 63, .5); }
.gl3-cap-tx { position: absolute; left: 14px; right: 14px; bottom: 11px; display: flex; flex-direction: column; gap: 3px; }
.gl3-cap-tx b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.gl3-cap-tx span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.gl3-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gl3-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.gl3-row::-webkit-scrollbar { display: none; } .gl3-row > * { scroll-snap-align: start; }
.gl3-free { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.gl3-fr { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; cursor: pointer; isolation: isolate; background: #2a2526; box-shadow: 0 18px 40px rgba(30, 20, 24, .45); transition: transform .3s; border: 1px solid rgba(255, 255, 255, .3); }
.gl3-fr:hover { transform: translateY(-4px); }
.gl3-fr > img, .gl3-fr > .gl-fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.gl3-fr::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(10, 8, 9, .9)); }
.gl3-fr.soon > img { filter: grayscale(.5) brightness(.75); }
.gl3-free-tag { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 500; color: #1a1617; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.gl3-fr:not(.soon) .gl3-free-tag { color: #fff; background: linear-gradient(135deg, #e0233f, #a50d26); }
/* Descargas */
.gl3-dls { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.gl3-dl { display: grid; grid-template-columns: 140px 1fr auto; gap: 16px; align-items: center; padding: 10px; border-radius: 16px; cursor: pointer; }
.gl3-dl:hover { background: rgba(255, 255, 255, .06); }
.gl3-dl-tx b { display: block; font-weight: 500; } .gl3-dl-tx small { display: block; font-size: 11.5px; opacity: .6; margin-bottom: 8px; }
.gl3-dl em { font-style: normal; font: 500 18px "Outfit", sans-serif; }
.gl3-calm { display: flex; align-items: center; gap: 20px; padding: 26px 28px; }
.gl3-calm b { display: block; font: 400 22px "Newsreader", Georgia, serif; } .gl3-calm p { margin: 4px 0 0; font-size: 13px; opacity: .65; line-height: 1.6; max-width: 560px; }
/* Novedades */
.gl3-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gl3-nw { border-radius: 20px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; background: linear-gradient(160deg, rgba(40, 36, 38, .72), rgba(16, 14, 15, .72)); border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 40px rgba(0, 0, 0, .3); transition: transform .3s, border-color .3s; }
.gl3-nw:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .25); }
.gl3-nw.big { grid-column: span 2; grid-row: span 2; }
.gl3-nw-im { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: #2a2526; isolation: isolate; flex: none; }
.gl3-nw.big .gl3-nw-im { aspect-ratio: 16 / 7.5; }
.gl3-nw-im > img, .gl3-nw-im > .gl-fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gl3-nw-tx { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.gl3-nw-tx b { font: 400 19px/1.25 "Newsreader", Georgia, serif; } .gl3-nw.big .gl3-nw-tx b { font-size: 28px; }
.gl3-nw-tx p { margin: 0; font-size: 12.5px; line-height: 1.6; opacity: .65; }
/* Amigos */
.gl3-friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.gl3-fc { display: flex; align-items: center; gap: 14px; padding: 16px; }
.gl3-fc b { display: block; font-weight: 500; font-size: 14px; } .gl3-fc small { display: block; font-size: 12px; opacity: .6; }
.gl3-fc small.play, .sx-list small.play { color: #6ee7a8; opacity: 1; }
.gl3-av { position: relative; width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #ff8a9b, #c8102e 55%, #5e0716); }
.gl3-av img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.gl3-av b { font: 400 19px "Newsreader", Georgia, serif; }
.gl3-av i { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: #8a8385; border: 2px solid #252022; }
.gl3-av.on i { background: #3fd17f; box-shadow: 0 0 8px #3fd17f; }
.sx-list .gl3-av { width: 38px; height: 38px; border-radius: 12px; }
@media (max-width: 1500px) { .gl3-grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gl3-news { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gl3-feat { grid-template-columns: 1fr; } .gl3-feat-side { flex-direction: row; } .sx .gl3-feat-side button { min-height: 64px; } }
@media (max-width: 1200px) { .gl3-cont { grid-template-columns: 1fr 1fr; } .gl3-cont > :nth-child(3) { display: none; } .gl3-f-stats { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   BUSCADOR DE LENORE
   ===================================================================== */
.sb { display: flex !important; flex-direction: column; gap: 0; align-items: stretch; }
.sb-top { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 9vh 0 30px; transition: padding .5s cubic-bezier(.2, .8, .2, 1); }
.sb-top.has { padding: 4px 0 18px; }
.sb-logo { height: 64px; filter: drop-shadow(0 10px 30px rgba(224, 35, 63, .25)); transition: height .5s cubic-bezier(.2, .8, .2, 1), opacity .4s; }
.sb-top.has .sb-logo { height: 0; opacity: 0; }
.sb-tag { margin: -4px 0 8px; font: italic 300 18px "Newsreader", Georgia, serif; opacity: .7; transition: opacity .3s; }
.sb-top.has .sb-tag { display: none; }
.sb-bar { position: relative; width: min(780px, 100%); display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 10px 0 22px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(48, 43, 45, .78), rgba(18, 15, 16, .78)); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 6px rgba(255, 255, 255, .02), inset 0 1px 0 rgba(255, 255, 255, .1); transition: border-color .25s, box-shadow .25s; }
.sb-bar:focus-within { border-color: rgba(255, 255, 255, .4); box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 6px rgba(224, 35, 63, .12), 0 0 40px rgba(224, 35, 63, .18); }
.sb-star { color: #ff8a9b; display: grid; } .sb-star svg.i { width: 20px; height: 20px; filter: drop-shadow(0 0 8px rgba(255, 92, 116, .6)); }
.sb-bar input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: #fff; font: 300 19px "Outfit", sans-serif; }
.sb-bar input::placeholder { color: rgba(255, 255, 255, .45); }
.sx .sb-go { width: 46px; height: 46px; border-radius: 15px; border: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #e0233f, #a50d26); box-shadow: 0 10px 24px rgba(200, 16, 46, .45); transition: transform .2s; }
.sx .sb-go:hover { transform: scale(1.05); }
.sb-recent { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 820px; }
.sb-top.has .sb-recent { display: none; }
.sx .sb-recent button, .sx .sb-hints button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 12px; font-size: 12.5px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .85); transition: background .2s; }
.sx .sb-recent button:hover, .sx .sb-hints button:hover { background: rgba(255, 255, 255, .12); }
.sb-recent svg.i { width: 13px; height: 13px; opacity: .6; }
.sb-hints { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 10px; justify-content: center; margin-top: 10px; }
.sx .sb-hints button { height: 50px; border-radius: 16px; font-size: 13.5px; }
.sb-body { flex: 1; }
.sb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; max-width: 1280px; margin: 0 auto; width: 100%; padding-bottom: 30px; }
.sb-list { display: flex; flex-direction: column; gap: 6px; }
.sb-count { margin: 0 0 8px 4px; font-size: 12.5px; opacity: .55; } .sb-count b { font-weight: 500; opacity: 1; }
.sb-r { padding: 16px 20px; border-radius: 18px; cursor: pointer; border: 1px solid transparent; transition: background .2s, border-color .2s, transform .2s; animation: sbIn .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes sbIn { from { opacity: 0; transform: translateY(8px); } }
.sb-r:hover { background: linear-gradient(160deg, rgba(48, 43, 45, .6), rgba(18, 15, 16, .6)); border-color: rgba(255, 255, 255, .1); }
.sb-site { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.sb-site img { width: 22px; height: 22px; border-radius: 7px; padding: 3px; background: rgba(255, 255, 255, .92); }
.sb-site span { font-weight: 500; } .sb-site small { opacity: .45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-r h3 { margin: 8px 0 6px; font: 400 20px/1.3 "Newsreader", Georgia, serif; color: #fff; transition: color .2s; }
.sb-r:hover h3 { color: #ffb3bf; }
.sb-r p { margin: 0; font-size: 13.5px; line-height: 1.6; opacity: .68; }
.sb-age { display: block; margin-top: 6px; font-size: 11.5px; opacity: .45; }
.sb-r.skel { cursor: default; animation: none; }
.sb-r.skel i, .sb-r.skel b, .sb-r.skel p { display: block; border-radius: 8px; background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)); background-size: 200% 100%; animation: sbSk 1.4s ease-in-out infinite; }
.sb-r.skel i { width: 160px; height: 14px; } .sb-r.skel b { width: 70%; height: 22px; margin: 12px 0 10px; } .sb-r.skel p { width: 95%; height: 36px; }
@keyframes sbSk { to { background-position: -200% 0; } }
.sb-msg { display: flex; align-items: center; gap: 16px; } .sb-msg svg.i { width: 26px; height: 26px; opacity: .7; } .sb-msg b { display: block; font: 400 20px "Newsreader", Georgia, serif; } .sb-msg p { margin: 2px 0 0; font-size: 13px; opacity: .65; }
.sb-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; }
.sb-ai-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .sb-ai-hd b { display: block; font-weight: 500; font-size: 15px; } .sb-ai-hd small { font-size: 11.5px; opacity: .55; }
.sb-ai-orb { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; color: #ffb3bf; background: radial-gradient(circle at 30% 25%, rgba(255, 138, 155, .35), rgba(224, 35, 63, .12)); border: 1px solid rgba(255, 138, 155, .3); }
.sb-ai-orb.on { animation: sbPulse 1.6s ease-in-out infinite; } @keyframes sbPulse { 50% { box-shadow: 0 0 24px rgba(224, 35, 63, .55); } }
.sb-cost { display: block; text-align: center; margin-top: 8px; font-size: 11px; opacity: .45; }
.sb-ai-tx { font-size: 13.5px; line-height: 1.7; } .sb-ai-tx p { margin: 0 0 10px; } .sb-ai-tx a { color: #ff8a9b; cursor: pointer; text-decoration: none; font-size: 11.5px; vertical-align: super; }
.sb-ai-err { margin: 8px 0 0; font-size: 12.5px; color: #ff8a9b; }
.sb-more { display: flex; flex-direction: column; gap: 4px; }
.sx .sb-more button { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; border: 0; background: none; text-align: left; font-size: 13.5px; transition: background .15s; }
.sx .sb-more button:hover { background: rgba(255, 255, 255, .07); } .sb-more button span { flex: 1; } .sb-more button svg.i:last-child { opacity: .4; }
.sb-note { display: flex; align-items: center; gap: 8px; margin: 0 4px; font-size: 11.5px; opacity: .5; } .sb-note svg.i { width: 14px; height: 14px; }
@media (max-width: 1200px) { .sb-grid { grid-template-columns: 1fr; } .sb-side { position: static; } }
/* Biblioteca (tema seda): botones y avisos legibles sobre la seda blanca */
.wsx-root[data-space="seda"] .sx .sx-btn:not(.acc):not(.pri) { background: rgba(26, 22, 24, .58); border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.wsx-root[data-space="seda"] .sx .sx-btn:not(.acc):not(.pri):hover { background: rgba(26, 22, 24, .75); }
.gl3-note { align-self: flex-start; display: inline-flex; padding: 9px 14px; border-radius: 12px; background: rgba(22, 18, 20, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-shadow: none; }
.gl3-rh .sx-h small { color: #fff; opacity: .7; }

/* =====================================================================
   BARRA ÚNICA DE ARRIBA · APARTADOS · MINI PANELES (02/10/2026)
   Sustituye a la barra lateral, el dock, el reloj y la barra superior antigua.
   ===================================================================== */
.wsx-bgv { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; transition: filter .3s, inset .3s; pointer-events: none; }
.wsx-bgv[hidden] { display: none; }
.wsx-hot { position: absolute; left: 0; right: 0; top: 0; height: 12px; z-index: 60; }
.wsx-root.bar-on .wsx-hot { pointer-events: none; }
.wsx-bar { position: absolute; z-index: 61; top: 14px; left: 0; right: 0; height: 48px; display: flex; justify-content: center; pointer-events: none;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; }
.wsx-root:not(.bar-on) .wsx-bar { transform: translateY(-140%); opacity: 0; }
.wsx-bar > * { pointer-events: auto; }
.wsx-root .wsx-bar .wsx-logo { position: absolute; left: 26px; top: 6px; }
.wsx-root .wsx-bar .wsx-logo img { height: 34px; }
.wsx-pills { display: flex; align-items: center; gap: 10px; }
.wsx-pill { height: 46px; display: flex; align-items: center; gap: 2px; padding: 0 6px; border-radius: 16px; color: #f5f2f2;
  background: linear-gradient(160deg, rgba(40, 35, 37, .62), rgba(14, 12, 13, .58)); border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 14px 34px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .09); }
.wsx-pill em { width: 1px; height: 20px; margin: 0 4px; background: rgba(255, 255, 255, .14); }
.wsx-pill svg.i { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wsx-root .wsx-pill button { height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s, color .2s; position: relative; }
.wsx-root .wsx-pill button:hover, .wsx-root .wsx-pill button.open { background: rgba(255, 255, 255, .1); }
.wsx-root .wsx-time { padding: 0 10px; } .wsx-time b { font: 500 15px "Outfit", sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.wsx-root .wsx-pb { width: 36px; }
.wsx-pb #wsBellN { position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; font: 600 9.5px/15px "Outfit", sans-serif; font-style: normal; color: #fff; background: #e0233f; box-shadow: 0 0 8px rgba(224, 35, 63, .7); }
.wsx-pb #wsBellN[hidden] { display: none; }
.wsx-root .wsx-pill.sr { width: min(380px, 28vw); justify-content: flex-start; gap: 12px; padding: 0 10px 0 16px; font-size: 13.5px; color: rgba(255, 255, 255, .78); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.wsx-root .wsx-pill.sr:hover, .wsx-root .wsx-pill.sr.open { border-color: rgba(255, 255, 255, .3); box-shadow: 0 14px 34px rgba(0, 0, 0, .3), 0 0 22px rgba(224, 35, 63, .18); background: linear-gradient(160deg, rgba(48, 42, 44, .7), rgba(18, 15, 16, .66)); }
.wsx-pill.sr svg.i { color: #ff8a9b; filter: drop-shadow(0 0 6px rgba(255, 92, 116, .5)); }
.wsx-pill.sr span { flex: 1; text-align: left; }
.wsx-pill.sr kbd { font: 500 10.5px "Outfit", sans-serif; padding: 3px 7px; border-radius: 7px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .6); }
/* Apartados: puntos (el activo muestra su nombre) */
.wsx-pill.tb { gap: 4px; padding: 0 7px; }
.wsx-root .wsx-dot { width: 22px; height: 30px; border-radius: 10px; }
.wsx-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: background .2s, transform .2s; }
.wsx-dot:hover::before { background: #fff; transform: scale(1.25); }
.wsx-root .wsx-dot.on { width: auto; padding: 0 10px 0 9px; gap: 7px; background: rgba(255, 255, 255, .95) !important; color: #1a1617; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.wsx-dot.on::before { display: none; }
.wsx-dot.on span { font: 500 12.5px "Outfit", sans-serif; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsx-dot.on svg.i { width: 15px; height: 15px; } .wsx-dot.on .wsx-mask { width: 14px; height: 14px; background: #1a1617; }
.wsx-dot.on i[data-tabx] { width: 18px; height: 18px; margin-right: -4px; border-radius: 6px; display: grid; place-items: center; opacity: .5; }
.wsx-dot.on i[data-tabx]:hover { opacity: 1; background: rgba(0, 0, 0, .08); } .wsx-dot.on i[data-tabx] svg.i { width: 11px; height: 11px; }
.wsx-root .wsx-dot.home:not(.on)::before { width: 9px; height: 9px; border-radius: 3px; }
.wsx-root .wsx-dot.add { width: 30px; color: rgba(255, 255, 255, .7); } .wsx-dot.add::before { display: none; } .wsx-dot.add svg.i { width: 15px; height: 15px; }
.wsx-more { font-size: 11px; opacity: .55; padding: 0 3px; }
/* Cuenta y créditos */
.wsx-root .wsx-me { padding: 0 10px 0 4px; gap: 10px; }
.wsx-me .wsx-av, .wd-me .wsx-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 400 15px "Newsreader", Georgia, serif; color: #fff;
  background: radial-gradient(circle at 30% 25%, #ff8a9b, #c8102e 55%, #5e0716); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 4px 12px rgba(200, 16, 46, .4); }
.wsx-mn { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.wsx-mn b { font-weight: 500; font-size: 13px; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wsx-mn small { font-size: 10.5px; opacity: .55; }
.wsx-root .wsx-pill .wsx-cred { padding: 0 12px; gap: 8px; height: 34px; background: none; border: 0; }
.wsx-pill .wsx-cred b { font: 600 13.5px "Outfit", sans-serif; }
.wsx-pill .wsx-cred.low b { color: #ffb3bf; }
@media (max-width: 1280px) { .wsx-mn { display: none; } .wsx-root .wsx-pill.sr { width: 240px; } }
@media (max-width: 1000px) { .wsx-pill.sr kbd, .wsx-root .wsx-bar .wsx-logo { display: none; } .wsx-root .wsx-pb[data-drop="red"], .wsx-root .wsx-pb[data-drop="tienda"] { display: none; } }
/* Lo antiguo ya no existe */
.wsx-top, .wsx-fclock, .wsx-frail, .wsx-fdock { display: none !important; }
.wsx-tray { bottom: 24px; }
.wsx-exitfocus { top: 78px; }

/* ---------- Apartados a pantalla completa ---------- */
.wsx-root .wsx-full { left: 18px; right: 18px; top: 16px; bottom: 16px; transition: top .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease, translate .55s cubic-bezier(.2, .8, .2, 1); }
.wsx-root.bar-on .wsx-full { top: 76px; }
.wsx-full.from-r { translate: 60px 0; opacity: 0; } .wsx-full.from-l { translate: -60px 0; opacity: 0; }
.wsx-full.in { translate: 0 0 !important; opacity: 1 !important; }
.wsx-tiles { display: grid; gap: 14px; }
.wsx-tiles.n1 { grid-template: 1fr / 1fr; }
.wsx-tiles.n2 { grid-template: 1fr / 1fr 1fr; }
.wsx-tiles.n3 { grid-template: 1fr 1fr / 1.4fr 1fr; } .wsx-tiles.n3 > :first-child { grid-row: 1 / 3; }
.wsx-tiles.n4 { grid-template: 1fr 1fr / 1fr 1fr; }
.wsx-tile { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.wsx-tiles:not(.n1) .wsx-tile { border-radius: 22px; overflow: hidden; background: rgba(14, 12, 13, .28); border: 1px solid rgba(255, 255, 255, .1); }
.wsx-th { flex: none; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 8px 0 14px; font-size: 13px; background: rgba(14, 12, 13, .5); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.wsx-th b { flex: 1; font-weight: 500; } .wsx-th .wsx-mask { width: 15px; height: 15px; }
.wsx-root .wsx-th button { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; opacity: .6; } .wsx-root .wsx-th button:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.wsx-tb { position: relative; flex: 1; min-height: 0; overflow: hidden; container-type: inline-size; }
.wsx-tiles:not(.n1) .wsx-tb { padding: 12px; }
.wsx-tb > .pn { padding: 6px 8px 30px 4px; }
/* Piezas estrechas (mosaico): las columnas laterales se esconden solas */
@container (max-width: 1150px) { .sc-body { grid-template-columns: 230px minmax(0, 1fr) !important; } .sc-right, .si .pi-recent { display: none !important; } .si-body { grid-template-columns: 240px minmax(0, 1fr) !important; } .sx { grid-template-columns: minmax(0, 1fr) !important; } .sx-side { position: static; } }
@container (max-width: 760px) { .sc-body, .si-body { grid-template-columns: minmax(0, 1fr) !important; } .sc-nav, .si .pi-models { display: none !important; } .sc-chips { display: none !important; } }

/* ---------- Apartado nuevo ---------- */
.wsx-new { max-width: 1100px; margin: 4vh auto 0; padding: 34px; border-radius: 28px; color: #f5f2f2; font-family: "Outfit", sans-serif;
  background: linear-gradient(160deg, rgba(40, 36, 38, .66), rgba(14, 12, 13, .66)); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.wsx-new-hd { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.wsx-new-n { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #e0233f, #a50d26); box-shadow: 0 12px 28px rgba(200, 16, 46, .45); }
.wsx-new-n svg.i { width: 24px; height: 24px; }
.wsx-new-name { width: 100%; border: 0; outline: 0; background: none; color: #fff; font: 400 34px "Newsreader", Georgia, serif; padding: 0; border-bottom: 1px dashed transparent; }
.wsx-new-name:focus, .wsx-new-name:hover { border-bottom-color: rgba(255, 255, 255, .25); }
.wsx-new-hd p { margin: 6px 0 0; font-size: 13.5px; opacity: .65; }
.wsx-new h6 { margin: 20px 0 10px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: .5; font-weight: 500; }
.wsx-new-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wsx-root .wsx-new-grid button { height: 104px; flex-direction: column; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); font-size: 13px; transition: background .2s, transform .2s, border-color .2s; }
.wsx-root .wsx-new-grid button:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); transform: translateY(-3px); }
.wsx-new-grid svg.i { width: 24px; height: 24px; } .wsx-new-grid .wsx-mask { width: 24px; height: 24px; } .wsx-new-grid b { font-weight: 500; }

/* ---------- Webs dentro de Lenore ---------- */
.wsx-web { height: 100%; display: flex; flex-direction: column; gap: 10px; }
.wsx-tiles.n1 .wsx-web { gap: 12px; }
.wsx-wbar { flex: none; display: flex; align-items: center; gap: 4px; height: 46px; padding: 0 6px; border-radius: 16px; background: linear-gradient(160deg, rgba(40, 35, 37, .7), rgba(14, 12, 13, .66)); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.wsx-root .wsx-wbar > button { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; opacity: .75; } .wsx-root .wsx-wbar > button:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.wsx-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 34px; margin: 0 6px; padding: 0 14px; border-radius: 11px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .08); }
.wsx-url input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: 13px "Outfit", sans-serif; }
.wsx-url .wsx-mask { width: 15px; height: 15px; } .wsx-url svg.i { width: 15px; height: 15px; opacity: .7; }
.wsx-wv { position: relative; flex: 1; min-height: 0; border-radius: 18px; overflow: hidden; background: rgba(10, 8, 9, .55); border: 1px solid rgba(255, 255, 255, .08); display: grid; place-items: center; }
.wsx-wweb { max-width: 460px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px; }
.wsx-wweb b { font: 400 26px "Newsreader", Georgia, serif; } .wsx-wweb p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; opacity: .7; }
.wsx-wweb .pn-orb .wsx-mask { width: 24px; height: 24px; }
.wsx-btnx { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 13px; color: #fff; text-decoration: none; font-weight: 500; font-size: 13.5px; background: linear-gradient(135deg, #e0233f, #a50d26); box-shadow: 0 12px 28px rgba(200, 16, 46, .4); }

/* ---------- Mini paneles (se abren bajo cada elemento de la barra) ---------- */
.wsx-drop { position: fixed; z-index: 2000; top: 72px; width: 340px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 18px; border-radius: 24px; color: #f5f2f2; font: 400 13px/1.4 "Outfit", system-ui, sans-serif;
  background: linear-gradient(160deg, rgba(46, 41, 43, .92), rgba(16, 13, 14, .95)); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%); box-shadow: 0 40px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0; translate: 0 -8px; scale: .98; transform-origin: top center; transition: opacity .18s ease, translate .25s cubic-bezier(.2, .8, .2, 1), scale .25s cubic-bezier(.2, .8, .2, 1); scrollbar-width: thin; }
.wsx-drop.in { opacity: 1; translate: 0 0; scale: 1; }
.wsx-drop svg.i { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wsx-drop button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
.wsx-drop h6 { margin: 16px 0 10px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; opacity: .5; font-weight: 500; }
.wsx-drop .wsx-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 12.5px; opacity: .85; cursor: pointer; } .wsx-drop .wsx-check small { opacity: .6; }
.wsx-drop .wsx-range { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; margin-top: 14px; font-size: 12.5px; } .wsx-drop .wsx-range input { grid-column: 1 / -1; accent-color: #e0233f; }
.wd-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .wd-hd b { font: 400 22px "Newsreader", Georgia, serif; } .wd-hd small { opacity: .55; font-size: 12px; }
.wd-link { color: #ff8a9b !important; font-size: 12px !important; display: inline-flex; align-items: center; gap: 6px; } .wd-link:hover { color: #ffb3bf !important; } .wd-link svg.i { width: 13px; height: 13px; }
.wd-empty { margin: 10px 0; opacity: .55; }
.wd-wide { width: 100%; height: 42px; margin-top: 12px; border-radius: 13px !important; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; background: linear-gradient(135deg, #e0233f, #a50d26) !important; box-shadow: 0 10px 24px rgba(200, 16, 46, .4); }
.wd-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; } .wd-list.sm { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); }
.wd-list button { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; text-align: left; transition: background .15s; } .wd-list button:hover { background: rgba(255, 255, 255, .08); }
.wd-list button > span { flex: 1; } .wd-list b { display: block; font-weight: 500; } .wd-list small { display: block; font-size: 11.5px; opacity: .55; } .wd-list button > svg.i:last-child { opacity: .35; width: 14px; height: 14px; }
.wd-list.sm button { padding: 8px 10px; }
/* Hora */
.wsx-drop.w-hora { width: 320px; }
.wd-clock b { display: block; font: 300 52px/1 "Outfit", sans-serif; letter-spacing: -.02em; } .wd-clock span { display: block; margin-top: 8px; opacity: .65; }
.wd-cal { margin-top: 16px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.wd-cal h6 { margin: 0 0 10px; }
.wd-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; } .wd-days i { font-style: normal; font-size: 12px; height: 28px; line-height: 28px; border-radius: 9px; }
.wd-days.wk i { opacity: .45; font-size: 10.5px; height: 20px; line-height: 20px; }
.wd-days i.on { background: linear-gradient(135deg, #e0233f, #a50d26); box-shadow: 0 6px 14px rgba(200, 16, 46, .45); font-weight: 600; }
.wd-wx { display: flex; align-items: center; gap: 12px; margin-top: 14px; } .wd-wx > svg.i { width: 26px; height: 26px; } .wd-wx div { flex: 1; } .wd-wx b { display: block; font-weight: 500; } .wd-wx small { opacity: .55; }
/* Conexión */
.wd-net { display: flex; align-items: center; gap: 14px; } .wd-net b { display: block; font-weight: 500; font-size: 14.5px; } .wd-net small { opacity: .6; }
.wd-orb { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: rgba(110, 231, 168, .12); color: #6ee7a8; } .wd-net.bad .wd-orb { background: rgba(224, 35, 63, .15); color: #ff8a9b; }
.wd-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; } .wd-rows div { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); } .wd-rows span { opacity: .6; } .wd-rows b { font-weight: 500; }
/* Avisos */
.wsx-drop.w-notis { width: 360px; } .wsx-drop .wsx-notes { display: flex; flex-direction: column; gap: 6px; }
.wsx-drop .wsx-notes > div { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.wsx-drop .wsx-notes i { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: #6ee7a8; } .wsx-drop .wsx-notes .err i { background: #ff5c74; }
.wsx-drop .wsx-notes p { margin: 0; } .wsx-drop .wsx-notes span { grid-column: 2; font-size: 11px; opacity: .45; }
/* Tienda y créditos */
.wd-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wd-packs button { padding: 14px 12px; border-radius: 16px; text-align: left; background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .09) !important; transition: border-color .2s, background .2s; }
.wd-packs button:hover { border-color: rgba(255, 138, 155, .5) !important; background: rgba(224, 35, 63, .1) !important; }
.wd-packs b { display: block; font: 400 24px "Newsreader", Georgia, serif; } .wd-packs small { opacity: .55; font-size: 11px; } .wd-packs em { display: block; margin-top: 6px; font-style: normal; font-weight: 600; color: #ff8a9b; }
.wd-bal { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: radial-gradient(260px 120px at 20% 0%, rgba(224, 35, 63, .25), transparent), rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); }
.wd-bal > svg.i { width: 30px; height: 30px; color: #ff8a9b; } .wd-bal small { display: block; opacity: .55; } .wd-bal b { font: 300 36px/1.1 "Outfit", sans-serif; } .wd-bal span { margin-left: 6px; opacity: .6; }
/* Cuenta */
.wsx-drop.w-cuenta { width: 330px; }
.wd-me { display: flex; align-items: center; gap: 12px; } .wd-me .wsx-av.big { width: 46px; height: 46px; font-size: 21px; }
.wd-me div { flex: 1; min-width: 0; } .wd-me b { display: block; font-weight: 500; font-size: 15px; } .wd-me small { display: block; opacity: .55; overflow: hidden; text-overflow: ellipsis; }
.wd-me i { font-style: normal; font-size: 10.5px; padding: 3px 9px; border-radius: 8px; background: rgba(224, 35, 63, .2); color: #ffb3bf; }
/* Temas: carrusel de fondos */
.wsx-drop.w-temas { width: 560px; }
.wd-wall { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; scroll-snap-type: x mandatory; }
.wd-wall > * { scroll-snap-align: start; }
.wd-wall button, .wd-up { position: relative; height: 100px; border-radius: 16px; overflow: hidden; display: block; border: 2px solid transparent !important; background: rgba(255, 255, 255, .05) !important; transition: border-color .2s, transform .2s; }
.wd-wall button:hover { transform: translateY(-2px); } .wd-wall button.on { border-color: #fff !important; box-shadow: 0 0 0 1px rgba(224, 35, 63, .6), 0 10px 26px rgba(224, 35, 63, .3); }
.wd-wall img, .wd-wall video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wd-wall button > span:not(.wd-mine) { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 7px; font-size: 11.5px; text-align: left; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.wd-mine { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .04); } .wd-mine svg.i { width: 24px; height: 24px; opacity: .6; }
.wd-wall button i[data-delbg] { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .2s; }
.wd-wall button:hover i[data-delbg] { opacity: 1; } .wd-wall i[data-delbg] svg.i { width: 12px; height: 12px; }
.wd-up { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; border: 2px dashed rgba(255, 255, 255, .2) !important; }
.wd-up:hover { border-color: rgba(255, 138, 155, .6) !important; } .wd-up span { font-size: 12.5px; font-weight: 500; } .wd-up small { font-size: 10.5px; opacity: .5; }
.wsx-drop .wsx-colors { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wsx-drop .wsx-colors button { width: 24px; height: 24px; border-radius: 50%; background: var(--c) !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); }
.wsx-drop .wsx-colors button.on { box-shadow: 0 0 0 2px #1a1617, 0 0 0 4px #fff; }
.wsx-drop .wsx-cpick { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; opacity: .8; cursor: pointer; } .wsx-drop .wsx-cpick input { width: 26px; height: 26px; border: 0; padding: 0; background: none; cursor: pointer; }
/* Buscar en Lenore */
.wsx-drop.w-buscar { width: min(720px, calc(100vw - 32px)); padding: 14px; }
.sd-in { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 14px 0 18px; border-radius: 17px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .14); }
.sd-in:focus-within { border-color: rgba(255, 138, 155, .55); box-shadow: 0 0 0 4px rgba(224, 35, 63, .12); }
.sd-in > svg.i { color: #ff8a9b; width: 19px; height: 19px; } .sd-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: 300 17px "Outfit", sans-serif; }
.sd-in kbd { font: 500 10.5px "Outfit", sans-serif; padding: 3px 7px; border-radius: 7px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .55); }
.sd-top[hidden], .sd-res[hidden] { display: none; }
.sd-row { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; min-height: 92px; }
.sd-app, .sd-more { width: 72px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px; border-radius: 16px; transition: background .2s, transform .2s; }
.sd-app:hover, .sd-more:hover { background: rgba(255, 255, 255, .08); transform: translateY(-2px); }
.sd-app img, .sd-app .wsx-ai { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .4)); }
.sd-app span:last-child, .sd-more span { width: 100%; font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.sd-more { margin-left: auto; } .sd-more > svg.i { width: 44px; height: 44px; padding: 12px; box-sizing: border-box; border-radius: 14px; border: 1.5px dashed rgba(255, 255, 255, .3); }
.wsx-ai { display: grid; place-items: center; border-radius: 12px; font: 400 20px "Newsreader", Georgia, serif; background: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .14); }
.sd-web { margin: 0; flex: 1; align-self: center; font-size: 12.5px; opacity: .7; } .sd-web a { color: #ff8a9b; }
.sd-secs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .08); }
.sd-secs button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 11px; font-size: 12px; background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .08) !important; }
.sd-secs button:hover { background: rgba(255, 255, 255, .12) !important; } .sd-secs svg.i, .sd-secs .wsx-mask { width: 14px; height: 14px; }
.sd-res { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; max-height: 60vh; overflow-y: auto; }
.sd-res > button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 13px; text-align: left; }
.sd-res > button.on, .sd-res > button:hover { background: rgba(255, 255, 255, .08); }
.sd-res > button b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sd-res > button small { font-size: 11px; opacity: .5; white-space: nowrap; }
.sd-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); }
.sd-ico img { width: 28px; height: 28px; object-fit: contain; } .sd-ico .wsx-ai { width: 34px; height: 34px; font-size: 15px; } .sd-ico .wsx-mask { width: 16px; height: 16px; }
.sd-ai { margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: radial-gradient(300px 120px at 0% 0%, rgba(224, 35, 63, .18), transparent), rgba(255, 255, 255, .04); border: 1px solid rgba(255, 138, 155, .22); }
.sd-ai-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .sd-ai-hd span { color: #ff8a9b; display: grid; } .sd-ai-hd small { opacity: .5; font-size: 11px; }
.sd-ai-tx { font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; margin-bottom: 8px; }

/* ---------- Tus programas ---------- */
.wa2 { display: block !important; padding: 6px 6px 40px 2px; }
.wa2-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.wa2-hd h1 { margin: 0; font: 400 clamp(34px, 3vw, 48px)/1.05 "Newsreader", Georgia, serif; letter-spacing: -.02em; } .wa2-hd p { margin: 8px 0 0; opacity: .6; }
.wa2-q { width: 340px; }
.wa2-f { margin-bottom: 16px; } .wa2-f button small { margin-left: 7px; opacity: .5; font-size: 11px; } .sx .wa2-f button.on { background: #f5f2f2; color: #181415; }
.wa2-h { margin: 18px 0 10px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: .5; font-weight: 500; }
.wa2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.sx .wa2-app { position: relative; height: 122px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 10px 8px; border-radius: 18px; border: 1px solid transparent; background: none; transition: background .2s, border-color .2s, transform .2s; }
.sx .wa2-app:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .1); transform: translateY(-3px); }
.wa2-ic { width: 54px; height: 54px; display: grid; place-items: center; } .wa2-ic img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45)); }
.wa2-ic .wsx-ai { width: 52px; height: 52px; font-size: 22px; }
.wa2-ic.len { border-radius: 16px; background: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .14); } .wa2-ic.len svg.i, .wa2-ic.len .wsx-mask { width: 24px; height: 24px; }
.wa2-app b { width: 100%; font-weight: 400; font-size: 12px; line-height: 1.25; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wa2-app em { position: absolute; top: 8px; left: 8px; font-style: normal; font-size: 9.5px; padding: 2px 7px; border-radius: 7px; background: #e0233f; }
.wa2-app i[data-apin] { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; opacity: 0; transition: opacity .2s, background .2s; }
.wa2-app:hover i[data-apin], .wa2-app i[data-apin].on { opacity: 1; } .wa2-app i[data-apin]:hover { background: rgba(255, 255, 255, .12); } .wa2-app i[data-apin].on { color: #ff8a9b; }
.wa2-app i[data-apin] svg.i { width: 14px; height: 14px; }
.wsx-root .wsx-pill .wsx-cred, .wsx-root .wsx-pill .wsx-cred:hover { border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
.wsx-root .wsx-pill .wsx-cred { background: none !important; } .wsx-root .wsx-pill .wsx-cred:hover, .wsx-root .wsx-pill .wsx-cred.open { background: rgba(255, 255, 255, .1) !important; }

/* ---------- Apartados vivos: cada uno tiene su página dentro de #wsFull y se queda montada al cambiar ---------- */
.wsx-pg { position: absolute; inset: 0; transition: opacity .32s ease, translate .42s cubic-bezier(.2, .8, .2, 1); will-change: translate, opacity; }
.wsx-pg[hidden] { display: none; }
.wsx-pg.from-r { translate: 48px 0; opacity: 0; } .wsx-pg.from-l { translate: -48px 0; opacity: 0; }
.wsx-pg.in { translate: 0 0; opacity: 1; }
.wsx-pg > .pn { padding: 6px 8px 30px 4px; }
@media (prefers-reduced-motion: reduce) { .wsx-pg { transition: none; } }

/* =====================================================================
   WALLET en dólares (02/10/2026): saldo con mini barra en la barra de arriba y panel "Tu wallet"
   ===================================================================== */
.wsx-wlt { display: grid; gap: 3px; justify-items: start; }
.wsx-wlt b { line-height: 1; }
.wsx-wlb { display: block; width: 100%; min-width: 46px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.wsx-wlb > i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #ff5c74, #e11d48); transition: width .5s ease; }
.wsx-cred.low .wsx-wlb > i { background: #ffb3bf; }
.wd-wallet { display: grid; gap: 8px; padding: 6px 4px 14px; }
.wd-wallet small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.wd-wallet b { font: 500 34px/1 "Newsreader", "Outfit", serif; letter-spacing: -.01em; }
.wd-wallet span { font-size: 12px; opacity: .78; }
.wd-wbar { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.wd-wbar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ff5c74, #e11d48); transition: width .6s ease; }
.wd-wbar.low i { background: linear-gradient(90deg, #ffb3bf, #ff5c74); }
.wd-packs button em { display: block; font-style: normal; font-size: 10.5px; color: #ff8fa1; margin-top: 2px; }
.wd-note { font-size: 11.5px; opacity: .72; margin: 8px 2px 10px; line-height: 1.45; }
/* Apartado WALLET (p-creditos.js, 02/10/2026) */
.wl-hero .wl-big { position: relative; z-index: 2; margin: 16px 0 14px; font: 300 clamp(48px, 5vw, 76px)/1 "Newsreader", Georgia, serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wl-bar { position: relative; z-index: 2; max-width: 520px; height: 10px; border-radius: 8px; background: rgba(255, 255, 255, .12); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.wl-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #ff5c74, #e11d48); box-shadow: 0 0 18px rgba(225, 29, 72, .55); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.wl-bar.low i { background: linear-gradient(90deg, #ffb3bf, #ff5c74); }
.wl-sub { position: relative; z-index: 2; margin: 10px 0 0; font-size: 13px; opacity: .75; max-width: 560px; }
.wl-top { display: grid; gap: 18px; }
.wl-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.wl-chips button { position: relative; min-width: 86px; height: 52px; padding: 0 16px; border-radius: 16px; display: grid; place-items: center; gap: 0; color: inherit; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: border-color .25s, background .25s, transform .25s; }
.wl-chips button:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .3); }
.wl-chips button.on { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 0 26px rgba(224, 35, 63, .2); }
.wl-chips b { font: 500 16px "Outfit", sans-serif; }
.wl-chips em { position: absolute; top: -8px; right: -6px; font: 600 10px "Outfit", sans-serif; font-style: normal; padding: 2px 7px; border-radius: 10px; background: #e11d48; color: #fff; }
.wl-amount { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wl-amount label { display: flex; align-items: center; gap: 6px; height: 54px; padding: 0 16px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .18); }
.wl-amount label span { font: 300 24px "Newsreader", serif; opacity: .7; }
.wl-amount input { width: 130px; background: none; border: 0; outline: 0; color: inherit; font: 400 26px "Outfit", sans-serif; font-variant-numeric: tabular-nums; }
.wl-gets { flex: 1; min-width: 180px; font-size: 13.5px; opacity: .9; }
.wl-gets b { font-size: 16px; } .wl-gets em { font-style: normal; color: #ff8fa1; } .wl-gets .bad { color: #ffb3bf; }
.wl-amount .sx-btn.pri { height: 50px; padding: 0 26px; }
.wl-bonus { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; opacity: .8; }
.wl-bonus svg.i { width: 16px; height: 16px; color: #ff8fa1; }
.sp-wallet { display: grid; gap: 10px; justify-items: start; }
.sp-wallet b { font: 300 40px/1 "Newsreader", Georgia, serif; }
.sp-wallet .wd-wbar { width: 100%; }
.sp-wallet small { font-size: 12px; opacity: .7; }

/* Voz de Lenore en el chat (botón Escuchar) */
.pc-foot [data-voz].on svg.i { color: #ff8fa1; }
.pc-foot [data-voz].busy { animation: pcVoz 1s ease-in-out infinite; }
@keyframes pcVoz { 50% { opacity: .35; } }

/* =====================================================================
   CAMBIADOR DE APARTADOS CON ALT (02/10/2026): pantallas flotando en 3D, la elegida delante con su luz en el suelo
   ===================================================================== */
.wsx-alt { position: fixed; inset: 0; z-index: 400; overflow: hidden; opacity: 0; transition: opacity .32s ease; font-family: "Outfit", sans-serif; color: #f4f1f1;
  background: radial-gradient(120% 90% at 50% 40%, rgba(30, 18, 21, .94), rgba(5, 3, 4, .985) 70%); }
.wsx-alt.in { opacity: 1; }
.wsx-alt .alt-stage { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 50% 44%; transform-style: preserve-3d; }
.alt-card { position: absolute; left: 50%; top: 45%; width: min(46vw, 820px); aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; cursor: pointer; transform-style: preserve-3d;
  background: linear-gradient(160deg, rgba(38, 32, 34, .92), rgba(12, 10, 11, .96)); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s ease, border-color .4s ease; will-change: transform, opacity; backface-visibility: hidden; contain: layout paint; }
.alt-card::after { content: ""; position: absolute; inset: 0; z-index: 4; background: #070506; opacity: .42; pointer-events: none; transition: opacity .4s ease; }
.alt-card.on::after { opacity: 0; }
.alt-card.on { border-color: rgba(255, 255, 255, .34); box-shadow: 0 50px 110px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 92, 116, .5), 0 0 60px rgba(225, 29, 72, .28), inset 0 1px 0 rgba(255, 255, 255, .2); }
.alt-card:hover:not(.on)::after { opacity: .25; }
.alt-card > header { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 16px;
  background: linear-gradient(180deg, rgba(10, 8, 9, .82), rgba(10, 8, 9, 0)); font-size: 14px; }
.alt-card > header svg.i, .alt-card > header .wsx-mask { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.alt-card > header b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alt-card > header small { margin-left: auto; font-size: 11.5px; opacity: .6; }
.alt-shot { position: absolute; inset: 0; overflow: hidden; pointer-events: none; contain: strict; }
.alt-shot *, .alt-shot *::before, .alt-shot *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: none !important; transition: none !important; filter: none !important; mix-blend-mode: normal !important; }
.alt-shot > .alt-full, .alt-shot > .alt-home { position: absolute !important; left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important; transform-origin: 0 0; translate: none !important; opacity: 1 !important; transition: none !important; }
.alt-shot .wsx-pg { position: absolute; inset: 0; transition: none !important; }
.alt-home { background: #0b0809 var(--bg) center / cover no-repeat; }
.alt-home .alt-home-area { position: absolute !important; inset: 0 !important; }
.alt-void { width: 100%; height: 100%; background: rgba(255, 255, 255, .04); }
.alt-art { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(80% 80% at 50% 40%, #241a1c, #070506); }
.alt-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.alt-art > img.alt-l { inset: 18% 30%; width: 40%; height: 64%; object-fit: contain; opacity: .22; }
.alt-art .alt-big { position: relative; display: grid; place-items: center; width: 86px; height: 86px; border-radius: 26px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px rgba(0, 0, 0, .45); }
.alt-art > img ~ .alt-big { display: none; }
.alt-art > img.alt-l ~ .alt-big { display: grid; }
.alt-art .alt-big svg.i { width: 38px; height: 38px; stroke: #fff; fill: none; stroke-width: 1.5; }
.alt-art .alt-big .wsx-mask { width: 40px; height: 40px; }
.alt-art.web small { position: absolute; bottom: 22px; font-size: 13px; opacity: .6; letter-spacing: .04em; }
.alt-card.add { background: linear-gradient(160deg, rgba(30, 24, 26, .8), rgba(10, 8, 9, .9)); border-style: dashed; }
.wsx-alt .alt-floor { position: absolute; left: 50%; top: 79%; width: 52vw; height: 9vw; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 120, 136, .34), rgba(225, 29, 72, .14) 45%, transparent 72%); }
@keyframes altGlow { 50% { opacity: .7; scale: .96; } }
.alt-hud { position: absolute; left: 50%; bottom: 4.5vh; translate: -50% 0; display: flex; align-items: center; gap: 16px; padding: 12px 22px 12px 14px; border-radius: 20px; white-space: nowrap;
  background: rgba(22, 17, 18, .92); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.alt-hud img { width: 34px; height: 34px; object-fit: contain; }
.alt-hud b { display: block; font: 400 22px/1.1 "Newsreader", Georgia, serif; }
.alt-hud small { font-size: 11.5px; opacity: .55; letter-spacing: .06em; }
.alt-hud p { margin: 0 0 0 10px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; opacity: .7; }
.alt-hud kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin: 0 2px; border-radius: 6px; font: 500 11px "Outfit", sans-serif; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16); }
.wsx-alt.commit .alt-card.on { transition: transform .38s cubic-bezier(.4, 0, .2, 1), opacity .38s; transform: translate(-50%, -50%) scale(1.5) !important; opacity: 0 !important; }
@media (max-width: 900px) { .alt-card { width: 76vw; } .alt-hud p { display: none; } }
@media (prefers-reduced-motion: reduce) { .alt-card, .wsx-alt { transition: none; } .wsx-alt .alt-floor { animation: none; } }

/* =====================================================================
   LENORE IA (vista de los clientes en lugar de "Modelos IA"): un apartado de cada, con su emblema de marca
   ===================================================================== */
.li { height: 100%; overflow-y: auto; padding: 4px 6px 30px 2px; scrollbar-width: thin; }
.li-hero { position: relative; display: flex; align-items: center; gap: 34px; padding: 34px 40px; border-radius: 26px; overflow: hidden;
  background: radial-gradient(90% 140% at 15% 50%, rgba(225, 29, 72, .16), transparent 60%), linear-gradient(160deg, rgba(38, 32, 34, .78), rgba(12, 10, 11, .86));
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 70px rgba(0, 0, 0, .4); }
.li-l { width: 150px; height: 120px; object-fit: contain; flex: none; filter: drop-shadow(0 10px 30px rgba(225, 29, 72, .35)); animation: liFloat 9s ease-in-out infinite; }
@keyframes liFloat { 50% { translate: 0 -8px; rotate: -2deg; } }
.li-up { margin: 0 0 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.li-tx h1 { margin: 0; font: 400 clamp(30px, 3vw, 46px)/1.08 "Newsreader", Georgia, serif; }
.li-tx h1 em { color: #ffb3bf; }
.li-tx > p:last-child { margin: 12px 0 0; max-width: 560px; font-size: 14px; line-height: 1.6; opacity: .72; }
.li-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.li-card { position: relative; min-height: 270px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); background: #070506; color: #fff; text-align: left; cursor: pointer; padding: 0; isolation: isolate;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, border-color .4s; animation: liIn .6s var(--d) both cubic-bezier(.2, .8, .2, 1); }
@keyframes liIn { from { opacity: 0; translate: 0 18px; } }
.li-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .3); box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 40px rgba(225, 29, 72, .2); }
.li-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; transition: scale 1.2s cubic-bezier(.2, .8, .2, 1); }
.li-card:hover .li-bg { scale: 1.06; }
.li-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 5, 6, .2), rgba(7, 5, 6, 0) 30%, rgba(7, 5, 6, .2) 50%, rgba(7, 5, 6, .9) 82%, #070506); }
.li-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; }
.li-pill { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 20px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; background: rgba(10, 8, 9, .5); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px); }
.li-pill i { width: 6px; height: 6px; border-radius: 50%; background: #ff5c74; box-shadow: 0 0 8px #ff5c74; }
.li-tag { font-size: 10.5px; padding: 5px 10px; border-radius: 20px; background: linear-gradient(135deg, #e0233f, #a50d26); box-shadow: 0 6px 16px rgba(200, 16, 46, .45); }
.li-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 18px; display: flex; flex-direction: column; gap: 6px; }
.li-body b { font: 400 28px/1.1 "Newsreader", Georgia, serif; }
.li-body small { font-size: 13px; line-height: 1.5; opacity: .78; }
.li-go { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 11px; font-size: 12.5px; font-weight: 500; color: #161314; background: #fff; }
.li-go svg.i { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.li-card.soon .li-bg { filter: saturate(.8) brightness(.8); }
@media (max-width: 1200px) { .li-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .li-grid { grid-template-columns: minmax(0, 1fr); } .li-hero { flex-direction: column; text-align: center; } }

/* Imágenes de marca de Lenore (02/10/2026) en Invita y gana y en la Wallet: fondo negro que se funde con el cristal */
.sx .sx-art.marca { mix-blend-mode: screen; object-fit: cover; border-radius: 50%; filter: none; -webkit-mask: radial-gradient(closest-side, #000 58%, transparent 100%); mask: radial-gradient(closest-side, #000 58%, transparent 100%); }
.sx .sx-gem.marca { mix-blend-mode: screen; object-fit: cover; border-radius: 18px; -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%); mask: radial-gradient(closest-side, #000 55%, transparent 100%); }
.iv2-why .sx-gem.marca { width: 92px; height: 92px; margin: -12px 0 4px -14px; }
/* Tus programas: botón para ocultar / volver a mostrar */
.wa2-app .wa2-hide { position: absolute; top: 7px; right: 36px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; opacity: 0; transition: opacity .2s; background: rgba(0, 0, 0, .35); }
.wa2-app:hover .wa2-hide { opacity: .8; } .wa2-app .wa2-hide:hover { opacity: 1; background: rgba(0, 0, 0, .6); }
.wa2-app .wa2-hide svg.i { width: 13px; height: 13px; }
/* Lenore IA: la imagen arriba y el texto abajo, sin pisar la L */
.li-card { min-height: 310px; background: #070506; }
.li-bg { height: 76%; object-position: 50% 46%; -webkit-mask: linear-gradient(180deg, #000 68%, transparent); mask: linear-gradient(180deg, #000 68%, transparent); }
.li-card::after { background: linear-gradient(180deg, rgba(7, 5, 6, .25), rgba(7, 5, 6, 0) 24%, rgba(7, 5, 6, 0) 50%, rgba(7, 5, 6, .78) 68%, #070506 84%); }

/* Ahorro (02/10/2026): con Lenore en segundo plano (otra app delante, minimizado) o con el cambiador de Alt abierto, se pausan las
   animaciones y el vídeo de fondo; antes seguían moviéndose debajo del cristal esmerilado y gastaban gráfica aunque no miraras Lenore */
.wsx-idle *, .wsx-idle *::before, .wsx-idle *::after { animation-play-state: paused !important; }
.wsx-root.alt-on > .wsx-full, .wsx-root.alt-on > .wsx-area, .wsx-root.alt-on > .wsx-bar { visibility: hidden; }

/* =====================================================================
   LENORE VIVA (apartado "Lenore", js/lenore-viva.js). Diseño del dueño: docs/17 y recursos/identidad/espacio/
   ===================================================================== */
.wsx-root[data-space="ella"] .wsx-full { left: 0; right: 0; top: 0; bottom: 0; border-radius: 0; }
.wsx-root[data-space="ella"] .wsx-bg, .wsx-root[data-space="ella"] .wsx-bgv, .wsx-root[data-space="ella"] .wsx-veil { opacity: 0; }
.wsx-root[data-space="ella"] .wsx-spacebg { opacity: 1; background: #c9ced4; }
.wsx-root[data-space="ella"] .wsx-spacebg i { background: none; }
.ev { position: absolute; inset: 0; overflow: hidden; color: #1d1a1b; font-family: "Outfit", sans-serif; }
.ev svg.i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ev-sp { width: 16px; height: 16px; fill: #ff2d8a; filter: drop-shadow(0 0 6px rgba(255, 45, 138, .65)); flex: none; }
.ev-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* Ella */
.ev-her { position: absolute; left: 50%; bottom: 0; width: min(66vh, 46vw); translate: -50% 0; transition: translate .9s cubic-bezier(.2, .8, .2, 1), width .9s cubic-bezier(.2, .8, .2, 1); z-index: 2; }
.ev-face { position: relative; }
.ev-face img { display: block; width: 100%; height: auto; user-select: none; 
  transform-origin: 50% 90%; }
@keyframes evBreath { 50% { scale: 1.008 1.012; } }


@keyframes evTalk { to { scale: 1.006 1.012; } }

/* Subtítulos sobre su jersey */
.ev-subs { position: absolute; left: 22%; right: 14%; bottom: 19%; display: grid; gap: 6px; pointer-events: none; }
.ev-subs p { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: clamp(12px, .85vw, 15px); line-height: 1.45; color: rgba(255, 255, 255, .55); transition: color .4s, opacity .4s; }
.ev-subs p:not(.now) { padding-left: 26px; }
.ev-subs p.now { color: #fff; } .ev-subs p.old { color: rgba(255, 255, 255, .32); }
.ev-subs p .ev-sp { margin-top: 2px; }
/* Barra (en el centro, oscura sobre ella) */
.ev-dock, .ev-pdock { display: flex; align-items: center; gap: 14px; position: relative; }
.ev-dock { position: absolute; left: 50%; bottom: 6%; translate: -50% 0; width: min(500px, 78%); }
.ev-bar { flex: 1; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 18px 0 8px; border-radius: 27px; background: linear-gradient(180deg, rgba(70, 72, 80, .55), rgba(40, 41, 48, .62)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 30px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .12); }
.ev-bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 15px "Outfit", sans-serif; color: #f4f2f3; }
.ev-bar input::placeholder { color: rgba(255, 255, 255, .62); }
.ev-plus { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: radial-gradient(circle, rgba(255, 45, 138, .22), transparent 70%); }
.ev-plus .ev-sp { width: 18px; height: 18px; }
.ev-mic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; color: #f1eff0; border: 1px solid rgba(255, 255, 255, .16); background: linear-gradient(180deg, rgba(70, 72, 80, .5), rgba(40, 41, 48, .6)); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); transition: box-shadow .3s; }
.ev-mic.on { box-shadow: 0 0 0 4px rgba(255, 45, 138, .25), 0 0 24px rgba(255, 45, 138, .5); }
.ev-chips { display: flex; gap: 6px; } .ev-chips em { font-style: normal; font-size: 11px; padding: 4px 8px; border-radius: 9px; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; white-space: nowrap; }

/* Trabajando: ella a la izquierda y más pequeña; el panel a la derecha */
.ev.ev-work .ev-her { translate: calc(-50% - 21vw) 0; width: min(56vh, 34vw); }
.ev-panel { position: absolute; z-index: 3; right: 7vw; top: 50%; width: min(560px, 36vw); translate: 40px -50%; opacity: 0; transition: opacity .6s ease .2s, translate .9s cubic-bezier(.2, .8, .2, 1) .1s;
  padding: 22px; border-radius: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, .42), rgba(240, 242, 246, .3)); border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 30px 80px rgba(60, 64, 80, .16), inset 0 1px 0 rgba(255, 255, 255, .9); backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); }
.ev-panel.in { opacity: 1; translate: 0 -50%; }
.ev-panel[hidden] { display: none; }
.ev-panel > header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(30, 30, 40, .07); }
.ev-ph { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #3a3739; flex: 1; } .ev-ph .ev-sp { fill: #7d3b88; filter: none; }
.ev-panel nav { display: flex; gap: 4px; }
.ev-panel nav button { border: 0; background: none; padding: 7px 13px; border-radius: 16px; font: 400 13px "Outfit"; color: #9b989c; cursor: pointer; transition: background .3s, color .3s; }
.ev-panel nav button.on { background: rgba(255, 255, 255, .85); color: #2a2729; box-shadow: 0 4px 12px rgba(60, 64, 80, .1); }
.ev-x { width: 28px; height: 28px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: none; color: #8a878b; } .ev-x:hover { background: rgba(255, 255, 255, .7); color: #222; }
.ev-out { margin-top: 16px; border-radius: 16px; overflow: hidden; aspect-ratio: 1.45; background: rgba(255, 255, 255, .35); display: grid; }
.ev-out img, .ev-out video { width: 100%; height: 100%; object-fit: cover; display: block; animation: evIn .8s ease; }
@keyframes evIn { from { opacity: 0; scale: 1.03; } }
.ev-load { display: grid; place-items: center; align-content: center; gap: 14px; color: #6d6a6e; font-size: 13px; background: linear-gradient(110deg, rgba(255, 255, 255, .25) 30%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, .25) 70%); background-size: 200% 100%; animation: evSk 1.6s linear infinite; }
.ev-load i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(125, 59, 136, .2); border-top-color: #ff2d8a; animation: evSpin .9s linear infinite; }
@keyframes evSk { to { background-position: -200% 0; } } @keyframes evSpin { to { rotate: 360deg; } }
.ev-code { background: #2c3240; color: #e6e9ef; display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.ev-code header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: rgba(255, 255, 255, .05); font-size: 13px; }
.ev-code header button { display: flex; gap: 6px; align-items: center; border: 0; background: none; color: #c9cdd6; font: 400 12px "Outfit"; cursor: pointer; }
.ev-code pre { margin: 0; padding: 12px 16px; overflow: auto; font: 400 12px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: pre; }
.ev-code pre i { display: inline-block; width: 26px; margin-right: 10px; text-align: right; font-style: normal; color: #6b7280; user-select: none; }
.ev-soon { display: grid; place-items: center; align-content: center; gap: 8px; background: #2a2d36; color: #e9e7ea; } .ev-soon b { font: 300 26px "Newsreader", serif; } .ev-soon span { font-size: 12px; opacity: .6; }
.ev-soon svg.i { width: 46px; height: 46px; stroke-width: 1.2; }
.ev-meta { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid rgba(30, 30, 40, .07); min-height: 26px; }
.ev-meta:empty { display: none; }
.ev-mi { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .55); color: #77737a; }
.ev-meta b { display: block; font-weight: 400; font-size: 13px; color: #6d6a6e; } .ev-meta small { font-size: 12px; color: #a3a0a5; }
.ev-dl { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 19px; border: 1px solid rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .45); color: #555; font: 400 13px "Outfit"; cursor: pointer; }
.ev-pdock { margin-top: 16px; }
/* La barra dentro del panel: clara */
.ev-pdock .ev-bar { background: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(255, 45, 138, .12), 0 8px 20px rgba(60, 64, 80, .08); }
.ev-pdock .ev-bar input { color: #2a2729; } .ev-pdock .ev-bar input::placeholder { color: #9a979c; }
.ev-pdock .ev-mic { background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .9); color: #6a676b; }
.ev-pdock .ev-chips em { background: rgba(0, 0, 0, .07); color: #333; }

/* Adjuntar: menú de cristal 4×2 */
.ev-att { position: absolute; left: -6px; bottom: 66px; z-index: 6; display: grid; grid-template-columns: repeat(4, 64px); gap: 10px 8px; padding: 18px 16px; border-radius: 22px;
  background: rgba(235, 237, 241, .78); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 24px 60px rgba(40, 44, 60, .2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  opacity: 0; translate: 0 8px; transition: opacity .3s, translate .4s cubic-bezier(.2, .8, .2, 1); }
.ev-att.in { opacity: 1; translate: 0 0; }
.ev-att::after { content: ""; position: absolute; left: 36px; bottom: -7px; width: 14px; height: 14px; rotate: 45deg; background: rgba(235, 237, 241, .9); border-right: 1px solid #fff; border-bottom: 1px solid #fff; }
.ev-att button { display: grid; justify-items: center; gap: 8px; border: 0; background: none; cursor: pointer; color: #4c494d; font: 400 11.5px "Outfit"; padding: 4px 0; border-radius: 12px; }
.ev-att button:hover { background: rgba(255, 255, 255, .6); }
.ev-att svg.i { width: 22px; height: 22px; stroke-width: 1.5; }

/* La pregunta del coste */
.ev-ask { position: absolute; z-index: 7; left: 50%; bottom: 120px; translate: -50% 10px; width: min(460px, 86vw); padding: 18px 20px; border-radius: 22px; opacity: 0; transition: opacity .3s, translate .4s cubic-bezier(.2, .8, .2, 1);
  background: rgba(30, 30, 36, .72); border: 1px solid rgba(255, 255, 255, .14); color: #f3f1f2; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.ev-ask.in { opacity: 1; translate: -50% 0; } .ev-ask[hidden] { display: none; }
.ev.ev-work .ev-ask { left: auto; right: calc(7vw + 30px); translate: 0 0; width: min(500px, 32vw); bottom: 150px; }
.ev-ask p { margin: 0 0 14px; display: flex; gap: 10px; font-size: 14px; line-height: 1.5; } .ev-ask b { color: #fff; font-weight: 500; }
.ev-ask div { display: flex; gap: 8px; align-items: center; }
.ev-ask button { height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; font: 400 13px "Outfit"; cursor: pointer; }
.ev-ask button.pri { background: #f4f2f3; color: #1d1a1b; border-color: transparent; } .ev-ask button.lnk { margin-left: auto; border: 0; background: none; color: rgba(255, 255, 255, .55); font-size: 12px; padding: 0; }

/* Wallet pequeña arriba a la derecha (el color es el del tema del usuario) */
.ev-wallet { --acc: #ff3d5f; position: absolute; z-index: 4; right: 28px; top: 84px; width: 200px; padding: 12px 14px 12px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(160deg, rgba(48, 46, 52, .7), rgba(28, 27, 32, .78)); color: #f3f1f2; border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 0 22px color-mix(in srgb, var(--acc) 35%, transparent), 0 14px 30px rgba(0, 0, 0, .15); transition: transform .3s; }
.ev-wallet:hover { transform: translateY(-2px); }
.ev-wallet small { display: block; font-size: 10.5px; opacity: .7; } .ev-wallet b { display: block; margin: 4px 0 8px; font: 600 22px "Outfit"; letter-spacing: -.01em; }
.ev-wbar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-right: 34px; } .ev-wbar i { display: block; height: 100%; background: var(--acc); box-shadow: 0 0 8px var(--acc); border-radius: 4px; transition: width .6s; }
.ev-wallet em { position: absolute; right: 14px; bottom: 9px; font-style: normal; font-size: 10.5px; opacity: .75; }

/* En segundo plano: esfera con su rostro (fuera del apartado de Lenore) */
.ev-orb { position: fixed; z-index: 60; right: 26px; bottom: 26px; width: 62px; height: 62px; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer; border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3), 0 0 0 5px rgba(255, 255, 255, .18); background: #e3e6ea; opacity: 0; scale: .6; pointer-events: none; transition: opacity .4s, scale .5s cubic-bezier(.2, .8, .2, 1); }
.ev-orb.on { opacity: 1; scale: 1; pointer-events: auto; }
.ev-orb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; scale: 1.5; transform-origin: 50% 20%; -webkit-mask: linear-gradient(180deg, #000 62%, transparent); mask: linear-gradient(180deg, #000 62%, transparent); }
.ev-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(180deg, transparent 55%, rgba(255, 255, 255, .85)); }
.ev-orb:hover { scale: 1.06; }
@media (max-width: 900px) { .ev-her { width: 92vw; } .ev.ev-work .ev-her { translate: -50% 0; width: 60vw; opacity: .35; } .ev-panel { right: 12px; left: 12px; width: auto; } .ev-wallet { top: 70px; right: 12px; width: 160px; } }
@media (prefers-reduced-motion: reduce) { .ev *, .ev { animation: none !important; transition: none !important; } }

.ev-logo { position: absolute; z-index: 4; left: 28px; top: 26px; height: 40px; pointer-events: none; }

/* =====================================================================
   WALLET de lujo (02/10/2026, p-creditos.js · .wl3): tarjeta principal con Lenore, tarjeta de neón del color del tema, gasto y movimientos
   ===================================================================== */
.sx.wl3 { --acc: #ff3d5f; display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(300px, 1fr); gap: 18px; align-content: start; padding-bottom: 40px; }
.wl3-full, .wl3-co { grid-column: 1 / -1; }
.wl3-co:empty { display: none; }
.wl3-hero { position: relative; min-height: 430px; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 90% at 70% 40%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 70%), linear-gradient(160deg, rgba(60, 56, 60, .78), rgba(24, 22, 26, .88));
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.wl3-her { position: absolute; z-index: -1; right: 8%; bottom: -6%; height: 118%; width: auto; mix-blend-mode: luminosity; opacity: .95;
  -webkit-mask: radial-gradient(46% 50% at 50% 38%, #000 55%, transparent 88%); mask: radial-gradient(46% 50% at 50% 38%, #000 55%, transparent 88%); }
.wl3-hero:hover .wl3-her { mix-blend-mode: normal; }
.wl3-hx { position: relative; padding: 46px 44px 0; max-width: 54%; }
.wl3-hx small { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; opacity: .65; }
.wl3-hx h1 { margin: 12px 0 10px; font: 300 clamp(44px, 4.4vw, 72px)/1 "Newsreader", serif; letter-spacing: -.01em; }
.wl3-hx p { margin: 0 0 22px; font-size: 14px; line-height: 1.6; opacity: .72; }
.sx .wl3-go { background: #f6f4f5 !important; color: #161314 !important; } .wl3-go { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 24px; border-radius: 14px; border: 0; cursor: pointer; background: #f6f4f5; color: #161314; font: 500 14px "Outfit"; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.wl3-stats { position: absolute; left: 22px; right: 22px; bottom: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 18px 22px; border-radius: 22px;
  background: rgba(30, 28, 32, .55); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.wl3-stats div { display: grid; gap: 4px; }
.wl3-stats b { font: 300 clamp(22px, 2vw, 32px) "Outfit"; letter-spacing: -.01em; }
.wl3-stats span { font-size: 12px; opacity: .6; }
.wl3-stats i { width: 38px; height: 2px; border-radius: 2px; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.wl3-side { display: grid; gap: 18px; align-content: start; }
.wl3-card { position: relative; aspect-ratio: 1.62; border-radius: 24px; padding: 22px 24px; overflow: hidden; display: flex; flex-direction: column; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 92%, #fff 8%), color-mix(in srgb, var(--acc) 55%, #120f12) 55%, #141114);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 24px 50px color-mix(in srgb, var(--acc) 30%, transparent), 0 20px 40px rgba(0, 0, 0, .35); }
.wl3-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%); translate: -100% 0; animation: wl3Shine 7s ease-in-out infinite; }
@keyframes wl3Shine { 30%, 100% { translate: 100% 0; } }
.wl3-ct { display: flex; justify-content: space-between; align-items: center; font: 400 italic 20px "Newsreader", serif; }
.wl3-ct img { height: 34px; }
.wl3-card > b { margin-top: auto; font: 600 30px "Outfit"; letter-spacing: -.01em; } .wl3-card > small { font-size: 12px; opacity: .75; }
.wl3-cb { display: flex; justify-content: space-between; margin-top: 14px; font-size: 13px; } .wl3-cb em { font-style: normal; opacity: .75; }
.wl3-sp { padding: 20px 22px; border-radius: 22px; background: linear-gradient(160deg, rgba(60, 56, 60, .7), rgba(26, 24, 28, .82)); border: 1px solid rgba(255, 255, 255, .12); }
.wl3-sp h3 { margin: 0; font: 400 14px "Outfit"; opacity: .85; } .wl3-sp h3 small { opacity: .55; font-size: 12px; margin-left: 6px; }
.wl3-sp > b { display: block; margin: 8px 0 10px; font: 600 28px "Outfit"; color: color-mix(in srgb, var(--acc) 60%, #fff); }
.wl3-sp svg { width: 100%; height: 84px; display: block; } .wl3-sp polyline { fill: none; stroke: var(--acc); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--acc)); }
.wl3-mv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wl3-mv li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 6px; border-radius: 14px; } .wl3-mv li:hover { background: rgba(255, 255, 255, .05); }
.wl3-mi { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); } .wl3-mi.in { background: color-mix(in srgb, var(--acc) 25%, transparent); }
.wl3-mv b { display: block; font-weight: 500; font-size: 13.5px; } .wl3-mv small { font-size: 12px; opacity: .55; }
.wl3-mv em { font-style: normal; font-weight: 600; font-size: 14px; opacity: .85; } .wl3-mv em.in { color: color-mix(in srgb, var(--acc) 55%, #fff); opacity: 1; }
@media (max-width: 1200px) { .sx.wl3 { grid-template-columns: minmax(0, 1fr); } .wl3-hx { max-width: 62%; } }
@media (max-width: 700px) { .wl3-her { opacity: .35; } .wl3-hx { max-width: none; padding: 30px 22px 0; } .wl3-stats { position: relative; left: auto; right: auto; bottom: auto; margin: 26px 14px 14px; grid-template-columns: 1fr 1fr; gap: 14px; } }

.ev-aps { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ev-aps button { display: grid; gap: 6px; justify-items: center; padding: 6px; border-radius: 14px; border: 1px solid transparent; background: rgba(127, 127, 127, .08); cursor: pointer; color: inherit; }
.ev-aps button.on { border-color: #ff2d8a; box-shadow: 0 0 0 3px rgba(255, 45, 138, .15); }
.ev-aps img { width: 84px; height: 104px; object-fit: cover; object-position: 50% 20%; border-radius: 10px; } .ev-aps small { font-size: 11px; }

.ev-chk { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; margin-top: 10px; font-size: 13.5px; text-transform: none; letter-spacing: 0; }
.ev-chk input { width: 18px; height: 18px; accent-color: #ff2d8a; }

/* Cambiar su apariencia (panel sobre ella, diseño del dueño) */
.ev-face { cursor: pointer; }
.ev.ev-looking .ev-subs, .ev.ev-looking .ev-dock { opacity: 0; pointer-events: none; transition: opacity .3s; }
.ev-look { position: absolute; z-index: 5; left: 50%; bottom: 5%; translate: -50% 14px; width: min(540px, 86%); padding: 10px 14px 16px; border-radius: 26px; opacity: 0;
  background: linear-gradient(180deg, rgba(58, 58, 66, .62), rgba(30, 30, 36, .72)); border: 1px solid rgba(255, 255, 255, .16); color: #eceaee;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: opacity .35s, translate .5s cubic-bezier(.2, .8, .2, 1); }
.ev-look.in { opacity: 1; translate: -50% 0; }
.ev-li { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ev-look nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ev-look nav button { display: grid; justify-items: center; gap: 4px; padding: 8px 0 6px; border: 0; border-radius: 18px; background: none; color: rgba(236, 234, 238, .78); font: 400 12px "Outfit"; cursor: pointer; position: relative; }
.ev-look nav button + button::before { content: ""; position: absolute; left: -1px; top: 22%; bottom: 22%; width: 1px; background: rgba(255, 255, 255, .1); }
.ev-look nav button.on { color: #fff; background: rgba(255, 255, 255, .14); box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 0 18px rgba(167, 139, 250, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ev-look nav button.on .ev-li { filter: drop-shadow(0 0 6px rgba(196, 181, 253, .8)); }
.ev-lrow { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 8px; padding: 14px 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ev-lar { width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; } .ev-lar .ev-li { width: 16px; height: 16px; }
.ev-lfaces { display: flex; justify-content: center; gap: 16px; min-height: 60px; align-items: center; }
.ev-lfaces p { margin: 0; font-size: 13px; opacity: .6; letter-spacing: .04em; }
.ev-lfaces button { width: 58px; height: 58px; padding: 0; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255, 255, 255, .15); cursor: pointer; background: #ccd; transition: transform .25s, box-shadow .25s; }
.ev-lfaces button:hover { transform: translateY(-2px); }
.ev-lfaces button.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(167, 139, 250, .9), 0 0 18px rgba(167, 139, 250, .6); }
.ev-lfaces img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; scale: 1.7; transform-origin: 50% 24%; }
.ev-lft { display: flex; align-items: center; gap: 20px; padding-top: 14px; }
.ev-lft label { flex: 1; display: grid; grid-template-columns: 1fr auto; row-gap: 6px; font-size: 13px; }
.ev-lft label b { font-weight: 400; font-size: 13px; }
.ev-lft input[type=range] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #a78bfa var(--v), rgba(255, 255, 255, .22) var(--v)); outline: none; }
.ev-lft input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(167, 139, 250, .8); cursor: pointer; }
.ev-lapply { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .12); color: #fff; font: 400 14px "Outfit"; cursor: pointer; white-space: nowrap; box-shadow: 0 0 18px rgba(167, 139, 250, .25); }
.ev-lapply .ev-sp { fill: #c4b5fd; filter: drop-shadow(0 0 6px #a78bfa); }
.ev-tolook { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 14px; border: 1px solid rgba(127, 127, 127, .25); background: rgba(127, 127, 127, .08); color: inherit; cursor: pointer; text-align: left; margin-bottom: 6px; }
.ev-tolook img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; } .ev-tolook b { display: block; font-size: 14px; } .ev-tolook small { font-size: 12px; opacity: .6; }

/* Apartado Lenore: la barra de arriba siempre visible y la cuenta con la wallet arriba a la derecha (02/10/2026) */
.wsx-root[data-space="ella"] .wsx-pill.ac { position: absolute; right: 28px; top: 0; }
.wsx-root[data-space="ella"] .wsx-bar .wsx-logo img { content: url("/img/logo-lenore.png?v=rojo3"); }   /* sobre su fondo claro: el logo negro con rojo */

/* Ella sin máscara: el borde se funde con el fondo con una capa (más fiable en el programa de Windows) */
.ev-face::after { content: ""; position: absolute; inset: -2px; pointer-events: none; background: linear-gradient(90deg, #c9ced4, rgba(201, 206, 212, 0) 14%, rgba(201, 206, 212, 0) 86%, #c9ced4), linear-gradient(180deg, #c9ced4, rgba(201, 206, 212, 0) 10%, rgba(201, 206, 212, 0) 74%, #c9ced4 97%); }
/* La cuenta con la wallet, arriba a la derecha en todos los apartados */
.wsx-root .wsx-pill.ac { position: absolute; right: 28px; top: 0; }
/* El fondo de todos los apartados es el que eligió el usuario (Temas); solo el de Lenore tiene el suyo */
.wsx-root[data-space]:not([data-space="ella"]) .wsx-spacebg { opacity: 0; }
/* Cambiador con Alt: X para cerrar un apartado */
.alt-card > header .alt-x { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; pointer-events: auto; }
.alt-card > header .alt-x:hover { background: #e11d48; }
.alt-card > header small + .alt-x { margin-left: 10px; }
.alt-shot { pointer-events: none; } .alt-card > header { pointer-events: auto; }
/* Wallet compacta: todo cabe en una pantalla; movimientos e historial, al bajar */
.sx.wl3 { gap: 14px; }
.wl3-hero { min-height: 0; height: 300px; border-radius: 24px; }
.wl3-hx { padding: 28px 32px 0; }
.wl3-hx h1 { font-size: clamp(36px, 3.4vw, 54px); margin: 8px 0 6px; }
.wl3-hx p { font-size: 13px; margin-bottom: 14px; }
.wl3-go { height: 38px; padding: 0 18px; font-size: 13px; border-radius: 12px; }
.wl3-stats { left: 16px; right: 16px; bottom: 16px; padding: 12px 18px; border-radius: 18px; }
.wl3-stats b { font-size: clamp(18px, 1.5vw, 24px); } .wl3-stats span { font-size: 11px; }
.wl3-side { gap: 14px; }
.wl3-card { aspect-ratio: auto; height: 172px; padding: 18px 20px; border-radius: 20px; }
.wl3-card > b { font-size: 24px; }
.wl3-sp { padding: 14px 18px; border-radius: 20px; height: 114px; box-sizing: border-box; }
.wl3-sp > b { font-size: 20px; margin: 4px 0 4px; } .wl3-sp svg { height: 40px; }
.sx.wl3 .wl-top { padding: 18px 22px; }
.sx.wl3 .wl-top .sx-h { font-size: 22px; } .sx.wl3 .wl-top .sx-sub { margin-top: 2px; }
.sx.wl3 .wl-chips button { height: 40px; min-width: 70px; }
.sx.wl3 .wl-amount { margin-top: 12px; }
.sx.wl3 .wl-amount input { height: 42px; font-size: 20px; }
/* En el apartado de Lenore ya está "Hablar con Lenore": el buscador de arriba sobra (en los demás apartados se queda) */
.wsx-root[data-space="ella"] #wsSearch { display: none; }

/* Orbe abstracto de Lenore (sin rostro): rojo, blanco y negro girando; abre el apartado del modelo */
.ev-orb { background: #0d0a0b; }
.ev-orb i { position: absolute; inset: -30%; border-radius: 50%; filter: blur(6px); mix-blend-mode: screen; animation: orbSpin 9s linear infinite; }
.ev-orb i:nth-child(1) { background: conic-gradient(from 0deg, transparent, #c8102e 25%, transparent 45%, #ff5c74 70%, transparent); }
.ev-orb i:nth-child(2) { background: conic-gradient(from 120deg, transparent, #f4f1f1 18%, transparent 36%); animation-duration: 6s; animation-direction: reverse; opacity: .8; }
.ev-orb i:nth-child(3) { inset: 22%; background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 92, 116, .35) 45%, transparent 70%); filter: blur(2px); animation: orbPulse 3.2s ease-in-out infinite; }
.ev-orb::after { background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .45), transparent 32%); }
@keyframes orbSpin { to { rotate: 360deg; } }
@keyframes orbPulse { 50% { scale: .82; opacity: .7; } }
/* Wallet: accesos rápidos */
.wl3-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.wl3-ga { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #f3f1f2; font: 400 13px "Outfit"; cursor: pointer; }
.wl3-ga:hover { background: rgba(255, 255, 255, .16); }
.wl3-ga svg.i { width: 15px; height: 15px; }
.sx .wl3-ga { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .18) !important; color: #f3f1f2 !important; }

/* Ella sin recuadro (02/10/2026, noche 4): sin giro 3D ni animaciones sobre la imagen; bordes fundidos con máscara y,
   detrás, la misma imagen muy desenfocada (estática) para que el fondo continúe sus colores */
.wsx-root[data-space="ella"] .wsx-tile, .wsx-root[data-space="ella"] .wsx-tb, .wsx-root[data-space="ella"] .wsx-pg { overflow: hidden !important; }
.wsx-root[data-space="ella"] .wsx-spacebg { background: var(--apbg, #c9ced4) !important; transition: background .6s ease; }
.ev-face::after { display: none; }
.ev-face img { -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 72%, transparent 98%); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent) intersect, linear-gradient(180deg, transparent, #000 8%, #000 72%, transparent 98%); }
/* El panel, sin desenfoque en vivo (era lo que lo hacía lento al cambiar de pestaña) */
.ev-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: linear-gradient(160deg, rgba(246, 247, 250, .9), rgba(232, 235, 240, .86)) !important; }
.ev-empty { display: grid; place-items: center; align-content: center; gap: 8px; padding: 24px; text-align: center; color: #6d6a6e; background: rgba(255, 255, 255, .45); }
.ev-empty svg.i { width: 34px; height: 34px; stroke-width: 1.3; } .ev-empty b { font: 400 22px "Newsreader", serif; color: #3a3739; } .ev-empty span { font-size: 13px; max-width: 320px; line-height: 1.5; }

/* Vídeo de reposo encima de su foto (misma máscara); cambia de uno a otro con un fundido */
.ev-face .ev-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 72%, transparent 98%); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent) intersect, linear-gradient(180deg, transparent, #000 8%, #000 72%, transparent 98%); }
.ev-face .ev-v.on { opacity: 1; }

/* Botón del panel junto al micrófono y selector de modelos (03/10/2026) */
.ev-pnl.on, .ev.ev-work .ev-pnl { box-shadow: 0 0 0 3px rgba(255, 45, 138, .22); }
.ev-msel { position: relative; display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.ev-msel:empty { display: none; }
.ev-mbtn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 16px; cursor: pointer; text-align: left;
  border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .5); color: #3a3739; font: 400 13px "Outfit"; }
.ev-mbtn .ev-sp { width: 16px; height: 16px; fill: #ff2d8a; flex: none; }
.ev-mbtn span { flex: 1; min-width: 0; display: grid; } .ev-mbtn b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ev-mbtn small { font-size: 11px; color: #8d8a8e; }
.ev-msel select { height: 46px; padding: 0 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .5); font: 400 13px "Outfit"; color: #3a3739; cursor: pointer; }
.ev-mlist { position: absolute; z-index: 9; left: 0; right: 0; top: 52px; max-height: 360px; display: grid; grid-template-rows: auto 1fr; padding: 10px; border-radius: 18px;
  background: rgba(252, 251, 252, .97); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 24px 60px rgba(40, 40, 60, .2); }
.ev-mlist input { height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .08); background: #fff; font: 400 13px "Outfit"; outline: 0; margin-bottom: 8px; }
.ev-mlist [data-mrows] { overflow: auto; display: grid; gap: 2px; align-content: start; }
.ev-mlist button { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 9px 12px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; font: 400 13px "Outfit"; color: #2f2c2e; }
.ev-mlist button:hover { background: rgba(0, 0, 0, .04); } .ev-mlist button.on { background: rgba(255, 45, 138, .08); }
.ev-mlist button b { font-weight: 400; } .ev-mlist small { font-size: 11px; color: #8d8a8e; white-space: nowrap; }
.ev-mlist em { font-style: normal; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 8px; background: rgba(200, 16, 46, .1); color: #c8102e; }
.ev-out img { object-fit: contain; }
.ev-msel > .ev-mbtn { flex: 1 1 auto; } .ev-msel > select { flex: 0 0 auto; width: auto; min-width: 0; appearance: auto; }

/* Apertura del panel (03/10/2026) */
.ev-panel { transform-origin: 100% 100%; }
.ev-panel.in { animation: evPanelIn 1s cubic-bezier(.16, .9, .2, 1) both; }
@keyframes evPanelIn {
  0% { opacity: 0; translate: 60px -46%; scale: .9; clip-path: inset(70% 0 0 82% round 40px); }
  55% { opacity: 1; }
  100% { opacity: 1; translate: 0 -50%; scale: 1; clip-path: inset(0 0 0 0 round 28px); } }
.ev-panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .75) 48%, rgba(255, 45, 138, .18) 52%, transparent 65%); background-size: 260% 100%; }
.ev-panel.in::after { animation: evSweep 1.4s .35s cubic-bezier(.3, .6, .2, 1) both; }
@keyframes evSweep { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 0; background-position: -60% 0; } }
.ev-panel.in > header, .ev-panel.in > .ev-msel, .ev-panel.in > .ev-out, .ev-panel.in > .ev-meta, .ev-panel.in > .ev-pdock { animation: evCasc .8s cubic-bezier(.2, .8, .2, 1) both; }
.ev-panel.in > header { animation-delay: .25s; } .ev-panel.in > .ev-msel { animation-delay: .33s; } .ev-panel.in > .ev-out { animation-delay: .41s; }
.ev-panel.in > .ev-meta { animation-delay: .49s; } .ev-panel.in > .ev-pdock { animation-delay: .55s; }
@keyframes evCasc { from { opacity: 0; translate: 0 14px; } }
.ev-panel.in > header nav button { animation: evCasc .6s cubic-bezier(.2, .8, .2, 1) both; }
.ev-panel.in > header nav button:nth-child(1) { animation-delay: .35s; } .ev-panel.in > header nav button:nth-child(2) { animation-delay: .4s; }
.ev-panel.in > header nav button:nth-child(3) { animation-delay: .45s; } .ev-panel.in > header nav button:nth-child(4) { animation-delay: .5s; }
.ev-panel:not(.in) { transition: opacity .35s ease, translate .45s ease, scale .45s ease; scale: .96; }
.ev-chips em { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .ev-panel.in, .ev-panel.in::after, .ev-panel.in > * { animation: none !important; } }
.ev-pdock .ev-bar, .ev-dock .ev-bar { min-width: 0; } .ev-bar input { min-width: 0; flex: 1; }
.ev-chips em.img { position: relative; padding: 0; width: 34px; height: 34px; border-radius: 10px; overflow: hidden; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 4px 10px rgba(0, 0, 0, .12); }
.ev-chips em.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-chips em.img i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; color: #fff; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s; }
.ev-chips em.img:hover i { opacity: 1; }

/* Aviso de versión nueva del programa (03/10/2026) */
.upd { position: fixed; z-index: 9999; right: 24px; bottom: 24px; width: 340px; padding: 18px 20px; border-radius: 22px; color: #2a2729;
  background: rgba(252, 251, 252, .96); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 24px 60px rgba(40, 40, 60, .22);
  opacity: 0; translate: 0 20px; transition: opacity .5s ease, translate .6s cubic-bezier(.2, .8, .2, 1); font: 400 13px "Outfit", sans-serif; }
.upd.in { opacity: 1; translate: 0 0; }
.upd b { display: block; font: 400 20px "Newsreader", serif; margin-bottom: 4px; } .upd p { color: #7d7a7e; margin: 0 0 14px; }
.upd div { display: flex; gap: 10px; align-items: center; }
.upd button { height: 38px; padding: 0 18px; border-radius: 19px; border: 0; cursor: pointer; font: 400 13px "Outfit"; background: none; color: #8d8a8e; }
.upd button.pri { background: #161415; color: #fff; box-shadow: 0 8px 20px rgba(200, 16, 46, .2); }
.upd i { display: block; height: 3px; border-radius: 2px; margin-top: 12px; background: linear-gradient(90deg, #c8102e, #ff2d8a, #c8102e); background-size: 200% 100%; animation: updBar 1.2s linear infinite; }
@keyframes updBar { to { background-position: -200% 0; } }

.ev-lnk { border: 0; background: none; padding: 4px 0; color: #c8102e; font: 400 13px "Outfit"; cursor: pointer; text-align: left; } .ev-lnk:disabled { color: #8d8a8e; cursor: default; }