/* Tantro · clon visual del Dojo (medidas en CLON-CHAT-DOJO.md y referencias/dojo/pantallas). Imágenes del Dojo en img/: se cambian después.
   Todo color y forma pasa por variables con el valor del Dojo como respaldo: sin tema se ve igual que siempre.
   Los 5 temas (body[data-tema]) redefinen variables al final del fichero; se eligen con ?tema=brasa|vino|marfil|carbon|dorado. */
:root{
  --fondo:#111114; --rojo:#ff6a1a; --oro:#ff8a3d; --crema:#f1e7c9; --texto:#f5f5f5; --sec:#a8a8b0; --morado:#8b3dff;
  --px:"Pixelify Sans","Courier New",monospace;
  --cuerpo:Manrope,-apple-system,"Segoe UI",sans-serif;
  --moneda:#f0b43a; --gema:#8b3dff; --gema-2:#b56cf0;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#000;color:var(--texto);font-family:var(--cuerpo);overflow-x:hidden}
body{max-width:480px;margin:0 auto;position:relative;background:var(--fondo)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
img{display:block;max-width:100%}
svg.ic{display:block}
[hidden]{display:none!important}

.vista{display:none;min-height:100dvh;flex-direction:column}
body[data-vista="entrar"] #v-entrar,body[data-vista="templo"] #v-templo,body[data-vista="portada"] #v-portada,body[data-vista="chat"] #v-chat,
body[data-vista="inventario"] #v-inventario,body[data-vista="contenido"] #v-contenido,body[data-vista="comunidad"] #v-comunidad,body[data-vista="tienda"] #v-tienda{display:flex}
body[data-vista="chat"] #v-chat{height:100dvh;min-height:0}
.centro{align-items:center;justify-content:center;padding:24px 16px;text-align:center}
.titulo-px{font-family:var(--px);font-style:var(--px-style,normal);font-weight:var(--px-peso,500);letter-spacing:var(--px-track,.06em);text-transform:var(--px-case,uppercase);line-height:1}
.titulo-px.grande{font-size:calc(38px*var(--k,1))}.titulo-px.med{font-size:calc(22px*var(--k,1))}.titulo-px.peq{font-size:calc(18px*var(--k,1))}
.sec{color:var(--sec);font-size:14px}
.error{color:#ff6b75;font-size:13px;min-height:18px}

/* Pantallas con fondo punteado (inventario, contenido, tienda, comunidad) */
.pantalla{position:relative;background:var(--bg-pantalla,radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.5px) 0 0/22px 22px,#111114)}
.cuerpo{flex:1;padding:14px 16px 130px;display:flex;flex-direction:column;gap:14px}
.pill-titulo{align-self:flex-start;display:inline-block;background:var(--pill-bg,rgba(255,255,255,.09));border-radius:var(--radio,14px);padding:13px 20px 11px;font-family:var(--px);font-style:var(--px-style,normal);font-weight:var(--px-peso,500);font-size:calc(24px*var(--k,1));letter-spacing:var(--px-track,.08em);text-transform:var(--px-case,uppercase);line-height:1;color:var(--pill-txt,#fff);box-shadow:var(--pill-sh,none)}
.pill-titulo.peq{font-size:calc(19px*var(--k,1));padding:10px 16px 9px}
.cerrar-x{width:36px;height:36px;border-radius:50%;background:var(--cerrar-bg,rgba(48,48,54,.92));display:grid;place-items:center;box-shadow:var(--cerrar-sh,0 2px 8px rgba(0,0,0,.4))}
.cerrar-x svg path{stroke:var(--cerrar-ic,#cfcfd4)}

/* Entrar */
#v-entrar{background:var(--bg-entrar,radial-gradient(70% 45% at 50% 55%,rgba(255,106,26,.28),#0a0a0a 70%,#070707))}
.logo{font-family:var(--px);font-size:54px;font-weight:600;letter-spacing:.14em;margin-bottom:10px;color:#fff;text-shadow:0 0 26px rgba(255,106,26,.6)}
.frase{color:var(--sec);margin-bottom:36px}
#form-entrar{width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px;text-align:left}
#form-entrar label{font-size:14px;color:var(--sec)}
input,textarea{font:inherit;color:var(--texto);background:var(--input-bg,rgba(255,255,255,.08));border:1px solid var(--input-bd,rgba(255,255,255,.12));border-radius:var(--radio,14px);padding:14px;outline:none;width:100%}
input:focus,textarea:focus{border-color:var(--rojo)}
input::placeholder{color:var(--ph,rgba(255,255,255,.4))}

/* Botón rojo ENTRENAR (205×52, letra píxel con sombra, canto oscuro) */
.btn-rojo{display:block;width:100%;max-width:205px;height:52px;margin:0 auto;border-radius:var(--radio-btn,12px);position:relative;
  background:var(--btn-bg,linear-gradient(180deg,#ff8a3d 0%,#ff6a1a 46%,#c9420c 100%));
  box-shadow:var(--btn-sh,0 5px 0 #6e2206,0 12px 26px rgba(255,106,26,.4),inset 0 1px 0 rgba(255,255,255,.35));transition:transform .08s,box-shadow .08s}
.btn-rojo span{font-family:var(--px);font-style:var(--px-style,normal);font-weight:var(--btn-peso,600);font-size:calc(22px*var(--kb,1));letter-spacing:var(--btn-track,.12em);text-transform:var(--px-case,uppercase);color:var(--btn-txt,#fff);text-shadow:var(--btn-txt-sh,0 2px 0 rgba(90,30,0,.8))}
.btn-rojo:active{transform:translateY(var(--press,3px));box-shadow:var(--btn-sh-act,0 2px 0 #6e2206,0 6px 14px rgba(255,106,26,.35))}
.btn-oro,.btn-sec{display:block;width:100%;padding:15px;border-radius:var(--radio-btn,14px);font-weight:800}
.btn-oro{background:var(--btn-bg,linear-gradient(135deg,#ff9448 0%,#ff6a1a 38%,#e24c0e 70%,#b8360a 100%));color:var(--btn-txt,#fff);font-family:var(--px);font-style:var(--px-style,normal);font-weight:var(--btn-peso,600);font-size:calc(18px*var(--kb,1));letter-spacing:var(--btn-track,.08em);text-transform:var(--px-case,uppercase);box-shadow:var(--btn-oro-sh,none)}
.btn-sec{background:var(--sec-bg,rgba(255,255,255,.08));color:var(--texto);font-weight:600}

/* Cabecera del Dojo: avatar con anillo verde, placa con rango y nombre, barra de nivel morada, llama y monedas */
.cab-dojo{position:relative;height:104px;flex:none;margin-top:env(safe-area-inset-top)}
.pantalla .cab-dojo{position:sticky;top:0;z-index:6;background:var(--cab-fijo,var(--cab-bg,#1b1b1e))}
.cab-wm{display:none}
.avatar{position:absolute;left:12px;top:29px;width:52px;height:52px;border-radius:50%;border:2.5px solid var(--rojo);background:#1a1a1e;display:grid;place-items:center;font-weight:800;font-size:22px;overflow:hidden;z-index:2}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.cab-nombre{position:absolute;left:44px;top:32px;width:132px;height:44px;border-radius:12px;background:var(--placa-bg,linear-gradient(90deg,#2a2a2e 0%,#18181b 55%,#111114 100%));padding:4px 8px 0 32px;display:flex;flex-direction:column;justify-content:center;gap:1px;box-shadow:var(--placa-sh,none)}
.cab-nombre small{font-size:10.5px;color:var(--placa-sec,#cfc5c9);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab-nombre small b{color:var(--oro)}
.cab-nombre strong{font-size:16px;font-weight:800;color:var(--placa-txt,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab-xp{position:absolute;left:66px;top:84px;display:flex;align-items:center;gap:3px}
.cab-xp img{width:15px;height:13px}
.cab-xp svg{width:14px;height:14px;color:var(--ic,var(--rojo));fill:currentColor}
.barra-nivel{position:relative;width:100px;height:11px;border-radius:6px;background:var(--track,#2a2229);overflow:hidden;box-shadow:inset 0 0 0 1px var(--track-bd,rgba(255,255,255,.06))}
.barra-nivel i{position:absolute;inset:0 auto 0 0;width:0;background:var(--fill,linear-gradient(90deg,#ff6a1a,#ffb27a));border-radius:6px}
.barra-nivel span{position:absolute;right:6px;top:0;font-size:8.5px;font-weight:800;line-height:11px;color:var(--bar-txt,#fff)}
.cab-der{position:absolute;right:16px;top:38px;display:flex;align-items:center;gap:14px}
.chip{display:flex;align-items:center;gap:4px;font-family:var(--px);font-size:17px;font-weight:600;color:var(--chip-txt,#fff);line-height:1}
.chip img{width:28px;height:28px;border-radius:50%}
.chip svg{width:20px;height:20px;color:var(--ic,var(--rojo))}
.chip .oro{color:var(--chip-oro,#ff9448);text-shadow:var(--chip-sh,0 1px 0 rgba(0,0,0,.5))}

/* Inicio */
#v-templo{background:var(--bg-templo,radial-gradient(62% 34% at 50% 45%,rgba(255,106,26,.55) 0%,rgba(200,66,12,.35) 36%,rgba(60,20,6,0) 100%),linear-gradient(180deg,#0e0b0a 0%,#171110 40%,#0d0a09 72%,#070707 100%))}
.templo-centro{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 16px 140px;text-align:center}
.templo-centro .titulo-px{font-size:calc(27px*var(--k,1));margin-top:12px;text-shadow:var(--tit-sh,0 2px 0 rgba(0,0,0,.4))}
.restantes{font-weight:var(--etq-peso,400);font-size:10px;color:var(--restantes,#fff);opacity:.85;margin-top:7px;font-family:var(--etq,inherit);letter-spacing:var(--etq-track,normal)}
.escena{position:relative;width:100%;max-width:343px;height:252px;margin:2px 0 14px}
.isla{position:absolute;left:50%;top:50%;width:236px;transform:translate(-50%,-50%);filter:var(--isla-filter,drop-shadow(0 0 28px rgba(255,90,20,.35)));pointer-events:none}
.lado{position:absolute;top:4px;display:flex;flex-direction:column;gap:26px}
.lado.izq{left:2px}.lado.der{right:2px}
.lado-btn{position:relative;width:46px;height:46px;border-radius:50%;background:var(--lado-bg,#1a1a1e);box-shadow:var(--lado-sh,0 2px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08))}
.lado-btn img{width:46px;height:46px;border-radius:50%}
.lado-btn svg{width:22px;height:22px;margin:auto;color:var(--ic,var(--rojo))}
.lado-btn:active{transform:scale(.94)}
.lado-btn.brillo{box-shadow:var(--brillo,0 0 18px rgba(255,205,90,.7),0 0 42px rgba(255,180,60,.35))}
.lado-btn .punto{position:absolute;top:-1px;right:-1px;width:11px;height:11px;border-radius:50%;background:var(--rojo);border:2px solid var(--fondo)}
#t-accion{width:100%;max-width:343px;margin-top:8px}
.tarjeta{background:var(--tarjeta,rgba(16,16,18,.82));border-radius:var(--radio,18px);padding:18px;text-align:left;display:flex;flex-direction:column;gap:12px;box-shadow:var(--card-sh,inset 0 0 0 1px rgba(255,255,255,.06));-webkit-backdrop-filter:var(--blur,none);backdrop-filter:var(--blur,none)}
.tarjeta.roja{box-shadow:var(--roja-sh,inset 0 0 0 1px rgba(255,106,26,.6));background:var(--roja-bg,linear-gradient(135deg,#1a120c,#2a1608))}
.tarjeta h4{font-family:var(--px);font-style:var(--px-style,normal);font-size:calc(15px*var(--kb,1));letter-spacing:var(--px-track,.08em);text-transform:var(--px-case,uppercase);color:var(--oro)}
.fila{display:flex;gap:10px}.fila>*{flex:1}
.fila .btn-oro,.fila .btn-sec{padding:12px;font-size:calc(15px*var(--kb,1))}

/* Barra inferior flotante del Dojo: 277×66, iconos de 30 */
.nav{position:fixed;left:50%;bottom:max(34px,calc(env(safe-area-inset-bottom) + 22px));transform:translateX(-50%);width:277px;height:66px;border-radius:var(--radio-nav,26px);background:var(--nav-bg,#1e1e1e);box-shadow:var(--nav-sh,0 10px 30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.04));-webkit-backdrop-filter:var(--blur,none);backdrop-filter:var(--blur,none);display:flex;justify-content:space-evenly;align-items:center;z-index:5}
.nav button{position:relative;width:46px;height:46px;display:grid;place-items:center;color:var(--nav-ic,var(--sec))}
.nav button.on{color:var(--nav-ic-on,var(--rojo))}
.nav button img{width:31px;height:31px;object-fit:contain}
.nav button svg{width:26px;height:26px}
.nav button[data-k="templo"] svg{width:30px;height:30px}
.nav button.on svg{filter:var(--nav-glow,none)}
.nav button:active{transform:scale(.92)}
.nav .punto{position:absolute;top:6px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--rojo)}

/* Entrada al chat desde RETOMAR: zoom hacia el botón y fundido a oscuro */
#v-templo{transition:transform .38s cubic-bezier(.5,0,.8,.4),filter .38s ease}
#v-templo.zoom{transform:scale(2.05);filter:saturate(.45) brightness(.6);pointer-events:none}
.velo-trans{position:fixed;inset:0;z-index:50;background:radial-gradient(90% 60% at 50% 45%,#141010,#060606 75%);opacity:0;pointer-events:none;transition:opacity .22s ease}
.velo-trans.on{opacity:1;pointer-events:auto}
.velo-trans.lento{transition-duration:.32s}

/* Portada */
#v-portada{background:var(--bg-portada,radial-gradient(70% 40% at 50% 50%,rgba(255,106,26,.3),#0a0908 75%,#000))}
.portada-prog{position:absolute;top:max(14px,env(safe-area-inset-top));left:16px;right:16px;height:6px;background:var(--track,#24242c);border-radius:4px;overflow:hidden}
.portada-prog i{display:block;height:100%;background:var(--oro);width:0}
.portada-cont{opacity:0;transition:opacity .6s ease;padding:0 10px}
.portada-cont.visible{opacity:1}
.portada-cont .sec{font-family:var(--etq,var(--px));letter-spacing:var(--etq-track,.1em);text-transform:var(--etq-case,uppercase);font-size:var(--etq-fs,13px)}
.portada-cont h3{font-size:22px;margin:14px 0 10px;font-weight:800}
.portada-cont #pp-obj{font-family:Manrope,sans-serif;text-transform:none;letter-spacing:0;font-size:15px;color:var(--txt2,#d8d2d4)}

/* ---------- Chat (clon del Dojo; medidas en CLON-CHAT-DOJO.md) ---------- */
#v-chat{position:relative;overflow:hidden;font-family:var(--cuerpo);
  background:var(--bg-chat,
    radial-gradient(120% 55% at 0% 0%,rgba(255,106,26,.16),transparent 62%),
    radial-gradient(90% 40% at 62% 6%,rgba(255,138,61,.08),transparent 72%),
    linear-gradient(180deg,#141112 0%,#111010 45%,#0d0c0c 72%,#0a0a0a 100%))}

/* Cabecera flotante: sin fondo; lo de debajo pasa desenfocado y atenuado */
.chat-velo{position:absolute;top:0;left:0;right:0;height:150px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--velo,16,14,14),.88) 0%,rgba(var(--velo,16,14,14),.5) 45%,rgba(var(--velo,16,14,14),0) 100%);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 34%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 34%,transparent 100%)}
.chat-cab{position:absolute;top:0;left:0;right:0;height:72px;z-index:3;margin-top:env(safe-area-inset-top)}
.chat-x{position:absolute;left:16px;top:26px;width:34px;height:34px;border-radius:50%;background:var(--chatx-bg,#1c1c20);box-shadow:inset 0 0 0 1px var(--chatx-bd,#34343a);display:grid;place-items:center}
.chat-x svg path{stroke:var(--chatx-ic,#e9e5e6)}
.chat-x:active{transform:scale(.92)}
.chat-titulo{position:absolute;left:0;right:0;top:14px;text-align:center;font-family:var(--etq,var(--px));font-style:var(--etq-style,normal);font-size:var(--chat-tit-fs,12px);font-weight:500;letter-spacing:var(--etq-track,.07em);text-transform:var(--chat-tit-case,none);color:var(--chat-tit,#ffd1b3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 56px}
.chat-barra{position:absolute;left:60px;right:55px;top:37px;height:13px;border-radius:7px;overflow:hidden;
  background:var(--chat-track,rgba(255,255,255,.13));box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.28)}
.chat-barra i{display:block;height:100%;width:0;border-radius:7px;transition:width .7s cubic-bezier(.2,.8,.2,1);
  background:var(--chat-fill,linear-gradient(180deg,#ff9448 0%,#ff6a1a 46%,#c9420c 100%));
  box-shadow:var(--chat-fill-glow,0 0 8px rgba(255,106,26,.6))}

.mensajes{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:124px 31px 104px 35px;display:flex;flex-direction:column;gap:20px;scrollbar-width:none;overscroll-behavior:contain}
.mensajes::-webkit-scrollbar{display:none}
.mensajes>*{flex:none}

.burbuja{font-size:15.5px;line-height:22px;font-weight:500;overflow-wrap:anywhere;color:var(--chat-txt,#fff)}
.burbuja p+p{margin-top:11px}
.burbuja b{font-weight:800}
.fila-coach{position:relative;align-self:flex-start;width:285px;max-width:100%;margin-top:8px}
/* Medido a 60 fps: la burbuja nace a ancho completo (262 pt) y 38 pt de alto, y crece en alto con cada tanda */
.burbuja.coach{width:100%;min-height:38px;padding:18px 16px;border-radius:var(--radio,16px);overflow:hidden;color:var(--coach-txt,var(--chat-txt,#fff));
  background:var(--coach-bg,linear-gradient(118deg,#2a2a30 0%,#1e1e23 14%,#2a1a12 34%,#c4440c 58%,#ff6a1a 67%,#8a2e08 80%,#2a1208 92%,#141010 100%));
  box-shadow:var(--coach-sh,inset 0 0 0 1px rgba(255,255,255,.035));transition:height .38s cubic-bezier(.2,.8,.2,1)}
.burbuja.coach.nace{animation:nace .16s cubic-bezier(.1,.9,.2,1) both}
@keyframes nace{from{clip-path:inset(0 100% 0 0 round 16px)}to{clip-path:inset(0 0 0 0 round 16px)}}
.ava{width:28px;height:28px;border-radius:50%;background:url(img/coach.png) center/cover,#120506;box-shadow:0 2px 6px rgba(0,0,0,.5);flex:none}
.fila-coach>.ava{position:absolute;left:-9px;top:-14px;z-index:1}
.burbuja.usuario{position:relative;align-self:flex-end;max-width:275px;padding:12px 18px;border-radius:var(--radio-user,22px);background:var(--user-bg,linear-gradient(90deg,#3a3a3a,#151515));color:var(--user-txt,var(--chat-txt,#fff));box-shadow:var(--user-sh,none);white-space:pre-wrap}
.burbuja.usuario.sube{animation:sube .46s cubic-bezier(.2,.8,.2,1) both}
@keyframes sube{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}

/* Palabras: cada tanda entra casi apagada y se enciende en 0,26 s (medido a 60 fps) */
.pal{animation:pal .26s ease-in both}
@keyframes pal{from{opacity:.08}to{opacity:1}}

/* Puntos de «pensando»: sin burbuja; ciclo de 1,1 s (sube 0,33 · fijo 0,22 · baja 0,25 · apagado 0,28), 50 ms entre puntos; nacen encendidos */
.puntos{align-self:flex-start;display:flex;gap:6px;height:28px;align-items:center;padding-left:4px;margin-top:8px}
.puntos i{width:8px;height:8px;border-radius:50%;background:var(--chat-txt,#fff);opacity:0;animation:punto 1.1s infinite linear -.4s}
.puntos i:nth-child(2){animation-delay:-.35s}.puntos i:nth-child(3){animation-delay:-.3s}
@keyframes punto{0%{opacity:0}30%{opacity:.3}50%{opacity:.3}73%{opacity:0}100%{opacity:0}}
.pensando{display:inline-flex;gap:5px;padding:4px 0}
.pensando i{width:8px;height:8px;border-radius:50%;background:var(--pens,#ffb27a);animation:late 1s infinite ease-in-out}
.pensando i:nth-child(2){animation-delay:.15s}.pensando i:nth-child(3){animation-delay:.3s}
@keyframes late{0%,100%{transform:scale(.6);opacity:.5}50%{transform:scale(1);opacity:1}}

/* +XP */
.xp{position:absolute;display:flex;align-items:center;gap:4px;font-size:13px;font-weight:800;color:var(--xp-c,#ffd1b3);white-space:nowrap;pointer-events:none;animation:xp 2.4s ease-out both}
.burbuja.usuario>.xp{right:100%;top:50%;margin:-9px 8px 0 0}
.fila-coach>.xp{right:12px;top:-9px;z-index:2}
@keyframes xp{0%{opacity:0;transform:translateY(8px)}18%{opacity:.8;transform:none}65%{opacity:.55}100%{opacity:0;transform:translateY(-10px)}}

.nota{align-self:center;text-align:center;color:var(--sec);font-size:13px;display:flex;flex-direction:column;gap:8px;align-items:center;max-width:90%}
.nota button{background:var(--sec-bg,rgba(255,255,255,.1));padding:8px 16px;border-radius:var(--radio-btn,14px);color:var(--texto);font-weight:700}

/* Compositor: píldora de cristal flotante */
.compositor{position:absolute;left:14px;right:14px;bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px));z-index:4;min-height:54px;border-radius:var(--radio-comp,27px);display:flex;align-items:flex-end;gap:7px;padding:0 13px 0 6px;
  background:var(--comp-bg,rgba(255,255,255,.07));-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:var(--comp-sh,inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.28))}
.compositor textarea,.compositor textarea:focus{flex:1;min-width:0;width:auto;background:none;border:0;border-radius:0;resize:none;max-height:120px;font-size:16px;font-weight:500;line-height:22px;padding:16px 4px 16px 16px;overflow-y:auto;color:var(--chat-txt,#fff);scrollbar-width:none}
.compositor textarea::placeholder{color:var(--comp-ph,rgba(255,255,255,.45))}
.compositor textarea:disabled{opacity:.75}
.cbtn{flex:none;width:36px;height:36px;margin-bottom:9px;border-radius:50%;display:grid;place-items:center;position:relative;color:var(--cbtn-ic,#cfcdd2);background:var(--cbtn-bg,rgba(255,255,255,.1));box-shadow:inset 0 0 0 1px var(--cbtn-bd,rgba(255,255,255,.08));transition:background .18s ease,color .18s ease,opacity .25s ease}
.cbtn:active{transform:scale(.92)}
.compositor.ocupado .cbtn{opacity:.5}
.enviar.lista{background:var(--send-bg,#ff6a1a);color:var(--btn-txt,#fff);box-shadow:var(--send-sh,0 0 14px rgba(255,106,26,.5))}
.enviar.girando svg{visibility:hidden}
.enviar.girando::after,.parar-oro.cargando::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:gira .6s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

.cierre{align-self:stretch;display:flex;flex-direction:column;gap:12px;margin:6px -17px 0 -21px;color:var(--texto)}
.cierre .tarjeta p{font-size:15px;line-height:1.5}
.premio{color:var(--oro);font-weight:700}
.micro{border-left:3px solid var(--oro);padding-left:10px;color:var(--micro,#e8e8ec)}

/* Parar el entreno: velo sobre el chat, no caja */
.parar{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 16px max(26px,calc(env(safe-area-inset-bottom) + 14px));
  background:var(--parar-bg,linear-gradient(180deg,rgba(6,6,6,.3) 0%,rgba(6,6,6,.6) 38%,rgba(5,5,5,.95) 74%,#050505 100%));animation:parar-velo .25s ease both}
@keyframes parar-velo{from{opacity:0}to{opacity:1}}
.parar-cont{width:100%;display:flex;flex-direction:column;align-items:center;gap:13px;animation:parar-sube .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes parar-sube{from{transform:translateY(14px)}to{transform:none}}
.parar.fuera{animation:parar-fuera .4s ease both}
@keyframes parar-fuera{to{opacity:0}}
/* Al guardar: el chat entero se funde 0,4 s sobre el templo ya pintado */
#v-chat.saliendo{display:flex;position:absolute;inset:0;height:100%;z-index:40;pointer-events:none;animation:parar-fuera .4s ease both}
.parar-q{display:flex;align-items:flex-start;justify-content:center;gap:9px;margin-bottom:8px;padding-right:20px}
.parar-q h3{font-size:19px;line-height:25px;font-weight:800;text-align:center;max-width:246px;color:var(--parar-txt,#fff)}
.parar-oro{position:relative;width:64.5%;min-width:230px;min-height:75px;border-radius:var(--radio,18px);display:grid;place-items:center;padding:10px 12px;
  background:var(--btn-bg,linear-gradient(135deg,#ff9448 0%,#ff6a1a 38%,#e24c0e 70%,#b8360a 100%));box-shadow:var(--parar-oro-sh,0 0 26px rgba(255,106,26,.55),0 0 64px rgba(255,106,26,.28),inset 0 1px 0 rgba(255,255,255,.45));transition:min-height .2s ease}
.parar-oro span{font-family:var(--px);font-style:var(--px-style,normal);font-weight:var(--btn-peso,700);font-size:calc(23px*var(--kb,1));line-height:25px;letter-spacing:var(--btn-track,.06em);text-transform:var(--px-case,uppercase);color:var(--btn-txt,#fff);text-shadow:var(--btn-txt-sh,0 2px 0 rgba(90,30,0,.6),0 0 6px rgba(90,30,0,.35))}
.parar-oro:active{transform:scale(.97)}
.parar-oro.cargando{min-height:50px}.parar-oro.cargando span{display:none}
.parar-seguir{width:60%;min-width:214px;height:46px;border-radius:var(--radio-seg,23px);background:var(--seguir-bg,#0e0909);box-shadow:inset 0 0 0 1px var(--seguir-bd,rgba(255,255,255,.1));color:var(--parar-txt,#fff);font-weight:800;font-size:15px}
.parar-seguir:active{transform:scale(.97)}

/* Pestañas crema del Dojo */
.tabs{display:flex;background:var(--tab-bg,#232327);border-radius:var(--radio,14px);padding:4px;gap:4px;box-shadow:var(--tab-sh,none)}
.tabs button{font-weight:var(--etq-peso,400);flex:1;height:38px;border-radius:calc(var(--radio,14px) - 3px);font-family:var(--etq,var(--px));font-style:var(--etq-style,normal);font-size:var(--etq-fs,13px);letter-spacing:var(--etq-track,.06em);text-transform:var(--etq-case,uppercase);color:var(--tab-txt,#fff);display:flex;align-items:center;justify-content:center;gap:6px}
.tabs button.activa{background:var(--tab-on-bg,#fff);color:var(--tab-on-txt,#1b1b1b)}
.punto-rojo{width:8px;height:8px;border-radius:50%;background:#ff2d2d;display:inline-block}

/* Inventario: rejilla de 3, tarjetas altas; la no leída lleva el degradado del acento del tema y un punto */
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.item-perg{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--texto) 4%,var(--tarjeta,#202024)) 0%,var(--tarjeta,#202024) 100%);border-radius:var(--radio-item,16px);padding:12px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-height:178px;box-shadow:var(--card-sh,none);-webkit-backdrop-filter:var(--blur,none);backdrop-filter:var(--blur,none);overflow:hidden}
.item-perg img,.item-perg .perg-ico{width:62px;height:66px;object-fit:contain;border-radius:8px;margin-top:6px;flex:none}
.item-perg b{font-size:12.5px;line-height:1.22;font-weight:600;color:var(--sec);flex:1;display:flex;align-items:center;justify-content:center;padding:0 2px}
.item-perg small{font-size:10px;font-weight:600;line-height:1.2;color:var(--sec)}
.item-perg .cat-analisis{color:var(--rojo)}
.item-perg .cat-pildora{color:var(--oro)}
.item-perg .cat-diagnostico{color:var(--txt2,#d6d6da)}
.item-perg .cat-evidencia{color:#7ad3a0}
.item-perg.nuevo{background:linear-gradient(165deg,color-mix(in srgb,var(--rojo) 38%,#000) 0%,color-mix(in srgb,var(--rojo) 72%,#000) 100%);box-shadow:none}
.item-perg.nuevo b{color:#fff}
.item-perg.nuevo .cat-analisis{color:color-mix(in srgb,var(--rojo) 40%,#fff)}
.item-perg.nuevo .cat-diagnostico{color:#f1f1f4}
.item-perg .punto{position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--rojo);box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.item-perg.vacia{background:color-mix(in srgb,var(--texto) 4%,transparent);box-shadow:none;pointer-events:none}
.item-perg.vacia .perg-ico{opacity:.14;filter:grayscale(1);margin-top:36px}
.vacio{grid-column:1/-1;color:var(--sec);text-align:center;padding:40px 10px;font-size:14px}

/* Contenido */
.lista-contenido{display:flex;flex-direction:column;gap:14px}
.curso{background:var(--tarjeta,#202024);border-radius:var(--radio,14px);overflow:hidden;text-align:left;width:100%;box-shadow:var(--card-sh,none);-webkit-backdrop-filter:var(--blur,none);backdrop-filter:var(--blur,none)}
.curso .miniatura{height:150px;background:var(--mini-bg,radial-gradient(60% 80% at 50% 60%,#7a0d12,#1c0507 80%));display:grid;place-items:center}
.curso .miniatura img{width:150px}
.curso .texto{padding:14px 15px 15px;display:flex;flex-direction:column;gap:6px}
.curso h3{font-family:var(--px);font-style:var(--px-style,normal);font-weight:var(--px-peso,500);font-size:calc(18px*var(--k,1));letter-spacing:var(--px-track,.06em);text-transform:var(--px-case,uppercase);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.curso p{font-size:13.5px;color:var(--txt2,#cfcfd4);line-height:1.4}
.curso .prog{height:5px;border-radius:3px;background:var(--track,#3a3a40);margin-top:6px;overflow:hidden}
.curso .prog i{display:block;height:100%;background:var(--fill,#ff6a1a);border-radius:3px}
.curso .pie{display:flex;justify-content:space-between;font-size:12px;color:var(--txt2,#d8d8dc);margin-top:4px}

/* Comunidad */
.cab-com{display:flex;align-items:center;justify-content:space-between;padding:22px 20px 10px;margin-top:env(safe-area-inset-top)}
.cab-com svg{width:26px;height:26px;color:var(--ic,var(--rojo))}
.avatar-chico{width:40px;height:40px;border-radius:50%;border:2px solid var(--ring,#38d07c);overflow:hidden;background:#3a0d14;display:grid;place-items:center;font-weight:800}
.avatar-chico img{width:100%;height:100%;object-fit:cover}
.posts{display:flex;flex-direction:column;gap:12px}
.post{background:var(--tarjeta,#1f1f23);border-radius:var(--radio,16px);padding:16px 15px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--card-sh,none);-webkit-backdrop-filter:var(--blur,none);backdrop-filter:var(--blur,none)}
.post .quien{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt2,#e6e6ea)}
.post .quien i{width:28px;height:28px;border-radius:50%;background:var(--track,#3a3a40);display:block}
.post h3{font-size:17px;font-weight:800}
.post p{font-size:14px;line-height:1.45;color:var(--txt2,#d6d6da);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post .pie{display:flex;align-items:center;justify-content:space-between;margin-top:4px;font-size:13px;color:var(--txt2,#cfcfd4)}
.post .pie .em{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--rojo);font-size:10px;font-weight:800;color:var(--em-txt,#fff)}
.fab{position:absolute;right:26px;bottom:150px;width:56px;height:56px;border-radius:50%;background:var(--fab-bg,#ff6a1a);color:var(--btn-txt,#fff);font-size:32px;line-height:1;box-shadow:var(--fab-sh,0 8px 22px rgba(255,106,26,.45));z-index:4}

/* Tienda: objetos (tarjeta clara en temas claros, del tema en los oscuros) y cofres */
.tienda{display:flex;flex-direction:column;gap:14px}
.tienda-sec{font-size:22px;font-weight:600;color:var(--texto);margin:4px 2px -2px}
.producto{background:var(--prod-bg,#f4f4f5);color:var(--prod-txt,#1a1a1a);border-radius:18px;padding:16px 14px 14px 12px;display:flex;gap:12px;align-items:flex-start;text-align:left;box-shadow:var(--card-sh,none);-webkit-backdrop-filter:var(--blur,none);backdrop-filter:var(--blur,none)}
.producto .icono{width:64px;height:64px;flex:none;margin-top:6px;border-radius:14px;background:color-mix(in srgb,var(--prod-txt,#1a1a1a) 8%,transparent);display:grid;place-items:center}
.producto .icono img{width:52px;height:52px;object-fit:contain;margin:0}
.producto .icono svg{width:34px;height:34px;color:var(--gema-2,#b56cf0)}
.producto .texto{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.producto h3{font-size:16px;font-weight:700}
.producto p{font-size:13px;line-height:1.4;color:var(--prod-sub,#444)}
.producto .usos{font-size:13px;color:var(--usos,#1d7fe0);font-weight:600;margin-top:2px}
.producto .pie-p{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.precio{display:inline-flex;align-items:center;gap:6px;border-radius:16px;padding:7px 12px 7px 14px;font-family:var(--px);font-style:var(--px-style,normal);font-weight:var(--btn-peso,700);font-size:calc(17px*var(--kb,1));letter-spacing:.02em}
.precio svg{width:17px;height:17px}
.precio.moneda{background:var(--moneda-bg,linear-gradient(135deg,#ffd15a,#e8a81c));color:var(--moneda-txt,#2a1a00);box-shadow:var(--moneda-sh,0 3px 0 #a87410)}
.precio.gema{background:var(--gema-bg,linear-gradient(135deg,#8b3dff,#5b21c8));color:#fff;box-shadow:var(--gema-sh,0 3px 0 #3d1590)}
.cofres{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cofre{border-radius:18px;overflow:hidden;background:var(--prod-gris-bg,#2a2a2e);color:var(--prod-gris-txt,var(--texto));display:flex;flex-direction:column;text-align:center;min-height:148px;box-shadow:var(--card-sh,none);-webkit-backdrop-filter:var(--blur,none);backdrop-filter:var(--blur,none)}
.cofre .cuerpo-c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 8px}
.cofre img{width:64px;height:64px;object-fit:contain}
.cofre h4{font-size:14px;font-weight:600}
.cofre .precios{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px;background:rgba(0,0,0,.28);font-family:var(--px);font-style:var(--px-style,normal);font-weight:var(--btn-peso,700);font-size:calc(16px*var(--kb,1))}
.cofre .precios svg{width:16px;height:16px}
.cofre .precios .m{color:var(--moneda,#f0b43a)}.cofre .precios .g{color:var(--gema-2,#b56cf0)}
.cofre .precios i{font-style:normal;font-family:var(--cuerpo);font-weight:500;font-size:12px;opacity:.7}
.cofre.prox{background:color-mix(in srgb,var(--texto) 5%,transparent);box-shadow:none;color:var(--sec)}
.cofre.prox .q{font-size:40px;font-weight:800;line-height:1;opacity:.35}
.cofre.prox h4{font-weight:500;opacity:.6}

/* Mi templo (mapa) */
.modal{position:fixed;inset:0;background:var(--modal-bg,rgba(0,0,0,.62));display:flex;justify-content:center;align-items:flex-start;padding:max(28px,calc(env(safe-area-inset-top) + 10px)) 12px 16px;z-index:20}
.mapa-caja{width:100%;max-width:400px;max-height:calc(100dvh - 44px);background:var(--mapa-bg,#2a2a2f);border-radius:var(--radio-mapa,22px);padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--mapa-sh,0 20px 60px rgba(0,0,0,.6))}
.mapa-cab{display:flex;justify-content:space-between;align-items:center}
.mapa-cuenta{font-size:14px;color:var(--txt2,#e2e2e6);padding-left:6px}
.mapa-scroll{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0}
#mapa-svg text{font-family:Manrope,sans-serif}
.mapa-pie{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--txt2,#cfcfd4);font-size:12px;letter-spacing:.14em;margin-top:-10px}
.mapa-pie img{width:96px}
.mapa-pie b{font-size:20px;color:var(--texto)}

/* Pergamino: rollo del Dojo sobre el fondo oscurecido */
.pergamino{position:fixed;inset:0;z-index:30;background:var(--perg-velo,rgba(14,8,10,.72));-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);display:flex;justify-content:center}
.rollo{position:relative;width:100%;max-width:420px;height:100%;display:flex;flex-direction:column;padding-top:max(40px,calc(env(safe-area-inset-top) + 20px))}
.rollo-arriba{position:relative;z-index:2;width:100%;height:auto;flex:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.rollo .cerrar-x{position:absolute;right:16px;top:max(58px,calc(env(safe-area-inset-top) + 38px));z-index:3}
.pergamino-cont{flex:1;min-height:0;overflow-y:auto;margin:-62px 6.4% 0;padding:78px 20px 70px;color:var(--perg-txt,#2a1d12);
  background:url(img/pergamino-tex.png) center top/100% auto repeat-y,#e4d3ad;box-shadow:inset 8px 0 14px -10px rgba(0,0,0,.35),inset -8px 0 14px -10px rgba(0,0,0,.35)}
.perg-tipo{display:inline-block;background:#2fd1b6;color:#06231d;font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;margin-bottom:12px}
.pergamino h2{font-family:var(--px);font-style:var(--px-style,normal);font-weight:var(--px-peso,600);font-size:calc(26px*var(--k,1));line-height:1.12;letter-spacing:var(--px-track,.04em);text-transform:var(--px-case,uppercase);margin-bottom:18px;color:var(--perg-titulo,#1f1510)}
#perg-texto{font-family:var(--px);font-weight:400;font-size:16px;line-height:1.5;color:var(--perg-txt,#3a2a1c)}
#perg-texto p+p{margin-top:14px}
#perg-texto b{font-weight:600;color:var(--perg-titulo,#1f1510)}

.aviso{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--aviso-bg,#24242c);color:var(--aviso-txt,var(--texto));padding:10px 16px;border-radius:var(--radio-btn,12px);font-size:14px;z-index:40;max-width:90%;text-align:center;box-shadow:var(--aviso-sh,none)}

/* Los iconos activos de la barra son recortes rojos del Dojo: se giran hacia el naranja hasta que haya iconos propios */
.nav button img[src*="-on.png"],.nav button img[src="img/nav-torii.png"]{filter:hue-rotate(18deg) saturate(1.25) brightness(1.08)}


/* =====================================================================
   TEMAS · solo se activan con body[data-tema]. Sin tema, nada de lo de abajo se aplica.
   ===================================================================== */

/* ---- Comunes a los 5 temas: marca, cabecera, inicio sin hueco, pergaminos ---- */
.wm{display:inline-block;white-space:nowrap;line-height:1}
body[data-tema] .logo{font-size:46px;letter-spacing:0;text-shadow:none;color:var(--texto);margin-bottom:12px}
body[data-tema] .cab-dojo{height:118px}
body[data-tema] .cab-wm{display:block;position:absolute;left:16px;top:12px;font-size:19px;line-height:1;z-index:2}
body[data-tema] .cab-dojo .avatar{top:42px;left:16px}
body[data-tema] .cab-nombre{left:48px;top:45px}
body[data-tema] .cab-xp{left:70px;top:99px}
body[data-tema] .cab-der{top:8px;gap:12px}
body[data-tema] .chip{font-family:var(--cuerpo);font-weight:800;font-size:15px}
body[data-tema] .lado-btn.brillo{color:var(--rojo)}
body[data-tema] .nav{width:296px}
body[data-tema] .templo-centro{padding-bottom:116px}
body[data-tema] .escena{height:236px;margin-bottom:6px}
body[data-tema] .isla{width:226px}

.hoy{display:none}
body[data-tema] .hoy{display:flex;flex-direction:column;gap:10px;width:100%;max-width:343px;margin-top:auto;padding-top:16px}
.h-card{display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;padding:14px 16px;border-radius:var(--radio,16px);background:var(--tarjeta);box-shadow:var(--card-sh,inset 0 0 0 1px var(--borde));-webkit-backdrop-filter:var(--blur,none);backdrop-filter:var(--blur,none);color:var(--texto)}
.h-et{font-family:var(--etq,var(--cuerpo));font-style:var(--etq-style,normal);font-size:var(--etq-fs-h,11px);letter-spacing:var(--etq-track,.08em);text-transform:var(--etq-case,uppercase);color:var(--sec);font-weight:600}
.h-card>*{min-width:0}
.h-tit{font-family:var(--px);font-style:var(--px-style,normal);font-weight:700;font-size:var(--h-fs,16px);letter-spacing:var(--px-track,.02em);line-height:1.15;text-transform:none;color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-bar{height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.h-bar i{display:block;height:100%;border-radius:3px;background:var(--fill);transition:width .6s ease}
.h-pie{font-size:12px;color:var(--sec);font-weight:600}
.h-perg{cursor:pointer}
.h-perg .h-tit{font-size:var(--h-fs2,14px)}
.h-perg.vacio-p .h-tit{font-family:var(--cuerpo);font-style:normal;font-weight:600;font-size:14px;color:var(--txt2);letter-spacing:0}
.h-perg:active{transform:scale(.985)}

/* Pergaminos con tema: sin el rollo del Dojo, hoja de tarjeta */
body[data-tema] .rollo-arriba{display:none}
body[data-tema] .rollo{padding-top:max(44px,calc(env(safe-area-inset-top) + 24px));padding-bottom:20px}
body[data-tema] .rollo .cerrar-x{top:max(60px,calc(env(safe-area-inset-top) + 40px));right:30px}
body[data-tema] .pergamino-cont{margin:0 16px;padding:26px 20px 56px;border-radius:var(--radio-perg,var(--radio));background:var(--perg-bg);box-shadow:var(--perg-sh);color:var(--perg-txt)}
body[data-tema] .pergamino-cont{flex:0 1 auto}
body[data-tema] .pergamino h2{padding-right:38px;margin-bottom:16px}
body[data-tema] #perg-texto{font-family:var(--cuerpo);font-size:15px;line-height:1.62;font-weight:500}
body[data-tema] .perg-tipo{font-family:var(--etq,var(--cuerpo));letter-spacing:var(--etq-track,0);text-transform:var(--etq-case,none);border-radius:calc(var(--radio) / 3)}

/* ---- 1 · BRASA: negro, cristal y naranja con resplandor ---- */
body[data-tema="brasa"]{
  --px:Manrope,-apple-system,"Segoe UI",sans-serif; --px-peso:800; --px-style:normal; --px-track:.04em; --k:.8; --kb:.72; --btn-track:.04em; --btn-peso:800; --etq:Manrope,-apple-system,"Segoe UI",sans-serif; --etq-case:uppercase; --etq-track:.08em; --etq-style:normal; --etq-peso:600; --etq-fs:11px; --etq-fs-h:10.5px; --h-fs:15px; --h-fs2:14px;
  --fondo:#070707; --texto:#f5f5f5; --sec:#a3a3ab; --txt2:rgba(255,255,255,.78);
  --rojo:#ff6a1a; --oro:#ff8a3d; --ic:#ff8a3d; --glow:0 0 18px rgba(255,106,26,.45);
    --tarjeta:rgba(255,255,255,.05); --borde:rgba(255,255,255,.1); --blur:blur(16px) saturate(1.25);
  --card-sh:inset 0 0 0 1px rgba(255,255,255,.1); --radio:16px; --radio-btn:14px; --radio-nav:18px; --radio-comp:18px; --radio-user:16px; --radio-item:14px; --radio-seg:14px; --radio-mapa:20px; --radio-perg:16px;
  --bg-templo:radial-gradient(75% 36% at 50% 44%,rgba(255,106,26,.34),rgba(255,106,26,.09) 55%,transparent 78%),#070707;
  --bg-entrar:radial-gradient(70% 45% at 50% 52%,rgba(255,106,26,.3),#070707 72%);
  --bg-portada:radial-gradient(70% 40% at 50% 50%,rgba(255,106,26,.3),#070707 75%);
  --bg-chat:radial-gradient(110% 42% at 0% 0%,rgba(255,106,26,.16),transparent 62%),#070707;
  --bg-pantalla:radial-gradient(90% 30% at 50% 0%,rgba(255,106,26,.1),transparent 70%),#070707;
  --velo:7,7,7; --cab-bg:transparent;
  --btn-bg:linear-gradient(180deg,#ff7f36,#ff6a1a); --btn-txt:#150902; --btn-txt-sh:none; --press:1px;
  --btn-sh:0 0 18px rgba(255,106,26,.45),inset 0 1px 0 rgba(255,255,255,.3); --btn-sh-act:0 0 8px rgba(255,106,26,.4);
  --precio-sh:0 0 14px rgba(255,106,26,.4); --parar-oro-sh:0 0 24px rgba(255,106,26,.5);
  --fill:linear-gradient(90deg,#ff6a1a,#ff9a55); --track:rgba(255,255,255,.1); --bar-txt:#fff; --chat-track:rgba(255,255,255,.12); --chat-fill:linear-gradient(90deg,#ff6a1a,#ff9a55); --chat-fill-glow:0 0 10px rgba(255,106,26,.6);
  --nav-bg:rgba(255,255,255,.06); --nav-sh:inset 0 0 0 1px rgba(255,255,255,.12),0 10px 30px rgba(0,0,0,.5); --nav-ic:rgba(255,255,255,.7); --nav-ic-on:#ff6a1a; --nav-glow:drop-shadow(0 0 7px rgba(255,106,26,.8));
  --placa-bg:rgba(255,255,255,.06); --placa-sh:inset 0 0 0 1px rgba(255,255,255,.1); --placa-sec:#b9b9c0;
  --lado-bg:rgba(255,255,255,.06); --lado-sh:inset 0 0 0 1px rgba(255,255,255,.12); --brillo:inset 0 0 0 1px rgba(255,106,26,.6),0 0 20px rgba(255,106,26,.5);
  --coach-bg:rgba(255,255,255,.06); --coach-sh:inset 0 0 0 1px rgba(255,106,26,.4),0 0 22px rgba(255,106,26,.12); --user-bg:rgba(255,255,255,.1); --user-sh:inset 0 0 0 1px rgba(255,255,255,.08);
  --comp-bg:rgba(255,255,255,.06); --comp-sh:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 24px rgba(0,0,0,.4);
  --send-bg:#ff6a1a; --send-sh:0 0 16px rgba(255,106,26,.55); --fab-bg:linear-gradient(180deg,#ff7f36,#ff6a1a); --fab-sh:0 0 22px rgba(255,106,26,.55);
  --tab-bg:rgba(255,255,255,.05); --tab-sh:inset 0 0 0 1px rgba(255,255,255,.1); --tab-on-bg:#ff6a1a; --tab-on-txt:#150902; --tab-txt:#d6d6da;   --pill-bg:rgba(255,255,255,.06); --pill-sh:inset 0 0 0 1px rgba(255,255,255,.1);
  --item-bg:rgba(255,255,255,.05); --item-sh:inset 0 0 0 1px rgba(255,255,255,.1); --item-nuevo:rgba(255,106,26,.16); --item-punto:#ff6a1a;
  --prod-bg:rgba(255,255,255,.05); --prod-txt:#f5f5f5; --prod-sub:#bdbdc4; --prod-gris-bg:rgba(255,255,255,.05); --prod-gris-sub:#bdbdc4; --usos:#ff8a3d;
  --mini-bg:radial-gradient(60% 80% at 50% 60%,rgba(255,106,26,.45),rgba(255,106,26,.05) 80%);
  --perg-velo:rgba(5,5,5,.78); --perg-bg:#17120e; --perg-txt:#e8e2dc; --perg-titulo:#fff; --perg-sh:inset 0 0 0 1px rgba(255,106,26,.45),0 0 30px rgba(255,106,26,.15);
  --cerrar-bg:rgba(255,255,255,.08); --cerrar-sh:inset 0 0 0 1px rgba(255,255,255,.12); --chatx-bg:rgba(255,255,255,.07); --chatx-bd:rgba(255,255,255,.12);
  --chat-tit:#ffb98a; --xp-c:#ffb98a; --pens:#ff8a3d; --seguir-bg:rgba(255,255,255,.06); --seguir-bd:rgba(255,255,255,.14);
  --mapa-bg:#101010; --mapa-sh:inset 0 0 0 1px rgba(255,255,255,.1),0 20px 60px rgba(0,0,0,.7); --aviso-bg:#1b1b1d; --aviso-sh:inset 0 0 0 1px rgba(255,255,255,.12);
  --mapa-on:#ff6a1a; --mapa-off:#3a3a3f; --mapa-nodo:#2b2b2f; --mapa-txt-off:#7f7f86; --ring:#ff6a1a;
  --input-bg:rgba(255,255,255,.06); --input-bd:rgba(255,255,255,.14); --sec-bg:rgba(255,255,255,.08);
}
body[data-tema="brasa"] .wm{font:800 1em/1 Manrope,-apple-system,"Segoe UI",sans-serif;letter-spacing:.18em;color:#fff}
body[data-tema="brasa"] .wm i{font-style:normal;color:var(--rojo);text-shadow:0 0 .7em rgba(255,106,26,.9)}
body[data-tema="brasa"] .logo .wm{font-size:44px}

/* ---- 2 · VINO: burdeos de terciopelo, oro y pergamino crema ---- */
body[data-tema="vino"]{
  --px:Manrope,-apple-system,"Segoe UI",sans-serif; --px-peso:800; --px-style:normal; --px-track:.04em; --k:.8; --kb:.72; --btn-track:.04em; --btn-peso:800; --etq:Manrope,-apple-system,"Segoe UI",sans-serif; --etq-case:uppercase; --etq-track:.08em; --etq-style:normal; --etq-peso:600; --etq-fs:11px; --etq-fs-h:10.5px; --h-fs:15px; --h-fs2:14px;
  --fondo:#2a0a12; --texto:#f4ead8; --sec:#b99aa0; --txt2:rgba(244,234,216,.8);
  --rojo:#d9b36a; --oro:#d9b36a; --ic:#d9b36a;
      --tarjeta:#3a1019; --borde:rgba(217,179,106,.25); --card-sh:inset 0 0 0 1px rgba(217,179,106,.25); --radio:16px; --radio-btn:14px; --radio-nav:18px; --radio-comp:18px; --radio-user:16px; --radio-item:14px; --radio-seg:14px; --radio-mapa:20px; --radio-perg:14px;
  --bg-vista:radial-gradient(120% 90% at 50% 38%,#3a1019 0%,#2a0a12 52%,#1a060b 100%);
  --bg-templo:radial-gradient(75% 36% at 50% 44%,rgba(217,179,106,.2),transparent 70%),radial-gradient(130% 95% at 50% 40%,#3a1019 0%,#2a0a12 52%,#150408 100%);
  --bg-entrar:radial-gradient(120% 90% at 50% 45%,#3a1019 0%,#2a0a12 52%,#150408 100%);
  --bg-portada:radial-gradient(120% 90% at 50% 45%,#3a1019 0%,#2a0a12 52%,#150408 100%);
  --bg-chat:radial-gradient(130% 95% at 50% 40%,#3a1019 0%,#2a0a12 55%,#170509 100%);
  --bg-pantalla:radial-gradient(130% 95% at 50% 30%,#3a1019 0%,#2a0a12 52%,#170509 100%);
  --velo:42,10,18; --cab-bg:transparent;
  --btn-bg:linear-gradient(180deg,#f1d58a,#c9a24f); --btn-txt:#2a0a12; --btn-txt-sh:none; --press:1px;
  --btn-sh:0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.45); --btn-sh-act:0 2px 8px rgba(0,0,0,.4);
  --precio-sh:inset 0 1px 0 rgba(255,255,255,.4); --parar-oro-sh:0 8px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.45);
  --fill:linear-gradient(90deg,#c9a24f,#f1d58a); --track:rgba(244,234,216,.14); --bar-txt:#f4ead8; --chat-track:rgba(244,234,216,.14); --chat-fill:linear-gradient(90deg,#c9a24f,#f1d58a); --chat-fill-glow:none;
  --nav-bg:#3a1019; --nav-sh:inset 0 0 0 1px rgba(217,179,106,.3),0 10px 30px rgba(0,0,0,.45); --nav-ic:rgba(217,179,106,.55); --nav-ic-on:#f1d58a; --nav-glow:drop-shadow(0 0 6px rgba(217,179,106,.5));
  --placa-bg:#3a1019; --placa-sh:inset 0 0 0 1px rgba(217,179,106,.3); --placa-sec:#b99aa0;
  --lado-bg:#3a1019; --lado-sh:inset 0 0 0 1px rgba(217,179,106,.3),0 4px 12px rgba(0,0,0,.3); --brillo:inset 0 0 0 1px #d9b36a,0 0 18px rgba(217,179,106,.35);
  --coach-bg:#3a1019; --coach-sh:inset 0 0 0 1px rgba(217,179,106,.35); --coach-txt:#f4ead8; --user-bg:rgba(244,234,216,.1); --user-sh:inset 0 0 0 1px rgba(244,234,216,.12); --user-txt:#f4ead8; --chat-txt:#f4ead8;
  --comp-bg:rgba(58,16,25,.85); --comp-sh:inset 0 0 0 1px rgba(217,179,106,.3),0 8px 24px rgba(0,0,0,.35); --comp-ph:rgba(244,234,216,.4); --cbtn-ic:#d9b36a; --cbtn-bg:rgba(217,179,106,.12); --cbtn-bd:rgba(217,179,106,.25);
  --send-bg:linear-gradient(180deg,#f1d58a,#c9a24f); --send-sh:0 0 12px rgba(217,179,106,.4); --fab-bg:linear-gradient(180deg,#f1d58a,#c9a24f); --fab-sh:0 8px 20px rgba(0,0,0,.4);
  --tab-bg:#3a1019; --tab-sh:inset 0 0 0 1px rgba(217,179,106,.25); --tab-on-bg:linear-gradient(180deg,#f1d58a,#c9a24f); --tab-on-txt:#2a0a12; --tab-txt:#d9b36a;
  --pill-bg:#3a1019; --pill-sh:inset 0 0 0 1px rgba(217,179,106,.25); --pill-txt:#f4ead8;
  --item-bg:#efe3c6; --item-sh:inset 0 0 0 1px #d9b36a; --item-txt:#2a0a12; --item-nuevo:#f7edd2; --item-punto:#8f1d2e;
  --prod-bg:#3a1019; --prod-txt:#f4ead8; --prod-sub:#c6b0a8; --prod-gris-bg:#3a1019; --prod-gris-sub:#c6b0a8; --usos:#d9b36a;
  --mini-bg:radial-gradient(60% 80% at 50% 60%,rgba(217,179,106,.3),rgba(42,10,18,0) 80%);
  --perg-velo:rgba(20,4,8,.8); --perg-bg:#efe3c6; --perg-txt:#3a2a1c; --perg-titulo:#2a0a12; --perg-sh:inset 0 0 0 1px #d9b36a,inset 0 0 0 5px #efe3c6,inset 0 0 0 6px rgba(201,162,79,.6),0 16px 40px rgba(0,0,0,.45);
  --cerrar-bg:#3a1019; --cerrar-ic:#d9b36a; --cerrar-sh:inset 0 0 0 1px rgba(217,179,106,.3); --chatx-bg:#3a1019; --chatx-bd:rgba(217,179,106,.3); --chatx-ic:#d9b36a;
  --chat-tit:#d9b36a; --chat-tit-case:uppercase; --xp-c:#d9b36a; --pens:#d9b36a; --seguir-bg:#3a1019; --seguir-bd:rgba(217,179,106,.35); --parar-bg:linear-gradient(180deg,rgba(26,6,11,.35) 0%,rgba(26,6,11,.7) 40%,rgba(21,4,8,.96) 76%,#150408 100%); --parar-txt:#f4ead8;
  --mapa-bg:#2a0a12; --mapa-sh:inset 0 0 0 1px rgba(217,179,106,.3),0 20px 60px rgba(0,0,0,.6); --aviso-bg:#3a1019; --aviso-sh:inset 0 0 0 1px rgba(217,179,106,.3);
  --mapa-on:#d9b36a; --mapa-off:#6a4a52; --mapa-nodo:#4a2630; --mapa-txt-off:#a58891; --ring:#d9b36a; --em-txt:#2a0a12;
  --input-bg:rgba(244,234,216,.07); --input-bd:rgba(217,179,106,.3); --sec-bg:rgba(244,234,216,.1); --micro:#f4ead8;
  --restantes:#d9b36a; --chip-txt:#f4ead8; --chip-oro:#f1d58a; --chip-sh:none;
}
body[data-tema="vino"] .wm{display:inline-flex;align-items:center;font:800 1em/1 Manrope,-apple-system,"Segoe UI",sans-serif;letter-spacing:.06em;gap:.5em;color:var(--texto)}
body[data-tema="vino"] .wm em{font-style:normal;font-weight:800;font-size:1em;letter-spacing:.06em}
body[data-tema="vino"] .sello{display:inline-grid;place-items:center;width:1.45em;height:1.45em;border-radius:48% 52% 46% 54%/52% 46% 54% 48%;background:radial-gradient(circle at 34% 28%,#f6dd96 0%,#d9b36a 45%,#a9852f 100%);color:#2a0a12;font:800 1em/1 Manrope,-apple-system,"Segoe UI",sans-serif;font-style:normal;box-shadow:0 0 0 .07em #b8923f,.09em .05em 0 .08em #c9a24f,-.07em .1em 0 .05em #d9b36a,0 .12em .3em rgba(0,0,0,.55),inset 0 0 0 .08em rgba(255,255,255,.22),inset -.1em -.1em .2em rgba(90,60,10,.35)}
body[data-tema="vino"] .logo .wm{font-size:40px}
body[data-tema="vino"] .cab-wm{top:7px;font-size:17px}
body[data-tema="vino"] .cab-wm .sello{width:1.3em;height:1.3em}

/* ---- 3 · MARFIL: tema claro, serif cursiva y rojo sobrio ---- */
body[data-tema="marfil"]{
  --px:Manrope,-apple-system,"Segoe UI",sans-serif; --px-peso:800; --px-style:normal; --px-track:.04em; --k:.8; --kb:.72; --btn-track:.04em; --btn-peso:800; --etq:Manrope,-apple-system,"Segoe UI",sans-serif; --etq-case:uppercase; --etq-track:.08em; --etq-style:normal; --etq-peso:600; --etq-fs:11px; --etq-fs-h:10.5px; --h-fs:15px; --h-fs2:14px;
  --fondo:#efe9e1; --texto:#1a1a1a; --sec:#6b6460; --txt2:#4a4540;
  --rojo:#a3151f; --oro:#a3151f; --ic:#a3151f;
      --tarjeta:#ffffff; --borde:rgba(0,0,0,.06); --card-sh:0 10px 30px rgba(0,0,0,.08); --radio:18px; --radio-btn:14px; --radio-nav:20px; --radio-comp:18px; --radio-user:16px; --radio-item:16px; --radio-seg:14px; --radio-mapa:22px; --radio-perg:16px;
  --bg-templo:radial-gradient(70% 34% at 50% 44%,rgba(163,21,31,.1),transparent 70%),#efe9e1;
  --bg-entrar:radial-gradient(70% 45% at 50% 52%,rgba(163,21,31,.1),#efe9e1 70%);
  --bg-portada:radial-gradient(70% 40% at 50% 50%,rgba(163,21,31,.1),#efe9e1 75%);
  --bg-chat:#efe9e1; --bg-pantalla:#efe9e1; --velo:239,233,225; --cab-bg:transparent;
  --btn-bg:#111111; --btn-txt:#ffffff; --btn-txt-sh:none; --press:1px;
  --btn-sh:0 8px 20px rgba(0,0,0,.2); --btn-sh-act:0 3px 8px rgba(0,0,0,.2); --precio-sh:none; --parar-oro-sh:0 10px 26px rgba(0,0,0,.25);
  --fill:#a3151f; --track:rgba(0,0,0,.1); --bar-txt:#1a1a1a; --track-bd:rgba(0,0,0,.04); --chat-track:rgba(0,0,0,.1); --chat-fill:#a3151f; --chat-fill-glow:none;
  --nav-bg:#ffffff; --nav-sh:inset 0 0 0 1px rgba(0,0,0,.07),0 10px 30px rgba(0,0,0,.1); --nav-ic:rgba(163,21,31,.5); --nav-ic-on:#a3151f; --nav-glow:none;
  --placa-bg:#ffffff; --placa-sh:0 4px 14px rgba(0,0,0,.08); --placa-sec:#6b6460; --placa-txt:#1a1a1a;
  --lado-bg:#ffffff; --lado-sh:0 6px 18px rgba(0,0,0,.1); --brillo:0 6px 18px rgba(163,21,31,.25);
  --coach-bg:#ffffff; --coach-sh:inset 0 0 0 1px rgba(163,21,31,.55),0 6px 18px rgba(0,0,0,.05); --coach-txt:#1a1a1a; --user-bg:#e1dbd2; --user-sh:none; --user-txt:#1a1a1a; --chat-txt:#1a1a1a;
  --comp-bg:#ffffff; --comp-sh:inset 0 0 0 1px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.08); --comp-ph:rgba(0,0,0,.4); --cbtn-ic:#6b6460; --cbtn-bg:rgba(0,0,0,.06); --cbtn-bd:rgba(0,0,0,.06);
  --send-bg:#111111; --send-sh:none; --fab-bg:#111111; --fab-sh:0 8px 20px rgba(0,0,0,.25);
  --tab-bg:#e5dfd6; --tab-sh:none; --tab-on-bg:#111111; --tab-on-txt:#ffffff; --tab-txt:#4a4540;
  --pill-bg:#ffffff; --pill-sh:0 4px 14px rgba(0,0,0,.07); --pill-txt:#1a1a1a;
  --item-bg:#f6efde; --item-sh:inset 0 0 0 1px rgba(163,21,31,.35); --item-txt:#2a1d12; --item-nuevo:#ffffff; --item-punto:#a3151f;
  --prod-bg:#ffffff; --prod-txt:#1a1a1a; --prod-sub:#5a5550; --prod-gris-bg:#ffffff; --prod-gris-txt:#1a1a1a; --prod-gris-sub:#5a5550; --usos:#a3151f;
  --mini-bg:radial-gradient(60% 80% at 50% 60%,#2a0c10,#14060a 85%);
  --perg-velo:rgba(239,233,225,.82); --perg-bg:#f6efde; --perg-txt:#3a2f26; --perg-titulo:#1a1a1a; --perg-sh:inset 0 0 0 1px #a3151f,0 14px 36px rgba(0,0,0,.14);
  --cerrar-bg:#ffffff; --cerrar-ic:#1a1a1a; --cerrar-sh:0 2px 10px rgba(0,0,0,.14); --chatx-bg:#ffffff; --chatx-bd:rgba(0,0,0,.1); --chatx-ic:#1a1a1a;
  --chat-tit:#a3151f; --xp-c:#a3151f; --pens:#a3151f; --seguir-bg:#ffffff; --seguir-bd:rgba(0,0,0,.12); --parar-bg:linear-gradient(180deg,rgba(239,233,225,.4) 0%,rgba(239,233,225,.85) 40%,#efe9e1 78%); --parar-txt:#1a1a1a;
  --modal-bg:rgba(30,20,20,.35); --mapa-bg:#ffffff; --mapa-sh:0 20px 60px rgba(0,0,0,.2); --aviso-bg:#111111; --aviso-txt:#ffffff; --aviso-sh:0 8px 24px rgba(0,0,0,.25);
  --mapa-on:#a3151f; --mapa-off:#cfc7bd; --mapa-nodo:#ddd5ca; --mapa-txt-off:#8a8178; --ring:#a3151f; --em-txt:#ffffff;
  --input-bg:#ffffff; --input-bd:rgba(0,0,0,.14); --sec-bg:rgba(0,0,0,.06); --micro:#2a2622; --ph:rgba(0,0,0,.38);
  --restantes:#6b6460; --chip-txt:#1a1a1a; --chip-oro:#a3151f; --chip-sh:none; --isla-filter:drop-shadow(0 14px 22px rgba(60,10,10,.35));
}
body[data-tema="marfil"] .isla{width:226px;height:226px;object-fit:contain;border-radius:50%;background:radial-gradient(circle at 50% 42%,#5a1519 0%,#2a0a0e 62%,#16060a 100%);-webkit-mask:radial-gradient(circle closest-side,#000 88%,transparent 100%);mask:radial-gradient(circle closest-side,#000 88%,transparent 100%);filter:none}
body[data-tema="marfil"] .wm{font:800 1em/1 Manrope,-apple-system,"Segoe UI",sans-serif;color:var(--rojo);letter-spacing:.06em}
body[data-tema="marfil"] .logo .wm{font-size:42px}
body[data-tema="marfil"] .cab-wm{font-size:17px;top:10px}
body[data-tema="marfil"] .escena{height:226px}
body[data-tema="marfil"] .h-card{padding:12px 16px;gap:5px}
body[data-tema="marfil"] .templo-centro .titulo-px{margin-top:8px}
body[data-tema="marfil"] .cab-nombre small b{color:var(--rojo)}
body[data-tema="marfil"] .burbuja.coach .pal,body[data-tema="marfil"] .burbuja .pal{color:inherit}

/* ---- 4 · CARBÓN: grafito monocromo, naranja solo en estados activos ---- */
body[data-tema="carbon"]{
  --px:Manrope,-apple-system,"Segoe UI",sans-serif; --px-peso:800; --px-style:normal; --px-track:.04em; --k:.8; --kb:.72; --btn-track:.04em; --btn-peso:800; --etq:Manrope,-apple-system,"Segoe UI",sans-serif; --etq-case:uppercase; --etq-track:.08em; --etq-style:normal; --etq-peso:600; --etq-fs:11px; --etq-fs-h:10.5px; --h-fs:15px; --h-fs2:14px;
  --fondo:#121214; --texto:#ffffff; --sec:#8b8b93; --txt2:rgba(255,255,255,.78);
  --rojo:#ff6a1a; --oro:#ffffff; --ic:rgba(255,255,255,.8);
      --tarjeta:#1c1c20; --borde:rgba(255,255,255,.08); --card-sh:inset 0 0 0 1px rgba(255,255,255,.08); --radio:16px; --radio-btn:14px; --radio-nav:18px; --radio-comp:18px; --radio-user:16px; --radio-item:14px; --radio-seg:14px; --radio-mapa:20px; --radio-perg:16px;
  --bg-templo:radial-gradient(70% 32% at 50% 44%,rgba(255,255,255,.05),transparent 72%),#121214;
  --bg-entrar:#121214; --bg-portada:#121214; --bg-chat:#121214; --bg-pantalla:#121214; --velo:18,18,20; --cab-bg:transparent;
  --btn-bg:#ffffff; --btn-txt:#0b0b0c; --btn-txt-sh:none; --press:1px;
  --btn-sh:0 6px 18px rgba(0,0,0,.4); --btn-sh-act:0 2px 6px rgba(0,0,0,.4); --precio-sh:none; --parar-oro-sh:0 8px 22px rgba(0,0,0,.45);
  --fill:#ffffff; --track:rgba(255,255,255,.12); --bar-txt:#fff; --chat-track:rgba(255,255,255,.12); --chat-fill:#ffffff; --chat-fill-glow:none;
  --nav-bg:#1c1c20; --nav-sh:inset 0 0 0 1px rgba(255,255,255,.1),0 10px 30px rgba(0,0,0,.5); --nav-ic:rgba(255,255,255,.6); --nav-ic-on:#ffffff; --nav-glow:none;
  --placa-bg:#1c1c20; --placa-sh:inset 0 0 0 1px rgba(255,255,255,.08); --placa-sec:#9a9aa2;
  --lado-bg:#1c1c20; --lado-sh:inset 0 0 0 1px rgba(255,255,255,.1); --brillo:inset 0 0 0 1px rgba(255,255,255,.28),0 0 16px rgba(255,255,255,.12);
  --coach-bg:#1c1c20; --coach-sh:inset 0 0 0 1px rgba(255,255,255,.1); --user-bg:#2a2a30; --user-sh:none;
  --comp-bg:#1c1c20; --comp-sh:inset 0 0 0 1px rgba(255,255,255,.1),0 8px 24px rgba(0,0,0,.4); --cbtn-bg:rgba(255,255,255,.08);
  --send-bg:#ffffff; --send-sh:none; --fab-bg:#ffffff; --fab-sh:0 8px 20px rgba(0,0,0,.45);
  --tab-bg:#1c1c20; --tab-sh:inset 0 0 0 1px rgba(255,255,255,.08); --tab-on-bg:#ffffff; --tab-on-txt:#0b0b0c; --tab-txt:#b5b5bc;
  --pill-bg:#1c1c20; --pill-sh:inset 0 0 0 1px rgba(255,255,255,.08);
  --item-bg:#1c1c20; --item-sh:inset 0 0 0 1px rgba(255,255,255,.08); --item-nuevo:#25252a; --item-punto:#ff6a1a;
  --prod-bg:#1c1c20; --prod-txt:#ffffff; --prod-sub:#b0b0b8; --prod-gris-bg:#1c1c20; --prod-gris-sub:#b0b0b8; --usos:#ffffff;
  --mini-bg:radial-gradient(60% 80% at 50% 60%,#2a2a30,#17171a 80%);
  --perg-velo:rgba(10,10,11,.82); --perg-bg:#1c1c20; --perg-txt:#d8d8de; --perg-titulo:#ffffff; --perg-sh:inset 0 0 0 1px rgba(255,255,255,.1),0 16px 40px rgba(0,0,0,.5);
  --cerrar-bg:#25252a; --cerrar-sh:inset 0 0 0 1px rgba(255,255,255,.1); --chatx-bg:#1c1c20; --chatx-bd:rgba(255,255,255,.1);
  --chat-tit:#b5b5bc; --xp-c:#ffffff; --pens:#ffffff; --seguir-bg:#1c1c20; --seguir-bd:rgba(255,255,255,.14);
  --mapa-bg:#17171a; --aviso-bg:#25252a; --aviso-sh:inset 0 0 0 1px rgba(255,255,255,.1);
  --mapa-on:#ff6a1a; --mapa-off:#3a3a40; --mapa-nodo:#2a2a30; --mapa-txt-off:#7d7d85; --ring:#ffffff; --em-txt:#0b0b0c;
  --input-bg:#1c1c20; --input-bd:rgba(255,255,255,.12); --sec-bg:rgba(255,255,255,.08); --isla-filter:grayscale(.92) contrast(1.05) drop-shadow(0 0 22px rgba(255,255,255,.08)); --isla-tinte:grayscale(.92) contrast(1.05);
}
body[data-tema="carbon"] .wm{font:800 1em/1 Manrope,-apple-system,"Segoe UI",sans-serif;letter-spacing:.06em;color:#fff;position:relative;isolation:isolate;padding-left:.35em}
body[data-tema="carbon"] .wm::before{content:"";position:absolute;left:-.12em;top:50%;width:.62em;height:.62em;margin-top:-.38em;border-radius:50%;background:var(--rojo);z-index:-1}
body[data-tema="carbon"] .logo .wm{font-size:42px}
body[data-tema="carbon"] svg.ic{fill:currentColor}
body[data-tema="carbon"] svg.ic .d{fill:none;stroke:var(--tarjeta)}
body[data-tema="carbon"] .cab-xp svg{fill:currentColor}
body[data-tema="carbon"] .nav button.on::before{content:"";position:absolute;top:1px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--rojo)}
body[data-tema="carbon"] .nav svg.ic .d{stroke:var(--nav-bg)}
body[data-tema="carbon"] .lado-btn svg.ic .d{stroke:var(--lado-bg)}
body[data-tema="carbon"] .cab-com svg.ic .d{stroke:var(--fondo)}
body[data-tema="carbon"] .chip svg.ic .d{stroke:var(--fondo)}
body[data-tema="carbon"] .chip .oro{color:#fff}

/* ---- 5 · DORADO: negro y oro, Cinzel, pergaminos «golden ticket» ---- */
body[data-tema="dorado"]{
  --px:Manrope,-apple-system,"Segoe UI",sans-serif; --px-peso:800; --px-style:normal; --px-track:.04em; --k:.8; --kb:.72; --btn-track:.04em; --btn-peso:800; --etq:Manrope,-apple-system,"Segoe UI",sans-serif; --etq-case:uppercase; --etq-track:.08em; --etq-style:normal; --etq-peso:600; --etq-fs:11px; --etq-fs-h:10.5px; --h-fs:15px; --h-fs2:14px;
  --fondo:#050505; --texto:#f6efdc; --sec:#a79f88; --txt2:rgba(246,239,220,.78);
  --rojo:#e7c76a; --oro:#e7c76a; --ic:#e7c76a; --glow:0 0 24px rgba(231,199,106,.35);
      --tarjeta:#141210; --borde:rgba(231,199,106,.3); --card-sh:inset 0 0 0 1px rgba(231,199,106,.3); --radio:16px; --radio-btn:14px; --radio-nav:18px; --radio-comp:18px; --radio-user:16px; --radio-item:14px; --radio-seg:14px; --radio-mapa:20px; --radio-perg:6px;
  --bg-templo:radial-gradient(75% 36% at 50% 44%,rgba(231,199,106,.22),rgba(231,199,106,.06) 55%,transparent 78%),#050505;
  --bg-entrar:radial-gradient(70% 45% at 50% 52%,rgba(231,199,106,.22),#050505 72%);
  --bg-portada:radial-gradient(70% 40% at 50% 50%,rgba(231,199,106,.22),#050505 75%);
  --bg-chat:radial-gradient(110% 42% at 0% 0%,rgba(231,199,106,.12),transparent 62%),#050505;
  --bg-pantalla:radial-gradient(90% 30% at 50% 0%,rgba(231,199,106,.09),transparent 70%),#050505;
  --velo:5,5,5; --cab-bg:transparent;
  --btn-bg:linear-gradient(135deg,#fff1b8 0%,#e7c76a 48%,#b8922f 100%); --btn-txt:#0a0803; --btn-txt-sh:none; --press:1px;
  --btn-sh:0 0 22px rgba(231,199,106,.35),inset 0 1px 0 rgba(255,255,255,.55); --btn-sh-act:0 0 10px rgba(231,199,106,.35);
  --precio-sh:0 0 14px rgba(231,199,106,.35); --parar-oro-sh:0 0 26px rgba(231,199,106,.4),inset 0 1px 0 rgba(255,255,255,.5);
  --fill:linear-gradient(90deg,#b8922f,#fff1b8); --track:rgba(231,199,106,.14); --bar-txt:#f6efdc; --chat-track:rgba(231,199,106,.15); --chat-fill:linear-gradient(90deg,#b8922f,#fff1b8); --chat-fill-glow:0 0 10px rgba(231,199,106,.5);
  --nav-bg:#141210; --nav-sh:inset 0 0 0 1px rgba(231,199,106,.3),0 10px 30px rgba(0,0,0,.6); --nav-ic:rgba(231,199,106,.55); --nav-ic-on:#f4d97e; --nav-glow:drop-shadow(0 0 7px rgba(231,199,106,.7));
  --placa-bg:#141210; --placa-sh:inset 0 0 0 1px rgba(231,199,106,.3); --placa-sec:#a79f88;
  --lado-bg:#141210; --lado-sh:inset 0 0 0 1px rgba(231,199,106,.3); --brillo:inset 0 0 0 1px #e7c76a,0 0 22px rgba(231,199,106,.4);
  --coach-bg:#141210; --coach-sh:inset 0 0 0 1px rgba(231,199,106,.4),0 0 22px rgba(231,199,106,.1); --user-bg:rgba(246,239,220,.09); --user-sh:inset 0 0 0 1px rgba(246,239,220,.1);
  --comp-bg:rgba(20,18,16,.85); --comp-sh:inset 0 0 0 1px rgba(231,199,106,.3),0 8px 24px rgba(0,0,0,.5); --cbtn-ic:#e7c76a; --cbtn-bg:rgba(231,199,106,.1); --cbtn-bd:rgba(231,199,106,.25);
  --send-bg:linear-gradient(135deg,#fff1b8,#e7c76a 50%,#b8922f); --send-sh:0 0 14px rgba(231,199,106,.45); --fab-bg:linear-gradient(135deg,#fff1b8,#e7c76a 50%,#b8922f); --fab-sh:0 0 24px rgba(231,199,106,.4);
  --tab-bg:#141210; --tab-sh:inset 0 0 0 1px rgba(231,199,106,.3); --tab-on-bg:linear-gradient(135deg,#fff1b8,#e7c76a 50%,#b8922f); --tab-on-txt:#0a0803; --tab-txt:#c9bf9f;
  --pill-bg:#141210; --pill-sh:inset 0 0 0 1px rgba(231,199,106,.3);
  --item-bg:linear-gradient(160deg,#fff1b8 0%,#e7c76a 48%,#b8922f 100%); --item-sh:none; --item-txt:#1a1405; --item-nuevo:linear-gradient(160deg,#fff7cf 0%,#f4d97e 48%,#c9a13a 100%); --item-punto:#7a1a14; --radio-item:8px;
  --prod-bg:#141210; --prod-txt:#f6efdc; --prod-sub:#b9b19a; --prod-gris-bg:#141210; --prod-gris-sub:#b9b19a; --usos:#e7c76a;
  --mini-bg:radial-gradient(60% 80% at 50% 60%,rgba(231,199,106,.3),rgba(5,5,5,0) 80%);
  --perg-velo:rgba(3,3,3,.85); --perg-bg:linear-gradient(160deg,#fff1b8 0%,#e7c76a 45%,#b8922f 100%); --perg-txt:#1a1405; --perg-titulo:#0a0803; --perg-sh:none;
  --cerrar-bg:#141210; --cerrar-sh:inset 0 0 0 1px rgba(231,199,106,.35); --cerrar-ic:#e7c76a; --chatx-bg:#141210; --chatx-bd:rgba(231,199,106,.35); --chatx-ic:#e7c76a;
  --chat-tit:#e7c76a; --xp-c:#e7c76a; --pens:#e7c76a; --seguir-bg:#141210; --seguir-bd:rgba(231,199,106,.4);
  --mapa-bg:#0d0c0a; --mapa-sh:inset 0 0 0 1px rgba(231,199,106,.3),0 20px 60px rgba(0,0,0,.7); --aviso-bg:#141210; --aviso-sh:inset 0 0 0 1px rgba(231,199,106,.3);
  --mapa-on:#e7c76a; --mapa-off:#4a4332; --mapa-nodo:#2a2518; --mapa-txt-off:#8a826a; --ring:#e7c76a; --em-txt:#0a0803;
  --input-bg:rgba(231,199,106,.06); --input-bd:rgba(231,199,106,.3); --sec-bg:rgba(231,199,106,.1); --restantes:#e7c76a; --chip-oro:#f4d97e; --isla-filter:sepia(.75) saturate(1.5) hue-rotate(-12deg) drop-shadow(0 0 26px rgba(231,199,106,.3)); --isla-tinte:sepia(.75) saturate(1.5) hue-rotate(-12deg);
}
body[data-tema="dorado"] .wm{font:800 1em/1 Manrope,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em;color:#f4d97e;text-shadow:0 0 .8em rgba(231,199,106,.55)}
body[data-tema="dorado"] .logo .wm{font-size:44px}
/* golden ticket: bordes de entrada con muescas semicirculares a izquierda y derecha */
body[data-tema="dorado"] .pergamino-cont{
  -webkit-mask:radial-gradient(circle 7px at 0 12px,#0000 97%,#000) left/51% 24px repeat-y,radial-gradient(circle 7px at 100% 12px,#0000 97%,#000) right/51% 24px repeat-y;
          mask:radial-gradient(circle 7px at 0 12px,#0000 97%,#000) left/51% 24px repeat-y,radial-gradient(circle 7px at 100% 12px,#0000 97%,#000) right/51% 24px repeat-y;
  padding:28px 26px 56px}
body[data-tema="dorado"] .pergamino h2{letter-spacing:.06em;font-size:22px}
body[data-tema="dorado"] .perg-tipo{background:#0a0803!important;color:#f4d97e}

/* Etiquetas de tipo de pergamino: el color viene del código (inline); en los temas con hoja clara o dorada se fuerza uno legible */
body[data-tema="brasa"] .perg-tipo{background:#ff6a1a!important;color:#150902!important}
body[data-tema="vino"] .perg-tipo{background:#2a0a12!important;color:#d9b36a!important}
body[data-tema="marfil"] .perg-tipo{background:#a3151f!important;color:#fff!important}
body[data-tema="carbon"] .perg-tipo{background:#fff!important;color:#0b0b0c!important}

/* =====================================================================
   SERIE 2 · naranja y vino: ascua, granate, burdeos, cobre, lacre
   ===================================================================== */

/* ---- 6 · ASCUA: Brasa (negro, cristal, naranja con glow) con la tipografía de Dorado ---- */
body[data-tema="ascua"]{
  --px:Manrope,-apple-system,"Segoe UI",sans-serif; --px-peso:800; --px-style:normal; --px-track:.04em; --k:.8; --kb:.72; --btn-track:.04em; --btn-peso:800; --etq:Manrope,-apple-system,"Segoe UI",sans-serif; --etq-case:uppercase; --etq-track:.08em; --etq-style:normal; --etq-peso:600; --etq-fs:11px; --etq-fs-h:10.5px; --h-fs:15px; --h-fs2:14px;
  --fondo:#070707; --texto:#f5f5f5; --sec:#a3a3ab; --txt2:rgba(255,255,255,.78);
  --rojo:#ff6a1a; --oro:#ff8a3d; --ic:#ff8a3d; --glow:0 0 18px rgba(255,106,26,.45);
      --tarjeta:rgba(255,255,255,.05); --borde:rgba(255,255,255,.1); --blur:blur(16px) saturate(1.25);
  --card-sh:inset 0 0 0 1px rgba(255,255,255,.1); --radio:16px; --radio-btn:14px; --radio-nav:18px; --radio-comp:18px; --radio-user:16px; --radio-item:8px; --radio-seg:14px; --radio-mapa:20px; --radio-perg:6px;
  --bg-templo:radial-gradient(75% 36% at 50% 44%,rgba(255,106,26,.34),rgba(255,106,26,.09) 55%,transparent 78%),#070707;
  --bg-entrar:radial-gradient(70% 45% at 50% 52%,rgba(255,106,26,.3),#070707 72%);
  --bg-portada:radial-gradient(70% 40% at 50% 50%,rgba(255,106,26,.3),#070707 75%);
  --bg-chat:radial-gradient(110% 42% at 0% 0%,rgba(255,106,26,.16),transparent 62%),#070707;
  --bg-pantalla:radial-gradient(90% 30% at 50% 0%,rgba(255,106,26,.1),transparent 70%),#070707;
  --velo:7,7,7; --cab-bg:transparent;
  --btn-bg:linear-gradient(180deg,#ff7f36,#ff6a1a); --btn-txt:#150902; --btn-txt-sh:none; --press:1px;
  --btn-sh:0 0 18px rgba(255,106,26,.45),inset 0 1px 0 rgba(255,255,255,.3); --btn-sh-act:0 0 8px rgba(255,106,26,.4);
  --precio-sh:0 0 14px rgba(255,106,26,.4); --parar-oro-sh:0 0 24px rgba(255,106,26,.5);
  --fill:linear-gradient(90deg,#ff6a1a,#ff9a55); --track:rgba(255,255,255,.1); --bar-txt:#fff; --chat-track:rgba(255,255,255,.12); --chat-fill:linear-gradient(90deg,#ff6a1a,#ff9a55); --chat-fill-glow:0 0 10px rgba(255,106,26,.6);
  --nav-bg:rgba(255,255,255,.06); --nav-sh:inset 0 0 0 1px rgba(255,255,255,.12),0 10px 30px rgba(0,0,0,.5); --nav-ic:rgba(255,255,255,.7); --nav-ic-on:#ff6a1a; --nav-glow:drop-shadow(0 0 7px rgba(255,106,26,.8));
  --placa-bg:rgba(255,255,255,.06); --placa-sh:inset 0 0 0 1px rgba(255,255,255,.1); --placa-sec:#b9b9c0;
  --lado-bg:rgba(255,255,255,.06); --lado-sh:inset 0 0 0 1px rgba(255,255,255,.12); --brillo:inset 0 0 0 1px rgba(255,106,26,.6),0 0 20px rgba(255,106,26,.5);
  --coach-bg:rgba(255,255,255,.06); --coach-sh:inset 0 0 0 1px rgba(255,106,26,.4),0 0 22px rgba(255,106,26,.12); --user-bg:rgba(255,255,255,.1); --user-sh:inset 0 0 0 1px rgba(255,255,255,.08);
  --comp-bg:rgba(255,255,255,.06); --comp-sh:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 24px rgba(0,0,0,.4);
  --send-bg:#ff6a1a; --send-sh:0 0 16px rgba(255,106,26,.55); --fab-bg:linear-gradient(180deg,#ff7f36,#ff6a1a); --fab-sh:0 0 22px rgba(255,106,26,.55);
  --tab-bg:rgba(255,255,255,.05); --tab-sh:inset 0 0 0 1px rgba(255,255,255,.1); --tab-on-bg:#ff6a1a; --tab-on-txt:#150902; --tab-txt:#d6d6da;
  --pill-bg:rgba(255,255,255,.06); --pill-sh:inset 0 0 0 1px rgba(255,255,255,.1);
  --item-bg:linear-gradient(160deg,#ffb070 0%,#ff6a1a 50%,#b8360a 100%); --item-sh:none; --item-txt:#140802; --item-nuevo:linear-gradient(160deg,#ffc590 0%,#ff7d33 50%,#c94512 100%); --item-punto:#3a0f03;
  --prod-bg:rgba(255,255,255,.05); --prod-txt:#f5f5f5; --prod-sub:#bdbdc4; --prod-gris-bg:rgba(255,255,255,.05); --prod-gris-sub:#bdbdc4; --usos:#ff8a3d;
  --mini-bg:radial-gradient(60% 80% at 50% 60%,rgba(255,106,26,.45),rgba(255,106,26,.05) 80%);
  --perg-velo:rgba(5,5,5,.8); --perg-bg:linear-gradient(160deg,#ffb070 0%,#ff6a1a 50%,#b8360a 100%); --perg-txt:#140802; --perg-titulo:#0a0402; --perg-sh:none;
  --cerrar-bg:rgba(255,255,255,.08); --cerrar-sh:inset 0 0 0 1px rgba(255,255,255,.12); --chatx-bg:rgba(255,255,255,.07); --chatx-bd:rgba(255,255,255,.12);
  --chat-tit:#ffb98a; --xp-c:#ffb98a; --pens:#ff8a3d; --seguir-bg:rgba(255,255,255,.06); --seguir-bd:rgba(255,255,255,.14);
  --mapa-bg:#101010; --mapa-sh:inset 0 0 0 1px rgba(255,255,255,.1),0 20px 60px rgba(0,0,0,.7); --aviso-bg:#1b1b1d; --aviso-sh:inset 0 0 0 1px rgba(255,255,255,.12);
  --mapa-on:#ff6a1a; --mapa-off:#3a3a3f; --mapa-nodo:#2b2b2f; --mapa-txt-off:#7f7f86; --ring:#ff6a1a;
  --input-bg:rgba(255,255,255,.06); --input-bd:rgba(255,255,255,.14); --sec-bg:rgba(255,255,255,.08);
}
body[data-tema="ascua"] .wm{font:800 1em/1 Manrope,-apple-system,"Segoe UI",sans-serif;letter-spacing:.18em;color:#fff}
body[data-tema="ascua"] .wm i{font-style:normal;color:var(--rojo);text-shadow:0 0 .7em rgba(255,106,26,.9)}
body[data-tema="ascua"] .logo .wm{font-size:44px}

/* ---- 7 · GRANATE: Brasa en vino; oro apagado para monedas y XP ---- */
body[data-tema="granate"]{
  --px:Manrope,-apple-system,"Segoe UI",sans-serif; --px-peso:800; --px-style:normal; --px-track:.04em; --k:.8; --kb:.72; --btn-track:.04em; --btn-peso:800; --etq:Manrope,-apple-system,"Segoe UI",sans-serif; --etq-case:uppercase; --etq-track:.08em; --etq-style:normal; --etq-peso:600; --etq-fs:11px; --etq-fs-h:10.5px; --h-fs:15px; --h-fs2:14px;
  --fondo:#0a0507; --texto:#f5f0f0; --sec:#a89fa2; --txt2:rgba(255,255,255,.78);
  --rojo:#a3182f; --oro:#cfae6a; --ic:#c4253f; --glow:0 0 18px rgba(163,24,47,.45);
      --tarjeta:rgba(255,255,255,.05); --borde:rgba(255,255,255,.08); --blur:blur(16px) saturate(1.25);
  --card-sh:inset 0 0 0 1px rgba(255,255,255,.08); --radio:16px; --radio-btn:14px; --radio-nav:18px; --radio-comp:18px; --radio-user:16px; --radio-item:14px; --radio-seg:14px; --radio-mapa:20px; --radio-perg:14px;
  --bg-templo:radial-gradient(75% 36% at 50% 44%,rgba(163,24,47,.34),rgba(163,24,47,.09) 55%,transparent 78%),#0a0507;
  --bg-entrar:radial-gradient(70% 45% at 50% 52%,rgba(163,24,47,.32),#0a0507 72%);
  --bg-portada:radial-gradient(70% 40% at 50% 50%,rgba(163,24,47,.32),#0a0507 75%);
  --bg-chat:radial-gradient(110% 42% at 0% 0%,rgba(163,24,47,.2),transparent 62%),#0a0507;
  --bg-pantalla:radial-gradient(90% 30% at 50% 0%,rgba(163,24,47,.14),transparent 70%),#0a0507;
  --velo:10,5,7; --cab-bg:transparent;
  --btn-bg:linear-gradient(180deg,#c4253f,#7a1222); --btn-txt:#ffffff; --btn-txt-sh:none; --press:1px;
  --btn-sh:0 0 18px rgba(163,24,47,.45),inset 0 1px 0 rgba(255,255,255,.25); --btn-sh-act:0 0 8px rgba(163,24,47,.45);
  --precio-sh:0 0 14px rgba(163,24,47,.4); --parar-oro-sh:0 0 24px rgba(163,24,47,.5);
  --fill:linear-gradient(90deg,#7a1222,#c4253f); --track:rgba(255,255,255,.1); --bar-txt:#fff; --chat-track:rgba(255,255,255,.12); --chat-fill:linear-gradient(90deg,#7a1222,#c4253f); --chat-fill-glow:0 0 10px rgba(163,24,47,.6);
  --nav-bg:rgba(255,255,255,.06); --nav-sh:inset 0 0 0 1px rgba(255,255,255,.1),0 10px 30px rgba(0,0,0,.5); --nav-ic:rgba(255,255,255,.7); --nav-ic-on:#d9304c; --nav-glow:drop-shadow(0 0 7px rgba(163,24,47,.9));
  --placa-bg:rgba(255,255,255,.06); --placa-sh:inset 0 0 0 1px rgba(255,255,255,.09); --placa-sec:#b9b0b3;
  --lado-bg:rgba(255,255,255,.06); --lado-sh:inset 0 0 0 1px rgba(255,255,255,.1); --brillo:inset 0 0 0 1px rgba(207,174,106,.55),0 0 20px rgba(207,174,106,.3);
  --coach-bg:rgba(255,255,255,.06); --coach-sh:inset 0 0 0 1px rgba(163,24,47,.55),0 0 22px rgba(163,24,47,.15); --user-bg:rgba(255,255,255,.1); --user-sh:inset 0 0 0 1px rgba(255,255,255,.08);
  --comp-bg:rgba(255,255,255,.06); --comp-sh:inset 0 0 0 1px rgba(255,255,255,.1),0 8px 24px rgba(0,0,0,.4);
  --send-bg:linear-gradient(180deg,#c4253f,#7a1222); --send-sh:0 0 16px rgba(163,24,47,.55); --fab-bg:linear-gradient(180deg,#c4253f,#7a1222); --fab-sh:0 0 22px rgba(163,24,47,.55);
  --tab-bg:rgba(255,255,255,.05); --tab-sh:inset 0 0 0 1px rgba(255,255,255,.09); --tab-on-bg:linear-gradient(180deg,#c4253f,#7a1222); --tab-on-txt:#ffffff; --tab-txt:#d6d0d2;
  --pill-bg:rgba(255,255,255,.06); --pill-sh:inset 0 0 0 1px rgba(255,255,255,.09);
  --item-bg:#efe3c6; --item-sh:inset 0 0 0 1px #a3182f; --item-txt:#2a0a12; --item-nuevo:#f7edd2; --item-punto:#a3182f;
  --prod-bg:rgba(255,255,255,.05); --prod-txt:#f5f0f0; --prod-sub:#bfb6b9; --prod-gris-bg:rgba(255,255,255,.05); --prod-gris-sub:#bfb6b9; --usos:#cfae6a;
  --mini-bg:radial-gradient(60% 80% at 50% 60%,rgba(163,24,47,.5),rgba(163,24,47,.05) 80%);
  --perg-velo:rgba(8,3,5,.82); --perg-bg:#efe3c6; --perg-txt:#3a2a1c; --perg-titulo:#4a0d19; --perg-sh:inset 0 0 0 1px #a3182f,inset 0 0 0 5px #efe3c6,inset 0 0 0 6px rgba(163,24,47,.5),0 16px 40px rgba(0,0,0,.45);
  --cerrar-bg:rgba(255,255,255,.08); --cerrar-sh:inset 0 0 0 1px rgba(255,255,255,.12); --chatx-bg:rgba(255,255,255,.07); --chatx-bd:rgba(255,255,255,.12);
  --chat-tit:#cfae6a; --xp-c:#cfae6a; --pens:#cfae6a; --seguir-bg:rgba(255,255,255,.06); --seguir-bd:rgba(255,255,255,.14);
  --mapa-bg:#120a0c; --mapa-sh:inset 0 0 0 1px rgba(255,255,255,.1),0 20px 60px rgba(0,0,0,.7); --aviso-bg:#1b1315; --aviso-sh:inset 0 0 0 1px rgba(255,255,255,.12);
  --mapa-on:#c4253f; --mapa-off:#3a3234; --mapa-nodo:#2b2224; --mapa-txt-off:#857b7e; --ring:#a3182f;
  --input-bg:rgba(255,255,255,.06); --input-bd:rgba(255,255,255,.14); --sec-bg:rgba(255,255,255,.08);
  --restantes:#fff; --chip-oro:#cfae6a; --isla-filter:hue-rotate(-20deg) saturate(1.1) drop-shadow(0 0 26px rgba(163,24,47,.4)); --isla-tinte:hue-rotate(-20deg) saturate(1.1);
}
body[data-tema="granate"] .wm{font:800 1em/1 Manrope,-apple-system,"Segoe UI",sans-serif;letter-spacing:.18em;color:#fff}
body[data-tema="granate"] .wm i{font-style:normal;color:#c4253f;text-shadow:0 0 .7em rgba(163,24,47,.95)}
body[data-tema="granate"] .logo .wm{font-size:44px}
body[data-tema="granate"] .barra-nivel i{background:linear-gradient(90deg,#a8894a,#cfae6a)}
body[data-tema="granate"] .cab-xp svg,body[data-tema="granate"] .chip:last-child svg{color:#cfae6a}

/* ---- 8 · BURDEOS: vino profundo con el calor del naranja; serif y etiquetas mono ---- */
body[data-tema="burdeos"]{
  --px:Manrope,-apple-system,"Segoe UI",sans-serif; --px-peso:800; --px-style:normal; --px-track:.04em; --k:.8; --kb:.72; --btn-track:.04em; --btn-peso:800; --etq:Manrope,-apple-system,"Segoe UI",sans-serif; --etq-case:uppercase; --etq-track:.08em; --etq-style:normal; --etq-peso:600; --etq-fs:11px; --etq-fs-h:10.5px; --h-fs:15px; --h-fs2:14px;
  --fondo:#1a0710; --texto:#f6ece4; --sec:#b89a9e; --txt2:rgba(246,236,228,.8);
  --rojo:#ff6a1a; --oro:#ff8a3d; --ic:#ff6a1a; --glow:0 0 18px rgba(255,106,26,.4);
      --tarjeta:#26101a; --borde:rgba(255,106,26,.25); --card-sh:inset 0 0 0 1px rgba(255,106,26,.25); --radio:16px; --radio-btn:14px; --radio-nav:18px; --radio-comp:18px; --radio-user:16px; --radio-item:14px; --radio-seg:14px; --radio-mapa:20px; --radio-perg:14px;
  --bg-templo:radial-gradient(75% 36% at 50% 44%,rgba(255,106,26,.22),transparent 70%),radial-gradient(130% 95% at 50% 40%,#2a0e1a 0%,#1a0710 52%,#0d0307 100%);
  --bg-entrar:radial-gradient(120% 90% at 50% 45%,#2a0e1a 0%,#1a0710 52%,#0d0307 100%);
  --bg-portada:radial-gradient(120% 90% at 50% 45%,#2a0e1a 0%,#1a0710 52%,#0d0307 100%);
  --bg-chat:radial-gradient(130% 95% at 50% 40%,#2a0e1a 0%,#1a0710 55%,#0e0308 100%);
  --bg-pantalla:radial-gradient(130% 95% at 50% 30%,#2a0e1a 0%,#1a0710 52%,#0e0308 100%);
  --velo:26,7,16; --cab-bg:transparent;
  --btn-bg:linear-gradient(180deg,#ff7e33,#ff6a1a); --btn-txt:#ffffff; --btn-txt-sh:0 1px 0 rgba(120,40,0,.35); --press:1px;
  --btn-sh:0 6px 20px rgba(255,106,26,.35),inset 0 1px 0 rgba(255,255,255,.3); --btn-sh-act:0 2px 8px rgba(255,106,26,.35);
  --precio-sh:0 0 12px rgba(255,106,26,.35); --parar-oro-sh:0 8px 24px rgba(255,106,26,.4),inset 0 1px 0 rgba(255,255,255,.3);
  --fill:linear-gradient(90deg,#e0560f,#ff9a55); --track:rgba(246,236,228,.14); --bar-txt:#f6ece4; --chat-track:rgba(246,236,228,.14); --chat-fill:linear-gradient(90deg,#e0560f,#ff9a55); --chat-fill-glow:0 0 10px rgba(255,106,26,.5);
  --nav-bg:#26101a; --nav-sh:inset 0 0 0 1px rgba(255,106,26,.3),0 10px 30px rgba(0,0,0,.45); --nav-ic:rgba(255,106,26,.55); --nav-ic-on:#ff8a3d; --nav-glow:drop-shadow(0 0 7px rgba(255,106,26,.7));
  --placa-bg:#26101a; --placa-sh:inset 0 0 0 1px rgba(255,106,26,.3); --placa-sec:#b89a9e;
  --lado-bg:#26101a; --lado-sh:inset 0 0 0 1px rgba(255,106,26,.3),0 4px 12px rgba(0,0,0,.3); --brillo:inset 0 0 0 1px #ff6a1a,0 0 18px rgba(255,106,26,.4);
  --coach-bg:#26101a; --coach-sh:inset 0 0 0 1px rgba(255,106,26,.4); --coach-txt:#f6ece4; --user-bg:rgba(246,236,228,.1); --user-sh:inset 0 0 0 1px rgba(246,236,228,.12); --user-txt:#f6ece4; --chat-txt:#f6ece4;
  --comp-bg:rgba(38,16,26,.88); --comp-sh:inset 0 0 0 1px rgba(255,106,26,.3),0 8px 24px rgba(0,0,0,.35); --comp-ph:rgba(246,236,228,.4); --cbtn-ic:#ff8a3d; --cbtn-bg:rgba(255,106,26,.12); --cbtn-bd:rgba(255,106,26,.25);
  --send-bg:linear-gradient(180deg,#ff7e33,#ff6a1a); --send-sh:0 0 14px rgba(255,106,26,.5); --fab-bg:linear-gradient(180deg,#ff7e33,#ff6a1a); --fab-sh:0 8px 22px rgba(255,106,26,.4);
  --tab-bg:#26101a; --tab-sh:inset 0 0 0 1px rgba(255,106,26,.25); --tab-on-bg:linear-gradient(180deg,#ff7e33,#ff6a1a); --tab-on-txt:#ffffff; --tab-txt:#ff9a55;
  --pill-bg:#26101a; --pill-sh:inset 0 0 0 1px rgba(255,106,26,.25); --pill-txt:#f6ece4;
  --item-bg:#efe3c6; --item-sh:inset 0 0 0 1px #ff6a1a; --item-txt:#2a0a12; --item-nuevo:#f7edd2; --item-punto:#e0560f;
  --prod-bg:#26101a; --prod-txt:#f6ece4; --prod-sub:#c8aeb0; --prod-gris-bg:#26101a; --prod-gris-sub:#c8aeb0; --usos:#ff8a3d;
  --mini-bg:radial-gradient(60% 80% at 50% 60%,rgba(255,106,26,.32),rgba(26,7,16,0) 80%);
  --perg-velo:rgba(14,3,8,.82); --perg-bg:#efe3c6; --perg-txt:#3a2a1c; --perg-titulo:#2a0a12; --perg-sh:inset 0 0 0 1px #ff6a1a,inset 0 0 0 5px #efe3c6,inset 0 0 0 6px rgba(255,106,26,.55),0 16px 40px rgba(0,0,0,.45);
  --cerrar-bg:#26101a; --cerrar-ic:#ff8a3d; --cerrar-sh:inset 0 0 0 1px rgba(255,106,26,.3); --chatx-bg:#26101a; --chatx-bd:rgba(255,106,26,.3); --chatx-ic:#ff8a3d;
  --chat-tit:#ff8a3d; --chat-tit-case:uppercase; --xp-c:#ff8a3d; --pens:#ff8a3d; --seguir-bg:#26101a; --seguir-bd:rgba(255,106,26,.35); --parar-bg:linear-gradient(180deg,rgba(14,3,8,.35) 0%,rgba(14,3,8,.7) 40%,rgba(11,2,6,.96) 76%,#0b0206 100%); --parar-txt:#f6ece4;
  --mapa-bg:#1a0710; --mapa-sh:inset 0 0 0 1px rgba(255,106,26,.3),0 20px 60px rgba(0,0,0,.6); --aviso-bg:#26101a; --aviso-sh:inset 0 0 0 1px rgba(255,106,26,.3);
  --mapa-on:#ff6a1a; --mapa-off:#5a3040; --mapa-nodo:#3a1a28; --mapa-txt-off:#a88890; --ring:#ff6a1a; --em-txt:#ffffff;
  --input-bg:rgba(246,236,228,.07); --input-bd:rgba(255,106,26,.3); --sec-bg:rgba(246,236,228,.1); --micro:#f6ece4;
  --restantes:#ff8a3d; --chip-txt:#f6ece4; --chip-oro:#ff9a55; --chip-sh:none;
}
body[data-tema="burdeos"] .wm{font:800 1em/1 Manrope,-apple-system,"Segoe UI",sans-serif;letter-spacing:.06em;color:var(--rojo);text-shadow:0 0 .6em rgba(255,106,26,.45)}
body[data-tema="burdeos"] .wm em{font-style:normal;font-weight:800;font-size:1em}
body[data-tema="burdeos"] .logo .wm{font-size:42px}

/* ---- 9 · COBRE: negro con cobre/ámbar entre naranja y oro; pergamino de cobre metálico ---- */
body[data-tema="cobre"]{
  --px:Manrope,-apple-system,"Segoe UI",sans-serif; --px-peso:800; --px-style:normal; --px-track:.04em; --k:.8; --kb:.72; --btn-track:.04em; --btn-peso:800; --etq:Manrope,-apple-system,"Segoe UI",sans-serif; --etq-case:uppercase; --etq-track:.08em; --etq-style:normal; --etq-peso:600; --etq-fs:11px; --etq-fs-h:10.5px; --h-fs:15px; --h-fs2:14px;
  --fondo:#050505; --texto:#f6ece0; --sec:#a8997f; --txt2:rgba(246,236,224,.78);
  --rojo:#d98a3a; --oro:#d98a3a; --ic:#d98a3a; --glow:0 0 24px rgba(217,138,58,.35);
      --tarjeta:#141008; --borde:rgba(217,138,58,.3); --card-sh:inset 0 0 0 1px rgba(217,138,58,.3); --radio:16px; --radio-btn:14px; --radio-nav:18px; --radio-comp:18px; --radio-user:16px; --radio-item:8px; --radio-seg:14px; --radio-mapa:20px; --radio-perg:6px;
  --bg-templo:radial-gradient(75% 36% at 50% 44%,rgba(217,138,58,.22),rgba(217,138,58,.06) 55%,transparent 78%),#050505;
  --bg-entrar:radial-gradient(70% 45% at 50% 52%,rgba(217,138,58,.22),#050505 72%);
  --bg-portada:radial-gradient(70% 40% at 50% 50%,rgba(217,138,58,.22),#050505 75%);
  --bg-chat:radial-gradient(110% 42% at 0% 0%,rgba(217,138,58,.12),transparent 62%),#050505;
  --bg-pantalla:radial-gradient(90% 30% at 50% 0%,rgba(217,138,58,.09),transparent 70%),#050505;
  --velo:5,5,5; --cab-bg:transparent;
  --btn-bg:linear-gradient(135deg,#f0b36a 0%,#d4782a 48%,#9a4a14 100%); --btn-txt:#0a0603; --btn-txt-sh:none; --press:1px;
  --btn-sh:0 0 22px rgba(217,138,58,.35),inset 0 1px 0 rgba(255,255,255,.45); --btn-sh-act:0 0 10px rgba(217,138,58,.35);
  --precio-sh:0 0 14px rgba(217,138,58,.35); --parar-oro-sh:0 0 26px rgba(217,138,58,.4),inset 0 1px 0 rgba(255,255,255,.45);
  --fill:linear-gradient(90deg,#9a4a14,#f0b36a); --track:rgba(217,138,58,.14); --bar-txt:#f6ece0; --chat-track:rgba(217,138,58,.15); --chat-fill:linear-gradient(90deg,#9a4a14,#f0b36a); --chat-fill-glow:0 0 10px rgba(217,138,58,.5);
  --nav-bg:#141008; --nav-sh:inset 0 0 0 1px rgba(217,138,58,.3),0 10px 30px rgba(0,0,0,.6); --nav-ic:rgba(217,138,58,.55); --nav-ic-on:#f0b36a; --nav-glow:drop-shadow(0 0 7px rgba(217,138,58,.7));
  --placa-bg:#141008; --placa-sh:inset 0 0 0 1px rgba(217,138,58,.3); --placa-sec:#a8997f;
  --lado-bg:#141008; --lado-sh:inset 0 0 0 1px rgba(217,138,58,.3); --brillo:inset 0 0 0 1px #d98a3a,0 0 22px rgba(217,138,58,.4);
  --coach-bg:#141008; --coach-sh:inset 0 0 0 1px rgba(217,138,58,.4),0 0 22px rgba(217,138,58,.1); --user-bg:rgba(246,236,224,.09); --user-sh:inset 0 0 0 1px rgba(246,236,224,.1);
  --comp-bg:rgba(20,16,8,.88); --comp-sh:inset 0 0 0 1px rgba(217,138,58,.3),0 8px 24px rgba(0,0,0,.5); --cbtn-ic:#d98a3a; --cbtn-bg:rgba(217,138,58,.1); --cbtn-bd:rgba(217,138,58,.25);
  --send-bg:linear-gradient(135deg,#f0b36a,#d4782a 50%,#9a4a14); --send-sh:0 0 14px rgba(217,138,58,.45); --fab-bg:linear-gradient(135deg,#f0b36a,#d4782a 50%,#9a4a14); --fab-sh:0 0 24px rgba(217,138,58,.4);
  --tab-bg:#141008; --tab-sh:inset 0 0 0 1px rgba(217,138,58,.3); --tab-on-bg:linear-gradient(135deg,#f0b36a,#d4782a 50%,#9a4a14); --tab-on-txt:#0a0603; --tab-txt:#c9b79a;
  --pill-bg:#141008; --pill-sh:inset 0 0 0 1px rgba(217,138,58,.3);
  --item-bg:linear-gradient(160deg,#e9a86a 0%,#c9803a 50%,#b56a2a 100%); --item-sh:none; --item-txt:#140a02; --item-nuevo:linear-gradient(160deg,#f3bd88 0%,#d99350 50%,#c47a38 100%); --item-punto:#4a2306;
  --prod-bg:#141008; --prod-txt:#f6ece0; --prod-sub:#b9a98f; --prod-gris-bg:#141008; --prod-gris-sub:#b9a98f; --usos:#d98a3a;
  --mini-bg:radial-gradient(60% 80% at 50% 60%,rgba(217,138,58,.32),rgba(5,5,5,0) 80%);
  --perg-velo:rgba(3,3,3,.85); --perg-bg:linear-gradient(160deg,#e9a86a 0%,#c9803a 50%,#b56a2a 100%); --perg-txt:#140a02; --perg-titulo:#0a0501; --perg-sh:none;
  --cerrar-bg:#141008; --cerrar-sh:inset 0 0 0 1px rgba(217,138,58,.35); --cerrar-ic:#d98a3a; --chatx-bg:#141008; --chatx-bd:rgba(217,138,58,.35); --chatx-ic:#d98a3a;
  --chat-tit:#d98a3a; --xp-c:#d98a3a; --pens:#d98a3a; --seguir-bg:#141008; --seguir-bd:rgba(217,138,58,.4);
  --mapa-bg:#0d0a05; --mapa-sh:inset 0 0 0 1px rgba(217,138,58,.3),0 20px 60px rgba(0,0,0,.7); --aviso-bg:#141008; --aviso-sh:inset 0 0 0 1px rgba(217,138,58,.3);
  --mapa-on:#d98a3a; --mapa-off:#4a3c28; --mapa-nodo:#2a2114; --mapa-txt-off:#8a7d66; --ring:#d98a3a; --em-txt:#0a0603;
  --input-bg:rgba(217,138,58,.06); --input-bd:rgba(217,138,58,.3); --sec-bg:rgba(217,138,58,.1); --restantes:#d98a3a; --chip-oro:#f0b36a;
  --isla-filter:sepia(.55) saturate(1.35) hue-rotate(-14deg) drop-shadow(0 0 26px rgba(217,138,58,.3)); --isla-tinte:sepia(.55) saturate(1.35) hue-rotate(-14deg);
}
body[data-tema="cobre"] .wm{font:800 1em/1 Manrope,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em;color:#f0b36a;text-shadow:0 0 .8em rgba(217,138,58,.55)}
body[data-tema="cobre"] .logo .wm{font-size:44px}

/* ---- 10 · LACRE: negro con vino y oro a la vez; sello de lacre ---- */
body[data-tema="lacre"]{
  --px:Manrope,-apple-system,"Segoe UI",sans-serif; --px-peso:800; --px-style:normal; --px-track:.04em; --k:.8; --kb:.72; --btn-track:.04em; --btn-peso:800; --etq:Manrope,-apple-system,"Segoe UI",sans-serif; --etq-case:uppercase; --etq-track:.08em; --etq-style:normal; --etq-peso:600; --etq-fs:11px; --etq-fs-h:10.5px; --h-fs:15px; --h-fs2:14px;
  --fondo:#050505; --texto:#f6efdc; --sec:#a79f88; --txt2:rgba(246,239,220,.78);
  --rojo:#e7c76a; --oro:#e7c76a; --ic:#e7c76a; --glow:0 0 22px rgba(231,199,106,.3);
      --tarjeta:#120709; --borde:rgba(231,199,106,.25); --card-sh:inset 0 0 0 1px rgba(231,199,106,.25); --radio:16px; --radio-btn:14px; --radio-nav:18px; --radio-comp:18px; --radio-user:16px; --radio-item:8px; --radio-seg:14px; --radio-mapa:20px; --radio-perg:6px;
  --bg-templo:radial-gradient(75% 36% at 50% 44%,rgba(122,20,39,.5),rgba(122,20,39,.12) 55%,transparent 78%),#050505;
  --bg-entrar:radial-gradient(70% 45% at 50% 52%,rgba(122,20,39,.45),#050505 72%);
  --bg-portada:radial-gradient(70% 40% at 50% 50%,rgba(122,20,39,.45),#050505 75%);
  --bg-chat:radial-gradient(110% 42% at 0% 0%,rgba(122,20,39,.28),transparent 62%),#050505;
  --bg-pantalla:radial-gradient(90% 30% at 50% 0%,rgba(122,20,39,.2),transparent 70%),#050505;
  --velo:5,5,5; --cab-bg:transparent;
  --btn-bg:#7a1427; --btn-txt:#e7c76a; --btn-txt-sh:none; --press:1px;
  --btn-sh:inset 0 0 0 1px #e7c76a,0 0 18px rgba(122,20,39,.55); --btn-sh-act:inset 0 0 0 1px #e7c76a,0 0 8px rgba(122,20,39,.5);
  --precio-sh:inset 0 0 0 1px #e7c76a; --parar-oro-sh:inset 0 0 0 1px #e7c76a,0 0 26px rgba(122,20,39,.55);
  --fill:linear-gradient(90deg,#b8922f,#f4d97e); --track:rgba(231,199,106,.14); --bar-txt:#f6efdc; --chat-track:rgba(231,199,106,.15); --chat-fill:linear-gradient(90deg,#b8922f,#f4d97e); --chat-fill-glow:0 0 10px rgba(231,199,106,.45);
  --nav-bg:#120709; --nav-sh:inset 0 0 0 1px rgba(231,199,106,.28),0 10px 30px rgba(0,0,0,.6); --nav-ic:rgba(231,199,106,.55); --nav-ic-on:#f4d97e; --nav-glow:drop-shadow(0 0 7px rgba(231,199,106,.75));
  --placa-bg:#120709; --placa-sh:inset 0 0 0 1px rgba(231,199,106,.28); --placa-sec:#a79f88;
  --lado-bg:#120709; --lado-sh:inset 0 0 0 1px rgba(231,199,106,.28); --brillo:inset 0 0 0 1px #e7c76a,0 0 22px rgba(231,199,106,.4);
  --coach-bg:#120709; --coach-sh:inset 0 0 0 1px rgba(231,199,106,.38),0 0 22px rgba(122,20,39,.25); --user-bg:rgba(122,20,39,.35); --user-sh:inset 0 0 0 1px rgba(231,199,106,.18);
  --comp-bg:rgba(18,7,9,.88); --comp-sh:inset 0 0 0 1px rgba(231,199,106,.28),0 8px 24px rgba(0,0,0,.5); --cbtn-ic:#e7c76a; --cbtn-bg:rgba(231,199,106,.1); --cbtn-bd:rgba(231,199,106,.25);
  --send-bg:#7a1427; --send-sh:inset 0 0 0 1px #e7c76a,0 0 12px rgba(122,20,39,.5); --fab-bg:#7a1427; --fab-sh:inset 0 0 0 1px #e7c76a,0 0 22px rgba(122,20,39,.55);
  --tab-bg:#120709; --tab-sh:inset 0 0 0 1px rgba(231,199,106,.28); --tab-on-bg:#7a1427; --tab-on-txt:#e7c76a; --tab-txt:#c9bf9f;
  --pill-bg:#120709; --pill-sh:inset 0 0 0 1px rgba(231,199,106,.28);
  --item-bg:linear-gradient(160deg,#fff1b8 0%,#e7c76a 48%,#b8922f 100%); --item-sh:none; --item-txt:#1a1405; --item-nuevo:linear-gradient(160deg,#fff7cf 0%,#f4d97e 48%,#c9a13a 100%); --item-punto:#7a1427;
  --prod-bg:#120709; --prod-txt:#f6efdc; --prod-sub:#b9b19a; --prod-gris-bg:#120709; --prod-gris-sub:#b9b19a; --usos:#e7c76a;
  --mini-bg:radial-gradient(60% 80% at 50% 60%,rgba(122,20,39,.55),rgba(5,5,5,0) 80%);
  --perg-velo:rgba(3,3,3,.86); --perg-bg:linear-gradient(160deg,#fff1b8 0%,#e7c76a 45%,#b8922f 100%); --perg-txt:#1a1405; --perg-titulo:#0a0803; --perg-sh:none;
  --cerrar-bg:#120709; --cerrar-sh:inset 0 0 0 1px rgba(231,199,106,.4); --cerrar-ic:#e7c76a; --chatx-bg:#120709; --chatx-bd:rgba(231,199,106,.4); --chatx-ic:#e7c76a;
  --chat-tit:#e7c76a; --xp-c:#e7c76a; --pens:#e7c76a; --seguir-bg:#120709; --seguir-bd:rgba(231,199,106,.4);
  --mapa-bg:#0c0507; --mapa-sh:inset 0 0 0 1px rgba(231,199,106,.28),0 20px 60px rgba(0,0,0,.7); --aviso-bg:#120709; --aviso-sh:inset 0 0 0 1px rgba(231,199,106,.28);
  --mapa-on:#e7c76a; --mapa-off:#4a3236; --mapa-nodo:#2a1519; --mapa-txt-off:#8a7a6a; --ring:#e7c76a; --em-txt:#0a0803;
  --input-bg:rgba(231,199,106,.06); --input-bd:rgba(231,199,106,.28); --sec-bg:rgba(231,199,106,.1); --restantes:#e7c76a; --chip-oro:#f4d97e;
  --isla-filter:sepia(.5) saturate(1.3) hue-rotate(-18deg) drop-shadow(0 0 26px rgba(122,20,39,.5)); --isla-tinte:sepia(.5) saturate(1.3) hue-rotate(-18deg);
}
body[data-tema="lacre"] .tabs button.activa{box-shadow:inset 0 0 0 1px #e7c76a}
body[data-tema="lacre"] .wm{display:inline-flex;align-items:center;gap:.55em;font:800 1em/1 Manrope,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em;color:#f4d97e;text-shadow:0 0 .8em rgba(231,199,106,.45)}
body[data-tema="lacre"] .logo .wm{font-size:40px}
/* sello de lacre: círculo vino con borde irregular y «F» oro (en la marca y en la esquina de cada pergamino) */
body[data-tema="lacre"] .sello,body[data-tema="lacre"] .rollo::after{display:inline-grid;place-items:center;border-radius:48% 52% 46% 54%/52% 46% 54% 48%;background:radial-gradient(circle at 34% 28%,#a52641 0%,#7a1427 50%,#4a0b17 100%);color:#e7c76a;font:800 1em/1 Manrope,-apple-system,"Segoe UI",sans-serif;letter-spacing:0;text-shadow:0 1px 1px rgba(0,0,0,.5);box-shadow:0 0 0 .07em #5a0e1c,.09em .05em 0 .08em #7a1427,-.07em .1em 0 .05em #8f1b33,0 .12em .3em rgba(0,0,0,.55),inset 0 0 0 .08em rgba(231,199,106,.45)}
body[data-tema="lacre"] .sello{width:1.5em;height:1.5em;font-style:normal}
body[data-tema="lacre"] .cab-wm .sello{width:1.35em;height:1.35em}
body[data-tema="lacre"] .rollo::after{content:"F";position:absolute;top:26px;right:24px;width:54px;height:54px;font-size:26px;z-index:3;pointer-events:none;transform:rotate(-8deg)}
body[data-tema="lacre"] .rollo .cerrar-x{top:max(2px,env(safe-area-inset-top));left:16px;right:auto}
body[data-tema="lacre"] .pergamino h2{padding-right:62px}

/* ---- Comunes a las series con pergamino «ticket» (cobre-naranja, cobre, oro): muescas, etiquetas y tipografía de Cinzel ---- */
body[data-tema="ascua"] .pergamino-cont,body[data-tema="cobre"] .pergamino-cont,body[data-tema="lacre"] .pergamino-cont{
  -webkit-mask:radial-gradient(circle 7px at 0 12px,#0000 97%,#000) left/51% 24px repeat-y,radial-gradient(circle 7px at 100% 12px,#0000 97%,#000) right/51% 24px repeat-y;
          mask:radial-gradient(circle 7px at 0 12px,#0000 97%,#000) left/51% 24px repeat-y,radial-gradient(circle 7px at 100% 12px,#0000 97%,#000) right/51% 24px repeat-y;
  padding:28px 26px 56px}
body[data-tema="ascua"] .pergamino h2,body[data-tema="cobre"] .pergamino h2,body[data-tema="lacre"] .pergamino h2{letter-spacing:.06em;font-size:22px}
body[data-tema="ascua"] .perg-tipo{background:#0a0402!important;color:#ff9a55!important}
body[data-tema="cobre"] .perg-tipo{background:#0a0501!important;color:#f0b36a!important}
body[data-tema="lacre"] .perg-tipo{background:#7a1427!important;color:#e7c76a!important}
/* pergaminos crema de Granate y Burdeos */
body[data-tema="granate"] .perg-tipo{background:#7a1222!important;color:#fff!important}
body[data-tema="burdeos"] .perg-tipo{background:#2a0a12!important;color:#ff8a3d!important}
/* botón de cerrar legible sobre pergaminos claros */
body[data-tema="ascua"] .rollo .cerrar-x{background:#0a0402}
body[data-tema="ascua"] .rollo .cerrar-x svg path{stroke:#ff9a55}
body[data-tema="granate"] .rollo .cerrar-x{background:#4a0d19}
body[data-tema="granate"] .rollo .cerrar-x svg path{stroke:#efe3c6}


/* =====================================================================
   Pantallas del Dojo con tema: cabecera fija, Misiones, gemas, caja negra de título
   ===================================================================== */
body[data-tema] .pantalla .cab-dojo{background:var(--fondo);box-shadow:0 1px 0 var(--borde,rgba(255,255,255,.08))}
body[data-tema] .pill-titulo{background:var(--caja,#050505);color:var(--caja-txt,var(--texto))}
body[data-tema="marfil"]{--caja:#111111;--caja-txt:#ffffff;--gema:#7c3aed;--gema-2:#7c3aed}
body[data-tema="granate"]{--moneda:#cfae6a;--moneda-bg:linear-gradient(135deg,#dcc088,#b8964f);--moneda-txt:#1a1405;--moneda-sh:none}
.chip.gem svg{color:var(--gema-2,#b56cf0)}
.chip.gem b{color:var(--chip-gema,var(--chip-txt,#fff))}
.cab-der{gap:10px}
body[data-tema] .cab-der{gap:9px}

/* Misiones */
.modal-mis{align-items:flex-start;padding-top:max(60px,calc(env(safe-area-inset-top) + 36px))}
.mis-caja{width:100%;max-width:420px;height:calc(100dvh - 160px);background:var(--mapa-bg,#2a2a2f);border-radius:20px;padding:16px 14px 0;display:flex;flex-direction:column;gap:12px;box-shadow:var(--mapa-sh,0 20px 60px rgba(0,0,0,.6));overflow:hidden}
.mis-cab{display:flex;justify-content:space-between;align-items:center;flex:none}
.mis-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:10px;padding:0 0 28px;scrollbar-width:none}
.mis-scroll::-webkit-scrollbar{display:none}
.mis-sec{font-family:var(--px);font-style:var(--px-style,normal);font-weight:var(--px-peso,500);font-size:14px;letter-spacing:var(--px-track,.08em);text-transform:var(--px-case,uppercase);color:var(--texto);margin:8px 2px 0}
.mis-sec:first-child{margin-top:2px}
.mis-card{position:relative;display:flex;align-items:stretch;border-radius:18px;overflow:hidden;min-height:92px;flex:none;color:var(--texto);background:color-mix(in srgb,var(--texto) 6%,var(--mapa-bg,#2a2a2f))}
.mis-card.req{color:#fff;background:linear-gradient(100deg,color-mix(in srgb,var(--rojo) 36%,#000) 0%,color-mix(in srgb,var(--rojo) 68%,#000) 100%)}
.mis-card.req.hecha{opacity:.55}
.mis-ico{width:54px;flex:none;display:grid;place-items:center;background:rgba(0,0,0,.22)}
.mis-ico svg{width:28px;height:28px;color:currentColor;opacity:.8}
.mis-txt{flex:1;min-width:0;padding:11px 8px 10px 12px;display:flex;flex-direction:column;gap:3px}
.mis-et{display:flex;align-items:center;gap:7px;font-family:var(--etq,var(--px));font-style:var(--etq-style,normal);font-weight:var(--etq-peso,500);font-size:10px;letter-spacing:var(--etq-track,.08em);text-transform:uppercase;opacity:.85}
.mis-dif{border:1px solid currentColor;border-radius:10px;padding:1px 7px;font-size:9px}
.mis-tit{font-size:15px;font-weight:700;line-height:1.2}
.hecha .mis-tit{text-decoration:line-through}
.mis-desc{font-size:12.5px;line-height:1.35;opacity:.82;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mis-pie{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11.5px}
.mis-nota{flex:1;opacity:.7}
.mis-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(0,0,0,.38);color:#fff;border-radius:12px;padding:3px 8px;font-weight:700;font-size:11px}
.mis-chip svg{width:13px;height:13px;color:var(--moneda,#f0b43a)}
.mis-est{align-self:center;flex:none;margin:0 12px 0 4px;width:26px;height:26px;border-radius:50%;background:rgba(120,120,128,.5);display:grid;place-items:center}
.mis-est i{width:9px;height:9px;border-radius:50%;background:var(--rojo)}
.mis-est.ok{background:#3fbf6f}
.mis-est.ok svg{width:15px;height:15px;color:#fff}
.mis-vacio{font-size:13.5px;color:var(--sec);padding:14px 4px}

/* =====================================================================
   SERIE 3 · granate/ascua/brasa de favoritos + terciopelo y rubí
   ===================================================================== */
body[data-tema="rubi"]{
  --px:Manrope,-apple-system,"Segoe UI",sans-serif; --px-peso:800; --px-style:normal; --px-track:.04em; --k:.8; --kb:.72; --btn-track:.04em; --btn-peso:800; --etq:Manrope,-apple-system,"Segoe UI",sans-serif; --etq-case:uppercase; --etq-track:.08em; --etq-style:normal; --etq-peso:600; --etq-fs:11px; --etq-fs-h:10.5px; --h-fs:15px; --h-fs2:14px;
  --fondo:#050506; --texto:#f5f0f0; --sec:#a89fa2; --txt2:rgba(255,255,255,.78);
  --rojo:#c8102e; --oro:#cfae6a; --ic:#e3203f; --glow:0 0 18px rgba(200,16,46,.45);
      --tarjeta:rgba(255,255,255,.05); --borde:rgba(255,255,255,.08); --blur:blur(16px) saturate(1.25);
  --card-sh:inset 0 0 0 1px rgba(255,255,255,.08); --radio:16px; --radio-btn:14px; --radio-nav:18px; --radio-comp:18px; --radio-user:16px; --radio-item:14px; --radio-seg:14px; --radio-mapa:20px; --radio-perg:14px;
  --bg-templo:radial-gradient(75% 36% at 50% 44%,rgba(200,16,46,.34),rgba(200,16,46,.09) 55%,transparent 78%),#050506;
  --bg-entrar:radial-gradient(70% 45% at 50% 52%,rgba(200,16,46,.32),#050506 72%);
  --bg-portada:radial-gradient(70% 40% at 50% 50%,rgba(200,16,46,.32),#050506 75%);
  --bg-chat:radial-gradient(110% 42% at 0% 0%,rgba(200,16,46,.2),transparent 62%),#050506;
  --bg-pantalla:radial-gradient(90% 30% at 50% 0%,rgba(200,16,46,.14),transparent 70%),#050506;
  --velo:5,5,6; --cab-bg:transparent;
  --btn-bg:linear-gradient(180deg,#e3203f,#8e0a22); --btn-txt:#ffffff; --btn-txt-sh:none; --press:1px;
  --btn-sh:0 0 18px rgba(200,16,46,.45),inset 0 1px 0 rgba(255,255,255,.25); --btn-sh-act:0 0 8px rgba(200,16,46,.45);
  --precio-sh:0 0 14px rgba(200,16,46,.4); --parar-oro-sh:0 0 24px rgba(200,16,46,.5);
  --fill:linear-gradient(90deg,#8e0a22,#e3203f); --track:rgba(255,255,255,.1); --bar-txt:#fff; --chat-track:rgba(255,255,255,.12); --chat-fill:linear-gradient(90deg,#8e0a22,#e3203f); --chat-fill-glow:0 0 10px rgba(200,16,46,.6);
  --nav-bg:rgba(255,255,255,.06); --nav-sh:inset 0 0 0 1px rgba(255,255,255,.1),0 10px 30px rgba(0,0,0,.5); --nav-ic:rgba(255,255,255,.7); --nav-ic-on:#e3203f; --nav-glow:drop-shadow(0 0 7px rgba(200,16,46,.9));
  --placa-bg:rgba(255,255,255,.06); --placa-sh:inset 0 0 0 1px rgba(255,255,255,.09); --placa-sec:#b9b0b3;
  --lado-bg:rgba(255,255,255,.06); --lado-sh:inset 0 0 0 1px rgba(255,255,255,.1); --brillo:inset 0 0 0 1px rgba(207,174,106,.55),0 0 20px rgba(207,174,106,.3);
  --coach-bg:rgba(255,255,255,.06); --coach-sh:inset 0 0 0 1px rgba(200,16,46,.55),0 0 22px rgba(200,16,46,.15); --user-bg:rgba(255,255,255,.1); --user-sh:inset 0 0 0 1px rgba(255,255,255,.08);
  --comp-bg:rgba(255,255,255,.06); --comp-sh:inset 0 0 0 1px rgba(255,255,255,.1),0 8px 24px rgba(0,0,0,.4);
  --send-bg:linear-gradient(180deg,#e3203f,#8e0a22); --send-sh:0 0 16px rgba(200,16,46,.55); --fab-bg:linear-gradient(180deg,#e3203f,#8e0a22); --fab-sh:0 0 22px rgba(200,16,46,.55);
  --tab-bg:rgba(255,255,255,.05); --tab-sh:inset 0 0 0 1px rgba(255,255,255,.09); --tab-on-bg:linear-gradient(180deg,#e3203f,#8e0a22); --tab-on-txt:#ffffff; --tab-txt:#d6d0d2;
  --pill-bg:rgba(255,255,255,.06); --pill-sh:inset 0 0 0 1px rgba(255,255,255,.09);
  --item-bg:#efe3c6; --item-sh:inset 0 0 0 1px #c8102e; --item-txt:#2a0a12; --item-nuevo:#f7edd2; --item-punto:#c8102e;
  --prod-bg:rgba(255,255,255,.05); --prod-txt:#f5f0f0; --prod-sub:#bfb6b9; --prod-gris-bg:rgba(255,255,255,.05); --prod-gris-sub:#bfb6b9; --usos:#cfae6a;
  --mini-bg:radial-gradient(60% 80% at 50% 60%,rgba(200,16,46,.5),rgba(200,16,46,.05) 80%);
  --perg-velo:rgba(8,3,5,.82); --perg-bg:#efe3c6; --perg-txt:#3a2a1c; --perg-titulo:#4a0d19; --perg-sh:inset 0 0 0 1px #c8102e,inset 0 0 0 5px #efe3c6,inset 0 0 0 6px rgba(200,16,46,.5),0 16px 40px rgba(0,0,0,.45);
  --cerrar-bg:rgba(255,255,255,.08); --cerrar-sh:inset 0 0 0 1px rgba(255,255,255,.12); --chatx-bg:rgba(255,255,255,.07); --chatx-bd:rgba(255,255,255,.12);
  --chat-tit:#cfae6a; --xp-c:#cfae6a; --pens:#cfae6a; --seguir-bg:rgba(255,255,255,.06); --seguir-bd:rgba(255,255,255,.14);
  --mapa-bg:#0b0507; --mapa-sh:inset 0 0 0 1px rgba(255,255,255,.1),0 20px 60px rgba(0,0,0,.7); --aviso-bg:#160a0d; --aviso-sh:inset 0 0 0 1px rgba(255,255,255,.12);
  --mapa-on:#e3203f; --mapa-off:#3a3234; --mapa-nodo:#2b2224; --mapa-txt-off:#857b7e; --ring:#c8102e;
  --input-bg:rgba(255,255,255,.06); --input-bd:rgba(255,255,255,.14); --sec-bg:rgba(255,255,255,.08);
  --restantes:#fff; --chip-oro:#cfae6a; --isla-filter:hue-rotate(-20deg) saturate(1.1) drop-shadow(0 0 26px rgba(200,16,46,.4)); --isla-tinte:hue-rotate(-20deg) saturate(1.1);
}
body[data-tema="rubi"]{
  --fondo:#050506; --oro:#ff5a74; --ic:rgba(255,255,255,.78); --glow:0 0 22px rgba(200,16,46,.55); --restantes:#fff;
  --tarjeta:rgba(255,255,255,.04); --borde:rgba(200,16,46,.35); --card-sh:inset 0 0 0 1px rgba(200,16,46,.35); --blur:blur(16px) saturate(1.25);
  --bg-templo:radial-gradient(ellipse 100% 62% at 50% 110%,rgba(200,16,46,.45),transparent 60%),#050506;
  --bg-entrar:radial-gradient(ellipse 100% 62% at 50% 110%,rgba(200,16,46,.5),transparent 60%),#050506;
  --bg-portada:radial-gradient(ellipse 100% 62% at 50% 110%,rgba(200,16,46,.5),transparent 60%),#050506;
  --bg-chat:radial-gradient(ellipse 100% 55% at 50% 112%,rgba(200,16,46,.42),transparent 62%),#050506;
  --bg-pantalla:radial-gradient(ellipse 100% 40% at 50% 108%,rgba(200,16,46,.4),transparent 62%),#050506;
  --btn-bg:linear-gradient(180deg,#e3203f,#8e0a22); --btn-txt:#ffffff; --btn-sh:0 0 22px rgba(200,16,46,.55),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.25); --btn-sh-act:0 0 10px rgba(200,16,46,.5),inset 0 1px 0 rgba(255,255,255,.35);
  --send-bg:linear-gradient(180deg,#e3203f,#8e0a22); --send-sh:0 0 18px rgba(200,16,46,.6); --fab-bg:linear-gradient(180deg,#e3203f,#8e0a22); --fab-sh:0 0 24px rgba(200,16,46,.6);
  --tab-on-bg:linear-gradient(180deg,#e3203f,#8e0a22); --precio-sh:0 0 14px rgba(200,16,46,.5); --parar-oro-sh:0 0 26px rgba(200,16,46,.6);
  --fill:linear-gradient(90deg,#8e0a22,#e3203f); --chat-fill:linear-gradient(90deg,#8e0a22,#e3203f); --chat-fill-glow:0 0 12px rgba(200,16,46,.7);
  --nav-ic:rgba(255,255,255,.7); --nav-ic-on:#e3203f; --nav-glow:drop-shadow(0 0 8px rgba(227,32,63,.95)); --nav-sh:inset 0 0 0 1px rgba(200,16,46,.35),0 10px 30px rgba(0,0,0,.55);
  --coach-sh:inset 0 0 0 1px rgba(200,16,46,.55),0 0 24px rgba(200,16,46,.2); --brillo:inset 0 0 0 1px rgba(200,16,46,.7),0 0 22px rgba(200,16,46,.5);
  --lado-sh:inset 0 0 0 1px rgba(200,16,46,.35); --placa-sh:inset 0 0 0 1px rgba(200,16,46,.3); --pill-sh:inset 0 0 0 1px rgba(200,16,46,.35); --tab-sh:inset 0 0 0 1px rgba(200,16,46,.3);
  --comp-sh:inset 0 0 0 1px rgba(200,16,46,.35),0 8px 24px rgba(0,0,0,.4);
  --perg-velo:rgba(3,2,3,.86); --perg-bg:#15080b; --perg-txt:#f3e7cf; --perg-titulo:#f3e7cf; --perg-sh:inset 0 0 0 1px #c8102e,0 0 30px rgba(200,16,46,.3),0 16px 40px rgba(0,0,0,.5);
  --chat-tit:#ff7a8f; --xp-c:#ff7a8f; --pens:#e3203f; --chip-oro:#f0c75e; --ring:#c8102e;
  --isla-filter:hue-rotate(-20deg) saturate(1.15) drop-shadow(0 0 28px rgba(200,16,46,.5)); --isla-tinte:hue-rotate(-20deg) saturate(1.15);
  --mapa-on:#e3203f; --usos:#ff5a74;
}
body[data-tema="rubi"] .wm{font:800 1em/1 Manrope,-apple-system,"Segoe UI",sans-serif;letter-spacing:.18em;color:#fff}
body[data-tema="rubi"] .wm i{font-style:normal;color:#e3203f;text-shadow:0 0 .7em rgba(200,16,46,.95)}
body[data-tema="rubi"] .logo .wm{font-size:44px}
body[data-tema="rubi"] .perg-tipo{background:#c8102e!important;color:#fff!important}
/* pergamino oscuro con rollos de cuerda en rubí oscuro (arriba y abajo) */
body[data-tema="rubi"] .pergamino-cont{flex:1 1 auto;margin:0 20px;padding:44px 20px 52px}
body[data-tema="rubi"] .rollo{padding-bottom:30px}
body[data-tema="rubi"] .rollo::before,body[data-tema="rubi"] .rollo::after{content:"";position:absolute;left:8px;right:8px;height:20px;border-radius:10px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 38%,rgba(0,0,0,.45)),repeating-linear-gradient(115deg,#4a0613 0 5px,#8e0a22 5px 10px,#5e0817 10px 12px);
  box-shadow:0 6px 14px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.06)}
body[data-tema="rubi"] .rollo::before{top:max(32px,calc(env(safe-area-inset-top) + 12px))}
body[data-tema="rubi"] .rollo::after{bottom:20px}
body[data-tema="rubi"] .rollo .cerrar-x{top:max(70px,calc(env(safe-area-inset-top) + 50px));right:34px}
body[data-tema="terciopelo"]{
  --px:Manrope,-apple-system,"Segoe UI",sans-serif; --px-peso:800; --px-style:normal; --px-track:.04em; --k:.8; --kb:.72; --btn-track:.04em; --btn-peso:800; --etq:Manrope,-apple-system,"Segoe UI",sans-serif; --etq-case:uppercase; --etq-track:.08em; --etq-style:normal; --etq-peso:600; --etq-fs:11px; --etq-fs-h:10.5px; --h-fs:15px; --h-fs2:14px;
  --fondo:#2b0b14; --texto:#f4ead8; --sec:#b99aa0; --txt2:rgba(244,234,216,.8);
  --rojo:#e9d3a1; --oro:#e9d3a1; --ic:#e9d3a1;
      --tarjeta:#3f1422; --borde:rgba(233,211,161,.25); --card-sh:inset 0 0 0 1px rgba(233,211,161,.25); --radio:16px; --radio-btn:14px; --radio-nav:18px; --radio-comp:18px; --radio-user:16px; --radio-item:14px; --radio-seg:14px; --radio-mapa:20px; --radio-perg:14px;
  --bg-vista:radial-gradient(120% 90% at 50% 38%,#3f1422 0%,#2b0b14 52%,#12040a 100%);
  --bg-templo:radial-gradient(75% 36% at 50% 44%,rgba(233,211,161,.2),transparent 70%),radial-gradient(130% 95% at 50% 40%,#3f1422 0%,#2b0b14 52%,#12040a 100%);
  --bg-entrar:radial-gradient(120% 90% at 50% 45%,#3f1422 0%,#2b0b14 52%,#12040a 100%);
  --bg-portada:radial-gradient(120% 90% at 50% 45%,#3f1422 0%,#2b0b14 52%,#12040a 100%);
  --bg-chat:radial-gradient(130% 95% at 50% 40%,#3f1422 0%,#2b0b14 55%,#12040a 100%);
  --bg-pantalla:radial-gradient(130% 95% at 50% 30%,#3f1422 0%,#2b0b14 52%,#12040a 100%);
  --velo:42,10,18; --cab-bg:transparent;
  --btn-bg:linear-gradient(180deg,#f3e4bb,#c9b27a); --btn-txt:#2b0b14; --btn-txt-sh:none; --press:1px;
  --btn-sh:0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.45); --btn-sh-act:0 2px 8px rgba(0,0,0,.4);
  --precio-sh:inset 0 1px 0 rgba(255,255,255,.4); --parar-oro-sh:0 8px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.45);
  --fill:linear-gradient(90deg,#c9b27a,#f3e4bb); --track:rgba(244,234,216,.14); --bar-txt:#f4ead8; --chat-track:rgba(244,234,216,.14); --chat-fill:linear-gradient(90deg,#c9b27a,#f3e4bb); --chat-fill-glow:none;
  --nav-bg:#3f1422; --nav-sh:inset 0 0 0 1px rgba(233,211,161,.3),0 10px 30px rgba(0,0,0,.45); --nav-ic:rgba(233,211,161,.55); --nav-ic-on:#f3e4bb; --nav-glow:drop-shadow(0 0 6px rgba(233,211,161,.5));
  --placa-bg:#3f1422; --placa-sh:inset 0 0 0 1px rgba(233,211,161,.3); --placa-sec:#b99aa0;
  --lado-bg:#3f1422; --lado-sh:inset 0 0 0 1px rgba(233,211,161,.3),0 4px 12px rgba(0,0,0,.3); --brillo:inset 0 0 0 1px #e9d3a1,0 0 18px rgba(233,211,161,.35);
  --coach-bg:#3f1422; --coach-sh:inset 0 0 0 1px rgba(233,211,161,.35); --coach-txt:#f4ead8; --user-bg:rgba(244,234,216,.1); --user-sh:inset 0 0 0 1px rgba(244,234,216,.12); --user-txt:#f4ead8; --chat-txt:#f4ead8;
  --comp-bg:rgba(58,16,25,.85); --comp-sh:inset 0 0 0 1px rgba(233,211,161,.3),0 8px 24px rgba(0,0,0,.35); --comp-ph:rgba(244,234,216,.4); --cbtn-ic:#e9d3a1; --cbtn-bg:rgba(233,211,161,.12); --cbtn-bd:rgba(233,211,161,.25);
  --send-bg:linear-gradient(180deg,#f3e4bb,#c9b27a); --send-sh:0 0 12px rgba(233,211,161,.4); --fab-bg:linear-gradient(180deg,#f3e4bb,#c9b27a); --fab-sh:0 8px 20px rgba(0,0,0,.4);
  --tab-bg:#3f1422; --tab-sh:inset 0 0 0 1px rgba(233,211,161,.25); --tab-on-bg:linear-gradient(180deg,#f3e4bb,#c9b27a); --tab-on-txt:#2b0b14; --tab-txt:#e9d3a1;
  --pill-bg:#3f1422; --pill-sh:inset 0 0 0 1px rgba(233,211,161,.25); --pill-txt:#f4ead8;
  --item-bg:#efe3c6; --item-sh:inset 0 0 0 1px #e9d3a1; --item-txt:#2b0b14; --item-nuevo:#f7edd2; --item-punto:#8f1d2e;
  --prod-bg:#3f1422; --prod-txt:#f4ead8; --prod-sub:#c6b0a8; --prod-gris-bg:#3f1422; --prod-gris-sub:#c6b0a8; --usos:#e9d3a1;
  --mini-bg:radial-gradient(60% 80% at 50% 60%,rgba(233,211,161,.3),rgba(42,10,18,0) 80%);
  --perg-velo:rgba(20,4,8,.8); --perg-bg:#efe3c6; --perg-txt:#3a2a1c; --perg-titulo:#2b0b14; --perg-sh:inset 0 0 0 1px #e9d3a1,inset 0 0 0 5px #efe3c6,inset 0 0 0 6px rgba(201,162,79,.6),0 16px 40px rgba(0,0,0,.45);
  --cerrar-bg:#3f1422; --cerrar-ic:#e9d3a1; --cerrar-sh:inset 0 0 0 1px rgba(233,211,161,.3); --chatx-bg:#3f1422; --chatx-bd:rgba(233,211,161,.3); --chatx-ic:#e9d3a1;
  --chat-tit:#e9d3a1; --chat-tit-case:uppercase; --xp-c:#e9d3a1; --pens:#e9d3a1; --seguir-bg:#3f1422; --seguir-bd:rgba(233,211,161,.35); --parar-bg:linear-gradient(180deg,rgba(26,6,11,.35) 0%,rgba(26,6,11,.7) 40%,rgba(21,4,8,.96) 76%,#12040a 100%); --parar-txt:#f4ead8;
  --mapa-bg:#2b0b14; --mapa-sh:inset 0 0 0 1px rgba(233,211,161,.3),0 20px 60px rgba(0,0,0,.6); --aviso-bg:#3f1422; --aviso-sh:inset 0 0 0 1px rgba(233,211,161,.3);
  --mapa-on:#e9d3a1; --mapa-off:#6a4a52; --mapa-nodo:#4a2630; --mapa-txt-off:#a58891; --ring:#e9d3a1; --em-txt:#2b0b14;
  --input-bg:rgba(244,234,216,.07); --input-bd:rgba(233,211,161,.3); --sec-bg:rgba(244,234,216,.1); --micro:#f4ead8;
  --restantes:#e9d3a1; --chip-txt:#f4ead8; --chip-oro:#f3e4bb; --chip-sh:none;
}
body[data-tema="terciopelo"]{
  --fondo:#2b0b14; --rojo:#e9d3a1; --oro:#e9d3a1; --ic:#e9d3a1; --glow:0 0 18px rgba(233,211,161,.25);
  --tarjeta:#3f1422; --borde:rgba(233,211,161,.22); --card-sh:inset 0 0 0 1px rgba(233,211,161,.22);
  --bg-templo:radial-gradient(70% 34% at 50% 44%,rgba(233,211,161,.12),transparent 70%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),radial-gradient(120% 90% at 50% 38%,#3a1020 0%,#2b0b14 55%,#12040a 100%);
  --bg-entrar:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),radial-gradient(120% 90% at 50% 38%,#3a1020 0%,#2b0b14 55%,#12040a 100%); --bg-portada:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),radial-gradient(120% 90% at 50% 38%,#3a1020 0%,#2b0b14 55%,#12040a 100%); --bg-chat:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),radial-gradient(120% 90% at 50% 38%,#3a1020 0%,#2b0b14 55%,#12040a 100%); --bg-pantalla:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),radial-gradient(120% 90% at 50% 38%,#3a1020 0%,#2b0b14 55%,#12040a 100%);
  --velo:43,11,20; --fill:linear-gradient(90deg,#c9b27a,#f3e4bb); --chat-fill:linear-gradient(90deg,#c9b27a,#f3e4bb); --chat-fill-glow:none;
  --btn-bg:#f3e7cf; --btn-txt:#2b0b14; --btn-txt-sh:none; --btn-sh:0 6px 18px rgba(0,0,0,.4),inset 0 -2px 0 rgba(43,11,20,.14); --btn-sh-act:0 2px 8px rgba(0,0,0,.4);
  --precio-sh:none; --parar-oro-sh:0 8px 24px rgba(0,0,0,.45),inset 0 -2px 0 rgba(43,11,20,.14);
  --send-bg:#f3e7cf; --send-sh:0 0 12px rgba(243,231,207,.3); --fab-bg:#f3e7cf; --fab-sh:0 8px 20px rgba(0,0,0,.45);
  --tab-on-bg:#f3e7cf; --tab-on-txt:#2b0b14; --tab-txt:#e9d3a1;
  --nav-bg:#3f1422; --nav-sh:inset 0 0 0 1px rgba(233,211,161,.26),0 10px 30px rgba(0,0,0,.5); --nav-ic:rgba(233,211,161,.55); --nav-ic-on:#f3e4bb; --nav-glow:drop-shadow(0 0 7px rgba(233,211,161,.55));
  --placa-bg:#3f1422; --lado-bg:#3f1422; --coach-bg:#3f1422; --coach-sh:inset 0 0 0 1px rgba(233,211,161,.3); --pill-bg:#3f1422; --tab-bg:#3f1422; --cerrar-bg:#3f1422; --chatx-bg:#3f1422; --seguir-bg:#3f1422; --aviso-bg:#3f1422;
  --prod-bg:#3f1422; --prod-gris-bg:#3f1422; --usos:#e9d3a1; --mapa-bg:#2b0b14; --mapa-on:#e9d3a1;
  --perg-velo:rgba(18,4,10,.84); --perg-bg:#f3e7cf; --perg-txt:#3a2a1c; --perg-titulo:#2b0b14; --perg-sh:inset 0 0 0 1px #c9b27a,inset 0 0 0 5px #f3e7cf,inset 0 0 0 6px rgba(201,178,122,.55),0 16px 40px rgba(0,0,0,.5);
  --chip-txt:#e9d3a1; --chip-oro:#e9d3a1; --chip-gema:#e9d3a1; --restantes:#e9d3a1; --chat-tit:#e9d3a1; --xp-c:#e9d3a1; --pens:#e9d3a1; --ring:#e9d3a1; --em-txt:#2b0b14;
  --isla-filter:sepia(.6) saturate(1.2) hue-rotate(-12deg) drop-shadow(0 0 26px rgba(233,211,161,.22)); --isla-tinte:sepia(.6) saturate(1.2) hue-rotate(-12deg);
}
body[data-tema="terciopelo"] .cab-der .chip{background:#1d060d;border-radius:14px;padding:5px 9px;box-shadow:inset 0 0 0 1px rgba(233,211,161,.14)}
body[data-tema="terciopelo"] .cab-der .chip svg{color:#e9d3a1}
body[data-tema="terciopelo"] .cab-der .chip.gem svg{color:var(--gema-2,#b56cf0)}
body[data-tema="terciopelo"] .barra-nivel i{background:linear-gradient(90deg,#c9b27a,#f3e4bb)}
body[data-tema="terciopelo"] .wm{display:inline-flex;align-items:center;gap:.5em;font:800 1em/1 Manrope,-apple-system,"Segoe UI",sans-serif;letter-spacing:.04em;color:#e9d3a1;text-shadow:0 0 .8em rgba(233,211,161,.25)}
body[data-tema="terciopelo"] .logo .wm{font-size:40px}
/* sello de lacre vino liso (marca y esquina del pergamino) */
body[data-tema="terciopelo"] .sello,body[data-tema="terciopelo"] .rollo::after{display:inline-block;border-radius:48% 52% 46% 54%/52% 46% 54% 48%;background:radial-gradient(circle at 34% 28%,#8f2338 0%,#5e1426 52%,#3a0a17 100%);box-shadow:0 0 0 .07em #3a0a17,.09em .05em 0 .08em #5e1426,-.07em .1em 0 .05em #72192e,0 .12em .3em rgba(0,0,0,.55),inset 0 0 0 .22em rgba(233,211,161,.0),inset 0 0 0 .1em rgba(233,211,161,.35)}
body[data-tema="terciopelo"] .sello{width:1.4em;height:1.4em}
body[data-tema="terciopelo"] .cab-wm .sello{width:1.3em;height:1.3em}
body[data-tema="terciopelo"] .rollo::after{content:"";position:absolute;top:26px;right:24px;width:50px;height:50px;font-size:26px;z-index:3;pointer-events:none;transform:rotate(-8deg)}
body[data-tema="terciopelo"] .rollo .cerrar-x{top:max(2px,env(safe-area-inset-top));left:16px;right:auto}
body[data-tema="terciopelo"] .pergamino h2{padding-right:62px}
body[data-tema="terciopelo"] .perg-tipo{background:#2b0b14!important;color:#e9d3a1!important}


/* =====================================================================
   Iconos ilustrados de Tantro (img/firme/*.webp, PNG sobre negro). Con tema se funden con mix-blend-mode:
   --blend:screen (oscuros) o normal con fondo negro (marfil). Los contenedores con ellos no llevan backdrop-filter
   (aislaría el blend y dejaría el negro a la vista).
   ===================================================================== */
.ic-img{mix-blend-mode:var(--blend,screen)}
body[data-tema="marfil"]{--blend:normal;--ic-fondo:#111111;--lado-bg:#111111;--lado-sh:0 6px 18px rgba(0,0,0,.18);--halo:transparent}
body[data-tema="carbon"]{--halo:rgba(255,255,255,.09)}
body[data-tema] .lado-btn{display:grid;place-items:center;width:50px;height:50px}
body[data-tema] .lado-btn img.ic-img{width:37px;height:37px;border-radius:0;margin:auto;display:block;object-fit:contain}
body[data-tema] .lado{gap:20px}
body[data-tema] .chip img.ic-img{width:21px;height:21px;border-radius:0;object-fit:contain}
body[data-tema="marfil"] .cab-der .chip{background:#111;border-radius:14px;padding:4px 9px;--chip-txt:#fff;--chip-oro:#f0c75e;--chip-gema:#fff}
/* isla: sin filtro propio de mezcla con el fondo y con halo del acento detrás */
body[data-tema] .isla{width:250px;mix-blend-mode:var(--blend,screen);filter:var(--isla-tinte,none);-webkit-mask-image:radial-gradient(circle closest-side,#000 68%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 68%,transparent 100%)}
body[data-tema] .escena::before{content:"";position:absolute;left:50%;top:50%;width:330px;height:330px;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--halo,color-mix(in srgb,var(--rojo) 40%,transparent)) 0%,transparent 62%);pointer-events:none}
body[data-tema="marfil"] .isla{width:226px;height:226px;mix-blend-mode:normal;filter:none}
/* inventario, tienda, cursos: sin blur en las tarjetas que llevan iconos */
body[data-tema] .item-perg,body[data-tema] .producto,body[data-tema] .cofre,body[data-tema] .curso{-webkit-backdrop-filter:none;backdrop-filter:none}
body[data-tema] .item-perg img.perg-ico,body[data-tema] .item-perg img.ic-img{width:72px;height:72px;object-fit:contain;margin-top:2px;background:var(--ic-fondo,transparent);border-radius:14px}
body[data-tema] .producto .icono{width:70px;height:70px;background:var(--ic-fondo,color-mix(in srgb,var(--prod-txt,#1a1a1a) 8%,transparent));overflow:hidden}
body[data-tema] .producto .icono img.ic-img{width:64px;height:64px;margin:0;object-fit:contain}
body[data-tema] .cofre img.ic-img{width:74px;height:74px;object-fit:contain;background:var(--ic-fondo,transparent);border-radius:14px}
body[data-tema] .curso .miniatura img.ic-img{width:170px}
/* misiones */
.mis-ico img.ic-img{width:40px;height:40px;object-fit:contain}
.mis-chip img.ic-img{width:15px;height:15px;object-fit:contain}
body[data-tema="marfil"] .mis-ico{background:#111111}
body[data-tema="terciopelo"]{--halo:rgba(233,211,161,.13)}

/* =====================================================================
   Pulido final: gemas en rubí, isla grande (Granate y Rubí), Comunidad y packs de gemas del Dojo
   ===================================================================== */
body[data-tema]{--gema:#c8102e;--gema-2:#ff4d68;--gema-bg:linear-gradient(135deg,#e3203f,#8e0a22);--gema-sh:0 3px 0 #5a0615}
body[data-tema="granate"]{--gema-c:#e3203f}
body[data-tema="rubi"]{--gema-c:#ff3a58}

/* isla: escala por variable; Granate y Rubí un 20 % mayor, tinte suave (brasas vivas) y halo del acento más fuerte */
body[data-tema] .isla{width:calc(250px*var(--isla-k,1))}
body[data-tema="marfil"] .isla{width:226px}
body[data-tema] .escena::before{width:calc(330px*var(--isla-k,1));height:calc(330px*var(--isla-k,1))}
body[data-tema] .lado{z-index:2}
body[data-tema="granate"],body[data-tema="rubi"]{--isla-k:1.2;--isla-tinte:hue-rotate(10deg) saturate(1.45) contrast(1.15) brightness(1.1);--halo:color-mix(in srgb,var(--rojo) 52%,transparent)}
body[data-tema="granate"] .escena,body[data-tema="rubi"] .escena{height:262px}

/* avatares: la inicial sobre degradado del acento (aquí nadie enseña la cara) */
.av-ini{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;font-weight:800;font-size:14px;color:var(--av-txt,#fff);text-shadow:0 1px 2px rgba(0,0,0,.45);background:linear-gradient(135deg,var(--rojo),color-mix(in srgb,var(--rojo) 45%,#000))}
.av-ini.a1{background:linear-gradient(135deg,color-mix(in srgb,var(--rojo) 75%,#fff),color-mix(in srgb,var(--rojo) 55%,#000))}
.av-ini.a2{background:linear-gradient(135deg,color-mix(in srgb,var(--rojo) 85%,#000),color-mix(in srgb,var(--rojo) 30%,#000))}
.avatar-chico .av-ini{width:100%;height:100%;font-size:17px}

/* Comunidad */
body[data-tema] .cab-com{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:20px 16px 10px;position:sticky;top:0;z-index:6;background:var(--fondo)}
body[data-tema] .cab-com h2{text-align:center}
body[data-tema] .cab-com svg{justify-self:end}
body[data-tema] .avatar-chico{width:42px;height:42px;border-color:var(--ring,var(--rojo))}
.punto-rojo{background:var(--aviso-punto,#ff3b4a)}
.post{position:relative}
.ej{position:absolute;top:12px;right:14px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.5;border:1px solid currentColor;border-radius:8px;padding:1px 6px;line-height:1.5}
.post .quien .av-ini{width:30px;height:30px;font-size:13px}
.post h3{font-weight:700}
.post .pie .izq{display:flex;align-items:center;gap:8px}
.pila{display:inline-flex}
.pila .av-ini{width:24px;height:24px;font-size:10px;margin-left:-7px;box-shadow:0 0 0 2px var(--fondo)}
.pila .av-ini:first-child{margin-left:0}
.reac{display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--texto) 8%,transparent);border-radius:14px;padding:4px 10px;font-weight:600;font-size:12.5px;color:var(--txt2,#cfcfd4)}
.reac svg{width:14px;height:14px;color:var(--sec)}
.coment{display:inline-flex;align-items:center;gap:6px;color:var(--sec);font-size:13px}
.coment svg{width:18px;height:18px}
.chat-row{position:relative;display:flex;align-items:center;gap:12px;padding:14px 14px 22px;border-radius:var(--radio,16px);background:var(--tarjeta,#1f1f23);box-shadow:var(--card-sh,none);-webkit-backdrop-filter:var(--blur,none);backdrop-filter:var(--blur,none)}
.chat-av .av-ini,.chat-av .ava{display:block;width:44px;height:44px;font-size:17px;display:inline-grid}
.chat-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.chat-tx b{font-size:15px;font-weight:700}
.chat-tx small{color:var(--sec);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:11px;color:var(--sec)}
.chat-row .ej{top:auto;bottom:7px}
.fab{position:fixed;right:max(22px,calc(50% - 218px));bottom:124px}

/* Tienda: packs de gemas */
.gemas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pack{position:relative;border-radius:18px;overflow:hidden;background:var(--prod-gris-bg,#2a2a2e);color:var(--prod-gris-txt,var(--texto));display:flex;flex-direction:column;text-align:center;box-shadow:var(--card-sh,none)}
.pack-top{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 4px 10px;background:linear-gradient(180deg,color-mix(in srgb,var(--texto) 5%,transparent),transparent)}
.pack-top img{width:62px;height:62px;object-fit:contain;background:var(--ic-fondo,transparent);border-radius:12px}
.pack-n{display:inline-flex;align-items:center;gap:4px;font-size:20px;font-weight:800;color:var(--gema-c,var(--rojo))}
.pack-n svg{width:16px;height:16px;color:var(--gema-c,var(--rojo))}
.pack-eur{padding:9px 4px;background:rgba(0,0,0,.3);font-weight:700;font-size:14px}
.cinta{position:absolute;top:0;right:0;width:58px;height:58px;overflow:hidden;pointer-events:none;z-index:1}
.cinta span{position:absolute;top:11px;right:-21px;width:84px;text-align:center;transform:rotate(45deg);background:var(--rojo);color:var(--btn-txt,#fff);font-size:9.5px;font-weight:800;padding:2px 0}
body[data-tema] .pack{-webkit-backdrop-filter:none;backdrop-filter:none}

/* =====================================================================
   Afinado a la captura 2 del Dojo (375×812): cabecera, isla, botones laterales, RETOMAR y título
   ===================================================================== */
body[data-tema] .cab-dojo{height:112px}
body[data-tema] .cab-dojo .avatar{top:46px;left:16px;width:40px;height:40px;border-width:2px}
body[data-tema] .cab-dojo .avatar img{transform:scale(1.22)}
body[data-tema] .cab-nombre{left:46px;top:47px;width:118px;height:38px;padding:3px 8px 0 30px}
body[data-tema] .cab-nombre strong{font-size:14.5px}
body[data-tema] .cab-nombre small{font-size:9.5px}
body[data-tema] .cab-xp{left:64px;top:92px}
body[data-tema] .lado-btn{width:42px;height:42px}
body[data-tema] .lado-btn img.ic-img{width:32px;height:32px}
body[data-tema] .lado.izq{left:10px}
body[data-tema] .lado.der{right:10px}
body[data-tema] .templo-centro .titulo-px{font-size:26px}
body[data-tema] #t-accion .btn-rojo{max-width:182px;height:58px}
body[data-tema="granate"],body[data-tema="rubi"]{--isla-k:1.05}
body[data-tema="granate"] .escena,body[data-tema="rubi"] .escena{height:250px}

/* Granate · ajustes de Andrés (11 nov noche): sin tarjetas bajo RETOMAR; barra inferior gris como la del Dojo
   (fondo gris oscuro sólido, iconos grises gruesos, activo en rojo). El resto del branding Granate no se toca. */
body[data-tema="granate"] .hoy{display:none}
body[data-tema="granate"] .nav{background:#2a2a2f;box-shadow:0 10px 30px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.06);-webkit-backdrop-filter:none;backdrop-filter:none}
body[data-tema="granate"] .nav button{color:#cfcfd4}
body[data-tema="granate"] .nav button svg{stroke-width:2.4}
body[data-tema="granate"] .nav button.on{color:#e3203f}
body[data-tema="granate"] .nav button.on svg{filter:none}
body[data-tema="granate"] .nav .punto{background:#e3203f}

/* Granate · cabecera ordenada (11 nov): espacio de barra de estado arriba, marca y chips en una fila alineada,
   avatar + placa + XP en la segunda, con los mismos márgenes (18 px) a izquierda y derecha. */
body[data-tema="granate"] .cab-dojo{height:164px}
body[data-tema="granate"] .cab-wm{top:50px;left:18px;font-size:20px;letter-spacing:.2em}
body[data-tema="granate"] .cab-der{top:46px;right:18px;gap:14px}
body[data-tema="granate"] .cab-dojo .avatar{top:86px;left:18px;width:52px;height:52px}
body[data-tema="granate"] .cab-nombre{left:54px;top:90px;width:146px;height:46px;padding-left:30px}
body[data-tema="granate"] .cab-xp{left:74px;top:144px}
/* 12 nov 2026 · el hombre del banner en el centro del mundo, tal cual: sin filtros de color ni brillo */
body .isla.persona{filter:none!important;width:auto!important;height:300px!important;border-radius:0!important;-webkit-mask:none!important;mask:none!important;background:none!important}

/* Logo oficial (12 nov 2026): icono delante de la marca en todos los temas */
.marca-tantro{display:inline-flex;align-items:center;gap:.4em;line-height:1}
.marca-tantro .logo-ic{height:1.35em;width:auto;flex:none;border-radius:22%;box-shadow:0 .15em .5em rgba(0,0,0,.45)}
.logo .marca-tantro{flex-direction:column;gap:22px}
.logo .marca-tantro .logo-ic{height:88px;box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 60px rgba(196,37,63,.25)}