/* ════════════════════════════════════════════════════════════════════
   GENERIC — "ESTUDIO" · NEUTRAL CLARO PROFESIONAL (DEFAULT / FALLBACK)
   El tema base versátil de la plataforma: comercio moderno, limpio y
   confiable para cualquier rubro. Superficies claras tipo papel, marca
   azul pizarra calma (slate indigo), acento ámbar cálido, tipografía
   contemporánea distintiva (Plus Jakarta Sans display · Hanken Grotesk
   body), sombras suaves, jerarquía clara y micro-detalles cuidados.
   Es el DEFAULT del business_mode `generic` y el FALLBACK de páginas sin
   rubro (términos, privacidad, status): por eso topbar/footer/tipografía
   tienen que verse bien aunque falten datos. Único CSS de su familia →
   sobreescribe base.css (oscuro) redefiniendo tokens y reestilando .sf-*.
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

/* ════════════════════════════════════════════════════════════════════
   (a) IDENTITY — mode-independent tokens (brand, fonts, radii)
   ════════════════════════════════════════════════════════════════════ */
:root,
html[data-theme-family="generic"] {
  /* ── Marca: azul índigo calmo y confiado · acento ámbar cálido ── */
  --brand:       #0066FF;   /* índigo sereno */
  --brand-dark:  #2E45B0;   /* índigo profundo */
  --brand-soft:  #5C76E8;   /* índigo claro para detalles */
  --cta:         #2A84FF;   /* CTA = marca (coherencia) */
  --cta-hover:   #2E45B0;
  --cta-soft:    rgba(63, 91, 217, 0.12);
  --accent:      #E08A1E;   /* ámbar cálido de acento */
  --whatsapp:    #25D366;

  /* Tipografía contemporánea distintiva */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;

  /* Radios */
  --r:           20px;
  --r-sm:        13px;
  --r-full:      999px;
}

/* ════════════════════════════════════════════════════════════════════
   (b) LIGHT surfaces — keep VERBATIM from original (pixel-identical)
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="generic"]:not(.dark) {
  /* ── Superficies claras tipo papel ── */
  --bg:          #F6F7FB;   /* niebla fría de fondo */
  --bg-1:        #FFFFFF;   /* tarjeta blanca pura */
  --bg-2:        #EFF1F7;   /* gris azulado suave */
  --bg-3:        #E4E8F1;   /* gris azulado más profundo */
  --line:        rgba(26, 35, 64, 0.10);

  /* ── Tinta: azul pizarra muy oscuro, no negro puro ── */
  --text:        #161D2E;   /* tinta slate */
  --muted:       #5E6884;   /* gris azulado de apoyo */

  /* ── Atmósfera del hero: velos índigo + ámbar muy tenues sobre papel ── */
  --hero-grad:
    radial-gradient(ellipse 66% 58% at 76% 26%, rgba(63, 91, 217, 0.12) 0%, transparent 62%),
    radial-gradient(ellipse 54% 66% at 12% 80%, rgba(224, 138, 30, 0.09) 0%, transparent 66%),
    linear-gradient(180deg, #FBFBFE 0%, #F2F4FA 100%);
  --hero-wallpaper:
    radial-gradient(rgba(26, 35, 64, 0.05) 1px, transparent 1px) 0 0 / 26px 26px;

  --shadow-card: 0 1px 2px rgba(26, 35, 64, 0.05), 0 16px 40px rgba(26, 35, 64, 0.07);
  --shadow-pop:  0 24px 56px rgba(26, 35, 64, 0.14);
}

