/* ═══════════════════════════════════════════════════════════════════════════
   mk-ui v1 — sistema de diseño unificado del marketplace
   Oscuro = «Grafito» (negro sobrio con estrellas, ver night-sky.css) · Claro = «Porcelana».
   Mismo lenguaje que las apps: sin azul saturado, sin amarillo chillón, iconos sin fondo,
   botones primarios neutros (tinta sobre fondo), tarjetas con borde fino y movimiento sutil.
   Se carga DESPUÉS de night-sky.css. No cambia lógica ni marcado.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --mk-r-s: 10px; --mk-r-m: 14px; --mk-r-l: 18px; --mk-ease: cubic-bezier(.16, 1, .3, 1);
  --mk-bg: #f5f5f6; --mk-surface: #ffffff; --mk-surface-2: #f1f1f3; --mk-line: rgba(12, 12, 14, .10);
  --mk-ink: #0c0c0e; --mk-muted: #62626b; --mk-accent: #0c0c0e; --mk-on-accent: #ffffff;
  --mk-link: #374056; --mk-focus: #0c0c0e; --mk-hero: linear-gradient(135deg, #101012, #1a1a1f 55%, #25252c);
}
html.dark {
  --mk-bg: #000; --mk-surface: #0d0d0f; --mk-surface-2: #131316; --mk-line: rgba(255, 255, 255, .09);
  --mk-ink: #f2f2f4; --mk-muted: #9a9aa3; --mk-accent: #f2f2f4; --mk-on-accent: #0c0c0e;
  --mk-link: #c9d3e3; --mk-focus: #ffffff;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html:not(.dark) body { background-color: var(--mk-bg); }
body { text-rendering: optimizeLegibility; }
h1, h2, h3 { letter-spacing: -.02em; }
.tabular, [class*="price"], [class*="total"] { font-variant-numeric: tabular-nums; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mk-focus); outline-offset: 2px; border-radius: 8px;
}
::selection { background: rgba(120, 120, 140, .32); }
html.dark { scrollbar-color: #2a2a30 transparent; }
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 10px; border: 2px solid #000; }

/* ── Cabecera: porcelana en claro (sin amarillo chillón), negra en oscuro ───────── */
html:not(.dark) .mkt-yellow-nav { background: #ffffff !important; box-shadow: 0 1px 0 var(--mk-line) !important; }
html:not(.dark) .mkt-yellow-nav .mkt-search-form { box-shadow: none; border: 1px solid var(--mk-line); }
html:not(.dark) .mkt-yellow-nav .mkt-search-form input { background: var(--mk-surface-2) !important; }
html:not(.dark) .mkt-yellow-nav .mkt-search-form button { background: var(--mk-accent) !important; color: #fff !important; }
html:not(.dark) .mkt-yellow-nav .mkt-search-form button .bi { color: #fff !important; }
html:not(.dark) .mkt-yellow-nav .mkt-nav-actions .mkt-cart-action #cartBadge { background: var(--mk-accent) !important; color: #fff !important; }
html:not(.dark) .mkt-yellow-nav .text-white\/70, html:not(.dark) .mkt-yellow-nav .text-white\/80 { color: var(--mk-muted) !important; }
.mkt-yellow-nav .mkt-nav-actions .mkt-cart-action span.text-\[10px\], .mkt-yellow-nav .mkt-cart-action span { opacity: .9; }
/* barra secundaria (Categorías · Ofertas · …): superficie neutra con línea fina */
.mkt-secondary-bar { background: var(--mk-surface-2) !important; border-color: var(--mk-line) !important; box-shadow: none !important; }
html.dark .mkt-secondary-bar { background: #050506 !important; }
html.dark .mkt-secondary-bar a, html.dark .mkt-secondary-bar button, html.dark .mkt-secondary-bar i { color: var(--mk-ink) !important; }
.mkt-secondary-bar a, .mkt-secondary-bar button { transition: opacity .2s; }
.mkt-secondary-bar a:hover { opacity: .7; }

/* ── Aviso de cookies: compacto, no tapa el contenido ──────────────────────────── */
#cookie-consent-banner {
  left: 12px !important; right: 12px !important; bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  max-width: 400px !important; margin: 0 !important; padding: 12px 14px !important; font-size: 12.5px !important; line-height: 1.45 !important;
  border-radius: var(--mk-r-m) !important; background: var(--mk-surface) !important; color: var(--mk-ink) !important;
  border: 1px solid var(--mk-line) !important; box-shadow: 0 10px 34px rgba(0, 0, 0, .28) !important;
}
#cookie-consent-banner p { margin: 0 0 8px !important; color: var(--mk-muted); }
#cookie-consent-banner a { color: var(--mk-ink) !important; text-decoration-color: var(--mk-line) !important; }
#cookie-consent-banner button { background: var(--mk-accent) !important; color: var(--mk-on-accent) !important; border-radius: 999px !important; padding: 6px 16px !important; font-size: 12.5px !important; }
@media (min-width: 1024px) { #cookie-consent-banner { bottom: 16px !important; } }

/* ── Botones: una sola voz ───────────────────────────────────────────────────── */
body .btn-primary, .mkt-cta, .btn-brand, .ml-apply, .ml-search-submit, .cat-filter-apply, .empty-link,
.s-prod-action.cart, .store-scope .s-prod-action.cart,
button[style*="#3483fa" i], a[style*="#3483fa" i], button[style*="#2684f7" i], a[style*="#2684f7" i] {
  background: var(--mk-accent) !important; color: var(--mk-on-accent) !important; border: 0 !important;
  border-radius: var(--mk-r-s) !important; font-weight: 600; box-shadow: none !important;
  transition: transform .18s var(--mk-ease), opacity .18s, background-color .18s;
}
body .btn-primary *, .mkt-cta *, .ml-apply *, .cat-filter-apply *, .empty-link *, .s-prod-action.cart * { color: inherit !important; }
body .btn-primary:hover, .mkt-cta:hover, .ml-apply:hover, .cat-filter-apply:hover, .empty-link:hover, .s-prod-action.cart:hover { opacity: .88; filter: none !important; }
body .btn-primary:active, .mkt-cta:active, .ml-apply:active, .cat-filter-apply:active, .empty-link:active, .s-prod-action.cart:active { transform: scale(.97); }
.btn-ghost { border-radius: var(--mk-r-s); border-color: var(--mk-line) !important; color: var(--mk-ink) !important; background: transparent !important; transition: background-color .18s, transform .18s var(--mk-ease); }
.btn-ghost:hover { background: var(--mk-surface-2) !important; }
.btn-ghost:active { transform: scale(.97); }

/* ── Tarjetas y superficies ──────────────────────────────────────────────────── */
.glass-card { border-radius: var(--mk-r-m); border-color: var(--mk-line) !important; box-shadow: none !important; }
html:not(.dark) .glass-card, html:not(.dark) .mkt-pc, html:not(.dark) .mkt-store, html:not(.dark) .mkt-cat, html:not(.dark) .store-card { border-color: var(--mk-line); box-shadow: none; }
.mkt-pc, .mkt-store, .mkt-cat, .store-card, .ml-mini-card { transition: transform .35s var(--mk-ease), border-color .2s; }
@media (hover: hover) { html:not(.dark) .mkt-pc:hover, html:not(.dark) .mkt-store:hover, html:not(.dark) .mkt-cat:hover, html:not(.dark) .store-card:hover { transform: translateY(-3px); border-color: rgba(12, 12, 14, .22) !important; } }
/* iconos sin fondo de chip (igual que las apps) */
.empty-icon, .mkt-cat-ic, .aml-benefit-icon, .ml-trust-icon, .subcat-icon, .cat-emblem, .ml-no-results i, .pdp-seller-avatar-i { background: transparent !important; box-shadow: none !important; }
.cat-emblem, .subcat-icon { color: var(--mk-ink) !important; }

/* ── Formularios y tablas ────────────────────────────────────────────────────── */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { border-radius: var(--mk-r-s); transition: border-color .18s, box-shadow .18s; }
:where(input, select, textarea):focus { box-shadow: 0 0 0 3px rgba(130, 130, 150, .22); }
table thead th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-muted); font-weight: 600; }
table tbody tr { transition: background-color .15s; }
html.dark table tbody tr:hover { background: rgba(255, 255, 255, .03); }
html:not(.dark) table tbody tr:hover { background: rgba(12, 12, 14, .025); }

/* ── Categorías (/c/…): variables propias + hero grafito, sin azul ─────────────── */
html.dark { --cat-blue: #c9d3e3; --cat-ink: #f2f2f4; --cat-muted: #9a9aa3; --cat-line: rgba(255, 255, 255, .09); --cat-bg: transparent; }
html:not(.dark) { --cat-blue: #374056; --cat-bg: #f5f5f6; }
.cat-hero { background: var(--mk-hero) !important; }
.cat-hero * { color: inherit; }
html.dark :is(.cat-header, .cat-brand-card, .cat-more-card, .cat-filter-panel, .products-section, .view-toggle, .subcat-card, .cat-stat, .cat-featured-tile, .cat-hero-link, .empty-cat) { background: var(--mk-surface) !important; border-color: var(--mk-line) !important; color: var(--mk-ink) !important; box-shadow: none !important; }
html.dark .cat-page { background: transparent !important; }
html.dark .cat-hero-link { background: #f2f2f4 !important; color: #0c0c0e !important; }
html.dark :is(.cat-filter-field input, .cat-filter-field select, .products-sort select) { background: rgba(255, 255, 255, .05) !important; border-color: var(--mk-line) !important; color: var(--mk-ink) !important; }
html.dark :is(.pagination a, .pagination .disabled, span.disabled) { background: var(--mk-surface) !important; border-color: var(--mk-line) !important; color: var(--mk-muted) !important; }
html.dark .pagination .active, html.dark .view-toggle button.active { background: var(--mk-accent) !important; color: var(--mk-on-accent) !important; }
html.dark :is(.cat-more-img, .cat-brand-mark, .subcat-icon) { background: rgba(255, 255, 255, .05) !important; }

/* ── Búsqueda (/buscar) ──────────────────────────────────────────────────────── */
html.dark :is(.ml-view, .ml-facet-box, .ml-filters-card, .ml-search-box, .ml-chip, .ml-mini-card, .ml-no-results, .ml-trust-row, .ml-search-hero, .ml-discover, .ml-suggest-chip, .ml-search-suggestions, .ml-fdet > summary) { background: var(--mk-surface) !important; border-color: var(--mk-line) !important; color: var(--mk-ink) !important; box-shadow: none !important; }
html.dark :is(.ml-sort select, .ml-filter-group input[type=number], .ml-filter-group select) { background: rgba(255, 255, 255, .05) !important; border-color: var(--mk-line) !important; color: var(--mk-ink) !important; }
html.dark .ml-facet.on, html.dark .ml-view button.on { background: var(--mk-accent) !important; color: var(--mk-on-accent) !important; }
html.dark .ml-mini-img, html.dark .ml-suggest-img { background: rgba(255, 255, 255, .06) !important; }

/* ── Inicio: paneles destacados ─────────────────────────────────────────────── */
html.dark .mkt-feature-panel { background: var(--mk-surface) !important; border-color: var(--mk-line) !important; box-shadow: none !important; }

/* ── Banners de tiendas: sin azul marino ─────────────────────────────────────── */
.mkt-store-banner { background: var(--mk-hero) !important; }
.store-banner { background-color: #131316; }

/* ── Movimiento: respeta preferencias ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .mkt-pc:hover, .mkt-store:hover, .mkt-cat:hover, .store-card:hover { transform: none !important; }
}

/* ── Tarjeta de producto (components/product-card) ───────────────────────────── */
.mk-card { background: var(--mk-surface); border: 1px solid var(--mk-line); border-radius: var(--mk-r-m); color: var(--mk-ink); transition: transform .35s var(--mk-ease), border-color .2s; text-decoration: none; }
@media (hover: hover) { .mk-card:hover { transform: translateY(-3px); border-color: rgba(127, 127, 140, .45); } }
.mk-card:active { transform: scale(.985); }
.mk-card-img { background: #ffffff; }
.mk-card-meta { color: var(--mk-muted); }
.mk-card-title, .mk-card-price { color: var(--mk-ink); }
.mk-card-link, .mk-card-verified { color: var(--mk-link); }
.mk-card-price { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cat-featured-tile::after { background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .68)) !important; }
.cat-featured-tile h3, .cat-featured-tile span, .cat-featured-copy * { color: #fff !important; }

/* ── Azul de marca → neutro (paneles de admin, vendedor y cliente; gráficas) ──────── */
html.dark { --site-primary: #c9d3e3; --site-secondary: #8fd9b6; }
html:not(.dark) { --site-primary: #1b1b21; --site-secondary: #3c3c47; }
.site-gradient, [class*="from-brand-"], [class*="bg-gradient-to"][class*="brand"] { background-image: var(--mk-hero) !important; color: #f2f2f4; }
html body :is(.bg-brand-500, .bg-brand-600, .bg-brand-700, .bg-brand-800):not([class*="dark:bg-"]) { background-color: var(--mk-accent) !important; color: var(--mk-on-accent) !important; }
html body :is(.text-brand-300, .text-brand-400, .text-brand-500, .text-brand-600, .text-brand-700, .hover\:text-brand-700:hover) { color: var(--mk-link) !important; }
html body :is(.bg-brand-50, .bg-brand-100) { background-color: var(--mk-surface-2) !important; }
html.dark body [class*="dark:bg-brand-"], html.dark body [class*="bg-brand-400/"], html.dark body [class*="bg-brand-500/"] { background-color: rgba(255, 255, 255, .07) !important; }
html body :is(.ring-brand-500, .focus\:ring-brand-500:focus, .focus\:border-brand-500:focus) { --tw-ring-color: var(--mk-focus) !important; border-color: var(--mk-focus) !important; }
html body :is(.border-brand-200, .border-brand-300, .border-brand-500) { border-color: var(--mk-line) !important; }
.admin-dashboard { --dash-blue: var(--mk-ink); --dash-green: #34c38f; }
/* acceso/registro: mismo botón neutro en claro */
html:not(.dark) { --aml-blue: #0c0c0e; --aml-blue-dark: #000; }
html:not(.dark) .aml-primary { background: #0c0c0e !important; color: #fff !important; border: 0 !important; }
html:not(.dark) .aml-form-card a:not(.aml-primary), html:not(.dark) .aml-foot a { color: #374056; }
.aml-benefit-icon { border: 0 !important; box-shadow: none !important; background: transparent !important; }
.admin-hero, .sc-hero, .od-hero { background-image: var(--mk-hero) !important; }
.admin-hero { box-shadow: none !important; border: 1px solid var(--mk-line); }
html:not(.dark) body aside.fixed.inset-y-0 { background: #0e0e11 !important; border-color: rgba(255, 255, 255, .06) !important; }

/* ── Página de tienda (.store-scope) y detalle de producto en oscuro ─────────────── */
html.dark .store-scope, html.dark body:has(.store-scope) .store-scope { --ink: #f2f2f4; --muted: #9a9aa3; --line: rgba(255, 255, 255, .09); background: transparent !important; color: var(--mk-ink) !important; }
html.dark .store-scope :is(.s-info-wrap, .s-sb-card, .s-prod-card, .s-rev-card, .s-cat-mobile, .s-store-search, .s-follow-btn, .s-pagination a, .s-pagination span, .s-rep-segment, .s-sort select, .s-main > div > form) { background: var(--mk-surface) !important; border-color: var(--mk-line) !important; color: var(--mk-ink) !important; box-shadow: none !important; }
html.dark .store-scope .s-name, html.dark .store-scope h1, html.dark .store-scope h2, html.dark .store-scope h3 { color: var(--mk-ink) !important; }
html.dark .store-scope .s-bio, html.dark .store-scope .s-prod-meta { color: var(--mk-muted) !important; }
html.dark .store-scope .s-prod-img { background: #fff !important; }
html.dark .store-scope .s-store-search input { background: transparent !important; color: var(--mk-ink) !important; }
.store-scope .s-store-search button { background: var(--mk-accent) !important; color: var(--mk-on-accent) !important; border-radius: var(--mk-r-s) !important; }
html.dark .store-scope .s-follow-btn { color: var(--mk-ink) !important; }
html.dark :is(.pdp-review, .pdp-rev-summary, .pdp-seller-detail, .pdp-feature-row) { background: var(--mk-surface) !important; border-color: var(--mk-line) !important; color: var(--mk-ink) !important; }
html.dark .pdp-btn-cart { background: transparent !important; color: var(--mk-ink) !important; border: 1px solid rgba(255, 255, 255, .22) !important; }
html.dark .pdp-seller-detail-follow { background: rgba(255, 255, 255, .06) !important; color: var(--mk-ink) !important; border-color: var(--mk-line) !important; }
html.dark .store-scope .s-prod-card { color: var(--mk-ink) !important; }
html.dark .store-scope .s-prod-card :is(h2, h3, h4, a, strong, b, .s-prod-title, .s-prod-price) { color: var(--mk-ink) !important; }
html.dark .store-scope .s-store-search :is(i, svg) { color: var(--mk-muted) !important; }
.store-scope .s-store-search button :is(i, svg) { color: inherit !important; }
html.dark .store-scope .s-sb-card :is(a, span, li) { color: var(--mk-muted); }
html.dark .store-scope .s-sb-card a:hover, html.dark .store-scope .s-sb-card .active { color: var(--mk-ink); }