/* Direction: marketplace digital — papel claro, índigo de marca, coral para ofertas */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f6f7fc;
  --surface: #ffffff;
  --surface-2: #eaebf1;
  --border: #e1e4f0;
  --border-strong: #b0b0ba;
  --ink: #14162b;
  --muted: #565b74;
  --accent: #4f46e5;
  --accent-hover: #433cc3;
  --accent-ink: #ffffff;
  --accent-text: #4338ca;
  --accent-strong: #4f46e5;
  --accent-soft: #dfdef9;
  --accent-border: #aba7f2;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dbe9e5;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #eee3df;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #efdde1;
  --danger-strong: #b91c1c;
  --chart-1: #4f46e5;
  --chart-2: #ce31b1;
  --chart-3: #8c2906;
  --chart-4: #8e7a06;
  --chart-5: #015d36;
  --chart-6: #198ba4;

  --x-offer: #d92d20;
  --x-on-offer: #ffffff;
  --x-band: #1b1850;
  --x-on-photo: #ffffff;
  --gradient-hero: linear-gradient(135deg, #eef0ff 0%, #f6f7fc 55%, #fff1ee 100%);
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.025em;
  --radius-card: 18px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --shadow-card: 0 8px 24px -12px rgba(30, 27, 90, 0.22);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #080817;
  --surface: #21212e;
  --surface-2: #141423;
  --border: #2b2b37;
  --border-strong: #52525d;
  --ink: #f6f7fc;
  --muted: #9797a0;
  --accent: #4f46e5;
  --accent-hover: #6962e9;
  --accent-ink: #ffffff;
  --accent-text: #817bed;
  --accent-strong: #817bed;
  --accent-soft: #181644;
  --accent-border: #282474;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0b221f;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2e1914;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2f0c18;
  --danger-strong: #d16969;
  --chart-1: #5954f3;
  --chart-2: #dc41bd;
  --chart-3: #db450e;
  --chart-4: #9c8600;
  --chart-5: #0f985d;
  --chart-6: #1799b4;
}

.pcard { padding: 0; overflow: hidden; }
.edge-ok { border-color: var(--success); border-width: 2px; }
.edge-warn { border-color: var(--warning); border-width: 2px; }
.edge-bad { border-color: var(--danger); border-width: 2px; }
.step { border: 1px solid color-mix(in srgb, var(--x-on-photo) 22%, transparent); }
.hero-bg { background: var(--gradient-hero); }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.st { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .2rem .65rem; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.st-ok { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.st-warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 15%, transparent); }
.st-bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); }
.st-mute { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }

/* marca de agua en vistas previas */
.wm { position: relative; overflow: hidden; user-select: none; }
.wm::after {
  content: "BAML STORE · VISTA PREVIA";
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1rem;
  font-weight: 800; font-size: clamp(.9rem, 3.4vw, 1.7rem); letter-spacing: .14em;
  color: color-mix(in srgb, var(--x-on-photo) 80%, transparent);
  text-shadow: 0 1px 8px rgb(0 0 0 / .6);
  transform: rotate(-16deg); pointer-events: none;
}
.wm img { pointer-events: none; -webkit-user-drag: none; }

#results.htmx-request { opacity: .45; transition: opacity .15s; pointer-events: none; }
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

.pay-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.pay-opt:has(input:disabled) { opacity: .6; }
.thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--accent); }

.admin-nav a[aria-current="page"] { background: var(--accent); color: var(--x-on-photo); }
@keyframes pop { from { transform: translateY(6px); } to { transform: none; } }
.pop { animation: pop .35s ease-out; }
html.reduced-motion .pop { animation: none; }