/* ════════════════════════════════════════════════════════════════════
   (c) DARK surfaces — deep slate-indigo, same brand/cta hue
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="generic"].dark {
  /* ── Superficies oscuras: near-black slate-indigo ── */
  --bg:          #0E1018;   /* base casi-negro con tinte slate */
  --bg-1:        #161C2A;   /* tarjeta oscura */
  --bg-2:        #1C2336;   /* superficie elevada */
  --bg-3:        #232B42;   /* superficie más alta */
  --line:        rgba(148, 163, 208, 0.10);

  /* ── Tinta clara sobre oscuro ── */
  --text:        #E8ECF5;   /* blanco-slate, no puro */
  --muted:       #7A87A8;   /* gris azulado medio */

  /* ── Hero oscuro: brillo índigo profundo + ámbar muy tenue ── */
  --hero-grad:
    radial-gradient(ellipse 66% 58% at 76% 26%, rgba(63, 91, 217, 0.18) 0%, transparent 62%),
    radial-gradient(ellipse 54% 66% at 12% 80%, rgba(224, 138, 30, 0.07) 0%, transparent 66%),
    linear-gradient(180deg, #0E1018 0%, #111624 100%);
  --hero-wallpaper:
    radial-gradient(rgba(148, 163, 208, 0.04) 1px, transparent 1px) 0 0 / 26px 26px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 16px 40px rgba(0, 0, 0, 0.35);
  --shadow-pop:  0 24px 56px rgba(0, 0, 0, 0.50);
}

/* ════════════════════════════════════════════════════════════════════
   BODY
   ════════════════════════════════════════════════════════════════════ */

/* Cuerpo: grotesca legible, fondo papel, gana al inline {font-family:Inter} */
html[data-theme-family="generic"] body {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
  background: var(--bg);
  color: var(--text);
}

/* Telón sutil: punteado tenue que se desvanece hacia abajo */
html[data-theme-family="generic"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: var(--hero-wallpaper);
  -webkit-mask-image: radial-gradient(ellipse 92% 64% at 50% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 92% 64% at 50% 0%, #000 0%, transparent 72%);
  opacity: .6;
}
html[data-theme-family="generic"] main { position: relative; z-index: 1; }

/* Títulos: display geométrica humanista, peso fuerte, tracking ajustado */
html[data-theme-family="generic"] h1,
html[data-theme-family="generic"] h2,
html[data-theme-family="generic"] h3,
html[data-theme-family="generic"] .sf-title,
html[data-theme-family="generic"] .sf-section-head h2,
html[data-theme-family="generic"] .sf-despensa-h1,
html[data-theme-family="generic"] .brand-name {
  font-family: var(--font-display);
  letter-spacing: -.018em;
}
html[data-theme-family="generic"] .sf-title .accent {
  color: var(--brand);
}

/* ════════════════════════════════════════════════════════════════════
   TOPBAR — frosted, hairline índigo, marca sólida
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="generic"] .topbar {
  background: color-mix(in oklab, var(--bg-1) 80%, transparent);
  border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  box-shadow: 0 6px 28px color-mix(in oklab, var(--text) 7%, transparent);
}
html[data-theme-family="generic"] .topbar.scrolled {
  background: color-mix(in oklab, var(--bg-1) 94%, transparent);
  border-color: color-mix(in oklab, var(--brand) 18%, transparent);
  box-shadow: 0 10px 34px color-mix(in oklab, var(--text) 10%, transparent);
}
html[data-theme-family="generic"] .brand-badge {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: 0 4px 14px rgba(63, 91, 217, 0.30);
  color: #fff;
}
html[data-theme-family="generic"] .brand-name {
  font-weight: 700;
  font-size: 1.06rem;
}
html[data-theme-family="generic"] .nav-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9rem;
  color: var(--muted);
}
html[data-theme-family="generic"] .nav-link:hover {
  background: color-mix(in oklab, var(--brand) 7%, transparent);
  color: var(--text);
}
html[data-theme-family="generic"] .nav-link-active {
  background: var(--cta-soft);
  color: var(--brand-dark);
  border: 1px solid color-mix(in oklab, var(--brand) 24%, transparent);
  box-shadow: none;
}
html[data-theme-family="generic"] .nav-link-active:hover { background: color-mix(in oklab, var(--brand) 13%, transparent); }
html[data-theme-family="generic"] .topbar-mode-btn {
  background: color-mix(in oklab, var(--text) 4%, transparent);
  border: 1px solid color-mix(in oklab, var(--line) 100%, transparent);
  color: var(--muted);
}
html[data-theme-family="generic"] .topbar-mode-btn:hover {
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  border-color: color-mix(in oklab, var(--brand) 28%, transparent);
  color: var(--brand-dark);
}

/* ════════════════════════════════════════════════════════════════════
   KICKER / CHIP — píldora índigo tenue con punto vivo
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="generic"] .sf-kicker,
html[data-theme-family="generic"] .sf-despensa-kicker {
  background: var(--cta-soft);
  border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
  color: var(--brand-dark);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .08em;
}
html[data-theme-family="generic"] .sf-section-kicker {
  color: var(--brand);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .10em;
}
html[data-theme-family="generic"] .sf-kicker-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(224, 138, 30, 0.16);
}

/* ════════════════════════════════════════════════════════════════════
   HERO — panel papel con sombra suave, título grande, stage limpio
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="generic"] .sf-hero { padding: 44px 0 52px; }

html[data-theme-family="generic"] .sf-panel,
html[data-theme-family="generic"] .sf-card,
html[data-theme-family="generic"] .sf-quick-card,
html[data-theme-family="generic"] .sf-benefit,
html[data-theme-family="generic"] .sf-metric,
html[data-theme-family="generic"] .sf-proof {
  background: var(--bg-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

html[data-theme-family="generic"] .sf-panel { border-radius: 22px; padding: 34px; }

html[data-theme-family="generic"] .sf-title {
  font-weight: 800;
  font-size: clamp(2.3rem, 5vw, 4.1rem);
  line-height: 1.04;
  color: var(--text);
}

html[data-theme-family="generic"] .sf-lead,
html[data-theme-family="generic"] .sf-section-head p,
html[data-theme-family="generic"] .sf-card p,
html[data-theme-family="generic"] .sf-benefit p {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--muted);
}
html[data-theme-family="generic"] .sf-lead { max-width: 54ch; }

/* ── Botones: primario índigo sólido, secundario borde fino ── */
html[data-theme-family="generic"] .sf-btn-primary,
html[data-theme-family="generic"] .sf-btn-secondary,
html[data-theme-family="generic"] .sf-chip-link {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.005em;
  border-radius: 14px;
}
html[data-theme-family="generic"] .sf-btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 8px 22px rgba(63, 91, 217, 0.28);
}
html[data-theme-family="generic"] .sf-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(63, 91, 217, 0.38);
}
html[data-theme-family="generic"] .sf-btn-secondary {
  background: var(--bg-2);
  color: var(--brand-dark);
  border: 1px solid color-mix(in oklab, var(--brand) 48%, transparent);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--text) 4%, transparent);
}
html[data-theme-family="generic"] .sf-btn-secondary:hover {
  background: var(--cta-soft);
  border-color: var(--brand);
  transform: translateY(-2px);
}

