/* ════════════════════════════════════════════════════════════════════════
 * VBedits — Site backgrounds
 * ════════════════════════════════════════════════════════════════════════
 * A site-wide, theme-aware background system. The chosen background is a
 * class (vbe-bg-<key>) on a fixed full-viewport stage rendered behind all
 * page content. Every pattern is built ONLY from the theme CSS variables
 * (--bg, --border, --accent, --brand-soft, …) so each one renders a
 * correct light / dark / mixed variant for free.
 *
 * Every tunable property reads a --vbe-* custom property with the design
 * default baked in as the var() fallback. The live editor (Admin →
 * Apariencia, double-click a thumbnail) sets those properties inline on
 * the stage for the real-time preview and persists them on Apply.
 *
 * Registry, parameters + whitelist live in includes/backgrounds.php.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Stage scaffold ──────────────────────────────────────────────────────*/
.vbe-bg-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
body > .vbe-bg-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
}
.vbe-bg-stage::before,
.vbe-bg-stage::after {
  content: "";
  position: absolute;
  inset: 0;
}
.vbe-bg-stage .vbe-bg-fx {
  position: absolute;
  inset: 0;
}

/* ── Isolated theme palettes (for thumbnails + the editor preview) ──────── */
.vbe-theme-dark {
  --bg: #0a0e1a;  --bg2: #101728;  --bg3: #1a2238;  --bg-elevated: #141d33;
  --border: rgba(96,165,250,0.16);  --border2: rgba(96,165,250,0.36);
  --text: #e8edf7;  --text2: #94a3b8;
  --brand: #3b82f6; --brand2: #60a5fa;
  --accent: #f97316; --accent2: #fb923c;
  --accent-soft: rgba(249,115,22,0.18); --brand-soft: rgba(59,130,246,0.14);
  --header-bg: rgba(10,14,26,0.92);
}
.vbe-theme-light {
  --bg: #f7f9fc;  --bg2: #ffffff;  --bg3: #eef2f7;  --bg-elevated: #ffffff;
  --border: rgba(15,23,42,0.10);  --border2: rgba(15,23,42,0.22);
  --text: #0a0e1a;  --text2: #101728;
  --brand: #101728; --brand2: #1a2238;
  --accent: #ea580c; --accent2: #f97316;
  --accent-soft: rgba(234,88,12,0.14); --brand-soft: rgba(37,99,235,0.10);
  --header-bg: rgba(255,255,255,0.92);
}
.vbe-theme-mixed {
  --bg: #f7f9fc;  --bg2: #101728;  --bg3: #1a2238;  --bg-elevated: #101728;
  --border: rgba(15,23,42,0.10);  --border2: rgba(15,23,42,0.22);
  --text: #0a0e1a;  --text2: #101728;
  --brand: #101728; --brand2: #1a2238;
  --accent: #ea580c; --accent2: #f97316;
  --accent-soft: rgba(234,88,12,0.14); --brand-soft: rgba(37,99,235,0.10);
  --header-bg: rgba(16,23,40,0.92);
}

/* A soft radial fade reused by the grid-family patterns so they're strong
 * toward the upper-centre and dissolve toward the edges. */
