/* =====================================================================
   Temas propios de Génessis (se activan en config.js → TEMAS_EXTRA y TEMAS)
   ===================================================================== */

/* ---------- Base común: temas claros con imagen de fondo ---------- */
:root[data-theme="conejita"], :root[data-theme="sakura"] {
  --text: #3a2a2e; --muted: #85707a; --faint: #b8a5ad;
  --accent: #f4a7c7; --accent-ink: #3a1325; --accent-strong: #c2457e; --accent-soft: rgba(244, 167, 199, .22);
  --backdrop: rgba(60, 30, 40, .4); --shadow: 0 6px 20px rgba(150, 90, 110, .08);
  color-scheme: light;
  background: var(--bg);
}
:root[data-theme="conejita"] body, :root[data-theme="sakura"] body { background: transparent; }
:root[data-theme="conejita"] body::before, :root[data-theme="sakura"] body::before {
  content: ""; position: fixed; top: 0; bottom: 0; right: 0; z-index: -1; pointer-events: none;
  width: min(100%, calc(100vh * .563));
  background: var(--img) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}
:root[data-theme="conejita"] .card, :root[data-theme="sakura"] .card { background: var(--glass); }
:root[data-theme="conejita"] .sidebar, :root[data-theme="conejita"] .bottomnav,
:root[data-theme="sakura"] .sidebar, :root[data-theme="sakura"] .bottomnav { background: var(--glass-side); }
:root[data-theme="conejita"] .modal, :root[data-theme="sakura"] .modal { background: var(--surface); }
@media (max-width: 900px) {
  :root[data-theme="conejita"] body::before, :root[data-theme="sakura"] body::before {
    left: 0; width: auto; -webkit-mask-image: none; mask-image: none;
  }
}

/* "Conejita": crema con lazos rosados */
:root[data-theme="conejita"] {
  --img: url("../img/temas/conejita.jpg");
  --bg: #f8efe6; --sidebar-bg: #f3e7dc; --surface: #fffaf5; --surface-2: #f4e9df;
  --glass: rgba(255, 250, 245, .62); --glass-side: rgba(243, 231, 220, .85);
  --border: rgba(170, 130, 120, .2); --border-strong: rgba(170, 130, 120, .35);
}
/* "Sakura": flores de cerezo */
:root[data-theme="sakura"] {
  --img: url("../img/temas/sakura.jpg");
  --bg: #fef3ed; --sidebar-bg: #fbe9e1; --surface: #fffaf7; --surface-2: #fbebe4;
  --glass: rgba(255, 250, 247, .62); --glass-side: rgba(251, 233, 225, .85);
  --border: rgba(200, 120, 140, .2); --border-strong: rgba(200, 120, 140, .36);
  --accent: #f29bbf; --accent-strong: #c93d76;
}