html[data-theme-family="generic"] .sf-proof {
  background: var(--bg-1);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--text) 4%, transparent);
  color: var(--muted);
  font-weight: 500;
}
html[data-theme-family="generic"] .sf-proof i { color: var(--brand); }

/* ── Stage del hero (imagen del rubro) ── */
html[data-theme-family="generic"] .sf-stage {
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  background: var(--bg-2);
}
html[data-theme-family="generic"] .sf-stage-overlay {
  border-radius: 16px;
  background: color-mix(in oklab, var(--bg-1) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line);
}
html[data-theme-family="generic"] .sf-stage-overlay strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--text);
}
html[data-theme-family="generic"] .sf-stage-sub { color: var(--muted); }

html[data-theme-family="generic"] .sf-metric {
  border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
html[data-theme-family="generic"] .sf-metric:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--brand) 28%, transparent);
  box-shadow: 0 18px 40px color-mix(in oklab, var(--text) 12%, transparent);
}
html[data-theme-family="generic"] .sf-metric strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.55rem;
  color: var(--brand-dark);
}
html[data-theme-family="generic"] .sf-metric span { color: var(--muted); }

/* ════════════════════════════════════════════════════════════════════
   SECCIONES — encabezados claros con regla fina
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="generic"] .sf-section { padding: 26px 0 64px; }

html[data-theme-family="generic"] .sf-section-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 28px;
}
html[data-theme-family="generic"] .sf-section-head h2 {
  font-weight: 800;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  color: var(--text);
}

html[data-theme-family="generic"] .sf-chip-link {
  background: var(--cta-soft);
  border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
  color: var(--brand-dark);
}
html[data-theme-family="generic"] .sf-chip-link:hover {
  background: color-mix(in oklab, var(--brand) 16%, transparent);
  border-color: var(--brand);
  transform: translateY(-1px);
}

html[data-theme-family="generic"] .sf-grid-products { gap: 22px; }

/* ════════════════════════════════════════════════════════════════════
   PRODUCT CARDS — papel limpio, hover elevado, precio display índigo
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="generic"] .sf-card {
  border-radius: 20px;
  transition: transform .28s cubic-bezier(.3,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}
html[data-theme-family="generic"] .sf-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--brand) 30%, transparent);
  box-shadow: 0 26px 54px color-mix(in oklab, var(--text) 14%, transparent);
}
html[data-theme-family="generic"] .sf-card-image { background: var(--bg-2); }
html[data-theme-family="generic"] .sf-card-image img { transition: transform .55s cubic-bezier(.3,.7,.2,1); }
html[data-theme-family="generic"] .sf-card:hover .sf-card-image img { transform: scale(1.04); }
html[data-theme-family="generic"] .sf-card-image .no-img { color: var(--muted); }

html[data-theme-family="generic"] .sf-badge {
  background: color-mix(in oklab, var(--bg-1) 92%, transparent);
  border: 1px solid var(--line);
  color: var(--brand-dark);
  font-weight: 700;
}
html[data-theme-family="generic"] .sf-card-tag {
  background: linear-gradient(135deg, var(--accent), #C9760F);
  color: #fff;
  font-weight: 700;
}
html[data-theme-family="generic"] .sf-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--text);
}
html[data-theme-family="generic"] .sf-price-side small { color: var(--muted); }
html[data-theme-family="generic"] .sf-card .price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--brand-dark);
}

/* ════════════════════════════════════════════════════════════════════
   QUICK / BENEFIT CARDS — íconos en chip índigo redondeado
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="generic"] .sf-quick-card,
html[data-theme-family="generic"] .sf-benefit {
  border-radius: 18px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
html[data-theme-family="generic"] .sf-quick-card:hover,
html[data-theme-family="generic"] .sf-benefit:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--brand) 24%, transparent);
  box-shadow: 0 20px 44px color-mix(in oklab, var(--text) 11%, transparent);
}
html[data-theme-family="generic"] .sf-quick-icon,
html[data-theme-family="generic"] .sf-benefit-icon {
  border-radius: var(--r-sm);
  background: var(--cta-soft);
  border: 1px solid color-mix(in oklab, var(--brand) 18%, transparent);
  color: var(--brand);
}
html[data-theme-family="generic"] .sf-quick-card h3,
html[data-theme-family="generic"] .sf-benefit h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--text);
}
html[data-theme-family="generic"] .sf-quick-card p,
html[data-theme-family="generic"] .sf-benefit p { color: var(--muted); }

html[data-theme-family="generic"] .sf-empty {
  border: 1px dashed color-mix(in oklab, var(--text) 16%, transparent);
  color: var(--muted);
  background: var(--bg-1);
}

/* ════════════════════════════════════════════════════════════════════
   PERFILES SECUNDARIOS — repairs, grocery, fashion
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="generic"] .sf-track-hero,
html[data-theme-family="generic"] .sf-despensa-search,
html[data-theme-family="generic"] .sf-shelf-tile,
html[data-theme-family="generic"] .sf-list-row,
html[data-theme-family="generic"] .sf-process-step {
  background: var(--bg-1);
  border: 1px solid var(--line);
}
html[data-theme-family="generic"] .sf-track-hero { box-shadow: var(--shadow-card); }
html[data-theme-family="generic"] .sf-track-hero-label,
html[data-theme-family="generic"] .sf-despensa-kicker { color: var(--brand-dark); }
html[data-theme-family="generic"] .sf-thr-hash {
  background: var(--bg-2);
  color: var(--muted);
}
html[data-theme-family="generic"] .sf-track-hero-row input {
  background: var(--bg-2);
  border: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
  color: var(--text);
}
html[data-theme-family="generic"] .sf-track-hero-row input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(63, 91, 217, 0.16);
}
html[data-theme-family="generic"] .sf-despensa-search input { color: var(--text); }
html[data-theme-family="generic"] .sf-despensa-sub { color: var(--muted); }
html[data-theme-family="generic"] .sf-shelf-tile:hover,
html[data-theme-family="generic"] .sf-list-row:hover {
  border-color: var(--brand);
  box-shadow: 0 14px 32px color-mix(in oklab, var(--text) 10%, transparent);
}
html[data-theme-family="generic"] .sf-shelf-ic,
html[data-theme-family="generic"] .sf-list-ic,
html[data-theme-family="generic"] .sf-promo-ic,
html[data-theme-family="generic"] .sf-process-ic {
  background: var(--cta-soft);
  color: var(--brand);
}
html[data-theme-family="generic"] .sf-process-n { color: var(--muted); }
html[data-theme-family="generic"] .sf-list-info span { color: var(--muted); }
html[data-theme-family="generic"] .sf-list-price {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand-dark);
}
html[data-theme-family="generic"] .sf-list-add {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
}
html[data-theme-family="generic"] .sf-promo-band {
  border-radius: 18px;
  background: linear-gradient(120deg, color-mix(in oklab, var(--brand) 8%, transparent), var(--bg-1));
  border: 1px solid color-mix(in oklab, var(--brand) 18%, transparent);
}
html[data-theme-family="generic"] .sf-promo-txt span { color: var(--muted); }
html[data-theme-family="generic"] .sf-dp-pill {
  background: var(--cta-soft);
  border: 1px solid color-mix(in oklab, var(--brand) 20%, transparent);
  color: var(--text);
}
html[data-theme-family="generic"] .sf-dp-pill i { color: var(--brand); }
html[data-theme-family="generic"] .sf-editorial-img {
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
}
html[data-theme-family="generic"] .sf-editorial-meta span { color: var(--muted); }
html[data-theme-family="generic"] .sf-editorial-meta i { color: var(--brand); }

/* ════════════════════════════════════════════════════════════════════
   FOOTER — sobre fondo, hairlines suaves, marca índigo
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="generic"] footer {
  background: var(--bg-1) !important;
  border-top: 1px solid var(--line) !important;
}
html[data-theme-family="generic"] footer h4 {
  color: var(--text) !important;
}
html[data-theme-family="generic"] footer a[aria-label="Facebook"],
html[data-theme-family="generic"] footer a[aria-label="Instagram"],
html[data-theme-family="generic"] footer a[aria-label="X / Twitter"],
html[data-theme-family="generic"] footer a[aria-label="TikTok"],
html[data-theme-family="generic"] footer a[aria-label="YouTube"] {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--muted) !important;
}
html[data-theme-family="generic"] footer a[aria-label="Facebook"]:hover,
html[data-theme-family="generic"] footer a[aria-label="Instagram"]:hover,
html[data-theme-family="generic"] footer a[aria-label="X / Twitter"]:hover,
html[data-theme-family="generic"] footer a[aria-label="TikTok"]:hover,
html[data-theme-family="generic"] footer a[aria-label="YouTube"]:hover {
  background: var(--cta-soft) !important;
  border-color: color-mix(in oklab, var(--brand) 28%, transparent) !important;
  color: var(--brand-dark) !important;
}

/* ════════════════════════════════════════════════════════════════════
   CATALOG personality — generic signature
   Clean rounded cards, soft shadow lift on hover, indigo active chips,
   modern sans titles, confident display price. Works for any rubro.
   ════════════════════════════════════════════════════════════════════ */