.vbe-bg-grid::before,
.vbe-bg-dots::before,
.vbe-bg-topo::before,
.vbe-bg-topo::after,
.vbe-bg-tide::before {
  -webkit-mask-image: radial-gradient(ellipse 115% 95% at 50% 34%, #000 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 115% 95% at 50% 34%, #000 50%, transparent 100%);
}

/* ════════════════════════════════════════════════════════════════════════
 * STATIC BACKGROUNDS
 * ════════════════════════════════════════════════════════════════════════ */

/* solid — flat look. No stage is rendered live; rule only feeds the thumb. */
.vbe-bg-solid { background: var(--bg); }

.vbe-bg-grid::before {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: var(--vbe-grid-size, 60px) var(--vbe-grid-size, 60px);
  opacity: var(--vbe-grid-opacity, 0.5);
}

.vbe-bg-dots::before {
  background-image: radial-gradient(var(--border2) 1.4px, transparent 1.6px);
  background-size: var(--vbe-dots-size, 26px) var(--vbe-dots-size, 26px);
  opacity: var(--vbe-dots-opacity, 0.5);
}

.vbe-bg-aurora::before {
  background:
    radial-gradient(var(--vbe-aurora-size, 57%) var(--vbe-aurora-size, 57%) at 12% 10%, var(--accent-soft), transparent 70%),
    radial-gradient(var(--vbe-aurora-size, 57%) var(--vbe-aurora-size, 57%) at 88% 90%, var(--brand-soft),  transparent 70%);
  opacity: var(--vbe-aurora-opacity, 1);
}

.vbe-bg-mesh::before {
  inset: -40%;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: var(--vbe-mesh-size, 42px) var(--vbe-mesh-size, 42px);
  transform: rotate(45deg);
  opacity: var(--vbe-mesh-opacity, 0.5);
}

.vbe-bg-topo::before {
  background-image: repeating-radial-gradient(circle at 28% 38%,
    transparent 0 var(--vbe-topo-size, 18px),
    var(--border) var(--vbe-topo-size, 18px) calc(var(--vbe-topo-size, 18px) + 1px));
  opacity: var(--vbe-topo-opacity, 0.45);
}
.vbe-bg-topo::after {
  background-image: repeating-radial-gradient(circle at 76% 72%,
    transparent 0 calc(var(--vbe-topo-size, 18px) + 4px),
    var(--border) calc(var(--vbe-topo-size, 18px) + 4px) calc(var(--vbe-topo-size, 18px) + 5px));
  opacity: calc(var(--vbe-topo-opacity, 0.45) * 0.72);
}

/* ════════════════════════════════════════════════════════════════════════
 * ANIMATED BACKGROUNDS
 * ════════════════════════════════════════════════════════════════════════ */

/* tide — the grid LINES THEMSELVES ripple like a lake surface, via the
 * #vbeWater SVG displacement filter (includes/partials/site_bg_filters.php).
 * No CSS translate → nothing scrolls upward; the surface ripples in place.
 * The filter's animation is symmetric, so it loops with no abrupt jump. */
.vbe-bg-tide::before {
  inset: -18%;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: var(--vbe-tide-size, 58px) var(--vbe-tide-size, 58px);
  opacity: var(--vbe-tide-opacity, 0.6);
  filter: url(#vbeWater);
}

.vbe-bg-aurora-flow::before {
  inset: -35%;
  background: radial-gradient(var(--vbe-auroraflow-size, 45%) var(--vbe-auroraflow-size, 45%) at 30% 30%, var(--accent-soft), transparent 70%);
  opacity: var(--vbe-auroraflow-opacity, 1);
  animation: vbeBlobA calc(13s / var(--vbe-auroraflow-speed, 1)) ease-in-out infinite;
}
.vbe-bg-aurora-flow::after {
  inset: -35%;
  background: radial-gradient(var(--vbe-auroraflow-size, 45%) var(--vbe-auroraflow-size, 45%) at 70% 70%, var(--brand-soft), transparent 70%);
  opacity: var(--vbe-auroraflow-opacity, 1);
  animation: vbeBlobB calc(16s / var(--vbe-auroraflow-speed, 1)) ease-in-out infinite;
}
@keyframes vbeBlobA {
  0%, 100% { transform: translate(0, 0)        scale(1);   }
  33%      { transform: translate(28%, 20%)    scale(1.3); }
  66%      { transform: translate(-18%, 30%)   scale(0.8); }
}
@keyframes vbeBlobB {
  0%, 100% { transform: translate(0, 0)        scale(1);   }
  33%      { transform: translate(-24%, -18%)  scale(0.82);}
  66%      { transform: translate(22%, -28%)   scale(1.28);}
}

/* waves — rows of soft humps scrolling sideways at different speeds. */
.vbe-bg-waves::before,
.vbe-bg-waves::after,
.vbe-bg-waves .vbe-bg-fx {
  left: -25%; right: -25%; width: auto;
  background-repeat: repeat-x;
}
.vbe-bg-waves::before {
  top: 28%; height: 130px;
  background-image: radial-gradient(95px 24px at 50% 0, var(--brand-soft), transparent 70%);
  background-size: 200px 130px;
  opacity: var(--vbe-waves-opacity, 0.7);
  animation: vbeWaveX calc(8s / var(--vbe-waves-speed, 1)) linear infinite;
}
.vbe-bg-waves::after {
  top: 50%; height: 150px;
  background-image: radial-gradient(115px 28px at 50% 0, var(--accent-soft), transparent 70%);
  background-size: 200px 150px;
  opacity: calc(var(--vbe-waves-opacity, 0.7) * 0.78);
  animation: vbeWaveX calc(12s / var(--vbe-waves-speed, 1)) linear infinite reverse;
}
.vbe-bg-waves .vbe-bg-fx {
  top: 72%; height: 170px;
  background-image: radial-gradient(135px 32px at 50% 0, var(--brand-soft), transparent 70%);
  background-size: 200px 170px;
  opacity: calc(var(--vbe-waves-opacity, 0.7) * 0.7);
  animation: vbeWaveX calc(16s / var(--vbe-waves-speed, 1)) linear infinite;
}
@keyframes vbeWaveX {
  from { background-position-x: 0; }
  to   { background-position-x: 200px; }
}

/* mesh-flow — big blurred brand blobs drifting over one another. */
.vbe-bg-mesh-flow::before,
.vbe-bg-mesh-flow::after,
.vbe-bg-mesh-flow .vbe-bg-fx {
  inset: -45%;
  border-radius: 50%;
  filter: blur(28px);
  opacity: var(--vbe-meshflow-opacity, 1);
}
.vbe-bg-mesh-flow::before {
  background: radial-gradient(circle, var(--accent-soft), transparent 60%);
  animation: vbeMeshA calc(21s / var(--vbe-meshflow-speed, 1)) ease-in-out infinite;
}
.vbe-bg-mesh-flow::after {
  background: radial-gradient(circle, var(--brand-soft), transparent 60%);
  animation: vbeMeshB calc(27s / var(--vbe-meshflow-speed, 1)) ease-in-out infinite;
}
.vbe-bg-mesh-flow .vbe-bg-fx {
  background: radial-gradient(circle, var(--accent-soft), transparent 60%);
  animation: vbeMeshC calc(24s / var(--vbe-meshflow-speed, 1)) ease-in-out infinite;
}
@keyframes vbeMeshA {
  0%, 100% { transform: translate(-18%, -12%) scale(1);   }
  50%      { transform: translate(16%, 14%)   scale(1.25);}
}
@keyframes vbeMeshB {
  0%, 100% { transform: translate(20%, 10%)   scale(1.1); }
  50%      { transform: translate(-14%, -16%) scale(0.85);}
}
@keyframes vbeMeshC {
  0%, 100% { transform: translate(6%, 18%)    scale(0.95);}
  50%      { transform: translate(-20%, -6%)  scale(1.2); }
}

/* drift — a dot field panning, with brand-orange dots twinkling on top. */
.vbe-bg-drift::before {
  inset: -25%;
  background-image: radial-gradient(var(--border2) 1.5px, transparent 1.8px);
  background-size: var(--vbe-drift-size, 24px) var(--vbe-drift-size, 24px);
  animation: vbeDriftPan calc(14s / var(--vbe-drift-speed, 1)) linear infinite;
}
.vbe-bg-drift::after {
  inset: 0;
  background-image: radial-gradient(var(--accent) 1.2px, transparent 1.6px);
  background-size: calc(var(--vbe-drift-size, 24px) * 3) calc(var(--vbe-drift-size, 24px) * 3);
  opacity: 0.25;
  animation: vbeTwinkle 4.5s ease-in-out infinite;
}
/* Pan two tiles so the dot field loops seamlessly. */
@keyframes vbeDriftPan {
  from { transform: translate(0, 0); }
  to   { transform: translate(calc(var(--vbe-drift-size, 24px) * 2), calc(var(--vbe-drift-size, 24px) * 2)); }
}
@keyframes vbeTwinkle {
  0%, 100% { opacity: 0.06; }
  50%      { opacity: 0.40; }
}

/* pulse — a faint grid scanned by a soft band of light sweeping down. */
.vbe-bg-pulse::before {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: var(--vbe-pulse-size, 50px) var(--vbe-pulse-size, 50px);
  opacity: 0.4;
}
.vbe-bg-pulse::after {
  left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg, transparent, var(--brand-soft) 45%, var(--accent-soft) 55%, transparent);
  animation: vbePulseSweep calc(7s / var(--vbe-pulse-speed, 1)) ease-in-out infinite;
}
@keyframes vbePulseSweep {
  0%   { transform: translateY(-120%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(220%);  opacity: 0; }
}

/* Reduced motion: freeze every animated layer; tide settles to a still grid. */
@media (prefers-reduced-motion: reduce) {
  .vbe-bg-stage::before,
  .vbe-bg-stage::after,
  .vbe-bg-stage .vbe-bg-fx {
    animation: none !important;
  }
  .vbe-bg-tide::before { filter: none !important; }
}

/* Avoid a double grid on the homepage: hide the hero's own grid when a
 * page-wide grid-family background is active. */
body.vbe-bg-page-grid  .hero-grid,
body.vbe-bg-page-tide  .hero-grid,
body.vbe-bg-page-mesh  .hero-grid,
body.vbe-bg-page-pulse .hero-grid {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════
 * ADMIN PICKER — thumbnails with 3 mode tabs (light / dark / mixed)
 * ════════════════════════════════════════════════════════════════════════ */
.vbe-bg-grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}
.vbe-bg-card {
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg2);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vbe-bg-card:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.vbe-bg-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 8px 0;
}
.vbe-bg-tab {
  flex: 1;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  border-radius: 7px 7px 0 0;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.vbe-bg-tab:hover { color: var(--text); }
.vbe-bg-tab.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.vbe-bg-thumb-frame {
  position: relative;
  height: 152px;
  margin: 8px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;          /* hints the double-click-to-edit affordance */
}
.vbe-thumb-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 8px;
}
.vbe-thumb-bar {
  height: 16px;
  border-radius: 5px;
  background: var(--header-bg);
  border: 1px solid var(--border);
}
.vbe-thumb-card {
  margin-top: auto;
  height: 58px;
  border-radius: 7px;
  background: var(--bg2);
  border: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  padding: 9px;
}
.vbe-thumb-btn {
  height: 15px;
  width: 56px;
  border-radius: 5px;
  background: var(--accent);
}
.vbe-bg-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}
.vbe-bg-card-foot label {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.vbe-bg-anim-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 99px;
}
.vbe-bg-edit-hint {
  font-size: 11px;
  color: var(--text2);
  margin: -2px 12px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.vbe-bg-group-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text2);
  margin: 18px 0 10px;
}
.vbe-bg-group-title:first-child { margin-top: 0; }

