/* ==========================================================================
   PureLabMx — componentes compartidos (tienda, cuenta, políticas, Tracker, admin)
   Requiere tokens.css
   ========================================================================== */

/* El atributo hidden siempre gana sobre display de componentes */
[hidden] { display: none !important; }

/* ─── Aviso RUO (uso exclusivo en investigación) ───────────────────── */
.ruo {
  --ruo-accent: var(--gold-accent, #f2b129);
  font-family: var(--font-family, system-ui, sans-serif);
  color: var(--text-sub, #475569);
}
.ruo-full, .ruo-compact {
  position: relative;
  padding: 20px 22px 18px 24px;
  border-radius: var(--radius-md, 16px);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ruo-accent) 12%, transparent), transparent 60%),
    var(--bg-card, #fff);
  border: 1px solid color-mix(in srgb, var(--ruo-accent) 45%, var(--border-color, #e2e8f0));
  box-shadow: inset 4px 0 0 var(--ruo-accent);
}
.ruo-title {
  display: flex; align-items: center; gap: 10px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--text-main, #0f172a);
  margin-bottom: 10px;
}
.ruo-icon { color: var(--ruo-accent); flex-shrink: 0; }
.ruo-lead { font-weight: 800; font-size: 15.5px; color: var(--text-main, #0f172a); margin: 0 0 6px; }
.ruo-text { font-size: 14px; line-height: 1.65; margin: 0; color: var(--text-sub, #475569); }
.ruo-text strong { color: var(--text-main, #0f172a); }
.ruo-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13px; }
.ruo-links a { color: var(--text-sub, #475569); text-decoration: none; border-bottom: 1px solid transparent; }
.ruo-links a:hover { color: var(--ruo-accent); border-bottom-color: currentColor; }
.ruo-compact { padding: 14px 18px; }
.ruo-compact .ruo-text { font-size: 13.5px; }

.ruo-strip {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 8px;
  font-size: 11.5px; line-height: 1.3;
  background: color-mix(in srgb, var(--ruo-accent) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--ruo-accent) 55%, transparent);
  color: var(--text-sub, #475569);
}
.ruo-strip strong { color: var(--text-main, #0f172a); }
.ruo-strip .ruo-icon { width: 14px; height: 14px; }

[data-theme="light"] .ruo { --ruo-accent: #b7791f; }

/* ─── Botón de cuenta ──────────────────────────────────────────────── */
.account-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px 0 6px; border-radius: 999px;
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-main);
  font: 600 13px var(--font-family); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: var(--transition);
}
.account-btn:hover { border-color: var(--primary-accent); color: var(--primary-accent); }
.account-btn .avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary-accent), var(--cyan-accent)); color: #fff; font-size: 12px; font-weight: 800;
}
.account-btn.guest { padding: 0 14px; }
@media (max-width: 640px) {
  .account-btn .label { display: none; }
  .account-btn { padding: 0 6px; }
  .account-btn.guest { padding: 0 12px; }
  .account-btn.guest .label { display: inline; }
}

/* ─── Efecto agotado ───────────────────────────────────────────────── */
.pep-vial.is-soldout .vial-body { filter: grayscale(.9); opacity: .7; }

/* ─── Escenario de estudio (fondo de foto de producto para viales y jeringas) ───── */
/* Gris claro con luz de estudio centrada, igual en tema claro y oscuro (foto de producto). */
.lab-stage {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 55% at 50% 36%, #ffffff 0%, #f2f4f7 42%, #e1e5ea 78%, #d6dbe2 100%);
}
.lab-stage::before, .lab-stage::after { content: none; }
.lab-stage .pep-vial { filter: drop-shadow(0 6px 8px rgba(15, 23, 42, .12)); }