/* Layout & head */
html[data-theme-family="generic"] .cat-wrap {
  background: var(--bg);
}
html[data-theme-family="generic"] .cat-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}
html[data-theme-family="generic"] .cat-eyebrow {
  color: var(--brand);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .10em;
  font-size: .75rem;
  text-transform: uppercase;
}
html[data-theme-family="generic"] .cat-title {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.018em;
}
html[data-theme-family="generic"] .cat-sub {
  color: var(--muted);
  font-family: var(--font-body);
}

/* Toolbar / search / view toggles */
html[data-theme-family="generic"] .cat-toolbar {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .6rem .9rem;
}
html[data-theme-family="generic"] .cat-search input {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--text);
  font-family: var(--font-body);
  transition: border-color .18s ease, box-shadow .18s ease;
}
html[data-theme-family="generic"] .cat-search input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(63, 91, 217, 0.16);
}
html[data-theme-family="generic"] .cat-view button {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
html[data-theme-family="generic"] .cat-view button.active {
  background: var(--brand);
  border-color: var(--brand-dark);
  color: #fff;
}

/* Category chips */
html[data-theme-family="generic"] .cat-chip {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .82rem;
  padding: .3rem .85rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer;
}
html[data-theme-family="generic"] .cat-chip:hover {
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  border-color: color-mix(in oklab, var(--brand) 22%, transparent);
  color: var(--text);
}
html[data-theme-family="generic"] .cat-chip.active {
  background: var(--brand);
  border-color: var(--brand-dark);
  color: #fff;
}

html[data-theme-family="generic"] .cat-count {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .84rem;
}

/* Product grid */
html[data-theme-family="generic"] .cat-grid {
  display: grid;
  gap: 20px;
}

/* Product cards — clean rounded, soft shadow lift */
html[data-theme-family="generic"] .pcard {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  transition: transform .26s cubic-bezier(.3,.7,.2,1), box-shadow .26s ease, border-color .26s ease;
  overflow: hidden;
}
html[data-theme-family="generic"] .pcard:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--brand) 28%, transparent);
  box-shadow: 0 20px 48px color-mix(in oklab, var(--text) 13%, transparent);
}
html[data-theme-family="generic"] .pcard-img {
  background: var(--bg-2);
  overflow: hidden;
}
html[data-theme-family="generic"] .pcard-img img {
  transition: transform .5s cubic-bezier(.3,.7,.2,1);
}
html[data-theme-family="generic"] .pcard:hover .pcard-img img {
  transform: scale(1.04);
}

