/* =====================================================================
   Temas propios de Jesús (se activan en config.js → TEMAS_EXTRA y TEMAS)
   ===================================================================== */

/* ---------- "Toji Fushiguro": la imagen como fondo ---------- */
:root[data-theme="toji"] {
  --bg: #c5c5c3; --sidebar-bg: #cfcfcd; --surface: #ececea; --surface-2: #d6d6d4;
  --border: rgba(0, 0, 0, .13); --border-strong: rgba(0, 0, 0, .3);
  --text: #0d0d0d; --muted: #474745; --faint: #7a7a77;
  --accent: #111111; --accent-ink: #f2f2f0; --accent-strong: #111111; --accent-soft: rgba(0, 0, 0, .08);
  --pos: #2d7a0b; --pos-fill: #4f9e1f; --pos-soft: rgba(79, 158, 31, .16);
  --neg: #c0182a; --neg-fill: #d8283a; --neg-soft: rgba(216, 40, 58, .14);
  --backdrop: rgba(10, 10, 10, .55);
  --shadow: 0 8px 24px rgba(0, 0, 0, .08);
  color-scheme: light;
}
:root[data-theme="toji"] { background: var(--bg); }
:root[data-theme="toji"] body { background: transparent; }
:root[data-theme="toji"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("../img/temas/toji.jpg") right 6% bottom / auto 100% no-repeat,
    var(--bg);
}
/* Tarjetas de vidrio esmerilado para leer bien encima de la imagen */
:root[data-theme="toji"] .card {
  background: rgba(240, 240, 238, .5);
  border-color: rgba(0, 0, 0, .18);
}
:root[data-theme="toji"] .sidebar,
:root[data-theme="toji"] .bottomnav {
  background: rgba(214, 214, 212, .82);
}
:root[data-theme="toji"] .modal { background: #ececea; }
@media (max-width: 900px) {
  :root[data-theme="toji"] body::before {
    background:
      url("../img/temas/toji.jpg") center bottom / cover no-repeat,
      var(--bg);
  }
  :root[data-theme="toji"] .card { background: rgba(240, 240, 238, .5); }
}

:root[data-theme="toji"] .card { text-shadow: 0 0 6px rgba(240, 240, 238, .9); }

/* ---------- Temas oscuros con imagen de fondo (comparten la base) ---------- */
:root[data-theme="estelar"], :root[data-theme="tormenta"] {
  --pos: #8ee05a; --pos-fill: #7ed348; --pos-soft: rgba(126, 211, 72, .16);
  --neg: #ff5d6c; --neg-fill: #ff4558; --neg-soft: rgba(255, 69, 88, .16);
  --warn: #f5c542; --warn-fill: #f5c542; --warn-bg: rgba(245, 197, 66, .14); --warn-ink: #f5d58a; --warn-border: rgba(245, 197, 66, .3);
  --neg-border: rgba(255, 69, 88, .35);
  --backdrop: rgba(0, 0, 0, .7); --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
  background: var(--bg);
}
:root[data-theme="estelar"] body, :root[data-theme="tormenta"] body { background: transparent; }
:root[data-theme="estelar"] body::before, :root[data-theme="tormenta"] body::before {
  content: ""; position: fixed; top: 0; bottom: 0; right: 0; z-index: -1; pointer-events: none;
  width: min(100%, calc(100vh * var(--img-ratio)));
  background: var(--img) center / cover no-repeat;
  /* el borde izquierdo de la imagen se funde con el color de fondo */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0, #000 38%);
}
:root[data-theme="estelar"] .card, :root[data-theme="tormenta"] .card { background: var(--glass); }
:root[data-theme="estelar"] .sidebar, :root[data-theme="estelar"] .bottomnav,
:root[data-theme="tormenta"] .sidebar, :root[data-theme="tormenta"] .bottomnav { background: var(--glass-side); }
:root[data-theme="estelar"] .modal, :root[data-theme="tormenta"] .modal { background: var(--surface); }
@media (max-width: 900px) {
  :root[data-theme="estelar"] body::before, :root[data-theme="tormenta"] body::before {
    left: 0; width: auto; -webkit-mask-image: none; mask-image: none;
    background-position: center top;
  }
}

/* "Noche estelar": cielo morado, neón rosa */
:root[data-theme="estelar"] {
  --img: url("../img/temas/estelar.jpg"); --img-ratio: .67;
  --bg: #0b0a2c; --sidebar-bg: #0e0c33; --surface: #17134a; --surface-2: #221d63;
  --glass: rgba(16, 13, 52, .55); --glass-side: rgba(11, 10, 44, .78);
  --border: rgba(160, 140, 255, .2); --border-strong: rgba(180, 160, 255, .38);
  --text: #f3f0ff; --muted: #b9b1e6; --faint: #7d74b3;
  --accent: #ff4fa8; --accent-ink: #1a0618; --accent-strong: #ff7cc0; --accent-soft: rgba(255, 79, 168, .16);
  --transfer: #7de8ff;
}
/* "Tormenta": noche azul y gris */
:root[data-theme="tormenta"] {
  --img: url("../img/temas/tormenta.jpg"); --img-ratio: .665;
  --bg: #0b0f18; --sidebar-bg: #0d121c; --surface: #141c2b; --surface-2: #1d2738;
  --glass: rgba(12, 17, 28, .55); --glass-side: rgba(11, 15, 24, .8);
  --border: rgba(150, 175, 220, .16); --border-strong: rgba(170, 195, 235, .32);
  --text: #eef3fb; --muted: #a3b2c9; --faint: #67768f;
  --accent: #b9d3ff; --accent-ink: #0b1220; --accent-strong: #cfe0ff; --accent-soft: rgba(185, 211, 255, .14);
  --transfer: #b69cf2;
}
:root[data-theme="estelar"] .card, :root[data-theme="tormenta"] .card { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }