/* ═══════════════════════════════════════════════════════════════
   ORAK Universe — Temas de interfaz y lectura
   ═══════════════════════════════════════════════════════════════ */

/* ── DARK FANTASY ─────────────────────────────────────────────── */
html.theme-dark-fantasy {
  --page:      #0d0a1a;
  --mist:      #161228;
  --fog:       #3d3060;
  --ink:       #e4dcff;
  --gold:      #d4aaff;
  --amber:     #b57bff;
  --amber-dim: #8a50d0;
  --rust:      #7a3a8a;
  --deep:      #060410;
  --white:     #12101e;
  --parchment: #161228;
  background:  #0d0a1a !important;
}
html.theme-dark-fantasy body { background: transparent !important; }
html.theme-dark-fantasy .topbar,
html.theme-dark-fantasy .sidebar { border-color: rgba(180,120,255,.15); }
html.theme-dark-fantasy .auth-card { background: #100d20; border-color: rgba(181,123,255,.2); }
html.theme-dark-fantasy .auth-glow { background: radial-gradient(ellipse at 50% 0%, rgba(140,60,220,.35) 0%, transparent 65%); }

/* ── WEIRDCORE — El Lugar Que Ya Conoces ─────────────────────── */
html.theme-weirdcore {
  --page:      #0f0c1e;
  --mist:      #1a1530;
  --fog:       #352d55;
  --ink:       #e0d5f0;
  --gold:      #f0d0e8;
  --amber:     #c8b0e0;
  --amber-dim: #8a70b0;
  --rust:      #e080b0;
  --deep:      #080618;
  --white:     #16121e;
  --parchment: #1a1530;
  background:  #0f0c1e !important;
}
html.theme-weirdcore body { background: transparent !important; }
html.theme-weirdcore .topbar,
html.theme-weirdcore .sidebar { border-color: rgba(195,175,230,.12); }
html.theme-weirdcore .auth-card { background: #120e20; border-color: rgba(200,180,235,.18); }
html.theme-weirdcore .auth-glow { background: radial-gradient(ellipse at 50% 0%, rgba(160,120,220,.28) 0%, transparent 65%); }

/* ── GLITCH · CYBER ───────────────────────────────────────────── */
html.theme-glitch {
  --page:      #05100a;
  --mist:      #0a1a10;
  --fog:       #1a4025;
  --ink:       #c0ffd8;
  --gold:      #80ffb0;
  --amber:     #00e890;
  --amber-dim: #00b870;
  --rust:      #ff3060;
  --deep:      #020806;
  --white:     #081208;
  --parchment: #0a1a10;
  background:  #05100a !important;
}
html.theme-glitch body { background: transparent !important; }
html.theme-glitch .topbar { border-color: rgba(0,232,144,.12); }
html.theme-glitch .sidebar { border-color: rgba(0,232,144,.1); }
html.theme-glitch .auth-card { background: #080f0a; border-color: rgba(0,232,144,.2); }
html.theme-glitch .auth-glow { background: radial-gradient(ellipse at 50% 0%, rgba(0,200,100,.3) 0%, transparent 65%); }

/* ── LUNAR ────────────────────────────────────────────────────── */
html.theme-lunar {
  --page:      #080c14;
  --mist:      #101828;
  --fog:       #2a3a5a;
  --ink:       #c8d8f0;
  --gold:      #a8c8e8;
  --amber:     #7aaccc;
  --amber-dim: #507090;
  --rust:      #4a6080;
  --deep:      #04060c;
  --white:     #101828;
  --parchment: #101828;
}
html.theme-lunar body { background: var(--page); }
html.theme-lunar .auth-card { background: #0c1020; border-color: rgba(122,172,204,.2); }
html.theme-lunar .auth-glow { background: radial-gradient(ellipse at 50% 0%, rgba(100,150,200,.25) 0%, transparent 65%); }

/* ── SANGRE & TINTA ───────────────────────────────────────────── */
html.theme-sangre {
  --page:      #f2e8d8;   /* pergamino envejecido */
  --mist:      #e8dcc8;   /* papel antiguo */
  --fog:       #884050;   /* borgoña (visible sobre claro) */
  --ink:       #1a0810;   /* tinta oscura — texto principal */
  --gold:      #f8e8e0;   /* marfil — texto sobre superficies oscuras */
  --amber:     #781428;   /* borgoña activo — botones */
  --amber-dim: #5a0e20;   /* borgoña apagado */
  --rust:      #4a1a10;   /* óxido oscuro */
  --deep:      #0e0408;   /* negro absoluto */
  --white:     #faf4e8;   /* superficie elevada — topbar, eco-card */
  --parchment: #e8dcc8;
}
html.theme-sangre body { background: var(--page); }
html.theme-sangre .auth-card { background: rgba(248,240,222,.92); border-color: rgba(80,18,28,.18); }
html.theme-sangre .auth-glow { background: radial-gradient(ellipse at 50% 0%, rgba(120,20,38,.12) 0%, transparent 65%); }

/* ── ELDERGLOOM VALLEY ────────────────────────────────────────── */
html.theme-eldergloom {
  --page:      #0b0e12;
  --mist:      #11151a;
  --fog:       #2a313b;
  --ink:       #f5f1e8;
  --gold:      #f4b56a;
  --amber:     #e39a4f;
  --amber-dim: #704020;
  --rust:      #4e6b57;
  --deep:      #060810;
  --white:     #1d232b;
  --parchment: #232a33;
  background:  #0b0e12 !important;
}
html.theme-eldergloom body { background: transparent !important; }
html.theme-eldergloom .topbar,
html.theme-eldergloom .sidebar { border-color: rgba(194,145,90,.12); }
html.theme-eldergloom .auth-card { background: #0d1016; border-color: rgba(194,145,90,.18); }
html.theme-eldergloom .auth-glow { background: radial-gradient(ellipse at 50% 0%, rgba(160,100,35,.28) 0%, transparent 65%); }


/* ═══════════════════════════════════════════════════════════════
   TEMAS DE LECTURA
   Se aplican a .reading-overlay para cubrir TODA la pantalla
   ═══════════════════════════════════════════════════════════════ */

/* ── LIBRETA ANTIGUA ──────────────────────────────────────────── */
.reading-overlay.rl-libreta {
  background-color: #f5ead8;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image:
    /* foxing: manchas de envejecimiento del papel dispersas */
    radial-gradient(circle 5px at 76% 18%, rgba(138,88,38,.09) 0%, transparent 100%),
    radial-gradient(circle 3px at 81% 31%, rgba(128,78,28,.07) 0%, transparent 100%),
    radial-gradient(circle 6px at 11% 72%, rgba(138,88,38,.08) 0%, transparent 100%),
    radial-gradient(circle 4px at 89% 59%, rgba(128,78,28,.07) 0%, transparent 100%),
    radial-gradient(circle 5px at 19% 88%, rgba(138,88,38,.09) 0%, transparent 100%),
    radial-gradient(circle 3px at 64% 91%, rgba(120,70,22,.06) 0%, transparent 100%),
    radial-gradient(circle 4px at 5%  42%, rgba(138,88,38,.07) 0%, transparent 100%),
    /* línea de margen */
    linear-gradient(90deg, transparent 58px, rgba(180,80,80,.3) 58px, rgba(180,80,80,.3) 60px, transparent 60px),
    /* renglones */
    repeating-linear-gradient(transparent, transparent 27px, rgba(100,130,180,.2) 28px);
}
/* Sombra de costura + viñeta de libro abierto */
.reading-overlay.rl-libreta::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(40,18,4,.24) 0px,
      rgba(40,18,4,.14) 28px,
      rgba(40,18,4,.06) 62px,
      transparent 108px),
    radial-gradient(ellipse 78% 72% at 52% 46%,
      transparent 42%,
      rgba(90,50,14,.13) 100%);
}
/* Esquina doblada — hint de vuelta de página */
.reading-overlay.rl-libreta::after {
  content: '';
  position: fixed;
  bottom: 0;
  right: 0;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, transparent 50%, #e8d8bc 50%);
  box-shadow: -3px -3px 10px rgba(70,35,8,.18);
  pointer-events: none;
  z-index: 3;
}
.reading-overlay.rl-libreta .reading-top {
  background: rgba(245,234,216,.93);
  border-bottom-color: rgba(139,96,64,.2);
}
.reading-overlay.rl-libreta .reading-body { color: #2c1a0e; }
.reading-overlay.rl-libreta .reading-book-header,
.reading-overlay.rl-libreta .reading-cap-title { color: #5a3010; }
.reading-overlay.rl-libreta .reading-ornament  { color: #8b6040; }
.reading-overlay.rl-libreta .rnav-btn { background: rgba(100,60,20,.08); border-color: rgba(100,60,20,.25); color: #5a3010; }
.reading-overlay.rl-libreta .reading-back,
.reading-overlay.rl-libreta .reading-title { color: #5a3010; }
.reading-overlay.rl-libreta .rc-btn { border-color: rgba(100,60,20,.3); color: #5a3010; }

/* ══════════════════════════════════════════════════════════
   EFECTOS AMBIENTALES DE LOS TEMAS DE LECTURA
   Contenedor compartido (.reading-fx) — cada tema muestra solo
   las piezas que le corresponden vía las reglas de abajo.
   ══════════════════════════════════════════════════════════ */
.reading-fx { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.reading-fx .rl-mote,
.reading-fx .rl-ribbon,
.reading-fx .rl-doodle,
.reading-fx .rl-candle,
.reading-fx .rl-smoke,
.reading-fx .rl-seal,
.reading-fx .rl-lightbeam { display: none; }

/* ── Libreta Antigua: rayo de luz + motas con brillo + listón con
   textura de tela deshilachada + garabato a lápiz con puntitos ── */
.reading-overlay.rl-libreta .rl-lightbeam {
  display: block;
  position: absolute;
  top: -10%; left: 55%;
  width: 46%; height: 130%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,224,160,.10) 48%, rgba(255,224,160,.14) 52%, transparent 70%);
  transform: rotate(-6deg);
}

@keyframes rl-mote-drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: .6; }
  90%  { opacity: .45; }
  100% { transform: translate(var(--mx, 12px), -140px); opacity: 0; }
}
.reading-overlay.rl-libreta .rl-mote {
  display: block;
  position: absolute;
  bottom: -20px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,224,170,.95) 0%, rgba(196,150,90,.5) 55%, rgba(196,150,90,0) 75%);
  box-shadow: 0 0 6px 1px rgba(255,210,140,.35);
  animation: rl-mote-drift linear infinite;
}
.reading-overlay.rl-libreta .rl-mote:nth-child(1)  { left: 8%;  --mx: 14px; width:4px; height:4px; animation-duration: 22s; animation-delay: -1s; }
.reading-overlay.rl-libreta .rl-mote:nth-child(2)  { left: 15%; --mx: -10px;           animation-duration: 26s; animation-delay: -6s; }
.reading-overlay.rl-libreta .rl-mote:nth-child(3)  { left: 23%; --mx: 8px;  width:2px; height:2px; animation-duration: 19s; animation-delay: -3s; box-shadow: 0 0 3px 1px rgba(255,210,140,.3); }
.reading-overlay.rl-libreta .rl-mote:nth-child(4)  { left: 34%; --mx: -16px;           animation-duration: 30s; animation-delay: -12s; }
.reading-overlay.rl-libreta .rl-mote:nth-child(5)  { left: 45%; --mx: 10px;  width:5px; height:5px; animation-duration: 24s; animation-delay: -8s; box-shadow: 0 0 8px 2px rgba(255,210,140,.4); }
.reading-overlay.rl-libreta .rl-mote:nth-child(6)  { left: 58%; --mx: -8px;            animation-duration: 21s; animation-delay: -15s; }
.reading-overlay.rl-libreta .rl-mote:nth-child(7)  { left: 67%; --mx: 12px; width:2px; height:2px; animation-duration: 28s; animation-delay: -4s; box-shadow: 0 0 3px 1px rgba(255,210,140,.3); }
.reading-overlay.rl-libreta .rl-mote:nth-child(8)  { left: 76%; --mx: -14px;           animation-duration: 23s; animation-delay: -18s; }
.reading-overlay.rl-libreta .rl-mote:nth-child(9)  { left: 84%; --mx: 9px;  width:5px; height:5px; animation-duration: 27s; animation-delay: -10s; box-shadow: 0 0 8px 2px rgba(255,210,140,.4); }
.reading-overlay.rl-libreta .rl-mote:nth-child(10) { left: 91%; --mx: -11px;           animation-duration: 20s; animation-delay: -2s; }
.reading-overlay.rl-libreta .rl-mote:nth-child(11) { left: 50%; --mx: 15px; width:2px; height:2px; animation-duration: 25s; animation-delay: -20s; }
.reading-overlay.rl-libreta .rl-mote:nth-child(12) { left: 4%;  --mx: -9px;            animation-duration: 29s; animation-delay: -7s; }

@keyframes rl-ribbon-sway {
  0%, 100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.2deg); }
}
.reading-overlay.rl-libreta .rl-ribbon {
  display: block;
  position: absolute;
  top: 0; right: 22%;
  width: 22px; height: 130px;
  background: linear-gradient(180deg, #9a3838 0%, #7a2828 45%, #6e2222 100%);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
  box-shadow: 2px 2px 10px rgba(40,15,4,.25);
  transform-origin: top center;
  animation: rl-ribbon-sway 7s ease-in-out infinite;
  opacity: .9;
  overflow: visible;
}
.reading-overlay.rl-libreta .rl-ribbon-weave {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.08) 0px, rgba(255,255,255,.08) 1px, transparent 1px, transparent 4px),
              repeating-linear-gradient(25deg, rgba(0,0,0,.06) 0px, rgba(0,0,0,.06) 1px, transparent 1px, transparent 4px);
}
.reading-overlay.rl-libreta .rl-ribbon-fold {
  position: absolute; top: 14px; left: 0; right: 0;
  height: 3px;
  background: rgba(0,0,0,.2);
  box-shadow: 0 1px 0 rgba(255,255,255,.12);
}
.reading-overlay.rl-libreta .rl-ribbon-thread {
  position: absolute; bottom: -9px;
  width: 1px; height: 10px;
  background: linear-gradient(180deg, #7a2828, transparent);
}
.reading-overlay.rl-libreta .rl-ribbon-thread-1 { left: 6px;  transform: rotate(-6deg); }
.reading-overlay.rl-libreta .rl-ribbon-thread-2 { left: 11px; transform: rotate(2deg); height: 8px; }
.reading-overlay.rl-libreta .rl-ribbon-thread-3 { left: 16px; transform: rotate(8deg); height: 11px; }

.reading-overlay.rl-libreta .rl-doodle {
  display: block;
  position: absolute;
  left: 14px; bottom: 40px;
  width: 64px; height: 64px;
  opacity: .32;
}
.reading-overlay.rl-libreta .rl-doodle-path {
  stroke: #5a3010;
  stroke-width: 1.6;
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
  animation: rl-doodle-draw 3.4s ease-out .4s forwards;
}
.reading-overlay.rl-libreta .rl-doodle-dot {
  fill: #5a3010;
  opacity: 0;
  animation: rl-doodle-dot-in .5s ease-out forwards;
  animation-delay: 3.9s;
}
.reading-overlay.rl-libreta .rl-doodle-dot:nth-of-type(2) { animation-delay: 4.05s; }
.reading-overlay.rl-libreta .rl-doodle-dot:nth-of-type(3) { animation-delay: 4.05s; }
.reading-overlay.rl-libreta .rl-doodle-dot:nth-of-type(4) { animation-delay: 4.2s; }
@keyframes rl-doodle-draw { to { stroke-dashoffset: 0; } }
@keyframes rl-doodle-dot-in { to { opacity: 1; } }


/* ── PERGAMINO ────────────────────────────────────────────────── */
/* foto real de pergamino con sello de cera (uso libre, ver pendientes.md) — el sello queda fijo justo donde suele caer la barra de navegación al final del capítulo, así que se desvanece hacia abajo para que no se encimen */
.reading-overlay.rl-pergamino {
  background:
    linear-gradient(180deg, transparent 0%, transparent 62%, rgba(196,168,124,.7) 78%, rgba(196,168,124,.95) 100%),
    url('../assets/temas/rl-pergamino.jpg') center/cover no-repeat;
}
/* motas de polvo + un brillo cálido cerca del sello de cera, como si hubiera una vela cerca — sutil, solo un pulso de opacity */
.reading-overlay.rl-pergamino::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 1.6px at 15% 22%, rgba(90,60,20,.35) 0%, transparent 100%),
    radial-gradient(circle 1.3px at 40% 12%, rgba(90,60,20,.3)  0%, transparent 100%),
    radial-gradient(circle 1.8px at 68% 30%, rgba(90,60,20,.32) 0%, transparent 100%),
    radial-gradient(circle 1.4px at 25% 48%, rgba(90,60,20,.28) 0%, transparent 100%),
    radial-gradient(circle 1.6px at 80% 55%, rgba(90,60,20,.3)  0%, transparent 100%),
    radial-gradient(circle 1.3px at 10% 65%, rgba(90,60,20,.28) 0%, transparent 100%),
    radial-gradient(circle 1.7px at 55% 42%, rgba(90,60,20,.3)  0%, transparent 100%),
    radial-gradient(circle 60px at 52% 84%, rgba(255,120,60,.16) 0%, transparent 75%);
  animation: rl-pergamino-life 6s ease-in-out infinite alternate;
}
@keyframes rl-pergamino-life {
  from { opacity: .5; }
  to   { opacity: 1; }
}
.reading-overlay.rl-pergamino .reading-top {
  background: rgba(200,170,130,.9);
  border-bottom-color: rgba(80,40,0,.2);
}
.reading-overlay.rl-pergamino .reading-body { color: #2a1505; }
.reading-overlay.rl-pergamino .reading-book-header,
.reading-overlay.rl-pergamino .reading-cap-title { color: #4a2a08; }
.reading-overlay.rl-pergamino .reading-ornament  { color: #8b5a20; }
.reading-overlay.rl-pergamino .rnav-btn { background: rgba(80,40,0,.1); border-color: rgba(80,40,0,.28); color: #4a2a08; }
.reading-overlay.rl-pergamino .reading-back,
.reading-overlay.rl-pergamino .reading-title { color: #4a2a08; }
.reading-overlay.rl-pergamino .rc-btn { border-color: rgba(80,40,0,.28); color: #4a2a08; }
.reading-overlay.rl-pergamino .reading-progress  { background: rgba(80,40,0,.12); }
.reading-overlay.rl-pergamino .reading-progress-fill { background: #8b5a20; }
.reading-overlay.rl-pergamino .reading-book-header { border-bottom-color: rgba(80,40,0,.25); }

/* ── Pergamino: capitular iluminada + divisores ornamentales +
   acentos en el autor + botones de navegación tipo pergamino ── */
.reading-overlay.rl-pergamino .reading-text::first-letter {
  font-family: 'Cinzel', serif;
  font-size: 4.4rem;
  font-weight: 900;
  float: left;
  line-height: .78;
  padding: 6px 10px 0 2px;
  color: #6a3a10;
  text-shadow: 0 0 1px rgba(90,50,10,.4);
  -webkit-text-stroke: 1.5px rgba(139,90,32,.55);
}
.reading-overlay.rl-pergamino .rbh-author::before,
.reading-overlay.rl-pergamino .rbh-author::after {
  content: '✦';
  color: #8b5a20;
  margin: 0 8px;
  opacity: .7;
}
.reading-overlay.rl-pergamino .reading-cap-title {
  position: relative;
  text-align: center;
  padding-bottom: 14px;
}
.reading-overlay.rl-pergamino .reading-cap-title::after {
  content: '❖';
  position: absolute;
  left: 50%; bottom: -6px;
  transform: translateX(-50%);
  font-size: .7rem;
  color: #8b5a20;
  opacity: .55;
}
.reading-overlay.rl-pergamino .reading-ornament {
  color: #8b5a20;
  font-size: 1.1rem;
  letter-spacing: .5em;
  opacity: .55;
}
.reading-overlay.rl-pergamino .reading-nav { border-top-color: rgba(80,40,0,.18); }
.reading-overlay.rl-pergamino .rnav-btn {
  position: relative;
  clip-path: polygon(3% 0%, 97% 0%, 100% 50%, 97% 100%, 3% 100%, 0% 50%);
  padding: 8px 22px;
  background: rgba(139,90,32,.12);
  border: 1px solid rgba(80,40,0,.3);
}
.reading-overlay.rl-pergamino .rnav-btn:hover {
  background: rgba(139,90,32,.22);
  border-color: #8b5a20;
  color: #4a2a08;
}


/* ── Pergamino: candelabro con vela goteada + llama en dos capas +
   humo ondulante + sello de cera con borde irregular ── */
@keyframes rl-flame-core {
  0%   { transform: scaleY(1) scaleX(1) translateX(0); }
  22%  { transform: scaleY(1.1) scaleX(.9) translateX(-.6px); }
  45%  { transform: scaleY(.92) scaleX(1.06) translateX(.5px); }
  68%  { transform: scaleY(1.06) scaleX(.95) translateX(-.3px); }
  100% { transform: scaleY(1) scaleX(1) translateX(0); }
}
@keyframes rl-flame-outer {
  0%   { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: .85; }
  30%  { transform: scaleY(1.14) scaleX(.92) rotate(-3deg); opacity: .95; }
  55%  { transform: scaleY(.9) scaleX(1.08) rotate(2deg); opacity: .8; }
  80%  { transform: scaleY(1.08) scaleX(.94) rotate(-1deg); opacity: .9; }
  100% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: .85; }
}
/* Vela y sello desactivados para Pergamino a pedido del usuario —
   se dejan las reglas de abajo por si se reusan en otro tema. */
.reading-overlay.rl-pergamino .rl-candle,
.reading-overlay.rl-pergamino .rl-smoke,
.reading-overlay.rl-pergamino .rl-seal { display: none !important; }

.reading-overlay.rl-pergamino .rl-candle {
  display: block; position: absolute; right: 8%; bottom: 26px;
  width: 40px; height: 96px;
}
.reading-overlay.rl-pergamino .rl-candle-holder {
  position: absolute; bottom: 0; left: 2px;
  width: 36px; height: 10px;
  background: linear-gradient(180deg, #d4af5a 0%, #8a6a28 60%, #6a4e18 100%);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(30,15,0,.35), inset 0 1px 0 rgba(255,235,180,.4);
}
.reading-overlay.rl-pergamino .rl-candle-body {
  position: absolute; bottom: 8px; left: 10px;
  width: 20px; height: 62px;
  background: linear-gradient(90deg, #d8c096 0%, #f2e6c8 35%, #ecdcb4 55%, #c8ac7c 100%);
  border-radius: 2px 2px 3px 3px;
  box-shadow: inset -4px 0 6px rgba(110,80,30,.3), inset 3px 0 4px rgba(255,250,230,.5);
}
.reading-overlay.rl-pergamino .rl-candle-drip {
  position: absolute; width: 6px; height: 16px;
  background: linear-gradient(180deg, #f2e6c8 0%, #d8c096 100%);
  border-radius: 0 0 50% 50% / 0 0 60% 60%;
}
.reading-overlay.rl-pergamino .rl-candle-drip-1 { bottom: 44px; left: 8px; height: 12px; transform: rotate(-4deg); }
.reading-overlay.rl-pergamino .rl-candle-drip-2 { bottom: 52px; left: 27px; height: 20px; transform: rotate(3deg); }
.reading-overlay.rl-pergamino .rl-candle-wick {
  position: absolute; bottom: 68px; left: 18px;
  width: 2px; height: 7px;
  background: #3a2c18;
  border-radius: 1px;
}
.reading-overlay.rl-pergamino .rl-candle-flame-core {
  position: absolute; bottom: 72px; left: 17px;
  width: 5px; height: 12px;
  background: radial-gradient(ellipse at 50% 75%, #ffffff 0%, #fff6c8 45%, #ffcf5c 100%);
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  transform-origin: 50% 100%;
  animation: rl-flame-core 1.9s ease-in-out infinite;
  filter: blur(.2px);
}
.reading-overlay.rl-pergamino .rl-candle-flame-outer {
  position: absolute; bottom: 70px; left: 14px;
  width: 12px; height: 24px;
  background: radial-gradient(ellipse at 50% 68%, rgba(255,220,140,.85) 0%, rgba(255,170,50,.7) 45%, rgba(230,90,10,.55) 75%, transparent 100%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  transform-origin: 50% 100%;
  animation: rl-flame-outer 2.6s ease-in-out infinite;
}
.reading-overlay.rl-pergamino .rl-candle-glow {
  position: absolute; bottom: 50px; left: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(255,190,80,.24) 0%, transparent 70%);
}

@keyframes rl-smoke-rise {
  0%   { transform: translate(0,0) scale(.4) rotate(0deg); opacity: 0; }
  12%  { opacity: .2; }
  50%  { transform: translate(var(--sx1,8px), -45px) scale(1.1) rotate(8deg); opacity: .14; }
  100% { transform: translate(var(--sx2,16px), -100px) scale(2) rotate(-6deg); opacity: 0; }
}
.reading-overlay.rl-pergamino .rl-smoke {
  display: block; position: absolute;
  right: calc(8% + 15px); bottom: 96px;
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, rgba(210,204,192,.55) 0%, transparent 75%);
  animation: rl-smoke-rise 7s ease-out infinite;
}
.reading-overlay.rl-pergamino .rl-smoke:nth-child(1) { --sx1: 10px;  --sx2: 20px;  animation-delay: 0s;   width:6px; height:6px; }
.reading-overlay.rl-pergamino .rl-smoke:nth-child(2) { --sx1: -6px;  --sx2: -18px; animation-delay: 1.8s; }
.reading-overlay.rl-pergamino .rl-smoke:nth-child(3) { --sx1: 5px;   --sx2: 12px;  animation-delay: 3.6s; width:4px; height:4px; }
.reading-overlay.rl-pergamino .rl-smoke:nth-child(4) { --sx1: -9px;  --sx2: -22px; animation-delay: 5.4s; }

@keyframes rl-seal-stamp {
  0%   { transform: scale(2.2) rotate(-14deg); opacity: 0; }
  55%  { transform: scale(.9) rotate(3deg); opacity: 1; }
  75%  { transform: scale(1.06) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.reading-overlay.rl-pergamino .rl-seal {
  display: block; position: absolute;
  left: 20px; bottom: 34px;
  width: 64px; height: 64px;
  opacity: .92;
  filter: drop-shadow(1px 3px 3px rgba(30,8,4,.4));
  animation: rl-seal-stamp .9s cubic-bezier(.32,1.4,.5,1) .3s both;
}
.reading-overlay.rl-pergamino .rl-seal-star { fill: rgba(255,222,195,.6); }
.reading-overlay.rl-pergamino .rl-seal-crack { fill: none; stroke: rgba(30,8,4,.3); stroke-width: 1; stroke-linecap: round; }
.reading-overlay.rl-pergamino .rl-seal-shine { fill: rgba(255,235,210,.22); }


/* ── MÁQUINA DE ESCRIBIR ──────────────────────────────────────── */
/* foto real: hoja en blanco cargada en una máquina de escribir de verdad (uso libre, ver pendientes.md) */
.reading-overlay.rl-maquina {
  background:
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(242,239,228,.55) 68%, rgba(242,239,228,.85) 100%),
    url('../assets/temas/rl-maquina.jpg') center/cover no-repeat;
}
/* motas de polvo sutiles sobre la hoja en blanco, solo un pulso de opacity */
.reading-overlay.rl-maquina::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 1.4px at 20% 15%, rgba(80,70,40,.3)  0%, transparent 100%),
    radial-gradient(circle 1.2px at 45% 8%,  rgba(80,70,40,.26) 0%, transparent 100%),
    radial-gradient(circle 1.6px at 70% 20%, rgba(80,70,40,.3)  0%, transparent 100%),
    radial-gradient(circle 1.3px at 30% 32%, rgba(80,70,40,.26) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 85% 38%, rgba(80,70,40,.28) 0%, transparent 100%),
    radial-gradient(circle 1.2px at 12% 45%, rgba(80,70,40,.25) 0%, transparent 100%);
  animation: rl-maquina-dust 5.5s ease-in-out infinite alternate;
}
@keyframes rl-maquina-dust {
  from { opacity: .4; }
  to   { opacity: 1; }
}
.reading-overlay.rl-maquina .reading-top {
  background: rgba(242,239,228,.92);
  border-bottom-color: #cdc4a8;
}
.reading-overlay.rl-maquina .reading-body {
  color: #1c1a15;
  font-family: 'JetBrains Mono','Courier New',Courier,monospace !important;
}
.reading-overlay.rl-maquina .reading-body * {
  font-family: 'JetBrains Mono','Courier New',Courier,monospace !important;
}
.reading-overlay.rl-maquina .reading-book-header {
  border-bottom: 1px dotted #b8ab8a;
  position: relative;
}
.reading-overlay.rl-maquina .reading-book-header::after {
  content: '•';
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  background: #f2efe4;
  padding: 0 6px;
  color: #8a8168;
  line-height: 1;
}
.reading-overlay.rl-maquina .rbh-title { color: #141210; }
.reading-overlay.rl-maquina .rbh-author { color: #a8720c; }
.reading-overlay.rl-maquina .reading-cap-title { color: #141210; letter-spacing: .02em; text-transform: uppercase; }
.reading-overlay.rl-maquina .reading-ornament {
  font-size: 0; color: transparent; letter-spacing: normal;
}
.reading-overlay.rl-maquina .reading-ornament::before {
  content: '· · · · ✳ · · · ·';
  font-size: .9rem;
  letter-spacing: .2em;
  color: #8a8168;
}
.reading-overlay.rl-maquina .reading-cap-footer { position: relative; }
.reading-overlay.rl-maquina .rcf-num { color: #141210; font-family:'JetBrains Mono',monospace; }
.reading-overlay.rl-maquina .rcf-book { color: #8a8168; }
.reading-overlay.rl-maquina .rnav-btn {
  background: #e8e3d2;
  border: 1px dashed #a8987a;
  color: #2a2619;
  font-family: 'JetBrains Mono',monospace;
}
.reading-overlay.rl-maquina .reading-back,
.reading-overlay.rl-maquina .reading-title,
.reading-overlay.rl-maquina .rc-btn { color: #2a2619; border-color: #c4baa0; }
.reading-overlay.rl-maquina .reading-progress { background: rgba(20,18,14,.1); }
.reading-overlay.rl-maquina .reading-progress-fill { background: #2a2619; }
.reading-overlay.rl-maquina .reading-page-num { color: #8a8168; }

/* ── NOCHE ETERNA ─────────────────────────────────────────────── */
/* foto de fondo (imagen libre de uso, ver pendientes.md) + capa oscura para que el texto claro siga legible */
.reading-overlay.rl-noche {
  background:
    linear-gradient(rgba(3,6,10,.62), rgba(3,6,10,.72)),
    url('../assets/temas/rl-noche.jpg') center/cover no-repeat;
}
/* chispitas de estrella encima de la foto + ventanitas del pueblo parpadeando como si tuvieran vela adentro */
.reading-overlay.rl-noche::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 1.3px at 12% 8%,  #fff 0%, transparent 100%),
    radial-gradient(circle 1.6px at 24% 18%, #fff 0%, transparent 100%),
    radial-gradient(circle 1.1px at 6% 32%,  #fff 0%, transparent 100%),
    radial-gradient(circle 1.4px at 38% 6%,  #fff 0%, transparent 100%),
    radial-gradient(circle 1.2px at 55% 22%, #fff 0%, transparent 100%),
    radial-gradient(circle 1.7px at 70% 8%, #fff 0%, transparent 100%),
    radial-gradient(circle 1.1px at 15% 55%, #fff 0%, transparent 100%),
    radial-gradient(circle 1.4px at 33% 68%, #fff 0%, transparent 100%),
    radial-gradient(circle 1.2px at 48% 45%, #fff 0%, transparent 100%),
    radial-gradient(circle 1.6px at 62% 60%, #fff 0%, transparent 100%),
    radial-gradient(circle 1.1px at 8% 78%,  #fff 0%, transparent 100%),
    radial-gradient(circle 1.4px at 28% 88%, #fff 0%, transparent 100%),
    radial-gradient(circle 1.2px at 45% 80%, #fff 0%, transparent 100%),
    radial-gradient(circle 1.7px at 85% 40%, #fff 0%, transparent 100%),
    radial-gradient(circle 1.1px at 92% 65%, #fff 0%, transparent 100%),
    radial-gradient(circle 1.4px at 78% 85%, #fff 0%, transparent 100%),
    radial-gradient(circle 3px at 62% 88%, rgba(255,210,140,.85) 0%, rgba(255,180,90,.3) 55%, transparent 80%),
    radial-gradient(circle 2.6px at 70% 90%, rgba(255,210,140,.8) 0%, rgba(255,180,90,.28) 55%, transparent 80%),
    radial-gradient(circle 3.2px at 83% 93%, rgba(255,210,140,.85) 0%, rgba(255,180,90,.3) 55%, transparent 80%);
  animation: rl-noche-twinkle 2.6s ease-in-out infinite alternate;
}
@keyframes rl-noche-twinkle {
  from { opacity: .45; }
  to   { opacity: 1; }
}
/* cometa: cruza rápido cada tanto y se queda invisible el resto del ciclo */
.reading-overlay.rl-noche::after {
  content: '';
  position: fixed;
  top: 10%;
  left: 0;
  width: 130px;
  height: 2px;
  z-index: 0;
  pointer-events: none;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.75) 65%, #fff 100%);
  filter: drop-shadow(0 0 4px rgba(255,255,255,.85));
  opacity: 0;
  animation: rl-noche-cometa 46s linear infinite;
}
@keyframes rl-noche-cometa {
  0%    { transform: translate(-20vw, 0) rotate(25deg); opacity: 0; }
  0.5%  { opacity: 1; }
  3%    { transform: translate(85vw, 42vh) rotate(25deg); opacity: 1; }
  3.6%  { opacity: 0; }
  100%  { transform: translate(85vw, 42vh) rotate(25deg); opacity: 0; }
}
.reading-overlay.rl-noche .reading-top {
  background: rgba(3,3,4,.85);
  border-bottom-color: rgba(255,255,255,.08);
}
.reading-overlay.rl-noche .reading-body,
.reading-overlay.rl-noche .reading-text { color: #d8d6ce; }
.reading-overlay.rl-noche .reading-book-header {
  border-bottom-color: rgba(255,255,255,.1);
  position: relative;
}
.reading-overlay.rl-noche .reading-book-header::before {
  content: '☽  ·  ✦  ·  ☾';
  display: block;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .3em;
  color: rgba(255,255,255,.28);
  margin-bottom: 22px;
}
.reading-overlay.rl-noche .reading-cap-title,
.reading-overlay.rl-noche .rbh-title { color: #f2f0e8; }
.reading-overlay.rl-noche .rbh-author { color: rgba(255,255,255,.4); }
.reading-overlay.rl-noche .reading-ornament  { color: rgba(255,255,255,.3); }
.reading-overlay.rl-noche .rcf-num { color: #f2f0e8; }
.reading-overlay.rl-noche .rcf-book { color: rgba(255,255,255,.3); }
.reading-overlay.rl-noche .rnav-btn {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.15);
  color: #c9c7bf;
}
.reading-overlay.rl-noche .rnav-btn::before { content: '✦ '; opacity: .5; }
.reading-overlay.rl-noche .reading-back,
.reading-overlay.rl-noche .reading-title { color: #d0d0d0; }
.reading-overlay.rl-noche .rc-btn { border-color: rgba(255,255,255,.15); color: #ccc; }
.reading-overlay.rl-noche .reading-progress  { background: rgba(255,255,255,.06); }
.reading-overlay.rl-noche .reading-progress-fill { background: #bcbaae; }
.reading-overlay.rl-noche .reading-page-num { color: rgba(255,255,255,.3); }
.reading-overlay.rl-noche .rc-tema-panel { background: #111; border-color: #333; }
.reading-overlay.rl-noche .rc-tema-opt { color: #ccc; }
.reading-overlay.rl-noche .rc-tema-opt:hover { background: #222; }

/* ── BOSQUE ENCANTADO ─────────────────────────────────────────── */
/* foto de fondo (imagen libre de uso, ver pendientes.md) + capa oscura para que el texto claro siga legible */
.reading-overlay.rl-bosque {
  background:
    linear-gradient(rgba(3,8,3,.8), rgba(3,8,3,.88)),
    url('../assets/temas/rl-bosque.jpg') center/cover no-repeat;
}
/* las luciérnagas ahora se dibujan con Canvas (js/themes/bosque-fireflies.js) — ver _syncTemaCanvas() en libro.html */
.reading-overlay.rl-bosque .reading-top {
  background: rgba(6,14,6,.85);
  border-bottom-color: rgba(120,180,100,.15);
}
.reading-overlay.rl-bosque .reading-body,
.reading-overlay.rl-bosque .reading-text { color: #b8dcae; }
.reading-overlay.rl-bosque .reading-book-header {
  border-bottom-color: rgba(120,180,100,.18);
  position: relative;
}
.reading-overlay.rl-bosque .reading-book-header::before {
  content: '❧  ·  ✦  ·  ❧';
  display: block;
  text-align: center;
  font-size: .85rem;
  letter-spacing: .25em;
  color: rgba(150,200,130,.5);
  margin-bottom: 20px;
}
.reading-overlay.rl-bosque .reading-cap-title,
.reading-overlay.rl-bosque .rbh-title { color: #dcf0cc; }
.reading-overlay.rl-bosque .reading-cap-title::before { content: '❧ '; opacity: .55; }
.reading-overlay.rl-bosque .rbh-author { color: #7ab88a; }
.reading-overlay.rl-bosque .reading-ornament { color: transparent; font-size: 0; }
.reading-overlay.rl-bosque .reading-ornament::before {
  content: '❧ · ✦ · ❧';
  font-size: .9rem;
  letter-spacing: .2em;
  color: #5a9a6a;
}
.reading-overlay.rl-bosque .rcf-num { color: #dcf0cc; }
.reading-overlay.rl-bosque .rcf-book { color: #6a9a72; }
.reading-overlay.rl-bosque .rnav-btn { background: rgba(80,160,80,.08); border-color: rgba(80,160,80,.22); color: #a8d8a0; }
.reading-overlay.rl-bosque .rnav-btn::before { content: '❧ '; opacity: .6; }
.reading-overlay.rl-bosque .reading-back,
.reading-overlay.rl-bosque .reading-title { color: #b0d8a8; }
.reading-overlay.rl-bosque .rc-btn { border-color: rgba(80,160,80,.25); color: #90c890; }
.reading-overlay.rl-bosque .reading-progress  { background: rgba(80,160,80,.08); }
.reading-overlay.rl-bosque .reading-progress-fill { background: #5a9a6a; }
.reading-overlay.rl-bosque .reading-page-num { color: #6a9a72; }
.reading-overlay.rl-bosque .rc-tema-panel { background: #0f2010; border-color: rgba(80,160,80,.2); }
.reading-overlay.rl-bosque .rc-tema-opt { color: #b0d8a8; }
.reading-overlay.rl-bosque .rc-tema-opt:hover { background: rgba(80,160,80,.1); }


/* ═══════════════════════════════════════════════════════════════
   ANIMACIONES VIVIENTES — Un efecto único por cada tema UI
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes df-ascend      { from{background-position:0 800px} to{background-position:100px 0} }
@keyframes df-glow        { 0%,100%{opacity:.5} 50%{opacity:.9} }
@keyframes glitch-scan    { 0%{transform:translateY(-6px);opacity:0} 4%{opacity:.85} 95%{opacity:.55} 100%{transform:translateY(100vh);opacity:0} }
@keyframes glitch-body-shift {
  0%,80%,100% { filter:none; }
  81% { filter:hue-rotate(85deg) saturate(2.8) brightness(1.18); }
  82% { filter:hue-rotate(-30deg) contrast(1.3) saturate(2); }
  83% { filter:none; }
}
@keyframes glitch-artifact {
  0%,84%,100% { opacity:0; }
  85% { opacity:1; background:rgba(0,232,144,.13); clip-path:inset(14% 0 77% 0); transform:translateX(-6px); }
  86% { opacity:1; background:rgba(255,0,80,.09);  clip-path:inset(62% 0 22% 0); transform:translateX(8px) scaleX(1.01); }
  87% { opacity:1; background:rgba(0,120,255,.1);  clip-path:inset(38% 0 48% 0); transform:translateX(-3px); }
  88% { opacity:0; }
}
/* lunar-drift / lunar-breathe / lunar-shimmer eliminados — Canvas los reemplaza */
/* sangre-fall / sangre-pulse / sangre-flicker eliminados — Canvas los reemplaza */
/* rubi-petals / rubi-shimmer eliminados — Canvas los reemplaza */
@keyframes esm-rise       { from{background-position:0 700px} to{background-position:-80px 0} }
@keyframes esm-blink      { 0%{opacity:.3} 25%{opacity:.98} 50%{opacity:.18} 75%{opacity:.88} 100%{opacity:.3} }
@keyframes esm-blink2     { 0%{opacity:.85} 28%{opacity:.12} 55%{opacity:.95} 82%{opacity:.18} 100%{opacity:.85} }

/* ── ✦ DARK FANTASY — partículas reemplazadas por Canvas (dark-fantasy.js) ── */

/* ── ⟋ GLITCH — escáner CRT + distorsión de pantalla ──────────── */
html.theme-glitch body {
  animation: glitch-body-shift 11s linear infinite;
}
html.theme-glitch body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(0,232,144,.013) 3px, rgba(0,232,144,.013) 4px
  );
}
html.theme-glitch body::after {
  content:''; position:fixed; left:0; right:0; top:0; height:3px;
  pointer-events:none; z-index:1;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0,200,120,.4) 10%,
    rgba(0,255,160,.95) 50%,
    rgba(0,200,120,.4) 90%, transparent 100%
  );
  box-shadow: 0 0 8px rgba(0,232,144,.7), 0 0 22px rgba(0,232,144,.4), 0 0 44px rgba(0,232,144,.2);
  animation: glitch-scan 10s linear infinite;
}
/* Artefacto de glitch — franjas desplazadas en html para que cubra absolutamente todo */
html.theme-glitch::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  animation: glitch-artifact 11s linear infinite;
}

/* ── ◌ LUNAR — luna, estrellas y polvo renderizados por Canvas ──
   (lunar.js + theme-engine.js reemplazan todos los pseudo-elementos)  */

/* ── ♥ SANGRE & TINTA — tinta viva renderizada por Canvas ───
   (sangre.js + theme-engine.js reemplazan todos los pseudo-elementos) */

/* ── ❋ AURORA BOREAL — glow ambiente CSS (cortinas via Canvas) ── */
/* El campo de estrellas y las cortinas de aurora las renderiza
   frontend/js/themes/aurora.js con Canvas 2D */

/* ── ✦ RUBÍ — pétalos de rosa renderizados por Canvas (rubi.js) ── */

/* ── ◈ ESMERALDA — luciérnagas y esporas renderizadas por Canvas ── */

/* ═══════════════════════════════════════════════════════════════
   PACK UNIVERSO — 4 temas UI + 4 temas de lectura
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes compartidos ────────────────────────────────────── */
@keyframes cosmos-drift   { from{transform:translate3d(0,0,0)} to{transform:translate3d(-800px,-400px,0)} }
@keyframes cosmos-twinkle { 0%,100%{opacity:.65} 50%{opacity:1} }
@keyframes estrellas-drift { from{background-position:0 0} to{background-position:-600px -300px} }
@keyframes abismo-pulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.07)} }

/* ── ✦ COSMOS ────────────────────────────────────────────────── */
html.theme-cosmos {
  --page:#05040b; --mist:#0d0b18; --fog:#2a2050;
  --ink:#f0ecff; --gold:#f8d87a; --amber:#e8b84a; --amber-dim:#a07820;
  --rust:#6a4010; --deep:#020108; --white:#100e1a; --parchment:#0d0b18;
}
html.theme-cosmos body { background:var(--page); }
html.theme-cosmos body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 18%,rgba(80,60,200,.1) 0%,transparent 70%),
    radial-gradient(ellipse 40% 35% at 82% 70%,rgba(180,100,20,.07) 0%,transparent 70%);
}
html.theme-cosmos body::after {
  content:''; position:fixed; top:0; left:0; pointer-events:none; z-index:0;
  width:calc(100% + 800px); height:calc(100% + 400px); will-change:transform;
  background-image:
    radial-gradient(1px 1px at 47px 15px,rgba(255,255,255,.9) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 123px 67px,rgba(255,232,160,.75) 0%,transparent 100%),
    radial-gradient(1px 1px at 234px 34px,rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 356px 89px,rgba(255,255,255,.6) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 478px 23px,rgba(255,232,160,.85) 0%,transparent 100%),
    radial-gradient(1px 1px at 589px 56px,rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(2px 2px at 678px 89px,rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 756px 34px,rgba(255,255,255,.65) 0%,transparent 100%),
    radial-gradient(1px 1px at 89px 156px,rgba(255,255,255,.75) 0%,transparent 100%),
    radial-gradient(2px 2px at 178px 134px,rgba(255,232,160,.85) 0%,transparent 100%),
    radial-gradient(1px 1px at 289px 178px,rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 423px 145px,rgba(255,255,255,.65) 0%,transparent 100%),
    radial-gradient(1px 1px at 512px 189px,rgba(255,255,255,.9) 0%,transparent 100%),
    radial-gradient(1px 1px at 634px 134px,rgba(255,232,160,.75) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 723px 167px,rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 34px 267px,rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 145px 312px,rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(2px 2px at 256px 289px,rgba(255,232,160,.75) 0%,transparent 100%),
    radial-gradient(1px 1px at 378px 334px,rgba(255,255,255,.9) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 456px 267px,rgba(255,255,255,.65) 0%,transparent 100%),
    radial-gradient(1px 1px at 567px 312px,rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 689px 289px,rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(2px 2px at 756px 356px,rgba(255,232,160,.85) 0%,transparent 100%),
    radial-gradient(1px 1px at 78px 423px,rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 189px 467px,rgba(255,232,160,.85) 0%,transparent 100%),
    radial-gradient(1px 1px at 312px 434px,rgba(255,255,255,.75) 0%,transparent 100%),
    radial-gradient(2px 2px at 434px 489px,rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(1px 1px at 523px 445px,rgba(255,255,255,.9) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 645px 478px,rgba(255,255,255,.65) 0%,transparent 100%),
    radial-gradient(1px 1px at 734px 423px,rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(2px 2px at 56px 589px,rgba(255,232,160,.75) 0%,transparent 100%),
    radial-gradient(1px 1px at 167px 634px,rgba(255,255,255,.9) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 289px 612px,rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(1px 1px at 401px 667px,rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 512px 623px,rgba(255,232,160,.85) 0%,transparent 100%),
    radial-gradient(2px 2px at 634px 689px,rgba(255,255,255,.65) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 712px 645px,rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 778px 712px,rgba(255,255,255,.75) 0%,transparent 100%),
    radial-gradient(1px 1px at 664px 124px,rgba(255,255,255,0.8) 0%,transparent 100%),
    radial-gradient(2px 2px at 238px 152px,rgba(255,232,160,0.85) 0%,transparent 100%),
    radial-gradient(1px 1px at 614px 442px,rgba(255,232,160,0.75) 0%,transparent 100%),
    radial-gradient(2px 2px at 248px 527px,rgba(255,232,160,0.75) 0%,transparent 100%),
    radial-gradient(2px 2px at 743px 675px,rgba(255,255,255,0.8) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 469px 613px,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(2px 2px at 787px 173px,rgba(255,255,255,0.75) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 169px 230px,rgba(255,232,160,0.7) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 109px 377px,rgba(255,255,255,0.85) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 54px 757px,rgba(255,255,255,0.7) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 90px 575px,rgba(255,255,255,0.65) 0%,transparent 100%),
    radial-gradient(1px 1px at 380px 601px,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 687px 243px,rgba(255,255,255,0.85) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 248px 113px,rgba(255,232,160,0.8) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 176px 389px,rgba(255,232,160,0.8) 0%,transparent 100%),
    radial-gradient(2px 2px at 728px 709px,rgba(255,232,160,0.75) 0%,transparent 100%),
    radial-gradient(1px 1px at 556px 756px,rgba(255,232,160,0.7) 0%,transparent 100%),
    radial-gradient(2px 2px at 286px 665px,rgba(255,255,255,0.6) 0%,transparent 100%),
    radial-gradient(1px 1px at 342px 67px,rgba(255,255,255,0.85) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 333px 420px,rgba(255,232,160,0.8) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 227px 681px,rgba(255,255,255,0.6) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 479px 156px,rgba(255,232,160,0.8) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 774px 608px,rgba(255,255,255,0.7) 0%,transparent 100%),
    radial-gradient(1px 1px at 380px 234px,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(1px 1px at 783px 58px,rgba(255,232,160,0.75) 0%,transparent 100%),
    radial-gradient(2px 2px at 706px 442px,rgba(255,232,160,0.7) 0%,transparent 100%),
    radial-gradient(2px 2px at 620px 489px,rgba(255,232,160,0.85) 0%,transparent 100%),
    radial-gradient(1px 1px at 706px 748px,rgba(255,255,255,0.65) 0%,transparent 100%),
    radial-gradient(2px 2px at 778px 283px,rgba(255,255,255,0.75) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 455px 171px,rgba(255,232,160,0.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 522px 790px,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(2px 2px at 650px 315px,rgba(255,255,255,0.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 166px 392px,rgba(255,255,255,0.85) 0%,transparent 100%),
    radial-gradient(2px 2px at 553px 10px,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 124px 381px,rgba(255,232,160,0.75) 0%,transparent 100%),
    radial-gradient(1px 1px at 590px 90px,rgba(255,255,255,0.85) 0%,transparent 100%),
    radial-gradient(2px 2px at 80px 788px,rgba(255,255,255,0.8) 0%,transparent 100%),
    radial-gradient(2px 2px at 685px 496px,rgba(255,232,160,0.7) 0%,transparent 100%),
    radial-gradient(2px 2px at 226px 562px,rgba(255,255,255,0.6) 0%,transparent 100%),
    radial-gradient(2px 2px at 329px 418px,rgba(255,255,255,0.7) 0%,transparent 100%);
  background-size:800px 800px; background-repeat:repeat;
  animation:cosmos-drift 90s linear infinite, cosmos-twinkle 7s ease-in-out infinite alternate;
}
html.theme-cosmos .topbar,
html.theme-cosmos .sidebar { border-color:rgba(180,150,80,.15); }
html.theme-cosmos .auth-card { background:#0c0b18; border-color:rgba(232,184,74,.2); }
html.theme-cosmos .auth-glow { background:radial-gradient(ellipse at 50% 0%,rgba(100,70,180,.45) 0%,transparent 65%); }

/* ── ❋ AURORA BOREAL ─────────────────────────────────────────── */
html.theme-aurora {
  --page:#030d12; --mist:#071820; --fog:#0d3040;
  --ink:#d4f0ea; --gold:#80f0cc; --amber:#00d4a8; --amber-dim:#009878;
  --rust:#006040; --deep:#020608; --white:#071818; --parchment:#071820;
}
html.theme-aurora body { background:var(--page); }
html.theme-aurora body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 60% 30% at 50% 8%,rgba(0,180,120,.06) 0%,transparent 80%);
}
/* body::after reemplazado por Canvas — ver js/themes/aurora.js */
html.theme-aurora .topbar,
html.theme-aurora .sidebar { border-color:rgba(0,200,160,.1); }
html.theme-aurora .auth-card { background:#07161a; border-color:rgba(0,212,168,.2); }
html.theme-aurora .auth-glow { background:radial-gradient(ellipse at 50% 0%,rgba(0,160,100,.38) 0%,transparent 65%); }

/* ── ✦ RUBÍ ──────────────────────────────────────────────────── */
html.theme-rubi {
  --page:#0d0308; --mist:#1a0610; --fog:#3d1022;
  --ink:#f4d8e8; --gold:#ffa8c8; --amber:#e87898; --amber-dim:#b04060;
  --rust:#6a1028; --deep:#060108; --white:#120408; --parchment:#1a0610;
}
html.theme-rubi body { background:var(--page); }
html.theme-rubi body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 50% 40% at 28% 15%,rgba(200,20,60,.08) 0%,transparent 70%),
    radial-gradient(ellipse 60% 40% at 72% 80%,rgba(140,0,40,.06) 0%,transparent 70%);
}
html.theme-rubi .topbar,
html.theme-rubi .sidebar { border-color:rgba(220,80,120,.12); }
html.theme-rubi .auth-card { background:#140408; border-color:rgba(232,120,152,.2); }
html.theme-rubi .auth-glow { background:radial-gradient(ellipse at 50% 0%,rgba(180,20,60,.42) 0%,transparent 65%); }

/* ── ◈ ESMERALDA ─────────────────────────────────────────────── */
html.theme-esmeralda {
  --page:#030e06; --mist:#071a0c; --fog:#123820;
  --ink:#d0f4e0; --gold:#80f4a8; --amber:#35d878; --amber-dim:#1a9448;
  --rust:#0a5020; --deep:#010802; --white:#071408; --parchment:#071a0c;
}
html.theme-esmeralda body { background:var(--page); }
html.theme-esmeralda body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 55% 40% at 20% 20%,rgba(0,180,80,.08) 0%,transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 60%,rgba(0,120,60,.06) 0%,transparent 70%);
}
html.theme-esmeralda .topbar,
html.theme-esmeralda .sidebar { border-color:rgba(50,200,100,.1); }
html.theme-esmeralda .auth-card { background:#081408; border-color:rgba(53,216,120,.2); }
html.theme-esmeralda .auth-glow { background:radial-gradient(ellipse at 50% 0%,rgba(0,160,60,.38) 0%,transparent 65%); }


/* ═══════════════════════════════════════════════════════════════
   NUEVOS TEMAS DE LECTURA — Pack Universo
   ═══════════════════════════════════════════════════════════════ */

/* ── ✶ CIELO ESTRELLADO ──────────────────────────────────────── */
.reading-overlay.rl-estrellas { background:#050a18; }
.reading-overlay.rl-estrellas::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1px 1px at 56px 22px,rgba(220,240,255,.9) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 134px 78px,rgba(180,210,255,.75) 0%,transparent 100%),
    radial-gradient(1px 1px at 212px 45px,rgba(220,240,255,.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 334px 12px,rgba(220,240,255,.6) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 445px 67px,rgba(180,210,255,.85) 0%,transparent 100%),
    radial-gradient(1px 1px at 523px 34px,rgba(220,240,255,.7) 0%,transparent 100%),
    radial-gradient(2px 2px at 589px 89px,rgba(255,255,255,.75) 0%,transparent 100%),
    radial-gradient(1px 1px at 567px 156px,rgba(220,240,255,.65) 0%,transparent 100%),
    radial-gradient(1px 1px at 78px 167px,rgba(220,240,255,.75) 0%,transparent 100%),
    radial-gradient(2px 2px at 156px 145px,rgba(180,210,255,.85) 0%,transparent 100%),
    radial-gradient(1px 1px at 278px 189px,rgba(220,240,255,.7) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 400px 134px,rgba(220,240,255,.65) 0%,transparent 100%),
    radial-gradient(1px 1px at 489px 178px,rgba(220,240,255,.9) 0%,transparent 100%),
    radial-gradient(2px 2px at 34px 267px,rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 123px 312px,rgba(220,240,255,.7) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 245px 278px,rgba(180,210,255,.75) 0%,transparent 100%),
    radial-gradient(1px 1px at 367px 334px,rgba(220,240,255,.9) 0%,transparent 100%),
    radial-gradient(1px 1px at 434px 267px,rgba(220,240,255,.65) 0%,transparent 100%),
    radial-gradient(2px 2px at 500px 312px,rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(1px 1px at 567px 289px,rgba(220,240,255,.8) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 89px 423px,rgba(180,210,255,.7) 0%,transparent 100%),
    radial-gradient(1px 1px at 200px 467px,rgba(220,240,255,.85) 0%,transparent 100%),
    radial-gradient(2px 2px at 312px 434px,rgba(255,255,255,.75) 0%,transparent 100%),
    radial-gradient(1px 1px at 423px 489px,rgba(220,240,255,.7) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 500px 445px,rgba(180,210,255,.9) 0%,transparent 100%),
    radial-gradient(1px 1px at 45px 545px,rgba(220,240,255,.75) 0%,transparent 100%),
    radial-gradient(2px 2px at 134px 589px,rgba(255,255,255,.65) 0%,transparent 100%),
    radial-gradient(1px 1px at 278px 567px,rgba(220,240,255,.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 390px 534px,rgba(180,210,255,.85) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 23px 612px,rgba(220,240,255,.7) 0%,transparent 100%);
  background-size:600px 600px; background-repeat:repeat;
  animation:estrellas-drift 120s linear infinite;
}
.reading-overlay.rl-estrellas .reading-top {
  background:rgba(5,10,24,.93); border-bottom-color:rgba(100,150,255,.1); }
.reading-overlay.rl-estrellas .reading-body,
.reading-overlay.rl-estrellas .reading-text { color:#d8eaff; }
.reading-overlay.rl-estrellas .reading-book-header,
.reading-overlay.rl-estrellas .reading-cap-title,
.reading-overlay.rl-estrellas .rbh-title { color:#fff; }
.reading-overlay.rl-estrellas .rbh-author { color:#6a90c8; }
.reading-overlay.rl-estrellas .reading-ornament { color:#304080; }
.reading-overlay.rl-estrellas .rnav-btn { background:rgba(100,150,255,.07); border-color:rgba(100,150,255,.2); color:#a0c0f0; }
.reading-overlay.rl-estrellas .reading-back,
.reading-overlay.rl-estrellas .reading-title { color:#b0c8f0; }
.reading-overlay.rl-estrellas .rc-btn { border-color:rgba(100,150,255,.2); color:#b0c8f0; }
.reading-overlay.rl-estrellas .reading-progress { background:rgba(100,150,255,.07); }
.reading-overlay.rl-estrellas .reading-progress-fill { background:#4070c0; }
.reading-overlay.rl-estrellas .rc-tema-panel { background:#0a1228; border-color:rgba(80,120,200,.2); }
.reading-overlay.rl-estrellas .rc-tema-opt { color:#b0c8f0; }
.reading-overlay.rl-estrellas .rc-tema-opt:hover { background:rgba(80,120,200,.12); }

/* ── ☀ AMANECER ──────────────────────────────────────────────── */
.reading-overlay.rl-amanecer {
  background:linear-gradient(170deg,#e8d4f0 0%,#f0d0b8 38%,#f8ecc8 70%,#fff8e8 100%); }
/* sol saliendo entre montañas (fijo, sin animación) + nubes rosadas que derivan muy despacio */
.reading-overlay.rl-amanecer::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* resplandor del sol, en el hueco entre las dos primeras montañas */
    radial-gradient(circle 200px at 42% 96%, rgba(255,190,100,.65) 0%, rgba(255,160,70,.32) 45%, transparent 75%),
    radial-gradient(circle 100px at 42% 96%, rgba(255,235,190,.9) 0%, rgba(255,210,140,.45) 55%, transparent 78%),
    /* montañas, de más lejana/clara a más cercana/oscura */
    radial-gradient(circle 260px at 18% 118%, rgba(160,120,145,.55) 0%, rgba(160,120,145,.55) 88%, transparent 92%),
    radial-gradient(circle 300px at 62% 122%, rgba(125,85,115,.72) 0%, rgba(125,85,115,.72) 88%, transparent 92%),
    radial-gradient(circle 340px at 88% 128%, rgba(95,58,90,.88) 0%, rgba(95,58,90,.88) 88%, transparent 92%);
}
.reading-overlay.rl-amanecer::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat, no-repeat;
  background-size: 55vw 14vh, 60vw 12vh;
  background-image:
    radial-gradient(ellipse 50% 55% at 50% 50%, rgba(240,175,190,.4) 0%, transparent 75%),
    radial-gradient(ellipse 50% 55% at 50% 50%, rgba(245,190,175,.34) 0%, transparent 75%);
  background-position: 8% 22%, 55% 34%;
  animation: rl-amanecer-nubes 130s ease-in-out infinite alternate;
}
@keyframes rl-amanecer-nubes {
  from { background-position: 8% 22%,  55% 34%; }
  to   { background-position: 20% 22%, 43% 34%; }
}
.reading-overlay.rl-amanecer .reading-top {
  background:rgba(240,210,190,.93); border-bottom-color:rgba(160,80,40,.15); }
.reading-overlay.rl-amanecer .reading-body { color:#2c1a0c; }
.reading-overlay.rl-amanecer .reading-book-header {
  border-bottom-color: rgba(160,80,40,.18);
  position: relative;
}
.reading-overlay.rl-amanecer .reading-book-header::before {
  content: '·  ☼  ·';
  display: block;
  text-align: center;
  font-size: .85rem;
  letter-spacing: .3em;
  color: rgba(160,80,40,.4);
  margin-bottom: 20px;
}
.reading-overlay.rl-amanecer .reading-cap-title { color:#4a200a; }
.reading-overlay.rl-amanecer .reading-ornament { color: transparent; font-size: 0; }
.reading-overlay.rl-amanecer .reading-ornament::before {
  content: '· ☼ ·';
  font-size: .9rem;
  letter-spacing: .2em;
  color: #c07040;
}
.reading-overlay.rl-amanecer .rnav-btn { background:rgba(160,80,40,.08); border-color:rgba(160,80,40,.22); color:#6a3010; }
.reading-overlay.rl-amanecer .reading-back,
.reading-overlay.rl-amanecer .reading-title { color:#6a3010; }
.reading-overlay.rl-amanecer .rc-btn { border-color:rgba(160,80,40,.25); color:#6a3010; }
.reading-overlay.rl-amanecer .reading-progress { background:rgba(160,80,40,.1); }
.reading-overlay.rl-amanecer .reading-progress-fill { background:#c07040; }
.reading-overlay.rl-amanecer .rc-tema-panel { background:#f8ece0; border-color:rgba(160,80,40,.2); }
.reading-overlay.rl-amanecer .rc-tema-opt { color:#6a3010; }
.reading-overlay.rl-amanecer .rc-tema-opt:hover { background:rgba(160,80,40,.08); }

/* ── ✍ TINTA SEPIA ───────────────────────────────────────────── */
/* página clara cálida (la tinta es sepia, no el fondo) — cómoda para lectura larga */
.reading-overlay.rl-sepia {
  background: linear-gradient(175deg, #f7ecd8 0%, #efe0c0 42%, #e6d0a0 75%, #d8ba82 100%);
}
/* rayos de luz suaves + viñeta cálida, ambos estáticos (sin animación, no debe distraer la lectura) */
.reading-overlay.rl-sepia::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(1.5px);
  background:
    linear-gradient(115deg, transparent 0%, transparent 18%, rgba(255,215,130,.48) 25%, transparent 34%),
    linear-gradient(115deg, transparent 0%, transparent 45%, rgba(255,215,130,.38) 51%, transparent 61%),
    linear-gradient(115deg, transparent 0%, transparent 66%, rgba(255,215,130,.42) 73%, transparent 84%),
    radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(90,55,25,.22) 100%);
}
/* las espigas ahora se dibujan con Canvas (js/themes/sepia-reeds.js) — ver _syncTemaCanvas() en libro.html */
.reading-overlay.rl-sepia .reading-top {
  background: rgba(247,236,216,.9);
  border-bottom-color: rgba(120,80,40,.15);
}
.reading-overlay.rl-sepia .reading-body { color: #3a2513; }
.reading-overlay.rl-sepia .reading-book-header {
  border-bottom-color: rgba(120,80,40,.2);
  position: relative;
}
.reading-overlay.rl-sepia .reading-book-header::before {
  content: '·  ✦  ·';
  display: block;
  text-align: center;
  font-size: .85rem;
  letter-spacing: .3em;
  color: rgba(120,80,40,.45);
  margin-bottom: 20px;
}
.reading-overlay.rl-sepia .reading-cap-title,
.reading-overlay.rl-sepia .rbh-title { color: #2a1a0a; }
.reading-overlay.rl-sepia .rbh-author { color: #8a5a28; }
.reading-overlay.rl-sepia .reading-ornament { color: transparent; font-size: 0; }
.reading-overlay.rl-sepia .reading-ornament::before {
  content: '· ✦ ·';
  font-size: .9rem;
  letter-spacing: .2em;
  color: #8a5a28;
}
.reading-overlay.rl-sepia .rnav-btn { background: rgba(120,80,40,.08); border-color: rgba(120,80,40,.25); color: #5a3818; }
.reading-overlay.rl-sepia .reading-back,
.reading-overlay.rl-sepia .reading-title { color: #5a3818; }
.reading-overlay.rl-sepia .rc-btn { border-color: rgba(120,80,40,.25); color: #5a3818; }
.reading-overlay.rl-sepia .reading-progress { background: rgba(120,80,40,.1); }
.reading-overlay.rl-sepia .reading-progress-fill { background: #8a5a28; }
.reading-overlay.rl-sepia .reading-page-num { color: #8a5a28; }
.reading-overlay.rl-sepia .rc-tema-panel { background: #f2e4c8; border-color: rgba(120,80,40,.2); }
.reading-overlay.rl-sepia .rc-tema-opt { color: #5a3818; }
.reading-overlay.rl-sepia .rc-tema-opt:hover { background: rgba(120,80,40,.08); }

/* ── ◉ ABISMO AZUL ───────────────────────────────────────────── */
/* foto real de una fosa submarina profunda (uso libre, ver pendientes.md) + capa oscura para que el texto claro siga legible sobre el haz de luz brillante */
.reading-overlay.rl-abismo {
  background:
    linear-gradient(rgba(3,6,15,.72), rgba(3,6,15,.85)),
    url('../assets/temas/rl-abismo.jpg') center/cover no-repeat;
}
/* partículas bioluminiscentes flotando, mismo pulso de opacity que las motas de polvo de pergamino/máquina */
.reading-overlay.rl-abismo::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 1.6px at 18% 25%, rgba(120,230,220,.8) 0%, transparent 100%),
    radial-gradient(circle 1.3px at 32% 42%, rgba(100,220,235,.7) 0%, transparent 100%),
    radial-gradient(circle 1.8px at 65% 20%, rgba(120,230,220,.75) 0%, transparent 100%),
    radial-gradient(circle 1.4px at 78% 48%, rgba(100,220,235,.7) 0%, transparent 100%),
    radial-gradient(circle 1.6px at 45% 60%, rgba(120,230,220,.75) 0%, transparent 100%),
    radial-gradient(circle 1.3px at 12% 68%, rgba(100,220,235,.65) 0%, transparent 100%),
    radial-gradient(circle 1.7px at 85% 72%, rgba(120,230,220,.7) 0%, transparent 100%),
    radial-gradient(circle 1.4px at 55% 82%, rgba(100,220,235,.65) 0%, transparent 100%);
  animation: rl-abismo-particulas 4.2s ease-in-out infinite alternate;
}
@keyframes rl-abismo-particulas {
  from { opacity: .35; }
  to   { opacity: 1; }
}
.reading-overlay.rl-abismo .reading-top {
  background:rgba(8,10,32,.95); border-bottom-color:rgba(40,180,200,.1); }
.reading-overlay.rl-abismo .reading-body,
.reading-overlay.rl-abismo .reading-text {
  color:#a8e8f0;
  animation:abismo-pulse 8s ease-in-out infinite; }
.reading-overlay.rl-abismo .reading-book-header,
.reading-overlay.rl-abismo .reading-cap-title,
.reading-overlay.rl-abismo .rbh-title { color:#d0f8ff; }
.reading-overlay.rl-abismo .rbh-author { color:#3ab0c8; }
.reading-overlay.rl-abismo .reading-ornament { color:#1a4060; }
.reading-overlay.rl-abismo .rnav-btn { background:rgba(40,180,200,.06); border-color:rgba(40,180,200,.18); color:#60c8d8; }
.reading-overlay.rl-abismo .reading-back,
.reading-overlay.rl-abismo .reading-title { color:#80d8e8; }
.reading-overlay.rl-abismo .rc-btn { border-color:rgba(40,180,200,.2); color:#60c8d8; }
.reading-overlay.rl-abismo .reading-progress { background:rgba(40,180,200,.07); }
.reading-overlay.rl-abismo .reading-progress-fill { background:#2090a8; }
.reading-overlay.rl-abismo .rc-tema-panel { background:#06091e; border-color:rgba(40,180,200,.18); }
.reading-overlay.rl-abismo .rc-tema-opt { color:#80d8e8; }
.reading-overlay.rl-abismo .rc-tema-opt:hover { background:rgba(40,180,200,.1); }


/* ═══════════════════════════════════════════════════════════════
   ADAPTACIONES GLOBALES PARA TEMAS OSCUROS
   El selector html[class*="theme-"] aplica a cualquier tema activo
   y corrige elementos que tienen colores hardcodeados o que usan
   --ink como fondo (--ink es el color de texto, claro en temas
   oscuros, y no debe usarse como background en esos contextos).
   ═══════════════════════════════════════════════════════════════ */

/* ── Topbar ─────────────────────────────────────────────────────
   El fondo hardcodeado rgba(250,247,242,.95) es crema claro.
   Lo reemplazamos con --white (superficie elevada del tema). */
html[class*="theme-"] .topbar {
  background: var(--white);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ── Panel Tu Economía (eco-card) ───────────────────────────────
   Usa --ink como background; en temas oscuros --ink es el color
   de texto (claro), produciendo una tarjeta muy brillante. */
html[class*="theme-"] .eco-card {
  background: var(--white);
  border: 1px solid var(--fog);
}

/* ── Píldora de Oruns en topbar ─────────────────────────────── */
html[class*="theme-"] .orun-pill {
  background: var(--fog);
  color:      var(--gold);
}

/* ── Botón "Escribir" en sidebar ────────────────────────────── */
html[class*="theme-"] .write-btn {
  background: var(--amber);
  color:      var(--page);
}
html[class*="theme-"] .write-btn:hover {
  background: var(--amber-dim);
  color:      var(--gold);
  transform:  translateY(-1px);
}

/* ── Tab activo en navegación del topbar ────────────────────── */
html[class*="theme-"] .tnav.active {
  background: var(--fog);
  color:      var(--gold);
}

/* ── Botón de notificaciones ────────────────────────────────── */
html[class*="theme-"] .notif-btn {
  background: var(--mist);
}
html[class*="theme-"] .notif-btn:hover {
  background: var(--fog);
}


/* ═══════════════════════════════════════════════════════════════
   SOUL GLASS — TEMA AURORA
   Tormenta de luz cósmica: cristal oscuro energético, bordes
   teal luminosos, microinteracciones con brillo auroral.
   ═══════════════════════════════════════════════════════════════ */

/* ── Texto ──────────────────────────────────────────────────── */
html.theme-aurora .post-text        { color: var(--ink); }
html.theme-aurora .post-text strong { color: #a0fce0; }
html.theme-aurora .post-text em     { color: var(--gold); }
html.theme-aurora .post-name        { color: var(--ink); }
html.theme-aurora .post-handle,
html.theme-aurora .post-time        { color: rgba(0,200,168,0.50); }

/* ── Tarjetas post — Aurora Glass ───────────────────────────── */
html.theme-aurora .post {
  position: relative;
  background: rgba(2, 12, 18, 0.72);
  border-color: rgba(0, 212, 168, 0.10);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow:
    0 2px 20px rgba(0, 4, 18, 0.52),
    inset 0 1px 0 rgba(0, 220, 180, 0.07);
  transition:
    transform .38s cubic-bezier(.22,.82,.30,1),
    box-shadow .38s cubic-bezier(.22,.82,.30,1),
    border-color .38s ease,
    background .38s ease;
}

/* Línea de energía auroral en el borde superior */
html.theme-aurora .post::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,212,168,0.16) 25%,
    rgba(0,232,212,0.28) 50%,
    rgba(0,212,168,0.16) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* Barrido de luz auroral en hover */
html.theme-aurora .post::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(
    108deg,
    transparent 35%,
    rgba(0,212,168,0.040) 50%,
    transparent 65%
  );
  transition: left .68s cubic-bezier(.40,.15,.20,1);
  pointer-events: none;
}

html.theme-aurora .post:hover {
  background: rgba(3, 18, 28, 0.82);
  border-color: rgba(0, 212, 168, 0.24);
  transform: translateY(-3px);
  box-shadow:
    0 8px 40px rgba(0, 6, 28, 0.60),
    0 0 0 1px rgba(0,188,148,0.06),
    inset 0 1px 0 rgba(0,220,180,0.14),
    0 0 32px rgba(0,180,148,0.06);
}
html.theme-aurora .post:hover::after { left: 110%; }

/* ── Topbar — energía sólida ────────────────────────────────── */
html.theme-aurora .topbar {
  background: rgba(2, 10, 16, 0.90) !important;
  backdrop-filter: blur(24px) saturate(1.45) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.45) !important;
  border-bottom: 1px solid rgba(0,212,168,0.07);
  box-shadow: 0 1px 24px rgba(0, 4, 18, 0.52);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
html.theme-aurora .sidebar {
  background: rgba(2, 9, 14, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(0,212,168,0.07);
}

/* ── Economía ────────────────────────────────────────────────── */
html.theme-aurora .eco-card {
  background: rgba(2, 12, 20, 0.78) !important;
  border-color: rgba(0,212,168,0.10) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 2px 22px rgba(0,4,20,0.44),
    inset 0 1px 0 rgba(0,220,180,0.06);
}

/* ── Widgets (feed derecha) ──────────────────────────────────── */
html.theme-aurora .feed-widgets {
  background: rgba(1, 8, 12, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(0,212,168,0.05);
}

/* ── Barra de búsqueda ──────────────────────────────────────── */
html.theme-aurora .topbar-search {
  background: rgba(3, 14, 22, 0.74);
  border-color: rgba(0,212,168,0.13);
  color: var(--ink);
}
html.theme-aurora .topbar-search::placeholder { color: rgba(0,200,168,0.35); }
html.theme-aurora .topbar-search:focus {
  border-color: rgba(0,212,168,0.34);
  background: rgba(4, 18, 28, 0.84);
  box-shadow: 0 0 0 3px rgba(0,180,148,0.09);
}

/* ── Orun pill ───────────────────────────────────────────────── */
html.theme-aurora .orun-pill {
  background: rgba(0,180,148,0.18) !important;
  border: 1px solid rgba(0,212,168,0.22) !important;
  color: var(--gold) !important;
}

/* ── Notificaciones ──────────────────────────────────────────── */
html.theme-aurora .notif-btn {
  background: rgba(2,12,20,0.85) !important;
  border: 1px solid rgba(0,212,168,0.10);
}
html.theme-aurora .notif-btn:hover {
  background: rgba(3,18,30,0.92) !important;
  border-color: rgba(0,212,168,0.22);
}


/* ═══════════════════════════════════════════════════════════════
   CRYSTAL GLASS — TEMA RUBÍ
   Las tarjetas son fragmentos de una gema gigante: profundidad
   de cristal, aristas con luz atrapada, refracción en hover.
   Paleta: obsidiana / rubí profundo / borgoña / carmesí / plata.
   ═══════════════════════════════════════════════════════════════ */

/* ── Texto ──────────────────────────────────────────────────── */
html.theme-rubi .post-text        { color: var(--ink); }
html.theme-rubi .post-text strong { color: #ffcad8; }
html.theme-rubi .post-text em     { color: var(--gold); }
html.theme-rubi .post-name        { color: var(--ink); }
html.theme-rubi .post-handle,
html.theme-rubi .post-time        { color: rgba(232, 120, 152, 0.46); }

/* ── Tarjetas post — fragmento de gema ──────────────────────── */
html.theme-rubi .post {
  position: relative;
  overflow: hidden;
  background: rgba(8, 1, 4, 0.74);
  border-color: rgba(215, 65, 102, 0.15);
  backdrop-filter: blur(22px) saturate(1.45) brightness(0.95);
  -webkit-backdrop-filter: blur(22px) saturate(1.45) brightness(0.95);
  box-shadow:
    /* profundidad exterior */
    0 4px 28px rgba(6, 0, 3, 0.65),
    /* arista superior brillante (faceta) */
    inset 0 1px 0 rgba(255, 200, 218, 0.13),
    /* arista izquierda (plano lateral de la gema) */
    inset 1px 0 0 rgba(215, 65, 102, 0.08),
    /* profundidad interna — oscuro en fondo */
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    /* brillo atrapado carmesí */
    inset 0 30px 60px rgba(145, 12, 38, 0.06);
  transition:
    transform .40s cubic-bezier(.22,.82,.30,1),
    box-shadow .40s cubic-bezier(.22,.82,.30,1),
    border-color .40s ease,
    background .40s ease;
}

/* Arista de luz superior — faceta de cristal */
html.theme-rubi .post::before {
  content: '';
  position: absolute;
  top: 0; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(235, 95, 132, 0.20) 18%,
    rgba(255, 215, 230, 0.52) 48%,
    rgba(235, 95, 132, 0.20) 82%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Barrido de refracción en hover */
html.theme-rubi .post::after {
  content: '';
  position: absolute;
  top: -10%; left: -90%;
  width: 60%; height: 120%;
  background: linear-gradient(
    112deg,
    transparent 30%,
    rgba(232, 80, 118, 0.055) 50%,
    rgba(255, 200, 218, 0.020) 58%,
    transparent 72%
  );
  transition: left .72s cubic-bezier(.35,.10,.18,1);
  pointer-events: none;
}

html.theme-rubi .post:hover {
  background: rgba(14, 2, 7, 0.84);
  border-color: rgba(215, 65, 102, 0.32);
  transform: translateY(-3px);
  box-shadow:
    /* profundidad exterior amplificada */
    0 10px 48px rgba(6, 0, 3, 0.70),
    /* gem glow — luz interior de rubí */
    0 0 36px rgba(188, 28, 68, 0.12),
    /* arista superior más brillante */
    inset 0 1px 0 rgba(255, 210, 225, 0.26),
    inset 1px 0 0 rgba(215, 65, 102, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    /* rojo profundo desde la base */
    inset 0 40px 80px rgba(160, 16, 48, 0.10),
    /* corona especular en los bordes */
    0 0 0 1px rgba(195, 45, 82, 0.10);
}
html.theme-rubi .post:hover::after { left: 110%; }

/* ── Topbar ──────────────────────────────────────────────────── */
html.theme-rubi .topbar {
  background: rgba(6, 1, 3, 0.94) !important;
  backdrop-filter: blur(28px) saturate(1.45) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.45) !important;
  border-bottom: 1px solid rgba(215, 65, 102, 0.10);
  box-shadow:
    0 1px 28px rgba(6, 0, 3, 0.60),
    inset 0 -1px 0 rgba(215, 65, 102, 0.06);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
html.theme-rubi .sidebar {
  background: rgba(6, 1, 3, 0.82);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-color: rgba(215, 65, 102, 0.08);
  box-shadow: inset -1px 0 0 rgba(215, 65, 102, 0.05);
}

/* ── Economía ────────────────────────────────────────────────── */
html.theme-rubi .eco-card {
  background: rgba(8, 1, 4, 0.82) !important;
  border-color: rgba(215, 65, 102, 0.12) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 2px 24px rgba(6, 0, 3, 0.50),
    inset 0 1px 0 rgba(255, 195, 215, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38);
}

/* ── Widgets ─────────────────────────────────────────────────── */
html.theme-rubi .feed-widgets {
  background: rgba(5, 0, 2, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(215, 65, 102, 0.06);
}

/* ── Búsqueda ────────────────────────────────────────────────── */
html.theme-rubi .topbar-search {
  background: rgba(10, 2, 5, 0.78);
  border-color: rgba(215, 65, 102, 0.16);
  color: var(--ink);
}
html.theme-rubi .topbar-search::placeholder { color: rgba(232, 120, 152, 0.32); }
html.theme-rubi .topbar-search:focus {
  border-color: rgba(215, 65, 102, 0.40);
  background: rgba(16, 3, 8, 0.88);
  box-shadow:
    0 0 0 3px rgba(188, 45, 82, 0.11),
    inset 0 1px 0 rgba(255, 195, 215, 0.08);
}

/* ── Orun pill ───────────────────────────────────────────────── */
html.theme-rubi .orun-pill {
  background: rgba(165, 32, 65, 0.20) !important;
  border: 1px solid rgba(215, 65, 102, 0.26) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 1px 0 rgba(255, 200, 218, 0.10);
}

/* ── Notificaciones ──────────────────────────────────────────── */
html.theme-rubi .notif-btn {
  background: rgba(8, 1, 4, 0.90) !important;
  border: 1px solid rgba(215, 65, 102, 0.12);
}
html.theme-rubi .notif-btn:hover {
  background: rgba(14, 2, 7, 0.96) !important;
  border-color: rgba(215, 65, 102, 0.28);
  box-shadow: 0 0 12px rgba(188, 40, 78, 0.10);
}


/* ═══════════════════════════════════════════════════════════════
   ORGANIC GLASS — TEMA ESMERALDA
   Superficies vivas: musgo suave, bordes orgánicos, luz filtrada
   a través de hojas y ramas ancestrales.
   ═══════════════════════════════════════════════════════════════ */

/* ── Texto ──────────────────────────────────────────────────── */
html.theme-esmeralda .post-text        { color: var(--ink); }
html.theme-esmeralda .post-text strong { color: #a8ffc8; }
html.theme-esmeralda .post-text em     { color: var(--gold); }
html.theme-esmeralda .post-name        { color: var(--ink); }
html.theme-esmeralda .post-handle,
html.theme-esmeralda .post-time        { color: rgba(53, 216, 120, 0.44); }

/* ── Tarjetas post — fragmento de bosque ────────────────────── */
html.theme-esmeralda .post {
  position: relative;
  overflow: hidden;
  background: rgba(3, 14, 6, 0.72);
  border-color: rgba(48, 195, 95, 0.12);
  backdrop-filter: blur(20px) saturate(1.35) brightness(0.96);
  -webkit-backdrop-filter: blur(20px) saturate(1.35) brightness(0.96);
  box-shadow:
    0 3px 24px rgba(2, 10, 4, 0.60),
    inset 0 1px 0 rgba(80, 220, 130, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    inset 0 28px 55px rgba(8, 68, 28, 0.05);
  transition:
    transform .42s cubic-bezier(.22,.82,.30,1),
    box-shadow .42s cubic-bezier(.22,.82,.30,1),
    border-color .42s ease,
    background .42s ease;
}

/* Luz filtrada entre ramas — línea de luz en el borde superior */
html.theme-esmeralda .post::before {
  content: '';
  position: absolute;
  top: 0; left: 4%; right: 4%; height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(55, 200, 100, 0.18) 20%,
    rgba(120, 255, 165, 0.44) 48%,
    rgba(55, 200, 100, 0.18) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Barrido orgánico en hover — luz que entra por una apertura */
html.theme-esmeralda .post::after {
  content: '';
  position: absolute;
  top: -15%; left: -90%;
  width: 65%; height: 130%;
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(48, 180, 88, 0.048) 50%,
    rgba(120, 255, 165, 0.018) 60%,
    transparent 75%
  );
  transition: left .75s cubic-bezier(.35,.10,.18,1);
  pointer-events: none;
}

html.theme-esmeralda .post:hover {
  background: rgba(4, 18, 8, 0.82);
  border-color: rgba(48, 195, 95, 0.28);
  transform: translateY(-3px);
  box-shadow:
    0 10px 44px rgba(2, 10, 4, 0.68),
    0 0   32px rgba(22, 145, 65, 0.10),
    inset 0  1px 0 rgba(120, 255, 165, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.52),
    inset 0 35px 70px rgba(10, 75, 32, 0.09),
    0 0 0 1px rgba(38, 168, 78, 0.08);
}
html.theme-esmeralda .post:hover::after { left: 110%; }

/* ── Topbar ──────────────────────────────────────────────────── */
html.theme-esmeralda .topbar {
  background: rgba(2, 10, 4, 0.94) !important;
  backdrop-filter: blur(26px) saturate(1.40) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.40) !important;
  border-bottom: 1px solid rgba(48, 195, 95, 0.08);
  box-shadow:
    0 1px 26px rgba(2, 8, 4, 0.58),
    inset 0 -1px 0 rgba(48, 195, 95, 0.05);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
html.theme-esmeralda .sidebar {
  background: rgba(2, 10, 4, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(48, 195, 95, 0.07);
  box-shadow: inset -1px 0 0 rgba(48, 195, 95, 0.04);
}

/* ── Economía ────────────────────────────────────────────────── */
html.theme-esmeralda .eco-card {
  background: rgba(3, 12, 5, 0.82) !important;
  border-color: rgba(48, 195, 95, 0.10) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 2px 22px rgba(2, 8, 3, 0.48),
    inset 0  1px 0 rgba(88, 225, 130, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

/* ── Widgets ─────────────────────────────────────────────────── */
html.theme-esmeralda .feed-widgets {
  background: rgba(2, 8, 3, 0.64);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  border-color: rgba(48, 195, 95, 0.05);
}

/* ── Búsqueda ────────────────────────────────────────────────── */
html.theme-esmeralda .topbar-search {
  background: rgba(3, 12, 5, 0.76);
  border-color: rgba(48, 195, 95, 0.15);
  color: var(--ink);
}
html.theme-esmeralda .topbar-search::placeholder { color: rgba(53, 216, 120, 0.32); }
html.theme-esmeralda .topbar-search:focus {
  border-color: rgba(48, 195, 95, 0.38);
  background: rgba(4, 18, 8, 0.86);
  box-shadow:
    0 0 0 3px rgba(28, 155, 68, 0.10),
    inset 0 1px 0 rgba(88, 225, 130, 0.07);
}

/* ── Orun pill ───────────────────────────────────────────────── */
html.theme-esmeralda .orun-pill {
  background: rgba(18, 120, 55, 0.18) !important;
  border: 1px solid rgba(48, 195, 95, 0.24) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 1px 0 rgba(88, 225, 130, 0.09);
}

/* ── Notificaciones ──────────────────────────────────────────── */
html.theme-esmeralda .notif-btn {
  background: rgba(3, 12, 5, 0.90) !important;
  border: 1px solid rgba(48, 195, 95, 0.10);
}
html.theme-esmeralda .notif-btn:hover {
  background: rgba(4, 18, 8, 0.96) !important;
  border-color: rgba(48, 195, 95, 0.26);
  box-shadow: 0 0 12px rgba(22, 155, 68, 0.10);
}


/* ═══════════════════════════════════════════════════════════════
   SOUL GLASS — TEMA LUNAR
   Observatorio lunar: paneles translúcidos con backdrop-filter,
   iluminación de luz de luna, microinteracciones cinematográficas.
   Estas reglas tienen misma especificidad que el bloque de arriba
   pero están después → sobreescriben correctamente sin !important
   (excepto donde el valor base lleva !important implícito por
   inline-style; en esos casos se usa overide con clase más alta).
   ═══════════════════════════════════════════════════════════════ */

/* ── Texto de publicaciones (hardcoded #333 en base CSS) ─────── */
html.theme-lunar .post-text         { color: var(--ink); }
html.theme-lunar .post-text strong  { color: #e8f0ff; }
html.theme-lunar .post-text em      { color: var(--gold); }
html.theme-lunar .post-name         { color: var(--ink); }
html.theme-lunar .post-handle,
html.theme-lunar .post-time         { color: var(--fog); }

/* ── Tarjetas post — Soul Glass ─────────────────────────────── */
html.theme-lunar .post {
  position: relative;
  background: rgba(6, 10, 24, 0.70);
  border-color: rgba(158, 195, 238, 0.09);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    0 2px 16px rgba(0, 4, 28, 0.45),
    inset 0 1px 0 rgba(168, 200, 242, 0.07);
  transition:
    transform .38s cubic-bezier(.22,.82,.30,1),
    box-shadow .38s cubic-bezier(.22,.82,.30,1),
    border-color .38s ease,
    background .38s ease;
}

/* Línea de luz de luna en el borde superior de cada tarjeta */
html.theme-lunar .post::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200,222,255,0.14) 25%,
    rgba(218,235,255,0.22) 50%,
    rgba(200,222,255,0.14) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* Reflejo de luz que barre la tarjeta en hover */
html.theme-lunar .post::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(
    108deg,
    transparent 35%,
    rgba(168,205,248,0.038) 50%,
    transparent 65%
  );
  transition: left .70s cubic-bezier(.40,.15,.20,1);
  pointer-events: none;
}

html.theme-lunar .post:hover {
  background: rgba(10, 16, 36, 0.80);
  border-color: rgba(168, 200, 242, 0.20);
  transform: translateY(-3px);
  box-shadow:
    0 8px 36px rgba(0, 6, 38, 0.56),
    0 0 0 1px rgba(120,175,228,0.06),
    inset 0 1px 0 rgba(168, 200, 242, 0.13),
    0 0 28px rgba(120,162,222,0.05);
}
html.theme-lunar .post:hover::after {
  left: 110%;
}

/* ── Topbar — Lunar Glass ──────────────────────────────────── */
html.theme-lunar .topbar {
  background: rgba(5, 8, 20, 0.88) !important;
  backdrop-filter: blur(24px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
  border-bottom: 1px solid rgba(138,180,228,0.06);
  box-shadow: 0 1px 22px rgba(0, 0, 20, 0.48);
}

/* ── Sidebar — Soul Glass ──────────────────────────────────── */
html.theme-lunar .sidebar {
  background: rgba(4, 7, 18, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(138, 180, 228, 0.07);
}

/* ── Panel Tu Economía — Soul Glass ───────────────────────── */
html.theme-lunar .eco-card {
  background: rgba(8, 13, 30, 0.75) !important;
  border-color: rgba(138, 180, 228, 0.09) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 2px 20px rgba(0,4,28,0.42),
    inset 0 1px 0 rgba(168,200,242,0.06);
}

/* ── Panel de widgets (derecha del feed) ───────────────────── */
html.theme-lunar .feed-widgets {
  background: rgba(3, 6, 16, 0.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(138,180,228,0.05);
}

/* ── Barra de búsqueda — glass ─────────────────────────────── */
html.theme-lunar .topbar-search {
  background: rgba(10, 16, 36, 0.72);
  border-color: rgba(138, 180, 228, 0.12);
}
html.theme-lunar .topbar-search:focus {
  border-color: rgba(168, 200, 242, 0.32);
  background: rgba(14, 22, 46, 0.82);
  box-shadow: 0 0 0 3px rgba(120,175,228,0.08);
}

/* ── Píldora de Oruns — lunar glass ───────────────────────── */
html.theme-lunar .orun-pill {
  background: rgba(40, 56, 90, 0.78) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(138,180,228,0.10);
}

/* ── Botón de notificaciones — lunar ──────────────────────── */
html.theme-lunar .notif-btn {
  background: rgba(14, 22, 42, 0.78) !important;
  border: 1px solid rgba(138,180,228,0.09);
}
html.theme-lunar .notif-btn:hover {
  background: rgba(20, 30, 56, 0.88) !important;
  border-color: rgba(168,200,242,0.18);
  box-shadow: 0 0 18px rgba(120,175,228,0.14);
}

/* ── Botón Escribir — moonlight glow ──────────────────────── */
html.theme-lunar .write-btn {
  box-shadow: 0 0 0 rgba(120,172,204,0);
  transition: all .38s cubic-bezier(.22,.82,.30,1);
}
html.theme-lunar .write-btn:hover {
  background: var(--gold);
  color: var(--page);
  box-shadow:
    0 0 24px rgba(120,172,204,0.38),
    0 4px 18px rgba(0,8,40,0.52);
  transform: translateY(-2px);
}

/* ── Auth card — tema lunar ────────────────────────────────── */
html.theme-lunar .auth-card {
  background: rgba(8, 12, 26, 0.82);
  border-color: rgba(122,172,204,.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
html.theme-lunar .auth-glow {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(100,150,200,.30) 0%,
    transparent 65%
  );
}


/* ═══════════════════════════════════════════════════════════════
   SOUL GLASS — SANGRE & TINTA
   Estudio literario gótico: cristal oscuro teñido de carmesí,
   páginas de libro antiguo, iluminación de vela tenue.
   La tinta reacciona al cursor (mousemove → sangre.js ripples).
   ═══════════════════════════════════════════════════════════════ */

/* ── Textos — tinta oscura sobre pergamino ─────────────────── */
html.theme-sangre .post-text         { color: #1a0810; }
html.theme-sangre .post-text strong  { color: #0e0408; }
html.theme-sangre .post-text em      { color: var(--amber); }
html.theme-sangre .post-name         { color: #0e0408; }
html.theme-sangre .post-handle,
html.theme-sangre .post-time         { color: var(--fog); }

/* ── Tarjetas — páginas de libro antiguo ──────────────────── */
html.theme-sangre .post {
  position: relative;
  background: rgba(246, 238, 218, 0.82);
  border-color: rgba(80, 18, 28, 0.12);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  box-shadow:
    0 1px 6px  rgba(40, 10, 14, 0.09),
    0 4px 22px rgba(40, 10, 14, 0.06),
    inset 0 1px 0 rgba(255, 250, 240, 0.88);
  transition:
    transform .40s cubic-bezier(.22,.78,.28,1),
    box-shadow .40s cubic-bezier(.22,.78,.28,1),
    border-color .40s ease,
    background .40s ease;
}

/* Línea de encuadernación superior */
html.theme-sangre .post::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(80, 18, 28, 0.08) 25%,
    rgba(100, 22, 35, 0.15) 50%,
    rgba(80, 18, 28, 0.08) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* Mancha de tinta en hover */
html.theme-sangre .post::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 58%; height: 100%;
  background: linear-gradient(
    112deg,
    transparent 28%,
    rgba(100, 18, 32, 0.035) 50%,
    transparent 72%
  );
  transition: left .90s cubic-bezier(.32,.08,.16,1);
  pointer-events: none;
}

html.theme-sangre .post:hover {
  background: rgba(252, 244, 228, 0.92);
  border-color: rgba(100, 22, 35, 0.22);
  transform: translateY(-2px);
  box-shadow:
    0 4px 18px rgba(40, 10, 14, 0.14),
    0 8px 34px rgba(40, 10, 14, 0.09),
    inset 0 1px 0 rgba(255, 252, 244, 0.95);
}
html.theme-sangre .post:hover::after { left: 108%; }

/* ── Topbar — pergamino translúcido ────────────────────────── */
html.theme-sangre .topbar {
  background: rgba(250, 244, 232, 0.92) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
  border-bottom: 1px solid rgba(80,18,28,0.09);
  box-shadow: 0 1px 16px rgba(40,10,14,0.10);
}

/* ── Sidebar ────────────────────────────────────────────────── */
html.theme-sangre .sidebar {
  background: rgba(242, 234, 216, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(80,18,28,0.08);
}

/* ── Economía — tintero oscuro sobre pergamino ──────────────── */
/*    Contraste máximo: fondo ink sobre parchment.               */
/*    La base CSS (.eco-card) ya usa --gold para texto, que      */
/*    es #f8e8e0 (marfil claro) — perfecto para fondo oscuro.   */
html.theme-sangre .eco-card {
  background: rgba(20, 6, 12, 0.88) !important;
  border-color: rgba(110, 22, 38, 0.35) !important;
  border-width: 1px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 4px 24px rgba(12, 3, 8, 0.28),
    0 1px 6px rgba(12, 3, 8, 0.14),
    inset 0 1px 0 rgba(255, 225, 200, 0.06);
}
html.theme-sangre .eco-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(180, 80, 60, 0.16);
}
html.theme-sangre .eco-bar {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Widgets ────────────────────────────────────────────────── */
html.theme-sangre .feed-widgets {
  background: rgba(234, 226, 210, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(80,18,28,0.06);
}

/* ── Barra de búsqueda ─────────────────────────────────────── */
html.theme-sangre .topbar-search {
  background: rgba(238, 230, 214, 0.80);
  border-color: rgba(80,18,28,0.14);
  color: #1a0810;
}
html.theme-sangre .topbar-search::placeholder { color: rgba(80,18,28,0.35); }
html.theme-sangre .topbar-search:focus {
  border-color: rgba(100,22,35,0.30);
  background: rgba(248,240,224,0.88);
  box-shadow: 0 0 0 3px rgba(80,18,28,0.07);
}

/* ── Orun pill — borgoña sobre pergamino ───────────────────── */
html.theme-sangre .orun-pill {
  background: var(--fog) !important;
  color: var(--gold) !important;
}

/* ── Notificaciones ────────────────────────────────────────── */
html.theme-sangre .notif-btn {
  background: rgba(228,218,202,0.88) !important;
  border: 1px solid rgba(80,18,28,0.10);
}
html.theme-sangre .notif-btn:hover {
  background: rgba(214,204,188,0.95) !important;
  border-color: rgba(100,22,35,0.20);
  box-shadow: 0 0 12px rgba(80,18,28,0.10);
}

/* ── Botón Escribir — pluma de borgoña ─────────────────────── */
html.theme-sangre .write-btn {
  background: var(--amber);
  color: var(--gold);
  box-shadow: 0 2px 10px rgba(80,18,28,0.22);
  transition: all .40s cubic-bezier(.22,.78,.28,1);
}
html.theme-sangre .write-btn:hover {
  background: var(--amber-dim);
  color: var(--gold);
  box-shadow:
    0 0 20px rgba(100,18,32,0.32),
    0 4px 16px rgba(40,10,14,0.22);
  transform: translateY(-2px);
}

/* ── Auth card ─────────────────────────────────────────────── */
html.theme-sangre .auth-card {
  background: rgba(248,240,222,.92) !important;
  border-color: rgba(80,18,28,.16) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html.theme-sangre .auth-glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(100,16,30,.10) 0%, transparent 65%);
}


/* ═══════════════════════════════════════════════════════════════
   ENCHANTED CRYSTAL PANELS — ELDERGLOOM VALLEY
   Obsidiana esmerilada con iluminación ámbar de linterna antigua.
   Cada panel evoca un artefacto tallado por artesanos de un reino
   perdido: bordes con calor de fuego, profundidad interior oscura.
   ═══════════════════════════════════════════════════════════════ */

/* ── Texto de publicaciones ──────────────────────────────────── */
html.theme-eldergloom .post-text        { color: var(--ink); }
html.theme-eldergloom .post-text strong { color: #fde8c0; }
html.theme-eldergloom .post-text em     { color: var(--gold); }
html.theme-eldergloom .post-name        { color: var(--ink); }
html.theme-eldergloom .post-handle,
html.theme-eldergloom .post-time        { color: rgba(194, 145, 90, 0.48); }

/* ── Tarjetas post — obsidiana esmerilada ────────────────────── */
html.theme-eldergloom .post {
  position: relative;
  overflow: hidden;
  background: rgba(11, 14, 18, 0.78);
  border-color: rgba(194, 145, 90, 0.13);
  backdrop-filter: blur(24px) saturate(1.28) brightness(0.93);
  -webkit-backdrop-filter: blur(24px) saturate(1.28) brightness(0.93);
  box-shadow:
    0 4px 32px rgba(3, 4, 7, 0.72),
    inset 0  1px 0 rgba(244, 181, 106, 0.10),
    inset 1px 0 0 rgba(194, 145, 90,  0.06),
    inset 0 -1px 0 rgba(0,   0,   0,  0.52),
    inset 0 36px 72px rgba(244, 181, 106, 0.022);
  transition:
    transform   .44s cubic-bezier(.22,.82,.30,1),
    box-shadow  .44s cubic-bezier(.22,.82,.30,1),
    border-color .44s ease,
    background  .44s ease;
}

/* Arista ámbar — luz de linterna atrapada en el borde superior */
html.theme-eldergloom .post::before {
  content: '';
  position: absolute;
  top: 0; left: 7%; right: 7%; height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(194, 145, 90, 0.18) 22%,
    rgba(244, 201, 138, 0.46) 50%,
    rgba(194, 145, 90, 0.18) 78%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Barrido de calor en hover — como la llama de una vela pasa cerca */
html.theme-eldergloom .post::after {
  content: '';
  position: absolute;
  top: -12%; left: -88%;
  width: 62%; height: 124%;
  background: linear-gradient(
    114deg,
    transparent 30%,
    rgba(194, 145, 90, 0.050) 52%,
    rgba(244, 201, 138, 0.018) 62%,
    transparent 76%
  );
  transition: left .78s cubic-bezier(.35,.10,.18,1);
  pointer-events: none;
}

html.theme-eldergloom .post:hover {
  background: rgba(15, 18, 23, 0.86);
  border-color: rgba(194, 145, 90, 0.30);
  transform: translateY(-3px);
  box-shadow:
    0 12px 54px rgba(3,  4,   7, 0.74),
    0  0   42px rgba(194, 145, 90, 0.07),
    inset 0  1px 0 rgba(244, 201, 138, 0.24),
    inset 1px 0 0 rgba(194, 145, 90, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.58),
    inset 0 48px 96px rgba(244, 181, 106, 0.040),
    0 0 0 1px rgba(160, 115, 48, 0.09);
}
html.theme-eldergloom .post:hover::after { left: 108%; }

/* ── Topbar — nave de la guardia de la aldea ─────────────────── */
html.theme-eldergloom .topbar {
  background: rgba(8, 10, 14, 0.95) !important;
  backdrop-filter: blur(28px) saturate(1.32) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.32) !important;
  border-bottom: 1px solid rgba(194, 145, 90, 0.09);
  box-shadow:
    0 1px 30px rgba(3, 4, 7, 0.62),
    inset 0 -1px 0 rgba(194, 145, 90, 0.055);
}

/* ── Sidebar — sala de gremio de piedra oscura ───────────────── */
html.theme-eldergloom .sidebar {
  background: rgba(8, 10, 14, 0.84);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-color: rgba(194, 145, 90, 0.08);
  box-shadow: inset -1px 0 0 rgba(194, 145, 90, 0.042);
}

/* ── Panel de Economía — cofre del gremio ───────────────────── */
html.theme-eldergloom .eco-card {
  background: rgba(11, 14, 18, 0.84) !important;
  border-color: rgba(194, 145, 90, 0.11) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 2px 26px rgba(3, 4, 7, 0.54),
    inset 0  1px 0 rgba(244, 181, 106, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40);
}

/* ── Widgets ─────────────────────────────────────────────────── */
html.theme-eldergloom .feed-widgets {
  background: rgba(7, 9, 12, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(194, 145, 90, 0.058);
}

/* ── Búsqueda ────────────────────────────────────────────────── */
html.theme-eldergloom .topbar-search {
  background: rgba(11, 14, 18, 0.80);
  border-color: rgba(194, 145, 90, 0.16);
  color: var(--ink);
}
html.theme-eldergloom .topbar-search::placeholder { color: rgba(194, 145, 90, 0.32); }
html.theme-eldergloom .topbar-search:focus {
  border-color: rgba(194, 145, 90, 0.40);
  background: rgba(15, 18, 24, 0.90);
  box-shadow:
    0 0 0 3px rgba(160, 110, 42, 0.11),
    inset 0 1px 0 rgba(244, 181, 106, 0.07);
}

/* ── Orun pill — moneda de oro antiguo ──────────────────────── */
html.theme-eldergloom .orun-pill {
  background: rgba(140, 90, 28, 0.20) !important;
  border: 1px solid rgba(194, 145, 90, 0.26) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 1px 0 rgba(244, 201, 138, 0.10);
}

/* ── Notificaciones ──────────────────────────────────────────── */
html.theme-eldergloom .notif-btn {
  background: rgba(9, 11, 15, 0.92) !important;
  border: 1px solid rgba(194, 145, 90, 0.11);
}
html.theme-eldergloom .notif-btn:hover {
  background: rgba(14, 17, 22, 0.96) !important;
  border-color: rgba(194, 145, 90, 0.28);
  box-shadow: 0 0 14px rgba(160, 110, 42, 0.10);
}

/* ── Botón Escribir — reliquia encantada ─────────────────────── */
html.theme-eldergloom .write-btn {
  background: linear-gradient(135deg, #c47828 0%, #9a5a1c 100%);
  color: #fff8ee;
  box-shadow:
    0 2px 12px rgba(140, 80, 18, 0.36),
    inset 0 1px 0 rgba(255, 225, 165, 0.22);
  transition: all .42s cubic-bezier(.22,.78,.28,1);
}
html.theme-eldergloom .write-btn:hover {
  background: linear-gradient(135deg, #d88832 0%, #aa6422 100%);
  color: #fff8ee;
  box-shadow:
    0 0  24px rgba(200, 120, 32, 0.32),
    0 4px 18px rgba(80,  45,  8, 0.28),
    inset 0 1px 0 rgba(255, 230, 175, 0.30);
  transform: translateY(-2px);
}

/* ── Auth card ───────────────────────────────────────────────── */
html.theme-eldergloom .auth-card {
  background: rgba(11, 14, 18, 0.94) !important;
  border-color: rgba(194, 145, 90, 0.20) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    0 8px 48px rgba(3, 4, 7, 0.70),
    inset 0 1px 0 rgba(244, 181, 106, 0.08);
}
html.theme-eldergloom .auth-glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(160, 100, 32, 0.24) 0%, transparent 65%);
}


/* ═══════════════════════════════════════════════════════════════
   ARCANE CRYSTAL PANELS — DARK FANTASY
   Obsidiana abisal con iluminación violeta-arcana.
   Cada panel evoca un fragmento de cristal oscuro imbuido con
   energía mística: bordes con resplandor de luna púrpura,
   profundidad de abismo, magia contenida parpadeando.
   ═══════════════════════════════════════════════════════════════ */

/* ── Texto de publicaciones ──────────────────────────────────── */
html.theme-dark-fantasy .post-text        { color: var(--ink); }
html.theme-dark-fantasy .post-text strong { color: #ead4ff; }
html.theme-dark-fantasy .post-text em     { color: var(--gold); }
html.theme-dark-fantasy .post-name        { color: var(--ink); }
html.theme-dark-fantasy .post-handle,
html.theme-dark-fantasy .post-time        { color: rgba(181, 123, 255, 0.48); }

/* ── Tarjetas post — cristal de obsidiana arcana ─────────────── */
html.theme-dark-fantasy .post {
  position: relative;
  overflow: hidden;
  background: rgba(10, 8, 22, 0.78);
  border-color: rgba(180, 120, 255, 0.14);
  backdrop-filter: blur(24px) saturate(1.28) brightness(0.93);
  -webkit-backdrop-filter: blur(24px) saturate(1.28) brightness(0.93);
  box-shadow:
    0 4px 32px rgba(2, 1, 8, 0.75),
    inset 0  1px 0 rgba(210, 170, 255, 0.10),
    inset 1px 0 0 rgba(180, 120, 255, 0.06),
    inset 0 -1px 0 rgba(0,   0,   0,  0.55),
    inset 0 36px 72px rgba(160, 80, 255, 0.022);
  transition:
    transform   .44s cubic-bezier(.22,.82,.30,1),
    box-shadow  .44s cubic-bezier(.22,.82,.30,1),
    border-color .44s ease,
    background  .44s ease;
}

/* Arista violeta — luna arcana atrapada en el borde superior */
html.theme-dark-fantasy .post::before {
  content: '';
  position: absolute;
  top: 0; left: 7%; right: 7%; height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(180, 120, 255, 0.18) 22%,
    rgba(220, 180, 255, 0.48) 50%,
    rgba(180, 120, 255, 0.18) 78%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Barrido arcano en hover — energía mágica que cruza el panel */
html.theme-dark-fantasy .post::after {
  content: '';
  position: absolute;
  top: -12%; left: -88%;
  width: 62%; height: 124%;
  background: linear-gradient(
    114deg,
    transparent 30%,
    rgba(180, 120, 255, 0.048) 52%,
    rgba(220, 180, 255, 0.018) 62%,
    transparent 76%
  );
  transition: left .78s cubic-bezier(.35,.10,.18,1);
  pointer-events: none;
}

html.theme-dark-fantasy .post:hover {
  background: rgba(14, 10, 28, 0.86);
  border-color: rgba(180, 120, 255, 0.32);
  transform: translateY(-3px);
  box-shadow:
    0 12px 54px rgba(2,  1,   8, 0.78),
    0  0   42px rgba(160, 80, 255, 0.08),
    inset 0  1px 0 rgba(220, 180, 255, 0.24),
    inset 1px 0 0 rgba(180, 120, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.60),
    inset 0 48px 96px rgba(160, 80, 255, 0.038),
    0 0 0 1px rgba(140, 80, 220, 0.09);
}
html.theme-dark-fantasy .post:hover::after { left: 108%; }

/* ── Topbar — fortaleza de obsidiana ─────────────────────────── */
html.theme-dark-fantasy .topbar {
  background: rgba(7, 5, 18, 0.95) !important;
  backdrop-filter: blur(28px) saturate(1.32) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.32) !important;
  border-bottom: 1px solid rgba(180, 120, 255, 0.09);
  box-shadow:
    0 1px 30px rgba(2, 1, 8, 0.65),
    inset 0 -1px 0 rgba(180, 120, 255, 0.055);
}

/* ── Sidebar — sala de arcanos oscura ────────────────────────── */
html.theme-dark-fantasy .sidebar {
  background: rgba(7, 5, 18, 0.84);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-color: rgba(180, 120, 255, 0.08);
  box-shadow: inset -1px 0 0 rgba(180, 120, 255, 0.042);
}

/* ── Panel de Economía — grimorio arcano ─────────────────────── */
html.theme-dark-fantasy .eco-card {
  background: rgba(10, 8, 22, 0.84) !important;
  border-color: rgba(180, 120, 255, 0.11) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 2px 26px rgba(2, 1, 8, 0.56),
    inset 0  1px 0 rgba(210, 170, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42);
}

/* ── Widgets ─────────────────────────────────────────────────── */
html.theme-dark-fantasy .feed-widgets {
  background: rgba(6, 4, 14, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(180, 120, 255, 0.058);
}

/* ── Búsqueda ────────────────────────────────────────────────── */
html.theme-dark-fantasy .topbar-search {
  background: rgba(10, 8, 22, 0.80);
  border-color: rgba(180, 120, 255, 0.16);
  color: var(--ink);
}
html.theme-dark-fantasy .topbar-search::placeholder { color: rgba(181, 123, 255, 0.32); }
html.theme-dark-fantasy .topbar-search:focus {
  border-color: rgba(180, 120, 255, 0.42);
  background: rgba(14, 10, 28, 0.90);
  box-shadow:
    0 0 0 3px rgba(140, 70, 220, 0.11),
    inset 0 1px 0 rgba(210, 170, 255, 0.07);
}

/* ── Orun pill — moneda de energía oscura ───────────────────── */
html.theme-dark-fantasy .orun-pill {
  background: rgba(100, 40, 180, 0.20) !important;
  border: 1px solid rgba(180, 120, 255, 0.26) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 1px 0 rgba(220, 180, 255, 0.10);
}

/* ── Notificaciones ──────────────────────────────────────────── */
html.theme-dark-fantasy .notif-btn {
  background: rgba(8, 6, 18, 0.92) !important;
  border: 1px solid rgba(180, 120, 255, 0.11);
}
html.theme-dark-fantasy .notif-btn:hover {
  background: rgba(12, 9, 24, 0.96) !important;
  border-color: rgba(180, 120, 255, 0.28);
  box-shadow: 0 0 14px rgba(140, 70, 220, 0.12);
}

/* ── Botón Escribir — grimorio encantado ─────────────────────── */
html.theme-dark-fantasy .write-btn {
  background: linear-gradient(135deg, #8a3fc8 0%, #6428a0 100%);
  color: #f0e8ff;
  box-shadow:
    0 2px 12px rgba(120, 50, 200, 0.36),
    inset 0 1px 0 rgba(220, 190, 255, 0.22);
  transition: all .42s cubic-bezier(.22,.78,.28,1);
}
html.theme-dark-fantasy .write-btn:hover {
  background: linear-gradient(135deg, #9e4edc 0%, #7438b8 100%);
  color: #f8f0ff;
  box-shadow:
    0 0  24px rgba(160, 80, 255, 0.32),
    0 4px 18px rgba(60,  20, 100, 0.28),
    inset 0 1px 0 rgba(230, 200, 255, 0.30);
  transform: translateY(-2px);
}

/* ── Auth card ───────────────────────────────────────────────── */
html.theme-dark-fantasy .auth-card {
  background: rgba(10, 8, 22, 0.94) !important;
  border-color: rgba(180, 120, 255, 0.20) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    0 8px 48px rgba(2, 1, 8, 0.72),
    inset 0 1px 0 rgba(210, 170, 255, 0.08);
}
html.theme-dark-fantasy .auth-glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(140, 60, 220, 0.28) 0%, transparent 65%);
}

/* ══════════════════════════════════════════════════════════════════
   NEON TERMINAL GLASS — GLITCH
   Posts, topbar, sidebar y widgets con cristal oscuro verde-neón.
   Borde superior: arista de fósforo verde · barrido: estela de datos
   ══════════════════════════════════════════════════════════════════ */

/* ── Tipografía del feed ─────────────────────────────────────────── */
html.theme-glitch .post-text        { color: var(--ink); }
html.theme-glitch .post-text strong { color: #a0ffcc; }
html.theme-glitch .post-text em     { color: var(--gold); }
html.theme-glitch .post-name        { color: var(--ink); }
html.theme-glitch .post-handle,
html.theme-glitch .post-time        { color: rgba(0, 232, 144, 0.45); }

/* ── Posts — terminal de datos ───────────────────────────────────── */
html.theme-glitch .post {
  background:    rgba(5, 14, 8, 0.80);
  border:        1px solid rgba(0, 232, 144, 0.10);
  border-radius: 10px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 2px 18px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(0, 232, 144, 0.07);
  position: relative;
  overflow: hidden;
  transition: border-color .30s ease, box-shadow .30s ease;
}

/* Arista de fósforo superior */
html.theme-glitch .post::before {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0, 232, 144, 0.55) 40%,
    rgba(0, 255, 180, 0.80) 50%,
    rgba(0, 232, 144, 0.55) 60%, transparent 100%
  );
  pointer-events: none;
}

/* Barrido de datos — aparece en hover */
html.theme-glitch .post::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  left: -110%; width: 55%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 232, 144, 0.04) 50%,
    transparent 100%
  );
  pointer-events: none;
  transition: left .55s cubic-bezier(.22,.78,.28,1);
}
html.theme-glitch .post:hover {
  border-color: rgba(0, 232, 144, 0.22);
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.60),
    0 0 22px rgba(0, 232, 144, 0.06),
    inset 0 1px 0 rgba(0, 232, 144, 0.12);
}
html.theme-glitch .post:hover::after { left: 110%; }

/* ── Topbar — consola superior ───────────────────────────────────── */
html.theme-glitch .topbar {
  background: rgba(3, 9, 5, 0.96) !important;
  border-bottom: 1px solid rgba(0, 232, 144, 0.10) !important;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 1px 18px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 232, 144, 0.03);
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
html.theme-glitch .sidebar {
  background: rgba(4, 11, 6, 0.86);
  border-color: rgba(0, 232, 144, 0.08) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── Eco-card ────────────────────────────────────────────────────── */
html.theme-glitch .eco-card {
  background: rgba(4, 12, 7, 0.84);
  border: 1px solid rgba(0, 232, 144, 0.09);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(0, 232, 144, 0.06);
}

/* ── Feed widgets ────────────────────────────────────────────────── */
html.theme-glitch .feed-widgets {
  background: rgba(4, 12, 7, 0.80);
  border: 1px solid rgba(0, 232, 144, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ── Buscador ────────────────────────────────────────────────────── */
html.theme-glitch .topbar-search {
  background: rgba(6, 16, 9, 0.88);
  border: 1px solid rgba(0, 232, 144, 0.14);
  color: var(--ink);
}
html.theme-glitch .topbar-search::placeholder { color: rgba(0, 232, 144, 0.30); }
html.theme-glitch .topbar-search:focus {
  border-color: rgba(0, 232, 144, 0.40);
  background: rgba(6, 18, 10, 0.92);
  box-shadow:
    0 0 0 3px rgba(0, 232, 144, 0.09),
    inset 0 1px 0 rgba(0, 232, 144, 0.06);
}

/* ── Orun pill ───────────────────────────────────────────────────── */
html.theme-glitch .orun-pill {
  background: rgba(0, 80, 40, 0.22) !important;
  border: 1px solid rgba(0, 232, 144, 0.24) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 1px 0 rgba(0, 255, 160, 0.08);
}

/* ── Notificaciones ──────────────────────────────────────────────── */
html.theme-glitch .notif-btn {
  background: rgba(4, 12, 7, 0.94) !important;
  border: 1px solid rgba(0, 232, 144, 0.10);
}
html.theme-glitch .notif-btn:hover {
  background: rgba(6, 18, 10, 0.98) !important;
  border-color: rgba(0, 232, 144, 0.28);
  box-shadow: 0 0 14px rgba(0, 232, 144, 0.10);
}

/* ── Botón Escribir — terminal activa ────────────────────────────── */
html.theme-glitch .write-btn {
  background: linear-gradient(135deg, #00b870 0%, #008050 100%);
  color: #c0ffd8;
  box-shadow:
    0 2px 12px rgba(0, 180, 100, 0.32),
    inset 0 1px 0 rgba(0, 255, 160, 0.20);
  transition: all .38s cubic-bezier(.22,.78,.28,1);
}
html.theme-glitch .write-btn:hover {
  background: linear-gradient(135deg, #00d880 0%, #009a60 100%);
  color: #e0fff0;
  box-shadow:
    0 0 24px rgba(0, 232, 144, 0.28),
    0 4px 18px rgba(0, 60, 30, 0.30),
    inset 0 1px 0 rgba(0, 255, 180, 0.28);
  transform: translateY(-2px);
}

/* ── Auth card ───────────────────────────────────────────────────── */
html.theme-glitch .auth-card {
  background: rgba(4, 12, 7, 0.96) !important;
  border-color: rgba(0, 232, 144, 0.18) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    0 8px 48px rgba(0, 0, 0, 0.70),
    inset 0 1px 0 rgba(0, 232, 144, 0.08);
}
html.theme-glitch .auth-glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 200, 100, 0.24) 0%, transparent 65%);
}

/* ══════════════════════════════════════════════════════════════════
   BROKEN MEMORY GLASS — WEIRDCORE
   Cristal lavanda oscuro, bordes que no deberían existir,
   arista superior como luz de un cuarto que no recuerdas.
   ══════════════════════════════════════════════════════════════════ */

/* ── Tipografía ──────────────────────────────────────────────────── */
html.theme-weirdcore .post-text        { color: var(--ink); }
html.theme-weirdcore .post-text strong { color: #f0e0ff; }
html.theme-weirdcore .post-text em     { color: var(--gold); }
html.theme-weirdcore .post-name        { color: var(--ink); }
html.theme-weirdcore .post-handle,
html.theme-weirdcore .post-time        { color: rgba(195,175,230, 0.42); }

/* ── Posts — ventanas a otro lugar ──────────────────────────────── */
html.theme-weirdcore .post {
  background:    rgba(18, 14, 32, 0.78);
  border:        1px solid rgba(195, 175, 230, 0.09);
  border-radius: 10px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 2px 20px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(200, 180, 240, 0.06);
  position: relative;
  overflow: hidden;
  transition: border-color .35s ease, box-shadow .35s ease;
}

/* Arista de luz de habitación — como luz bajo una puerta */
html.theme-weirdcore .post::before {
  content: '';
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(215,195,245,0.40) 35%,
    rgba(240,220,255,0.65) 50%,
    rgba(215,195,245,0.40) 65%, transparent 100%
  );
  pointer-events: none;
}

/* Barrido de memoria — aparece en hover */
html.theme-weirdcore .post::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  left: -110%; width: 55%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(195,175,230,0.03) 50%,
    transparent 100%
  );
  pointer-events: none;
  transition: left .60s cubic-bezier(.22,.78,.28,1);
}
html.theme-weirdcore .post:hover {
  border-color: rgba(200, 180, 240, 0.18);
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.62),
    0 0 20px rgba(160, 120, 220, 0.05),
    inset 0 1px 0 rgba(210, 190, 245, 0.10);
}
html.theme-weirdcore .post:hover::after { left: 110%; }

/* ── Topbar ──────────────────────────────────────────────────────── */
html.theme-weirdcore .topbar {
  background: rgba(10, 7, 20, 0.96) !important;
  border-bottom: 1px solid rgba(195, 175, 230, 0.08) !important;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.60);
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
html.theme-weirdcore .sidebar {
  background: rgba(12, 9, 22, 0.86);
  border-color: rgba(195, 175, 230, 0.07) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── Eco-card ────────────────────────────────────────────────────── */
html.theme-weirdcore .eco-card {
  background: rgba(14, 10, 24, 0.84);
  border: 1px solid rgba(195, 175, 230, 0.08);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.48);
}

/* ── Feed widgets ────────────────────────────────────────────────── */
html.theme-weirdcore .feed-widgets {
  background: rgba(14, 10, 24, 0.80);
  border: 1px solid rgba(195, 175, 230, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ── Buscador ────────────────────────────────────────────────────── */
html.theme-weirdcore .topbar-search {
  background: rgba(16, 12, 28, 0.88);
  border: 1px solid rgba(195, 175, 230, 0.13);
  color: var(--ink);
}
html.theme-weirdcore .topbar-search::placeholder { color: rgba(195, 175, 230, 0.28); }
html.theme-weirdcore .topbar-search:focus {
  border-color: rgba(195, 175, 230, 0.36);
  background: rgba(18, 14, 30, 0.92);
  box-shadow:
    0 0 0 3px rgba(160, 120, 220, 0.08),
    inset 0 1px 0 rgba(210, 190, 245, 0.06);
}

/* ── Orun pill ───────────────────────────────────────────────────── */
html.theme-weirdcore .orun-pill {
  background: rgba(80, 50, 140, 0.20) !important;
  border: 1px solid rgba(195, 175, 230, 0.22) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 1px 0 rgba(220, 200, 250, 0.08);
}

/* ── Notificaciones ──────────────────────────────────────────────── */
html.theme-weirdcore .notif-btn {
  background: rgba(12, 9, 22, 0.94) !important;
  border: 1px solid rgba(195, 175, 230, 0.09);
}
html.theme-weirdcore .notif-btn:hover {
  background: rgba(16, 12, 26, 0.98) !important;
  border-color: rgba(195, 175, 230, 0.26);
  box-shadow: 0 0 14px rgba(160, 120, 220, 0.09);
}

/* ── Botón Escribir — abrir una puerta ───────────────────────────── */
html.theme-weirdcore .write-btn {
  background: linear-gradient(135deg, #9060c8 0%, #6840a0 100%);
  color: #f0e8ff;
  box-shadow:
    0 2px 12px rgba(120, 70, 200, 0.30),
    inset 0 1px 0 rgba(220, 200, 255, 0.18);
  transition: all .40s cubic-bezier(.22,.78,.28,1);
}
html.theme-weirdcore .write-btn:hover {
  background: linear-gradient(135deg, #a870d8 0%, #7850b8 100%);
  color: #faf4ff;
  box-shadow:
    0 0 24px rgba(160, 100, 255, 0.26),
    0 4px 18px rgba(40, 20, 80, 0.30),
    inset 0 1px 0 rgba(230, 210, 255, 0.28);
  transform: translateY(-2px);
}

/* ── Auth card ───────────────────────────────────────────────────── */
html.theme-weirdcore .auth-card {
  background: rgba(14, 10, 26, 0.95) !important;
  border-color: rgba(195, 175, 230, 0.16) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    0 8px 48px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(210, 190, 245, 0.07);
}
html.theme-weirdcore .auth-glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(140, 90, 210, 0.24) 0%, transparent 65%);
}


/* ══════════════════════════════════════════════════════════════════
   VAPORWAVE — Retrowave Neon Glass
   ══════════════════════════════════════════════════════════════════ */
html.theme-vaporwave {
  --page:      #08001a;
  --mist:      #1a003a;   /* hover de nav items */
  --fog:       #9040b0;   /* texto secundario: etiquetas, secciones */
  --ink:       #ffd0ff;   /* texto principal: nav, posts */
  --gold:      #ff80dd;   /* acento claro */
  --amber:     #ff00cc;   /* magenta puro: item activo */
  --amber-dim: #dd00aa;   /* magenta oscuro: texto activo */
  --rust:      #cc0088;
  --deep:      #040008;
  --white:     #120026;   /* fondo de paneles oscuros */
  --parchment: #1a0038;
  background:  #08001a !important;
}
html.theme-vaporwave body { background: transparent !important; }

html.theme-vaporwave .topbar,
html.theme-vaporwave .sidebar { border-color: rgba(255,0,200,.14); }

/* Paneles: cristal magenta/cyan */
html.theme-vaporwave .post,
html.theme-vaporwave .eco-card,
html.theme-vaporwave .widget-box,
html.theme-vaporwave .sidebar > *,
html.theme-vaporwave .topbar {
  background: rgba(18, 0, 38, 0.72) !important;
  border-color: rgba(255, 0, 200, 0.16) !important;
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow:
    0 0 0 1px rgba(0, 235, 255, 0.06),
    0 2px 20px rgba(255, 0, 200, 0.12),
    inset 0 1px 0 rgba(255, 180, 255, 0.07);
}

html.theme-vaporwave .post:hover {
  border-color: rgba(255, 0, 200, 0.32) !important;
  box-shadow:
    0 0 0 1px rgba(0, 235, 255, 0.12),
    0 4px 28px rgba(255, 0, 200, 0.22),
    inset 0 1px 0 rgba(255, 200, 255, 0.10);
}

html.theme-vaporwave .topbar { border-bottom: 1px solid rgba(255,0,200,.18) !important; }
html.theme-vaporwave .sidebar { border-right: 1px solid rgba(255,0,200,.10) !important; }

/* Texto */
html.theme-vaporwave .post-content,
html.theme-vaporwave .post-author,
html.theme-vaporwave .eco-label { color: rgba(255, 210, 255, 0.88); }
html.theme-vaporwave .post-meta,
html.theme-vaporwave .widget-label { color: rgba(200, 140, 255, 0.50); }

/* Botones de acción */
html.theme-vaporwave .btn-action,
html.theme-vaporwave .action-btn {
  color: rgba(255, 0, 200, 0.65);
  border-color: rgba(255, 0, 200, 0.18);
}
html.theme-vaporwave .btn-action:hover { color: #ff00cc; border-color: rgba(255,0,200,.40); }

/* Botón escribir */
html.theme-vaporwave .write-btn {
  background: linear-gradient(135deg, #c0107a 0%, #8000cc 100%);
  color: #fff0ff;
  box-shadow: 0 2px 16px rgba(200, 0, 180, 0.35), inset 0 1px 0 rgba(255,200,255,.18);
  transition: all .40s cubic-bezier(.22,.78,.28,1);
}
html.theme-vaporwave .write-btn:hover {
  background: linear-gradient(135deg, #e01898 0%, #a000ff 100%);
  box-shadow: 0 0 28px rgba(255, 0, 200, 0.45), 0 4px 20px rgba(80,0,160,.30), inset 0 1px 0 rgba(255,220,255,.22);
  transform: translateY(-2px);
}

/* Feed widgets */
html.theme-vaporwave .feed-widgets {
  background: rgba(10, 0, 26, 0.82);
  border: 1px solid rgba(255, 0, 200, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Buscador */
html.theme-vaporwave .topbar-search {
  background: rgba(14, 0, 32, 0.88);
  border: 1px solid rgba(255, 0, 200, 0.16);
  color: #ffd0ff;
}
html.theme-vaporwave .topbar-search::placeholder { color: rgba(255, 0, 200, 0.32); }
html.theme-vaporwave .topbar-search:focus {
  border-color: rgba(255, 0, 200, 0.42);
  background: rgba(18, 0, 40, 0.92);
  box-shadow: 0 0 0 3px rgba(200, 0, 180, 0.10), inset 0 1px 0 rgba(255, 180, 255, 0.06);
}

/* Orun pill */
html.theme-vaporwave .orun-pill {
  background: rgba(120, 0, 100, 0.22) !important;
  border: 1px solid rgba(255, 0, 200, 0.24) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 1px 0 rgba(255, 180, 255, 0.08);
}

/* Notificaciones */
html.theme-vaporwave .notif-btn {
  background: rgba(10, 0, 22, 0.94) !important;
  border: 1px solid rgba(255, 0, 200, 0.10);
}
html.theme-vaporwave .notif-btn:hover {
  background: rgba(16, 0, 32, 0.98) !important;
  border-color: rgba(255, 0, 200, 0.30);
  box-shadow: 0 0 14px rgba(200, 0, 180, 0.12);
}

/* Auth card */
html.theme-vaporwave .auth-card {
  background: rgba(12, 0, 28, 0.96) !important;
  border-color: rgba(255, 0, 200, 0.20) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 8px 48px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,180,255,.06);
}
html.theme-vaporwave .auth-glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(200, 0, 160, 0.28) 0%, transparent 65%);
}

/* ── CLOUDCORE — El Cielo Vive ───────────────────────────────── */
html.theme-cloudcore {
  --page:      #87ceeb;
  --mist:      #ddeeff;
  --fog:       #3a6090;
  --ink:       #1a2a40;
  --gold:      #e8a020;
  --amber:     #3a80c0;
  --amber-dim: #2a60a0;
  --rust:      #c04040;
  --deep:      #0a1828;
  --white:     #f0f8ff;
  --parchment: #e0f0ff;
  background:  #87ceeb !important;
}
html.theme-cloudcore body { background: transparent !important; }

/* Paneles — cristal blanco */
html.theme-cloudcore .post,
html.theme-cloudcore .profile-card,
html.theme-cloudcore .feed-center,
html.theme-cloudcore .left-sidebar,
html.theme-cloudcore .right-sidebar {
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(180,220,255,0.55) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    0 2px 18px rgba(60,120,200,0.10),
    inset 0 1px 0 rgba(255,255,255,0.80);
}
html.theme-cloudcore .post:hover {
  border-color: rgba(80,160,240,0.50) !important;
  box-shadow:
    0 4px 28px rgba(60,140,220,0.18),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

/* Topbar */
html.theme-cloudcore .topbar {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(160,210,255,0.45) !important;
}
html.theme-cloudcore .sidebar { border-right: 1px solid rgba(160,210,255,0.30) !important; }

/* Feed widgets */
html.theme-cloudcore .feed-widgets {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(160,210,255,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Buscador */
html.theme-cloudcore .topbar-search,
html.theme-cloudcore .topbar-search input {
  background: rgba(220,240,255,0.88) !important;
  color: #1a2a40 !important;
  border-color: rgba(100,170,230,0.35) !important;
}

/* Orun pill */
html.theme-cloudcore .orun-pill {
  background: rgba(220,240,255,0.90) !important;
  color: #1a2a40 !important;
  border: 1px solid rgba(100,160,220,0.30) !important;
}

/* Notificaciones */
html.theme-cloudcore .notif-btn { color: var(--fog) !important; }
html.theme-cloudcore .notif-btn:hover { background: rgba(100,160,220,0.18) !important; }

/* Botones de acción */
html.theme-cloudcore .btn-action,
html.theme-cloudcore .action-btn {
  color: rgba(40,100,180,0.70);
  border-color: rgba(80,150,220,0.20);
}
html.theme-cloudcore .btn-action:hover { color: #3a80c0; border-color: rgba(58,128,192,0.45); }

/* Botón escribir */
html.theme-cloudcore .write-btn {
  background: linear-gradient(135deg, #3a80c0 0%, #1a50a0 100%);
  color: #ffffff;
  box-shadow: 0 2px 16px rgba(40,100,200,0.30), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: all .38s cubic-bezier(.22,.78,.28,1);
}
html.theme-cloudcore .write-btn:hover {
  background: linear-gradient(135deg, #5a9ad8 0%, #2a60c0 100%);
  box-shadow: 0 0 28px rgba(60,140,240,0.40), 0 4px 20px rgba(20,60,160,.25);
  transform: translateY(-2px);
}

/* Texto */
html.theme-cloudcore .post-content,
html.theme-cloudcore .post-author,
html.theme-cloudcore .eco-label { color: rgba(20,40,70,0.90); }
html.theme-cloudcore .post-meta,
html.theme-cloudcore .widget-label { color: rgba(60,100,150,0.60); }

/* Auth */
html.theme-cloudcore .auth-card {
  background: rgba(240,250,255,0.95) !important;
  border-color: rgba(100,180,255,0.30) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 8px 48px rgba(60,100,200,.18), inset 0 1px 0 rgba(255,255,255,.90);
}
html.theme-cloudcore .auth-glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(100,180,255,0.22) 0%, transparent 65%);
}

/* ── AQUACORE ─────────────────────────────────────────────────── */
html.theme-aquacore {
  --page:      #041c22;
  --mist:      #0a2e34;
  --fog:       #2f6f74;
  --ink:       #d8f6f2;
  --gold:      #92f1ec;
  --amber:     #3c92ff;
  --amber-dim: #1c5aa8;
  --rust:      #ff8a5c;
  --deep:      #020e12;
  --white:     #0a2e34;
  --parchment: #0a2e34;
}
html.theme-aquacore body { background: var(--page); }
html.theme-aquacore .auth-card { background: #062832; border-color: rgba(146,241,236,.20); }
html.theme-aquacore .auth-glow { background: radial-gradient(ellipse at 50% 0%, rgba(60,146,255,.28) 0%, transparent 65%); }

/* ── Texto de publicaciones (hardcoded #333 en base CSS) ─────── */
html.theme-aquacore .post-text         { color: var(--ink); }
html.theme-aquacore .post-text strong  { color: #eafffb; }
html.theme-aquacore .post-text em      { color: var(--gold); }
html.theme-aquacore .post-name         { color: var(--ink); }
html.theme-aquacore .post-handle,
html.theme-aquacore .post-time         { color: var(--fog); }

/* ── Tarjetas post — Soul Glass ─────────────────────────────── */
html.theme-aquacore .post {
  position: relative;
  background: rgba(4, 24, 30, 0.70);
  border-color: rgba(146, 241, 236, 0.10);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    0 2px 16px rgba(0, 16, 20, 0.45),
    inset 0 1px 0 rgba(146, 241, 236, 0.07);
  transition:
    transform .38s cubic-bezier(.22,.82,.30,1),
    box-shadow .38s cubic-bezier(.22,.82,.30,1),
    border-color .38s ease,
    background .38s ease;
}

/* Línea de luz caústica en el borde superior de cada tarjeta */
html.theme-aquacore .post::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(146,241,236,0.16) 25%,
    rgba(216,246,242,0.24) 50%,
    rgba(146,241,236,0.16) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* Reflejo de luz que barre la tarjeta en hover */
html.theme-aquacore .post::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(
    108deg,
    transparent 35%,
    rgba(146,241,236,0.045) 50%,
    transparent 65%
  );
  transition: left .70s cubic-bezier(.40,.15,.20,1);
  pointer-events: none;
}

html.theme-aquacore .post:hover {
  background: rgba(6, 32, 40, 0.80);
  border-color: rgba(146, 241, 236, 0.22);
  transform: translateY(-3px);
  box-shadow:
    0 8px 36px rgba(0, 18, 24, 0.56),
    0 0 0 1px rgba(60,146,255,0.08),
    inset 0 1px 0 rgba(146, 241, 236, 0.14),
    0 0 28px rgba(60,146,255,0.08);
}
html.theme-aquacore .post:hover::after {
  left: 110%;
}

/* ── Topbar — Aquacore Glass ─────────────────────────────────── */
html.theme-aquacore .topbar {
  background: rgba(3, 18, 22, 0.88) !important;
  backdrop-filter: blur(24px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
  border-bottom: 1px solid rgba(146,241,236,0.08);
  box-shadow: 0 1px 22px rgba(0, 12, 16, 0.48);
}

/* ── Sidebar — Soul Glass ──────────────────────────────────── */
html.theme-aquacore .sidebar {
  background: rgba(3, 16, 20, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(146, 241, 236, 0.09);
}

/* ── Panel Tu Economía — Soul Glass ───────────────────────── */
html.theme-aquacore .eco-card {
  background: rgba(6, 28, 34, 0.75) !important;
  border-color: rgba(146, 241, 236, 0.11) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 2px 20px rgba(0,16,20,0.42),
    inset 0 1px 0 rgba(146,241,236,0.08);
}

/* ── Panel de widgets (derecha del feed) ───────────────────── */
html.theme-aquacore .feed-widgets {
  background: rgba(2, 14, 18, 0.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(146,241,236,0.06);
}

/* ── Barra de búsqueda — glass ─────────────────────────────── */
html.theme-aquacore .topbar-search {
  background: rgba(6, 32, 40, 0.72);
  border-color: rgba(146, 241, 236, 0.14);
}
html.theme-aquacore .topbar-search:focus {
  border-color: rgba(146, 241, 236, 0.34);
  background: rgba(8, 38, 46, 0.82);
  box-shadow: 0 0 0 3px rgba(60,146,255,0.10);
}

/* ── Píldora de Oruns — aquacore glass ───────────────────── */
html.theme-aquacore .orun-pill {
  background: rgba(14, 60, 66, 0.78) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(146,241,236,0.12);
}

/* ── Botón de notificaciones — aquacore ──────────────────── */
html.theme-aquacore .notif-btn {
  background: rgba(6, 30, 36, 0.78) !important;
  border: 1px solid rgba(146,241,236,0.10);
}
html.theme-aquacore .notif-btn:hover {
  background: rgba(10, 42, 50, 0.88) !important;
  border-color: rgba(146,241,236,0.20);
  box-shadow: 0 0 18px rgba(60,146,255,0.16);
}

/* ── Botón Escribir — brillo goldfish sobre azul profundo ─── */
html.theme-aquacore .write-btn {
  box-shadow: 0 0 0 rgba(255,138,92,0);
  transition: all .38s cubic-bezier(.22,.82,.30,1);
}
html.theme-aquacore .write-btn:hover {
  background: var(--rust);
  color: var(--deep);
  box-shadow:
    0 0 24px rgba(255,138,92,0.40),
    0 4px 18px rgba(0,16,24,0.52);
  transform: translateY(-2px);
}

/* ── Auth card — tema aquacore ─────────────────────────────── */
html.theme-aquacore .auth-card {
  background: rgba(4, 24, 30, 0.82);
  border-color: rgba(146,241,236,.20);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
html.theme-aquacore .auth-glow {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(60,146,255,.30) 0%,
    transparent 65%
  );
}

/* ── VHS CORE ─────────────────────────────────────────────────── */
html.theme-vhscore {
  --page:      #0a0a10;
  --mist:      #12121c;
  --fog:       #55556a;
  --ink:       #e8e8f0;
  --gold:      #ff3c46;
  --amber:     #32dcff;
  --amber-dim: #1a7a94;
  --rust:      #ff3c46;
  --deep:      #030308;
  --white:     #12121c;
  --parchment: #12121c;
}
html.theme-vhscore body { background: var(--page); }
html.theme-vhscore .auth-card { background: #0e0e18; border-color: rgba(50,220,255,.18); }
html.theme-vhscore .auth-glow { background: radial-gradient(ellipse at 50% 0%, rgba(255,60,70,.22) 0%, transparent 65%); }

/* ── Texto de publicaciones (hardcoded #333 en base CSS) ─────── */
html.theme-vhscore .post-text         { color: var(--ink); }
html.theme-vhscore .post-text strong  { color: #ffffff; }
html.theme-vhscore .post-text em      { color: var(--gold); }
html.theme-vhscore .post-name         { color: var(--ink); }
html.theme-vhscore .post-handle,
html.theme-vhscore .post-time         { color: var(--fog); }

/* ── Tarjetas post — Soul Glass ─────────────────────────────── */
html.theme-vhscore .post {
  position: relative;
  background: rgba(10, 10, 16, 0.72);
  border-color: rgba(50, 220, 255, 0.09);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    0 2px 16px rgba(0, 0, 4, 0.50),
    inset 0 1px 0 rgba(255, 60, 70, 0.06);
  transition:
    transform .38s cubic-bezier(.22,.82,.30,1),
    box-shadow .38s cubic-bezier(.22,.82,.30,1),
    border-color .38s ease,
    background .38s ease;
}

/* Línea de escaneo en el borde superior de cada tarjeta */
html.theme-vhscore .post::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(50,220,255,0.16) 25%,
    rgba(255,60,70,0.22) 50%,
    rgba(50,220,255,0.16) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* Reflejo de tracking que barre la tarjeta en hover */
html.theme-vhscore .post::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(
    108deg,
    transparent 35%,
    rgba(50,220,255,0.045) 50%,
    transparent 65%
  );
  transition: left .70s cubic-bezier(.40,.15,.20,1);
  pointer-events: none;
}

html.theme-vhscore .post:hover {
  background: rgba(14, 14, 22, 0.82);
  border-color: rgba(255, 60, 70, 0.20);
  transform: translateY(-3px);
  box-shadow:
    0 8px 36px rgba(0, 0, 6, 0.60),
    0 0 0 1px rgba(50,220,255,0.08),
    inset 0 1px 0 rgba(255, 60, 70, 0.12),
    0 0 28px rgba(50,220,255,0.07);
}
html.theme-vhscore .post:hover::after {
  left: 110%;
}

/* ── Topbar — VHS glass ────────────────────────────────────── */
html.theme-vhscore .topbar {
  background: rgba(6, 6, 10, 0.90) !important;
  backdrop-filter: blur(24px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
  border-bottom: 1px solid rgba(50,220,255,0.08);
  box-shadow: 0 1px 22px rgba(0, 0, 4, 0.55);
}

/* ── Sidebar — Soul Glass ──────────────────────────────────── */
html.theme-vhscore .sidebar {
  background: rgba(5, 5, 9, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(50, 220, 255, 0.08);
}

/* ── Panel Tu Economía — Soul Glass ───────────────────────── */
html.theme-vhscore .eco-card {
  background: rgba(10, 10, 16, 0.78) !important;
  border-color: rgba(255, 60, 70, 0.12) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 2px 20px rgba(0,0,4,0.46),
    inset 0 1px 0 rgba(50,220,255,0.07);
}

/* ── Panel de widgets (derecha del feed) ───────────────────── */
html.theme-vhscore .feed-widgets {
  background: rgba(4, 4, 8, 0.64);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(50,220,255,0.05);
}

/* ── Barra de búsqueda — glass ─────────────────────────────── */
html.theme-vhscore .topbar-search {
  background: rgba(10, 10, 16, 0.75);
  border-color: rgba(50, 220, 255, 0.14);
}
html.theme-vhscore .topbar-search:focus {
  border-color: rgba(255, 60, 70, 0.32);
  background: rgba(14, 14, 22, 0.85);
  box-shadow: 0 0 0 3px rgba(50,220,255,0.10);
}

/* ── Píldora de Oruns — vhs glass ──────────────────────────── */
html.theme-vhscore .orun-pill {
  background: rgba(20, 20, 30, 0.80) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(50,220,255,0.14);
}

/* ── Botón de notificaciones — vhs ─────────────────────────── */
html.theme-vhscore .notif-btn {
  background: rgba(10, 10, 16, 0.80) !important;
  border: 1px solid rgba(50,220,255,0.10);
}
html.theme-vhscore .notif-btn:hover {
  background: rgba(16, 16, 24, 0.90) !important;
  border-color: rgba(255,60,70,0.22);
  box-shadow: 0 0 18px rgba(255,60,70,0.18);
}

/* ── Botón Escribir — glow REC ─────────────────────────────── */
html.theme-vhscore .write-btn {
  box-shadow: 0 0 0 rgba(255,60,70,0);
  transition: all .38s cubic-bezier(.22,.82,.30,1);
}
html.theme-vhscore .write-btn:hover {
  background: var(--gold);
  color: #fff;
  box-shadow:
    0 0 24px rgba(255,60,70,0.42),
    0 4px 18px rgba(0,0,6,0.55);
  transform: translateY(-2px);
}

/* ── Auth card — tema vhs ──────────────────────────────────── */
html.theme-vhscore .auth-card {
  background: rgba(10, 10, 16, 0.84);
  border-color: rgba(50,220,255,.20);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
html.theme-vhscore .auth-glow {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(255,60,70,.28) 0%,
    transparent 65%
  );
}

/* ── POOLCORE ─────────────────────────────────────────────────── */
html.theme-poolcore {
  --page:      #081410;
  --mist:      #10241c;
  --fog:       #4a6a5c;
  --ink:       #dceee2;
  --gold:      #a8e8cc;
  --amber:     #4ad8a8;
  --amber-dim: #267a5c;
  --rust:      #e8c878;
  --deep:      #040a08;
  --white:     #10241c;
  --parchment: #10241c;
}
html.theme-poolcore body { background: var(--page); }
html.theme-poolcore .auth-card { background: #0c1e18; border-color: rgba(168,232,204,.20); }
html.theme-poolcore .auth-glow { background: radial-gradient(ellipse at 50% 0%, rgba(74,216,168,.24) 0%, transparent 65%); }

/* ── Texto de publicaciones (hardcoded #333 en base CSS) ─────── */
html.theme-poolcore .post-text         { color: var(--ink); }
html.theme-poolcore .post-text strong  { color: #eafff4; }
html.theme-poolcore .post-text em      { color: var(--gold); }
html.theme-poolcore .post-name         { color: var(--ink); }
html.theme-poolcore .post-handle,
html.theme-poolcore .post-time         { color: var(--fog); }

/* ── Tarjetas post — Soul Glass ─────────────────────────────── */
html.theme-poolcore .post {
  position: relative;
  background: rgba(8, 22, 18, 0.70);
  border-color: rgba(168, 232, 204, 0.10);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    0 2px 16px rgba(0, 10, 8, 0.45),
    inset 0 1px 0 rgba(168, 232, 204, 0.07);
  transition:
    transform .38s cubic-bezier(.22,.82,.30,1),
    box-shadow .38s cubic-bezier(.22,.82,.30,1),
    border-color .38s ease,
    background .38s ease;
}

/* Línea de reflejo acuático en el borde superior de cada tarjeta */
html.theme-poolcore .post::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(168,232,204,0.16) 25%,
    rgba(220,255,240,0.24) 50%,
    rgba(168,232,204,0.16) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* Reflejo de luz que barre la tarjeta en hover */
html.theme-poolcore .post::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(
    108deg,
    transparent 35%,
    rgba(168,232,204,0.045) 50%,
    transparent 65%
  );
  transition: left .70s cubic-bezier(.40,.15,.20,1);
  pointer-events: none;
}

html.theme-poolcore .post:hover {
  background: rgba(10, 28, 22, 0.80);
  border-color: rgba(168, 232, 204, 0.22);
  transform: translateY(-3px);
  box-shadow:
    0 8px 36px rgba(0, 12, 10, 0.56),
    0 0 0 1px rgba(74,216,168,0.08),
    inset 0 1px 0 rgba(168, 232, 204, 0.14),
    0 0 28px rgba(74,216,168,0.08);
}
html.theme-poolcore .post:hover::after {
  left: 110%;
}

/* ── Topbar — Poolcore Glass ──────────────────────────────────── */
html.theme-poolcore .topbar {
  background: rgba(5, 14, 11, 0.88) !important;
  backdrop-filter: blur(24px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
  border-bottom: 1px solid rgba(168,232,204,0.08);
  box-shadow: 0 1px 22px rgba(0, 10, 8, 0.48);
}

/* ── Sidebar — Soul Glass ──────────────────────────────────── */
html.theme-poolcore .sidebar {
  background: rgba(4, 12, 10, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(168, 232, 204, 0.09);
}

/* ── Panel Tu Economía — Soul Glass ───────────────────────── */
html.theme-poolcore .eco-card {
  background: rgba(8, 24, 19, 0.75) !important;
  border-color: rgba(168, 232, 204, 0.11) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 2px 20px rgba(0,10,8,0.42),
    inset 0 1px 0 rgba(168,232,204,0.08);
}

/* ── Panel de widgets (derecha del feed) ───────────────────── */
html.theme-poolcore .feed-widgets {
  background: rgba(3, 10, 8, 0.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(168,232,204,0.06);
}

/* ── Barra de búsqueda — glass ─────────────────────────────── */
html.theme-poolcore .topbar-search {
  background: rgba(8, 24, 19, 0.72);
  border-color: rgba(168, 232, 204, 0.14);
}
html.theme-poolcore .topbar-search:focus {
  border-color: rgba(168, 232, 204, 0.34);
  background: rgba(10, 30, 24, 0.82);
  box-shadow: 0 0 0 3px rgba(74,216,168,0.10);
}

/* ── Píldora de Oruns — poolcore glass ────────────────────── */
html.theme-poolcore .orun-pill {
  background: rgba(16, 50, 40, 0.78) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(168,232,204,0.12);
}

/* ── Botón de notificaciones — poolcore ────────────────────── */
html.theme-poolcore .notif-btn {
  background: rgba(8, 22, 18, 0.78) !important;
  border: 1px solid rgba(168,232,204,0.10);
}
html.theme-poolcore .notif-btn:hover {
  background: rgba(12, 32, 26, 0.88) !important;
  border-color: rgba(168,232,204,0.20);
  box-shadow: 0 0 18px rgba(74,216,168,0.16);
}

/* ── Botón Escribir — brillo tenue de luz de techo ─────────── */
html.theme-poolcore .write-btn {
  box-shadow: 0 0 0 rgba(232,200,120,0);
  transition: all .38s cubic-bezier(.22,.82,.30,1);
}
html.theme-poolcore .write-btn:hover {
  background: var(--rust);
  color: var(--deep);
  box-shadow:
    0 0 24px rgba(232,200,120,0.36),
    0 4px 18px rgba(0,10,8,0.52);
  transform: translateY(-2px);
}

/* ── Auth card — tema poolcore ─────────────────────────────── */
html.theme-poolcore .auth-card {
  background: rgba(8, 22, 18, 0.82);
  border-color: rgba(168,232,204,.20);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
html.theme-poolcore .auth-glow {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(74,216,168,.30) 0%,
    transparent 65%
  );
}

/* ── ARCADE CORE ──────────────────────────────────────────────── */
html.theme-arcadecore {
  --page:      #0a0612;
  --mist:      #150a24;
  --fog:       #6a4a8a;
  --ink:       #f0e0ff;
  --gold:      #ff3cdc;
  --amber:     #5a8cff;
  --amber-dim: #2c4a94;
  --rust:      #ff9a3c;
  --deep:      #030108;
  --white:     #150a24;
  --parchment: #150a24;
}
html.theme-arcadecore body { background: var(--page); }
html.theme-arcadecore .auth-card { background: #120a1e; border-color: rgba(255,60,220,.20); }
html.theme-arcadecore .auth-glow { background: radial-gradient(ellipse at 50% 0%, rgba(90,140,255,.28) 0%, transparent 65%); }

/* ── Texto de publicaciones (hardcoded #333 en base CSS) ─────── */
html.theme-arcadecore .post-text         { color: var(--ink); }
html.theme-arcadecore .post-text strong  { color: #ffffff; }
html.theme-arcadecore .post-text em      { color: var(--gold); }
html.theme-arcadecore .post-name         { color: var(--ink); }
html.theme-arcadecore .post-handle,
html.theme-arcadecore .post-time         { color: var(--fog); }

/* ── Tarjetas post — Soul Glass ─────────────────────────────── */
html.theme-arcadecore .post {
  position: relative;
  background: rgba(14, 8, 22, 0.72);
  border-color: rgba(255, 60, 220, 0.10);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    0 2px 16px rgba(4, 0, 10, 0.50),
    inset 0 1px 0 rgba(90, 140, 255, 0.07);
  transition:
    transform .38s cubic-bezier(.22,.82,.30,1),
    box-shadow .38s cubic-bezier(.22,.82,.30,1),
    border-color .38s ease,
    background .38s ease;
}

/* Línea de neón en el borde superior de cada tarjeta */
html.theme-arcadecore .post::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,60,220,0.18) 25%,
    rgba(90,140,255,0.26) 50%,
    rgba(255,60,220,0.18) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* Reflejo de luz que barre la tarjeta en hover */
html.theme-arcadecore .post::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(
    108deg,
    transparent 35%,
    rgba(90,140,255,0.05) 50%,
    transparent 65%
  );
  transition: left .70s cubic-bezier(.40,.15,.20,1);
  pointer-events: none;
}

html.theme-arcadecore .post:hover {
  background: rgba(18, 10, 28, 0.82);
  border-color: rgba(255, 60, 220, 0.22);
  transform: translateY(-3px);
  box-shadow:
    0 8px 36px rgba(4, 0, 12, 0.60),
    0 0 0 1px rgba(90,140,255,0.09),
    inset 0 1px 0 rgba(255, 60, 220, 0.14),
    0 0 28px rgba(255,60,220,0.09);
}
html.theme-arcadecore .post:hover::after {
  left: 110%;
}

/* ── Topbar — Arcade Glass ────────────────────────────────────── */
html.theme-arcadecore .topbar {
  background: rgba(8, 4, 14, 0.90) !important;
  backdrop-filter: blur(24px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
  border-bottom: 1px solid rgba(255,60,220,0.08);
  box-shadow: 0 1px 22px rgba(4, 0, 10, 0.55);
}

/* ── Sidebar — Soul Glass ──────────────────────────────────── */
html.theme-arcadecore .sidebar {
  background: rgba(7, 3, 12, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 60, 220, 0.08);
}

/* ── Panel Tu Economía — Soul Glass ───────────────────────── */
html.theme-arcadecore .eco-card {
  background: rgba(14, 8, 22, 0.78) !important;
  border-color: rgba(90, 140, 255, 0.12) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 2px 20px rgba(4,0,10,0.46),
    inset 0 1px 0 rgba(255,60,220,0.07);
}

/* ── Panel de widgets (derecha del feed) ───────────────────── */
html.theme-arcadecore .feed-widgets {
  background: rgba(5, 2, 9, 0.64);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255,60,220,0.05);
}

/* ── Barra de búsqueda — glass ─────────────────────────────── */
html.theme-arcadecore .topbar-search {
  background: rgba(14, 8, 22, 0.75);
  border-color: rgba(255, 60, 220, 0.14);
}
html.theme-arcadecore .topbar-search:focus {
  border-color: rgba(90, 140, 255, 0.34);
  background: rgba(18, 10, 28, 0.85);
  box-shadow: 0 0 0 3px rgba(255,60,220,0.10);
}

/* ── Píldora de Oruns — arcade glass ───────────────────────── */
html.theme-arcadecore .orun-pill {
  background: rgba(40, 20, 55, 0.78) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,60,220,0.14);
}

/* ── Botón de notificaciones — arcade ──────────────────────── */
html.theme-arcadecore .notif-btn {
  background: rgba(14, 8, 22, 0.80) !important;
  border: 1px solid rgba(255,60,220,0.10);
}
html.theme-arcadecore .notif-btn:hover {
  background: rgba(20, 12, 30, 0.90) !important;
  border-color: rgba(90,140,255,0.24);
  box-shadow: 0 0 18px rgba(90,140,255,0.18);
}

/* ── Botón Escribir — glow arcade ──────────────────────────── */
html.theme-arcadecore .write-btn {
  box-shadow: 0 0 0 rgba(255,154,60,0);
  transition: all .38s cubic-bezier(.22,.82,.30,1);
}
html.theme-arcadecore .write-btn:hover {
  background: var(--rust);
  color: var(--deep);
  box-shadow:
    0 0 24px rgba(255,154,60,0.40),
    0 4px 18px rgba(4,0,12,0.55);
  transform: translateY(-2px);
}

/* ── Auth card — tema arcade ────────────────────────────────── */
html.theme-arcadecore .auth-card {
  background: rgba(14, 8, 22, 0.84);
  border-color: rgba(255,60,220,.20);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
html.theme-arcadecore .auth-glow {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(90,140,255,.30) 0%,
    transparent 65%
  );
}

/* ── SAKURA ───────────────────────────────────────────────────── */
html.theme-sakura {
  --page:      #241521;
  --mist:      #341f2f;
  --fog:       #8a5a68;
  --ink:       #ffe8ea;
  --gold:      #ffb890;
  --amber:     #ff8fa3;
  --amber-dim: #b8546c;
  --rust:      #ffd27a;
  --deep:      #150a10;
  --white:     #341f2f;
  --parchment: #341f2f;
}
html.theme-sakura body { background: var(--page); }
html.theme-sakura .auth-card { background: #301c2c; border-color: rgba(255,143,163,.20); }
html.theme-sakura .auth-glow { background: radial-gradient(ellipse at 50% 0%, rgba(255,178,120,.28) 0%, transparent 65%); }

/* ── Texto de publicaciones (hardcoded #333 en base CSS) ─────── */
html.theme-sakura .post-text         { color: var(--ink); }
html.theme-sakura .post-text strong  { color: #fff4f2; }
html.theme-sakura .post-text em      { color: var(--gold); }
html.theme-sakura .post-name         { color: var(--ink); }
html.theme-sakura .post-handle,
html.theme-sakura .post-time         { color: var(--fog); }

/* ── Tarjetas post — Soul Glass ─────────────────────────────── */
html.theme-sakura .post {
  position: relative;
  background: rgba(30, 16, 26, 0.70);
  border-color: rgba(255, 143, 163, 0.10);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    0 2px 16px rgba(14, 4, 10, 0.45),
    inset 0 1px 0 rgba(255, 184, 144, 0.07);
  transition:
    transform .38s cubic-bezier(.22,.82,.30,1),
    box-shadow .38s cubic-bezier(.22,.82,.30,1),
    border-color .38s ease,
    background .38s ease;
}

/* Línea cálida en el borde superior de cada tarjeta */
html.theme-sakura .post::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,184,144,0.18) 25%,
    rgba(255,220,200,0.26) 50%,
    rgba(255,184,144,0.18) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* Reflejo de luz que barre la tarjeta en hover */
html.theme-sakura .post::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(
    108deg,
    transparent 35%,
    rgba(255,143,163,0.05) 50%,
    transparent 65%
  );
  transition: left .70s cubic-bezier(.40,.15,.20,1);
  pointer-events: none;
}

html.theme-sakura .post:hover {
  background: rgba(36, 20, 32, 0.80);
  border-color: rgba(255, 143, 163, 0.22);
  transform: translateY(-3px);
  box-shadow:
    0 8px 36px rgba(14, 4, 12, 0.56),
    0 0 0 1px rgba(255,184,144,0.09),
    inset 0 1px 0 rgba(255, 184, 144, 0.14),
    0 0 28px rgba(255,143,163,0.08);
}
html.theme-sakura .post:hover::after {
  left: 110%;
}

/* ── Topbar — Sakura Glass ────────────────────────────────────── */
html.theme-sakura .topbar {
  background: rgba(20, 10, 17, 0.88) !important;
  backdrop-filter: blur(24px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
  border-bottom: 1px solid rgba(255,184,144,0.08);
  box-shadow: 0 1px 22px rgba(14, 4, 10, 0.48);
}

/* ── Sidebar — Soul Glass ──────────────────────────────────── */
html.theme-sakura .sidebar {
  background: rgba(18, 9, 15, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 184, 144, 0.09);
}

/* ── Panel Tu Economía — Soul Glass ───────────────────────── */
html.theme-sakura .eco-card {
  background: rgba(28, 15, 24, 0.75) !important;
  border-color: rgba(255, 184, 144, 0.11) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 2px 20px rgba(14,4,10,0.42),
    inset 0 1px 0 rgba(255,184,144,0.08);
}

/* ── Panel de widgets (derecha del feed) ───────────────────── */
html.theme-sakura .feed-widgets {
  background: rgba(14, 7, 12, 0.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255,184,144,0.06);
}

/* ── Barra de búsqueda — glass ─────────────────────────────── */
html.theme-sakura .topbar-search {
  background: rgba(28, 15, 24, 0.72);
  border-color: rgba(255, 184, 144, 0.14);
}
html.theme-sakura .topbar-search:focus {
  border-color: rgba(255, 143, 163, 0.34);
  background: rgba(34, 18, 29, 0.82);
  box-shadow: 0 0 0 3px rgba(255,184,144,0.10);
}

/* ── Píldora de Oruns — sakura glass ───────────────────────── */
html.theme-sakura .orun-pill {
  background: rgba(70, 34, 52, 0.78) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,184,144,0.12);
}

/* ── Botón de notificaciones — sakura ──────────────────────── */
html.theme-sakura .notif-btn {
  background: rgba(24, 12, 20, 0.78) !important;
  border: 1px solid rgba(255,184,144,0.10);
}
html.theme-sakura .notif-btn:hover {
  background: rgba(34, 18, 28, 0.88) !important;
  border-color: rgba(255,184,144,0.20);
  box-shadow: 0 0 18px rgba(255,143,163,0.16);
}

/* ── Botón Escribir — brillo dorado de sol ─────────────────── */
html.theme-sakura .write-btn {
  box-shadow: 0 0 0 rgba(255,210,122,0);
  transition: all .38s cubic-bezier(.22,.82,.30,1);
}
html.theme-sakura .write-btn:hover {
  background: var(--rust);
  color: var(--deep);
  box-shadow:
    0 0 24px rgba(255,210,122,0.40),
    0 4px 18px rgba(14,4,12,0.52);
  transform: translateY(-2px);
}

/* ── Auth card — tema sakura ────────────────────────────────── */
html.theme-sakura .auth-card {
  background: rgba(28, 15, 24, 0.82);
  border-color: rgba(255,184,144,.20);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
html.theme-sakura .auth-glow {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(255,143,163,.30) 0%,
    transparent 65%
  );
}

/* ── MICROCORE ────────────────────────────────────────────────── */
html.theme-microcore {
  --page:      #050f10;
  --mist:      #0a1c1e;
  --fog:       #3a6860;
  --ink:       #d8fff0;
  --gold:      #6dffcf;
  --amber:     #4ad9ff;
  --amber-dim: #1c7a94;
  --rust:      #ff5a5a;
  --deep:      #020808;
  --white:     #0a1c1e;
  --parchment: #0a1c1e;
}
html.theme-microcore body { background: var(--page); }
html.theme-microcore .auth-card { background: #071617; border-color: rgba(109,255,207,.20); }
html.theme-microcore .auth-glow { background: radial-gradient(ellipse at 50% 0%, rgba(74,217,255,.28) 0%, transparent 65%); }

/* ── Texto de publicaciones (hardcoded #333 en base CSS) ─────── */
html.theme-microcore .post-text         { color: var(--ink); }
html.theme-microcore .post-text strong  { color: #eafffa; }
html.theme-microcore .post-text em      { color: var(--gold); }
html.theme-microcore .post-name         { color: var(--ink); }
html.theme-microcore .post-handle,
html.theme-microcore .post-time         { color: var(--fog); }

/* ── Tarjetas post — Soul Glass ─────────────────────────────── */
html.theme-microcore .post {
  position: relative;
  background: rgba(6, 22, 21, 0.70);
  border-color: rgba(109, 255, 207, 0.10);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    0 2px 16px rgba(0, 10, 9, 0.45),
    inset 0 1px 0 rgba(74, 217, 255, 0.07);
  transition:
    transform .38s cubic-bezier(.22,.82,.30,1),
    box-shadow .38s cubic-bezier(.22,.82,.30,1),
    border-color .38s ease,
    background .38s ease;
}

/* Línea bioluminiscente en el borde superior de cada tarjeta */
html.theme-microcore .post::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(109,255,207,0.18) 25%,
    rgba(74,217,255,0.26) 50%,
    rgba(109,255,207,0.18) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* Reflejo de luz que barre la tarjeta en hover */
html.theme-microcore .post::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(
    108deg,
    transparent 35%,
    rgba(109,255,207,0.05) 50%,
    transparent 65%
  );
  transition: left .70s cubic-bezier(.40,.15,.20,1);
  pointer-events: none;
}

html.theme-microcore .post:hover {
  background: rgba(8, 28, 26, 0.80);
  border-color: rgba(109, 255, 207, 0.22);
  transform: translateY(-3px);
  box-shadow:
    0 8px 36px rgba(0, 12, 11, 0.56),
    0 0 0 1px rgba(74,217,255,0.09),
    inset 0 1px 0 rgba(109, 255, 207, 0.14),
    0 0 28px rgba(109,255,207,0.08);
}
html.theme-microcore .post:hover::after {
  left: 110%;
}

/* ── Topbar — Microcore Glass ─────────────────────────────────── */
html.theme-microcore .topbar {
  background: rgba(3, 12, 12, 0.88) !important;
  backdrop-filter: blur(24px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
  border-bottom: 1px solid rgba(109,255,207,0.08);
  box-shadow: 0 1px 22px rgba(0, 10, 9, 0.48);
}

/* ── Sidebar — Soul Glass ──────────────────────────────────── */
html.theme-microcore .sidebar {
  background: rgba(3, 11, 11, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(109, 255, 207, 0.09);
}

/* ── Panel Tu Economía — Soul Glass ───────────────────────── */
html.theme-microcore .eco-card {
  background: rgba(6, 24, 23, 0.75) !important;
  border-color: rgba(109, 255, 207, 0.11) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 2px 20px rgba(0,10,9,0.42),
    inset 0 1px 0 rgba(109,255,207,0.08);
}

/* ── Panel de widgets (derecha del feed) ───────────────────── */
html.theme-microcore .feed-widgets {
  background: rgba(2, 9, 9, 0.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(109,255,207,0.06);
}

/* ── Barra de búsqueda — glass ─────────────────────────────── */
html.theme-microcore .topbar-search {
  background: rgba(6, 24, 23, 0.72);
  border-color: rgba(109, 255, 207, 0.14);
}
html.theme-microcore .topbar-search:focus {
  border-color: rgba(74, 217, 255, 0.34);
  background: rgba(8, 30, 28, 0.82);
  box-shadow: 0 0 0 3px rgba(109,255,207,0.10);
}

/* ── Píldora de Oruns — microcore glass ────────────────────── */
html.theme-microcore .orun-pill {
  background: rgba(12, 50, 46, 0.78) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(109,255,207,0.12);
}

/* ── Botón de notificaciones — microcore ───────────────────── */
html.theme-microcore .notif-btn {
  background: rgba(6, 22, 21, 0.78) !important;
  border: 1px solid rgba(109,255,207,0.10);
}
html.theme-microcore .notif-btn:hover {
  background: rgba(10, 32, 30, 0.88) !important;
  border-color: rgba(74,217,255,0.20);
  box-shadow: 0 0 18px rgba(74,217,255,0.16);
}

/* ── Botón Escribir — glow de contaminación ────────────────── */
html.theme-microcore .write-btn {
  box-shadow: 0 0 0 rgba(255,90,90,0);
  transition: all .38s cubic-bezier(.22,.82,.30,1);
}
html.theme-microcore .write-btn:hover {
  background: var(--rust);
  color: #fff;
  box-shadow:
    0 0 24px rgba(255,90,90,0.40),
    0 4px 18px rgba(0,10,10,0.52);
  transform: translateY(-2px);
}

/* ── Auth card — tema microcore ────────────────────────────── */
html.theme-microcore .auth-card {
  background: rgba(6, 22, 21, 0.82);
  border-color: rgba(109,255,207,.20);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
html.theme-microcore .auth-glow {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(74,217,255,.30) 0%,
    transparent 65%
  );
}

/* ── DIVINE MACHINERY ─────────────────────────────────────────── */
html.theme-divinemachinery {
  --page:      #150e28;
  --mist:      #1e1438;
  --fog:       #6a5a8a;
  --ink:       #fff4e0;
  --gold:      #ffd88a;
  --amber:     #ffb84a;
  --amber-dim: #a8752c;
  --rust:      #ff8a3c;
  --deep:      #08050f;
  --white:     #1e1438;
  --parchment: #1e1438;
}
html.theme-divinemachinery body { background: var(--page); }
html.theme-divinemachinery .auth-card { background: #1a1230; border-color: rgba(255,216,138,.20); }
html.theme-divinemachinery .auth-glow { background: radial-gradient(ellipse at 50% 0%, rgba(255,184,74,.28) 0%, transparent 65%); }

/* ── Texto de publicaciones (hardcoded #333 en base CSS) ─────── */
html.theme-divinemachinery .post-text         { color: var(--ink); }
html.theme-divinemachinery .post-text strong  { color: #fffaf0; }
html.theme-divinemachinery .post-text em      { color: var(--gold); }
html.theme-divinemachinery .post-name         { color: var(--ink); }
html.theme-divinemachinery .post-handle,
html.theme-divinemachinery .post-time         { color: var(--fog); }

/* ── Tarjetas post — Soul Glass ─────────────────────────────── */
html.theme-divinemachinery .post {
  position: relative;
  background: rgba(20, 14, 34, 0.70);
  border-color: rgba(255, 216, 138, 0.10);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    0 2px 16px rgba(6, 4, 14, 0.45),
    inset 0 1px 0 rgba(255, 184, 74, 0.07);
  transition:
    transform .38s cubic-bezier(.22,.82,.30,1),
    box-shadow .38s cubic-bezier(.22,.82,.30,1),
    border-color .38s ease,
    background .38s ease;
}

/* Línea dorada en el borde superior de cada tarjeta */
html.theme-divinemachinery .post::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,216,138,0.18) 25%,
    rgba(255,238,205,0.26) 50%,
    rgba(255,216,138,0.18) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* Reflejo de luz que barre la tarjeta en hover */
html.theme-divinemachinery .post::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(
    108deg,
    transparent 35%,
    rgba(255,216,138,0.05) 50%,
    transparent 65%
  );
  transition: left .70s cubic-bezier(.40,.15,.20,1);
  pointer-events: none;
}

html.theme-divinemachinery .post:hover {
  background: rgba(24, 17, 40, 0.80);
  border-color: rgba(255, 216, 138, 0.22);
  transform: translateY(-3px);
  box-shadow:
    0 8px 36px rgba(6, 4, 16, 0.56),
    0 0 0 1px rgba(255,184,74,0.09),
    inset 0 1px 0 rgba(255, 216, 138, 0.14),
    0 0 28px rgba(255,184,74,0.09);
}
html.theme-divinemachinery .post:hover::after {
  left: 110%;
}

/* ── Topbar — Divine Glass ────────────────────────────────────── */
html.theme-divinemachinery .topbar {
  background: rgba(14, 10, 24, 0.88) !important;
  backdrop-filter: blur(24px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
  border-bottom: 1px solid rgba(255,216,138,0.08);
  box-shadow: 0 1px 22px rgba(6, 4, 14, 0.48);
}

/* ── Sidebar — Soul Glass ──────────────────────────────────── */
html.theme-divinemachinery .sidebar {
  background: rgba(12, 8, 22, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 216, 138, 0.09);
}

/* ── Panel Tu Economía — Soul Glass ───────────────────────── */
html.theme-divinemachinery .eco-card {
  background: rgba(20, 14, 32, 0.75) !important;
  border-color: rgba(255, 216, 138, 0.11) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 2px 20px rgba(6,4,14,0.42),
    inset 0 1px 0 rgba(255,216,138,0.08);
}

/* ── Panel de widgets (derecha del feed) ───────────────────── */
html.theme-divinemachinery .feed-widgets {
  background: rgba(9, 6, 18, 0.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255,216,138,0.06);
}

/* ── Barra de búsqueda — glass ─────────────────────────────── */
html.theme-divinemachinery .topbar-search {
  background: rgba(20, 14, 32, 0.72);
  border-color: rgba(255, 216, 138, 0.14);
}
html.theme-divinemachinery .topbar-search:focus {
  border-color: rgba(255, 184, 74, 0.34);
  background: rgba(24, 17, 40, 0.82);
  box-shadow: 0 0 0 3px rgba(255,216,138,0.10);
}

/* ── Píldora de Oruns — divine glass ────────────────────────── */
html.theme-divinemachinery .orun-pill {
  background: rgba(56, 40, 20, 0.78) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,216,138,0.12);
}

/* ── Botón de notificaciones — divine ──────────────────────── */
html.theme-divinemachinery .notif-btn {
  background: rgba(20, 14, 32, 0.78) !important;
  border: 1px solid rgba(255,216,138,0.10);
}
html.theme-divinemachinery .notif-btn:hover {
  background: rgba(26, 18, 44, 0.88) !important;
  border-color: rgba(255,216,138,0.20);
  box-shadow: 0 0 18px rgba(255,184,74,0.16);
}

/* ── Botón Escribir — resplandor divino ────────────────────── */
html.theme-divinemachinery .write-btn {
  box-shadow: 0 0 0 rgba(255,138,60,0);
  transition: all .38s cubic-bezier(.22,.82,.30,1);
}
html.theme-divinemachinery .write-btn:hover {
  background: var(--rust);
  color: var(--deep);
  box-shadow:
    0 0 24px rgba(255,138,60,0.40),
    0 4px 18px rgba(6,4,16,0.52);
  transform: translateY(-2px);
}

/* ── Auth card — tema divine ────────────────────────────────── */
html.theme-divinemachinery .auth-card {
  background: rgba(20, 14, 32, 0.82);
  border-color: rgba(255,216,138,.20);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
html.theme-divinemachinery .auth-glow {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(255,184,74,.30) 0%,
    transparent 65%
  );
}

/* ── BUBBLE — Frutiger Aero, pompas iridiscentes en el cielo ─── */
html.theme-bubble {
  --page:      #eaf6ff;
  --mist:      #ffffff;
  --fog:       #5a86b0;
  --ink:       #1c3350;
  --gold:      #ff8fd6;
  --amber:     #4ab8e8;
  --amber-dim: #2a90c8;
  --rust:      #ff7a8a;
  --deep:      #0d1f30;
  --white:     #ffffff;
  --parchment: #eaf6ff;
  background:  #eaf6ff !important;
}
html.theme-bubble body { background: transparent !important; }

/* Paneles — cristal blanco con reflejo iridiscente sutil en el borde */
html.theme-bubble .post,
html.theme-bubble .profile-card,
html.theme-bubble .feed-center,
html.theme-bubble .left-sidebar,
html.theme-bubble .right-sidebar {
  background: rgba(255,255,255,0.80) !important;
  border-color: rgba(200,225,255,0.60) !important;
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  box-shadow:
    0 2px 20px rgba(90,150,220,0.12),
    inset 0 1px 0 rgba(255,255,255,0.85);
}
html.theme-bubble .post:hover {
  border-color: rgba(150,200,255,0.55) !important;
  box-shadow:
    0 4px 30px rgba(120,170,255,0.20),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

/* Topbar */
html.theme-bubble .topbar {
  background: rgba(255,255,255,0.74) !important;
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid rgba(180,215,255,0.50) !important;
}
html.theme-bubble .sidebar { border-right: 1px solid rgba(180,215,255,0.32) !important; }

/* Feed widgets */
html.theme-bubble .feed-widgets {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(180,215,255,0.38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Buscador */
html.theme-bubble .topbar-search,
html.theme-bubble .topbar-search input {
  background: rgba(230,245,255,0.90) !important;
  color: #1c3350 !important;
  border-color: rgba(120,190,235,0.35) !important;
}

/* Orun pill */
html.theme-bubble .orun-pill {
  background: rgba(230,245,255,0.92) !important;
  color: #1c3350 !important;
  border: 1px solid rgba(120,190,235,0.30) !important;
}

/* Notificaciones */
html.theme-bubble .notif-btn { color: var(--fog) !important; }
html.theme-bubble .notif-btn:hover { background: rgba(120,190,235,0.18) !important; }

/* Botones de acción */
html.theme-bubble .btn-action,
html.theme-bubble .action-btn {
  color: rgba(60,130,190,0.72);
  border-color: rgba(120,190,235,0.22);
}
html.theme-bubble .btn-action:hover { color: #ff8fd6; border-color: rgba(255,143,214,0.45); }

/* Botón escribir — degradado iridiscente, como el anillo de una pompa */
html.theme-bubble .write-btn {
  background: linear-gradient(120deg, #6dd6ff 0%, #ff8fd6 50%, #ffe08a 100%);
  color: #0d1f30;
  box-shadow: 0 2px 18px rgba(120,170,255,0.32), inset 0 1px 0 rgba(255,255,255,0.45);
  transition: all .38s cubic-bezier(.22,.78,.28,1);
}
html.theme-bubble .write-btn:hover {
  box-shadow: 0 0 30px rgba(150,200,255,0.45), 0 4px 22px rgba(90,140,220,.28);
  transform: translateY(-2px);
}

/* Texto */
html.theme-bubble .post-content,
html.theme-bubble .post-author,
html.theme-bubble .eco-label { color: rgba(20,45,75,0.92); }
html.theme-bubble .post-meta,
html.theme-bubble .widget-label { color: rgba(70,110,150,0.62); }
html.theme-bubble .post-text         { color: var(--ink); }
html.theme-bubble .post-text strong  { color: #0d1f30; }
html.theme-bubble .post-text em      { color: #ff8fd6; }
html.theme-bubble .post-name         { color: var(--ink); }

/* Auth */
html.theme-bubble .auth-card {
  background: rgba(240,250,255,0.95) !important;
  border-color: rgba(150,205,255,0.35) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 50px rgba(120,170,255,.20), inset 0 1px 0 rgba(255,255,255,.90);
}
html.theme-bubble .auth-glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(150,210,255,0.28) 0%, transparent 65%);
}

/* ── NEXUS — el espacio entre una pregunta y la siguiente (exclusivo) ── */
html.theme-nexus {
  --page:      #050308;
  --mist:      #0d0a18;
  --fog:       #8f7fc7;
  --ink:       #e6dfff;
  --gold:      #d6b8ff;
  --amber:     #a68fff;
  --amber-dim: #7c64d6;
  --rust:      #ff9fd6;
  --deep:      #020103;
  --white:     #120e20;
  --parchment: #0d0a18;
  background:  #050308 !important;
}
html.theme-nexus body { background: transparent !important; }

/* Paneles — vidrio oscuro con veta violeta */
html.theme-nexus .post,
html.theme-nexus .profile-card,
html.theme-nexus .feed-center,
html.theme-nexus .left-sidebar,
html.theme-nexus .right-sidebar {
  background: rgba(18,14,32,0.72) !important;
  border-color: rgba(160,140,255,0.20) !important;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow:
    0 2px 24px rgba(120,90,220,0.14),
    inset 0 1px 0 rgba(200,180,255,0.06);
}
html.theme-nexus .post:hover {
  border-color: rgba(200,170,255,0.38) !important;
  box-shadow:
    0 4px 32px rgba(150,110,255,0.22),
    inset 0 1px 0 rgba(200,180,255,0.10);
}

/* Topbar */
html.theme-nexus .topbar {
  background: rgba(14,11,26,0.68) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(160,140,255,0.22) !important;
}
html.theme-nexus .sidebar { border-right: 1px solid rgba(160,140,255,0.14) !important; }

/* Feed widgets */
html.theme-nexus .feed-widgets {
  background: rgba(18,14,32,0.65);
  border: 1px solid rgba(160,140,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Buscador */
html.theme-nexus .topbar-search,
html.theme-nexus .topbar-search input {
  background: rgba(24,18,42,0.85) !important;
  color: #e6dfff !important;
  border-color: rgba(150,120,255,0.28) !important;
}

/* Orun pill */
html.theme-nexus .orun-pill {
  background: rgba(24,18,42,0.88) !important;
  color: #e6dfff !important;
  border: 1px solid rgba(150,120,255,0.24) !important;
}

/* Notificaciones */
html.theme-nexus .notif-btn { color: var(--fog) !important; }
html.theme-nexus .notif-btn:hover { background: rgba(150,120,255,0.16) !important; }

/* Botones de acción */
html.theme-nexus .btn-action,
html.theme-nexus .action-btn {
  color: rgba(200,180,255,0.65);
  border-color: rgba(150,120,255,0.18);
}
html.theme-nexus .btn-action:hover { color: #ff9fd6; border-color: rgba(255,159,214,0.4); }

/* Botón escribir — el pulso de un hilo encontrando su destino */
html.theme-nexus .write-btn {
  background: linear-gradient(120deg, #a68fff 0%, #d6b8ff 50%, #ff9fd6 100%);
  color: #050308;
  box-shadow: 0 2px 20px rgba(150,110,255,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: all .38s cubic-bezier(.22,.78,.28,1);
}
html.theme-nexus .write-btn:hover {
  box-shadow: 0 0 32px rgba(180,140,255,0.5), 0 4px 24px rgba(100,70,200,.3);
  transform: translateY(-2px);
}

/* Texto */
html.theme-nexus .post-content,
html.theme-nexus .post-author,
html.theme-nexus .eco-label { color: rgba(230,223,255,0.92); }
html.theme-nexus .post-meta,
html.theme-nexus .widget-label { color: rgba(160,145,210,0.6); }
html.theme-nexus .post-text         { color: var(--ink); }
html.theme-nexus .post-text strong  { color: #ffffff; }
html.theme-nexus .post-text em      { color: #ff9fd6; }
html.theme-nexus .post-name         { color: var(--ink); }
html.theme-nexus .post-handle,
html.theme-nexus .post-time          { color: #b39dff !important; }

/* Auth */
html.theme-nexus .auth-card {
  background: rgba(14,11,26,0.92) !important;
  border-color: rgba(160,140,255,0.24) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 50px rgba(120,90,220,.24), inset 0 1px 0 rgba(200,180,255,.08);
}
html.theme-nexus .auth-glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(160,120,255,0.30) 0%, transparent 65%);
}

/* Panel de notificaciones — .notif-panel usa background:var(--white) en la
   hoja base, y aquí --white quedó definido como texto claro, no como
   fondo, así que sale un panel casi blanco encima de un tema oscuro. */
html.theme-nexus .notif-panel {
  background: rgba(16,12,28,0.97) !important;
  border-color: rgba(160,140,255,0.22) !important;
  box-shadow: 0 12px 40px rgba(90,60,180,0.35);
}
html.theme-nexus .notif-item { border-bottom-color: rgba(160,140,255,0.12) !important; }
html.theme-nexus .notif-item:hover { background: rgba(160,140,255,0.08) !important; }
html.theme-nexus .notif-item.unread { background: rgba(255,159,214,0.06) !important; }

/* Tarjeta "Tu Economía" — .eco-card usa background:var(--ink), y aquí
   --ink es el color de texto claro, no un fondo, mismo problema. */
html.theme-nexus .eco-card {
  background: rgba(16,12,28,0.85) !important;
  color: #e6dfff !important;
}

/* Perfil — .prof-bio trae color:#666 hardcodeado en la hoja base (pensado
   para fondo claro), y .prof-name/.prof-handle heredan --ink como texto,
   pero contra el violeta oscuro de Nexus el bio queda casi invisible. */
html.theme-nexus .prof-name   { color: #f2ecff !important; }
html.theme-nexus .prof-handle { color: #b39dff !important; }
html.theme-nexus .prof-bio    { color: #c9bdf0 !important; }


/* ══════════════════════════════════════════════════════════
   TEMA: ABISMO — océano profundo bioluminiscente
   ══════════════════════════════════════════════════════════ */
html.theme-abismo {
  --page:      #01030a;
  --mist:      #061019;
  --fog:       #4d7a94;
  --ink:       #cfeeff;
  --gold:      #6be0c8;
  --amber:     #35c9b0;
  --amber-dim: #279884;
  --rust:      #ff8a5a;
  --deep:      #000103;
  --white:     #0b1622;
  --parchment: #061019;
  background:  #01030a !important;
}
html.theme-abismo body { background: transparent !important; }

/* Paneles — vidrio oscuro con veta teal, luz de fumarola distante */
html.theme-abismo .post,
html.theme-abismo .profile-card,
html.theme-abismo .feed-center,
html.theme-abismo .left-sidebar,
html.theme-abismo .right-sidebar {
  background: rgba(8,18,28,0.72) !important;
  border-color: rgba(90,200,180,0.20) !important;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow:
    0 2px 24px rgba(20,120,110,0.16),
    inset 0 1px 0 rgba(160,230,220,0.06);
}
html.theme-abismo .post:hover {
  border-color: rgba(110,225,200,0.38) !important;
  box-shadow:
    0 4px 32px rgba(50,180,160,0.22),
    inset 0 1px 0 rgba(160,230,220,0.10);
}

/* Topbar */
html.theme-abismo .topbar {
  background: rgba(6,14,22,0.68) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(90,200,180,0.22) !important;
}
html.theme-abismo .sidebar { border-right: 1px solid rgba(90,200,180,0.14) !important; }

/* Feed widgets */
html.theme-abismo .feed-widgets {
  background: rgba(8,18,28,0.65);
  border: 1px solid rgba(90,200,180,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Buscador */
html.theme-abismo .topbar-search,
html.theme-abismo .topbar-search input {
  background: rgba(10,22,34,0.85) !important;
  color: #cfeeff !important;
  border-color: rgba(80,190,170,0.28) !important;
}

/* Orun pill */
html.theme-abismo .orun-pill {
  background: rgba(10,22,34,0.88) !important;
  color: #cfeeff !important;
  border: 1px solid rgba(80,190,170,0.24) !important;
}

/* Notificaciones */
html.theme-abismo .notif-btn { color: var(--fog) !important; }
html.theme-abismo .notif-btn:hover { background: rgba(80,190,170,0.16) !important; }

/* Botones de acción */
html.theme-abismo .btn-action,
html.theme-abismo .action-btn {
  color: rgba(180,225,225,0.65);
  border-color: rgba(80,190,170,0.18);
}
html.theme-abismo .btn-action:hover { color: #ff8a5a; border-color: rgba(255,138,90,0.4); }

/* Botón escribir — bioluminiscencia encendiéndose */
html.theme-abismo .write-btn {
  background: linear-gradient(120deg, #279884 0%, #35c9b0 50%, #cfeeff 100%);
  color: #01030a;
  box-shadow: 0 2px 20px rgba(50,180,160,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: all .38s cubic-bezier(.22,.78,.28,1);
}
html.theme-abismo .write-btn:hover {
  box-shadow: 0 0 32px rgba(90,220,195,0.5), 0 4px 24px rgba(30,130,115,.3);
  transform: translateY(-2px);
}

/* Texto */
html.theme-abismo .post-content,
html.theme-abismo .post-author,
html.theme-abismo .eco-label { color: rgba(207,238,255,0.92); }
html.theme-abismo .post-meta,
html.theme-abismo .widget-label { color: rgba(120,170,190,0.6); }
html.theme-abismo .post-text         { color: var(--ink); }
html.theme-abismo .post-text strong  { color: #ffffff; }
html.theme-abismo .post-text em      { color: #ff8a5a; }
html.theme-abismo .post-name         { color: var(--ink); }
html.theme-abismo .post-handle,
html.theme-abismo .post-time          { color: #6be0c8 !important; }

/* Auth */
html.theme-abismo .auth-card {
  background: rgba(6,14,22,0.92) !important;
  border-color: rgba(90,200,180,0.24) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 50px rgba(20,120,110,.24), inset 0 1px 0 rgba(160,230,220,.08);
}
html.theme-abismo .auth-glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(60,200,180,0.30) 0%, transparent 65%);
}

/* Panel de notificaciones */
html.theme-abismo .notif-panel {
  background: rgba(8,16,26,0.97) !important;
  border-color: rgba(90,200,180,0.22) !important;
  box-shadow: 0 12px 40px rgba(15,110,100,0.35);
}
html.theme-abismo .notif-item { border-bottom-color: rgba(90,200,180,0.12) !important; }
html.theme-abismo .notif-item:hover { background: rgba(90,200,180,0.08) !important; }
html.theme-abismo .notif-item.unread { background: rgba(255,138,90,0.06) !important; }

/* Tarjeta "Tu Economía" */
html.theme-abismo .eco-card {
  background: rgba(8,16,26,0.85) !important;
  color: #cfeeff !important;
}

/* Perfil */
html.theme-abismo .prof-name   { color: #eaf9ff !important; }
html.theme-abismo .prof-handle { color: #6be0c8 !important; }
html.theme-abismo .prof-bio    { color: #a8d8e0 !important; }

/* Estilos de nombre (Bazar → Artilugios) — deben ganarle SIEMPRE al color de
   texto de cualquier tema (arriba, todos con html.theme-X .prof-name{color:
   ...!important}, misma especificidad que esto: html + 2 clases). Van al
   final del archivo a propósito, para ganar el desempate por orden. */
html .prof-name.estilo-cosmico, html .person-name.estilo-cosmico, html .post-name.estilo-cosmico,
html .prof-name.estilo-dorado, html .person-name.estilo-dorado, html .post-name.estilo-dorado,
html .prof-name.estilo-escarcha, html .person-name.estilo-escarcha, html .post-name.estilo-escarcha,
html .prof-name.estilo-brasa, html .person-name.estilo-brasa, html .post-name.estilo-brasa {
  color: transparent !important;
}

/* ── DREAMCORE ────────────────────────────────────────────────── */
html.theme-dreamcore {
  --page:      #f3e0ee;
  --mist:      #ffeef7;
  --fog:       #8a6a85;
  --ink:       #402c47;
  --gold:      #e6a15c;
  --amber:     #e0699c;
  --amber-dim: #b84d80;
  --rust:      #e0699c;
  --deep:      #2a1a30;
  --white:     #ffffff;
  --parchment: #fff5fb;
  background:  #dceeff !important;
}
html.theme-dreamcore body { background: transparent !important; }

/* Paneles — cristal blanco, tema claro de día */
html.theme-dreamcore .post,
html.theme-dreamcore .profile-card,
html.theme-dreamcore .feed-center,
html.theme-dreamcore .left-sidebar,
html.theme-dreamcore .right-sidebar {
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(230,180,220,0.55) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    0 2px 18px rgba(180,100,160,0.12),
    inset 0 1px 0 rgba(255,255,255,0.85);
}
html.theme-dreamcore .post:hover {
  border-color: rgba(224,105,156,0.45) !important;
  box-shadow:
    0 4px 28px rgba(200,100,170,0.20),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

/* Topbar */
html.theme-dreamcore .topbar {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(230,180,220,0.45) !important;
}
html.theme-dreamcore .sidebar {
  background: rgba(255,255,255,0.78) !important;
  border-right: 1px solid rgba(230,180,220,0.30) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

/* Feed widgets */
html.theme-dreamcore .feed-widgets {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(230,180,220,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Buscador */
html.theme-dreamcore .topbar-search,
html.theme-dreamcore .topbar-search input {
  background: rgba(255,238,248,0.88) !important;
  color: #402c47 !important;
  border-color: rgba(224,105,156,0.30) !important;
}

/* Orun pill */
html.theme-dreamcore .orun-pill {
  background: rgba(255,238,248,0.90) !important;
  color: #402c47 !important;
  border: 1px solid rgba(224,105,156,0.28) !important;
}

/* Notificaciones */
html.theme-dreamcore .notif-btn { color: var(--fog) !important; }
html.theme-dreamcore .notif-btn:hover { background: rgba(224,105,156,0.16) !important; }

/* Botones de acción */
html.theme-dreamcore .btn-action,
html.theme-dreamcore .action-btn {
  color: rgba(150,80,130,0.70);
  border-color: rgba(224,105,156,0.20);
}
html.theme-dreamcore .btn-action:hover { color: #e0699c; border-color: rgba(224,105,156,0.45); }

/* Botón escribir */
html.theme-dreamcore .write-btn {
  background: linear-gradient(135deg, #e6a15c 0%, #e0699c 100%);
  color: #ffffff;
  box-shadow: 0 2px 16px rgba(224,105,156,0.30), inset 0 1px 0 rgba(255,255,255,0.30);
  transition: all .38s cubic-bezier(.22,.78,.28,1);
}
html.theme-dreamcore .write-btn:hover {
  background: linear-gradient(135deg, #f0b878 0%, #e880ac 100%);
  box-shadow: 0 0 28px rgba(224,105,156,0.40), 0 4px 20px rgba(180,80,140,.25);
  transform: translateY(-2px);
}

/* Texto */
html.theme-dreamcore .post-content,
html.theme-dreamcore .post-author,
html.theme-dreamcore .eco-label { color: rgba(64,44,71,0.90); }
html.theme-dreamcore .post-meta,
html.theme-dreamcore .widget-label { color: rgba(138,106,133,0.65); }

html.theme-dreamcore .post-text         { color: var(--ink); }
html.theme-dreamcore .post-text strong  { color: #2a1a30; }
html.theme-dreamcore .post-text em      { color: var(--amber); }
html.theme-dreamcore .post-name         { color: var(--ink); }
html.theme-dreamcore .post-handle,
html.theme-dreamcore .post-time         { color: var(--fog); }

/* Auth */
html.theme-dreamcore .auth-card {
  background: rgba(255,245,251,0.95) !important;
  border-color: rgba(224,105,156,0.30) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 8px 48px rgba(200,100,170,.18), inset 0 1px 0 rgba(255,255,255,.90);
}
html.theme-dreamcore .auth-glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(224,105,156,0.22) 0%, transparent 65%);
}

/* Texto del sidebar — --text2/--text3 son blancos por default (pensados
   para fondo oscuro); con el sidebar de Dreamcore en cristal blanco
   quedaban casi invisibles, hay que oscurecerlos aquí */
html.theme-dreamcore .sidebar-item { color: rgba(64,44,71,0.78) !important; }
html.theme-dreamcore .sidebar-item:hover,
html.theme-dreamcore .sidebar-item.active { color: #402c47 !important; }
html.theme-dreamcore .sidebar-label { color: rgba(138,106,133,0.70) !important; }
html.theme-dreamcore .sidebar-item .sidebar-arrow { color: rgba(138,106,133,0.55) !important; }

/* ── MORUTE (oculto — solo aparece tras comprar la insignia Llave Oxidada) */
html.theme-morute {
  --page:      #241f26;
  --mist:      #332b38;
  --fog:       #9a8790;
  --ink:       #ede2e6;
  --gold:      #c9a8b0;
  --amber:     #9c4050;
  --amber-dim: #703040;
  --rust:      #9c4050;
  --deep:      #171319;
  --white:     #332b38;
  --parchment: #332b38;
}
html.theme-morute body { background: var(--page); }
html.theme-morute .auth-card { background: #2a232c; border-color: rgba(201,168,176,.20); }
html.theme-morute .auth-glow { background: radial-gradient(ellipse at 50% 0%, rgba(156,64,80,.26) 0%, transparent 65%); }

/* Texto de publicaciones */
html.theme-morute .post-text         { color: var(--ink); }
html.theme-morute .post-text strong  { color: #fff5f7; }
html.theme-morute .post-text em      { color: var(--gold); }
html.theme-morute .post-name         { color: var(--ink); }
html.theme-morute .post-handle,
html.theme-morute .post-time         { color: var(--fog); }

/* Tarjetas post — cristal oscuro polvoso, como vidrio viejo */
html.theme-morute .post {
  position: relative;
  background: rgba(28, 23, 30, 0.72);
  border-color: rgba(201, 168, 176, 0.10);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow:
    0 2px 16px rgba(10, 6, 10, 0.45),
    inset 0 1px 0 rgba(201, 168, 176, 0.06);
  transition:
    transform .38s cubic-bezier(.22,.82,.30,1),
    box-shadow .38s cubic-bezier(.22,.82,.30,1),
    border-color .38s ease,
    background .38s ease;
}
html.theme-morute .post::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201,168,176,0.14) 25%,
    rgba(220,190,196,0.20) 50%,
    rgba(201,168,176,0.14) 75%,
    transparent 100%
  );
  pointer-events: none;
}
html.theme-morute .post:hover {
  background: rgba(34, 28, 36, 0.80);
  border-color: rgba(201, 168, 176, 0.20);
  transform: translateY(-3px);
  box-shadow:
    0 8px 32px rgba(10, 6, 10, 0.52),
    inset 0 1px 0 rgba(201,168,176,0.10),
    0 0 24px rgba(156,64,80,0.10);
}

/* Topbar */
html.theme-morute .topbar {
  background: rgba(18, 14, 19, 0.86) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
  border-bottom: 1px solid rgba(201,168,176,0.08);
  box-shadow: 0 1px 20px rgba(10, 6, 10, 0.45);
}

/* Sidebar */
html.theme-morute .sidebar {
  background: rgba(22, 17, 23, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(201, 168, 176, 0.09);
}
html.theme-morute .sidebar-item { color: var(--fog) !important; }
html.theme-morute .sidebar-item:hover,
html.theme-morute .sidebar-item.active { color: var(--ink) !important; }

/* Panel Tu Economía */
html.theme-morute .eco-card {
  background: rgba(26, 21, 28, 0.75) !important;
  border-color: rgba(201, 168, 176, 0.11) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Widgets */
html.theme-morute .feed-widgets {
  background: rgba(16, 12, 17, 0.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(201,168,176,0.06);
}

/* Buscador */
html.theme-morute .topbar-search {
  background: rgba(26, 21, 28, 0.72);
  border-color: rgba(201, 168, 176, 0.14);
}
html.theme-morute .topbar-search:focus {
  border-color: rgba(156, 64, 80, 0.34);
  background: rgba(32, 26, 34, 0.82);
  box-shadow: 0 0 0 3px rgba(156,64,80,0.10);
}

/* Orun pill */
html.theme-morute .orun-pill {
  background: rgba(50, 32, 40, 0.78) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(201,168,176,0.12);
}

/* Notificaciones */
html.theme-morute .notif-btn {
  background: rgba(22, 17, 23, 0.78) !important;
  border: 1px solid rgba(201,168,176,0.10);
}
html.theme-morute .notif-btn:hover {
  background: rgba(32, 25, 33, 0.88) !important;
  border-color: rgba(201,168,176,0.20);
  box-shadow: 0 0 16px rgba(156,64,80,0.16);
}

/* Botón escribir — acento sangre */
html.theme-morute .write-btn {
  box-shadow: 0 0 0 rgba(156,64,80,0);
  transition: all .38s cubic-bezier(.22,.82,.30,1);
}
html.theme-morute .write-btn:hover {
  background: var(--amber);
  color: #fff5f7;
  box-shadow:
    0 0 22px rgba(156,64,80,0.40),
    0 4px 16px rgba(10,6,10,0.52);
  transform: translateY(-2px);
}

/* Auth */
html.theme-morute .auth-card {
  background: rgba(26, 21, 28, 0.82);
  border-color: rgba(201,168,176,.20);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}