/* Category label — override hardcoded dark rgba from catalog.html */
html[data-theme-family="generic"] .pcard-cat {
  background: color-mix(in oklab, var(--bg-1) 90%, transparent) !important;
  color: var(--brand) !important;
  border: 1px solid color-mix(in oklab, var(--brand) 18%, transparent) !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  backdrop-filter: blur(8px);
}

/* Stock badges — override hardcoded colors */
html[data-theme-family="generic"] .s-ok {
  background: color-mix(in oklab, #22c55e 15%, transparent) !important;
  color: #16a34a !important;
  border: 1px solid color-mix(in oklab, #22c55e 30%, transparent) !important;
}
html[data-theme-family="generic"].dark .s-ok {
  background: color-mix(in oklab, #22c55e 20%, transparent) !important;
  color: #4ade80 !important;
  border-color: color-mix(in oklab, #22c55e 35%, transparent) !important;
}
html[data-theme-family="generic"] .s-warn {
  background: color-mix(in oklab, var(--accent) 14%, transparent) !important;
  color: #b45309 !important;
  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent) !important;
}
html[data-theme-family="generic"].dark .s-warn {
  background: color-mix(in oklab, var(--accent) 18%, transparent) !important;
  color: #fbbf24 !important;
  border-color: color-mix(in oklab, var(--accent) 32%, transparent) !important;
}
html[data-theme-family="generic"] .s-bad {
  background: color-mix(in oklab, #ef4444 12%, transparent) !important;
  color: #dc2626 !important;
  border: 1px solid color-mix(in oklab, #ef4444 25%, transparent) !important;
}
html[data-theme-family="generic"].dark .s-bad {
  background: color-mix(in oklab, #ef4444 18%, transparent) !important;
  color: #f87171 !important;
  border-color: color-mix(in oklab, #ef4444 32%, transparent) !important;
}

html[data-theme-family="generic"] .pcard h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
  letter-spacing: -.012em;
}
html[data-theme-family="generic"] .pcard-desc {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.55;
}
html[data-theme-family="generic"] .pcard-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--brand-dark);
}
html[data-theme-family="generic"] .pcard-more {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  border: none;
  transition: box-shadow .18s ease, transform .18s ease;
}
html[data-theme-family="generic"] .pcard-more:hover {
  box-shadow: 0 8px 20px rgba(63, 91, 217, 0.32);
  transform: translateY(-1px);
}
html[data-theme-family="generic"] .cat-empty {
  color: var(--muted);
  background: var(--bg-1);
  border: 1px dashed color-mix(in oklab, var(--text) 16%, transparent);
  border-radius: var(--r);
}

/* ════════════════════════════════════════════════════════════════════
   MENU personality — generic signature
   Clean pill nav, card-based sections, rounded item rows
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="generic"] .menu-wrap {
  background: var(--bg);
}
html[data-theme-family="generic"] .menu-copy { color: var(--muted); }
html[data-theme-family="generic"] .menu-title {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.018em;
}
html[data-theme-family="generic"] .menu-kicker {
  color: var(--brand);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .10em;
  font-size: .75rem;
  text-transform: uppercase;
}
html[data-theme-family="generic"] .menu-side {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}
html[data-theme-family="generic"] .menu-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .8rem;
  padding: .25rem .7rem;
}
html[data-theme-family="generic"] .menu-nav a {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--muted);
  border-radius: var(--r-sm);
  padding: .42rem .8rem;
  transition: background .15s ease, color .15s ease;
  text-decoration: none;
}
html[data-theme-family="generic"] .menu-nav a:hover {
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  color: var(--text);
}
html[data-theme-family="generic"] .menu-nav a.active {
  background: var(--brand);
  color: #fff;
}
html[data-theme-family="generic"] .menu-section {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-card);
}
html[data-theme-family="generic"] .menu-section h2 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.014em;
  border-bottom: 1px solid var(--line);
  padding-bottom: .6rem;
  margin-bottom: 1rem;
}
html[data-theme-family="generic"] .menu-item {
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-2);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  margin-bottom: .6rem;
}
html[data-theme-family="generic"] .menu-item:hover {
  border-color: color-mix(in oklab, var(--brand) 24%, transparent);
  box-shadow: 0 8px 20px color-mix(in oklab, var(--text) 8%, transparent);
  transform: translateY(-2px);
}
html[data-theme-family="generic"] .menu-img {
  background: var(--bg-3);
  border-radius: var(--r-sm);
  overflow: hidden;
}
html[data-theme-family="generic"] .menu-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  font-size: 1rem;
}
html[data-theme-family="generic"] .menu-price {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand-dark);
  font-size: 1.1rem;
}
html[data-theme-family="generic"] .menu-empty {
  color: var(--muted);
  background: var(--bg-1);
  border: 1px dashed color-mix(in oklab, var(--text) 16%, transparent);
  border-radius: var(--r);
}

/* ════════════════════════════════════════════════════════════════════
   DETALLES — scrollbar, selección, focus accesible (WCAG 2.4.11)
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="generic"] ::-webkit-scrollbar { width: 11px; height: 11px; }
html[data-theme-family="generic"] ::-webkit-scrollbar-track { background: var(--bg-2); }
html[data-theme-family="generic"] ::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--muted) 45%, transparent);
  border-radius: 999px;
  border: 3px solid var(--bg-2);
}
html[data-theme-family="generic"] ::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--brand) 55%, transparent); }

html[data-theme-family="generic"] ::selection {
  background: rgba(63, 91, 217, 0.22);
  color: var(--text);
}

html[data-theme-family="generic"] a:focus-visible,
html[data-theme-family="generic"] button:focus-visible,
html[data-theme-family="generic"] input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  html[data-theme-family="generic"] .sf-panel { padding: 22px; }
  html[data-theme-family="generic"] .sf-title { font-size: clamp(2rem, 11vw, 3.1rem); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme-family="generic"] .sf-card,
  html[data-theme-family="generic"] .sf-card-image img,
  html[data-theme-family="generic"] .sf-metric,
  html[data-theme-family="generic"] .sf-quick-card,
  html[data-theme-family="generic"] .sf-benefit,
  html[data-theme-family="generic"] .sf-btn-primary,
  html[data-theme-family="generic"] .sf-btn-secondary,
  html[data-theme-family="generic"] .pcard,
  html[data-theme-family="generic"] .pcard-img img,
  html[data-theme-family="generic"] .menu-item {
    transition: none;
  }
}

html[data-theme-family="generic"] .sf-variant-btn.active { background: var(--brand); color: #fff; }

/* === Contraste/legibilidad por perfil (WCAG, auto) === */
html[data-theme-family="generic"]:not(.dark) { --on-brand:#FFFFFF; --price:#3F5BD9; }
html[data-theme-family="generic"].dark { --on-brand:#FFFFFF; --price:#6D82E2; }
html[data-theme-family="generic"] .sf-variant-btn.active { color: var(--on-brand, #fff); }