/* Code-block style chooser cards */
.vbe-cbstyle-card {
  display: block;
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg2);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vbe-cbstyle-card:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.vbe-cbstyle-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* ════════════════════════════════════════════════════════════════════════
 * LIVE EDITOR MODAL — preview (left) + settings (right)
 * ════════════════════════════════════════════════════════════════════════ */
.vbe-bg-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 8, 23, 0.66);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vbe-bg-modal-backdrop.is-open { display: flex; }
.vbe-bg-modal {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 16px;
  width: min(940px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(2, 8, 23, 0.55);
}
.vbe-bg-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.vbe-bg-modal-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.vbe-bg-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.vbe-bg-iconbtn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.vbe-bg-modal-body {
  display: grid;
  grid-template-columns: 1fr 310px;
  min-height: 0;
  flex: 1;
}
.vbe-bg-modal-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.vbe-bg-modal-stage-frame {
  position: relative;
  flex: 1;
  min-height: 320px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
}
.vbe-bg-modal-controls {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  overflow-y: auto;
}
.vbe-bg-ctrl { display: flex; flex-direction: column; gap: 7px; }
.vbe-bg-ctrl-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--text);
}
.vbe-bg-ctrl-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent);
}
.vbe-bg-ctrl input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}
.vbe-bg-ctrl-empty { font-size: 13px; color: var(--text2); line-height: 1.5; }
.vbe-bg-modal-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.vbe-bg-modal-foot .spacer { flex: 1; }

@media (max-width: 720px) {
  .vbe-bg-modal-body { grid-template-columns: 1fr; }
  .vbe-bg-modal-preview { border-right: none; border-bottom: 1px solid var(--border); }
  .vbe-bg-modal-stage-frame { min-height: 220px; }
}