/* Z-900 · 1.0.2 — Cristal, porcelana y azul. Experiencia inspirada en Apple / iOS. */
.theme-z-900 {
  --sidebar-width: 268px;
  --gutter: clamp(24px, 3.5vw, 44px);
  --topbar-h: 76px;
  --tap: 44px;
  --z-line: color-mix(in srgb, var(--text) 10%, transparent);
  --z-line-strong: color-mix(in srgb, var(--text) 16%, transparent);
  --z-soft: color-mix(in srgb, var(--primary) 8%, var(--surface));
  --z-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
  --z-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  --z-shadow-lg: 0 18px 44px -8px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.03);
  --z-glass-bg: color-mix(in srgb, var(--surface) 85%, transparent);
  --z-glass-border: color-mix(in srgb, #ffffff 65%, var(--z-line));
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  overflow-x: clip;
  line-height: 1.5;
}
.theme-z-900 *, .theme-z-900 *::before, .theme-z-900 *::after { box-sizing: border-box; }
.theme-z-900 :where(h1,h2,h3,h4,p,ul,ol) { margin: 0; }
.theme-z-900 :where(a) { color: inherit; text-decoration: none; }
.theme-z-900 :where(button,input,select,textarea) { font: inherit; }
.theme-z-900 :where(button,a,input,select,textarea):focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.theme-z-900 :where(button) { cursor: pointer; }
.theme-z-900 :where(img) { max-width: 100%; height: auto; }
.theme-z-900 :where(h1,h2,h3,b,strong) { font-weight: 650; }
.theme-z-900 :where(h1,h2,h3) { letter-spacing: -.04em; line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere; }
.theme-z-900 :where(h1) { font-size: clamp(30px,3.6vw,48px); }
.theme-z-900 :where(h2) { font-size: clamp(24px,2.8vw,36px); }
.theme-z-900 :where(p,span,a,b,strong,small) { overflow-wrap: anywhere; }
.theme-z-900 :where(small) { font-size: 12px; }
.theme-z-900 [hidden] { display: none !important; }

/* Explicit interaction colors beat the core's generic link hover/focus rules. */
body.theme-z-900 a.z-button:not(.z-button-soft):is(:link,:visited,:hover,:focus,:active),
body.theme-z-900 button.z-button:not(.z-button-soft):is(:hover,:focus,:active),
body.theme-z-900.store-workspace a.z-wallet-card:is(:link,:visited,:hover,:focus,:active) { color: var(--on-primary, #fff); }
body.theme-z-900 a.z-button-soft:is(:link,:visited,:hover,:focus,:active) { color: var(--primary); }
body.theme-z-900.store-workspace a.z-wallet-card > :is(span,b),
body.theme-z-900.store-workspace a.z-wallet-card .z-icon,
body.theme-z-900 .z-button > :is(span,b,.z-icon) { color: inherit; opacity: 1; }
body.theme-z-900 a.z-menu-link:is(:hover,:focus-visible,:active) { color: var(--text); background-color: var(--bg); }
body.theme-z-900 a.z-menu-link:is(.active,[aria-current="page"]):is(:link,:visited,:hover,:focus,:active) { color: var(--primary); background-color: var(--z-soft); }
body.theme-z-900 :is(.z-product,.z-profile,.z-featured,.z-help-card,.z-support-widget):is(:hover,:focus-visible,:active) { color: var(--text); }
.theme-z-900 ::selection { background: var(--primary); color: var(--on-primary, #fff); text-shadow: none; }
.theme-z-900 :is(.z-wallet-card,.z-button:not(.z-button-soft))::selection,
.theme-z-900 :is(.z-wallet-card,.z-button:not(.z-button-soft)) ::selection { background: var(--on-primary, #fff); color: var(--primary); text-shadow: none; }

/* Viewport Scrollbar */
html:has(> body.theme-z-900) { scrollbar-width: thin; scrollbar-color: #9ba7b9 transparent; scrollbar-gutter: stable; }
.theme-z-900 { scrollbar-width: thin; scrollbar-color: #9ba7b9 transparent; }
.theme-z-900 :where(.table-wrap,.pd-mensaje,textarea) { scrollbar-width: thin; scrollbar-color: #9ba7b9 transparent; }
@supports selector(::-webkit-scrollbar) {
  html:has(> body.theme-z-900), .theme-z-900 { scrollbar-width: auto; scrollbar-color: auto; }
  html:has(> body.theme-z-900)::-webkit-scrollbar, .theme-z-900::-webkit-scrollbar { width: 10px; height: 10px; }
  html:has(> body.theme-z-900)::-webkit-scrollbar-track, .theme-z-900::-webkit-scrollbar-track { background: transparent; }
  html:has(> body.theme-z-900)::-webkit-scrollbar-thumb, .theme-z-900::-webkit-scrollbar-thumb { background: #a8b3c2; border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; min-height: 48px; }
  html:has(> body.theme-z-900)::-webkit-scrollbar-thumb:hover, .theme-z-900::-webkit-scrollbar-thumb:hover { background-color: #7c8b9f; }
  html:has(> body.theme-z-900)::-webkit-scrollbar-button, .theme-z-900::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  html:has(> body.theme-z-900)::-webkit-scrollbar-corner, .theme-z-900::-webkit-scrollbar-corner { background: transparent; }
}

/* Micro-elements */
.theme-z-900 .z-sidebar-nav::-webkit-scrollbar,
.theme-z-900 .z-chips::-webkit-scrollbar { display: none; width: 0; height: 0; }
.theme-z-900 .z-muted { color: var(--text-2); }
/* Píldora de estado Apple para kickers y overlines de cabecera */
.theme-z-900 :is(.kicker, .home-kicker, .z-overline, [class*="kicker"], [class*="eyebrow"], .welcome-eyebrow),
.theme-z-900 :is(.sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header, .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head, .account-head, .account-header, .soporte-head, .soporte-header, .z-page-hero) > :where(div, .sec-head-titles) > :is(span, small, p):first-child:not(h1):not(h2),
.theme-z-900 :is(.sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header, .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head, .account-head, .account-header, .soporte-head, .soporte-header, .z-page-hero) > :is(span, small, p):first-child:not(h1):not(h2) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 9%, var(--surface)) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent) !important;
  padding: 3.5px 12px !important;
  border-radius: 999px !important;
  line-height: 1.25 !important;
  width: fit-content !important;
  margin-bottom: 5px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}
.theme-z-900 :is(.kicker, .home-kicker, .z-overline, [class*="kicker"], .welcome-eyebrow):not(.z-eyebrow):not(:has(.z-dot))::before,
.theme-z-900 :is(.sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header, .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head, .account-head, .account-header, .soporte-head, .soporte-header, .z-page-hero) > :where(div, .sec-head-titles) > :is(span, small, p):first-child:not(h1):not(h2):not(.z-eyebrow):not(:has(.z-dot))::before,
.theme-z-900 :is(.sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header, .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head, .account-head, .account-header, .soporte-head, .soporte-header, .z-page-hero) > :is(span, small, p):first-child:not(h1):not(h2):not(.z-eyebrow):not(:has(.z-dot))::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent) !important;
  flex-shrink: 0 !important;
  margin-inline-end: 7px !important;
  vertical-align: 1px !important;
}
/* Excepciones donde .z-overline / small debe ser texto plano sutil (dentro de combos, login split, stats y cards secundarias) */
.theme-z-900 :is(.z-product, .product-card, .z-product-body, .product-body, .z-featured, .featured-card, .z-help-card, .z-banner-copy, .pl-fila, .z-access-story, .support-stats, .support-stats > *, .account-cards, .account-cards > *, .balance-card, .builder, .builder-sum, .sum-panel, .pick-row) :is(.z-overline, .kicker, small, span.balance-label, span.card-label) {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--text-2) !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  letter-spacing: .02em !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  width: auto !important;
  text-transform: none !important;
  font-weight: 550 !important;
}
.theme-z-900 :is(.z-product, .product-card, .z-product-body, .product-body, .z-featured, .featured-card, .z-help-card, .z-banner-copy, .pl-fila, .z-access-story, .support-stats, .support-stats > *, .account-cards, .account-cards > *, .balance-card, .builder, .builder-sum, .sum-panel, .pick-row) :is(.z-overline, .kicker, small, span.balance-label, span.card-label)::before {
  display: none !important;
}

/* Categoría de producto con punto azul con halo y separación perfecta (sin montarse sobre el texto) */
.theme-z-900 :is(.z-product, .workspace-product, .product-card, .product-body, .z-product-body) :is(.z-overline, .product-overline, .product-cat, [class*="overline"]) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  font-weight: 650 !important;
  color: var(--text-2) !important;
  line-height: 1.2 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-bottom: 2px !important;
}
.theme-z-900 :is(.z-product, .workspace-product, .product-card, .product-body, .z-product-body) :is(.z-overline, .product-overline, .product-cat, [class*="overline"])::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent) !important;
  flex-shrink: 0 !important;
  margin-right: 6px !important;
  vertical-align: 0 !important;
}
.theme-z-900 .z-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .1em; font-weight: 700; text-transform: uppercase; color: var(--text-2); }
.theme-z-900 .z-eyebrow::before { display: none !important; content: none !important; }
.theme-z-900 .z-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: 0 0 auto; box-shadow: 0 0 0 4px color-mix(in srgb,var(--primary) 15%,transparent); }
.theme-z-900 .z-icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; background: currentColor; -webkit-mask: var(--z-icon) center / contain no-repeat; mask: var(--z-icon) center / contain no-repeat; }

/* Apple-style Buttons */
.theme-z-900 .z-button {
  display: inline-flex; gap: 14px; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 24px;
  background: linear-gradient(180deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 90%, #000) 100%);
  color: var(--on-primary, #fff);
  border: 1px solid color-mix(in srgb, var(--primary) 80%, #000);
  border-radius: 999px;
  font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em;
  box-shadow: 0 6px 18px -3px color-mix(in srgb,var(--primary) 35%,transparent), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-z-900 .z-button:active { transform: scale(0.98); }
.theme-z-900 .z-button-small { min-height: 40px; padding: 8px 18px; border-radius: 999px; font-size: 13px; gap: 10px; }
.theme-z-900 .z-button-soft {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  border: 1px solid color-mix(in srgb,var(--primary) 16%,transparent);
  box-shadow: none;
}
.theme-z-900 .z-button-soft:hover {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  border-color: color-mix(in srgb,var(--primary) 28%,transparent);
}
.theme-z-900 .z-button-wide { width: 100%; justify-content: space-between; }
.theme-z-900 .z-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--primary); transition: opacity .18s; }
.theme-z-900 .z-text-link:hover { opacity: .82; }
.theme-z-900 .z-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.theme-z-900 .z-icon-button, .theme-z-900 .icon-button {
  display: inline-flex; justify-content: center; align-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid var(--z-line); border-radius: 14px;
  background: var(--surface); color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: all .2s ease;
}
.theme-z-900 .z-icon-button:hover, .theme-z-900 .icon-button:hover {
  border-color: var(--z-line-strong);
  background: color-mix(in srgb, var(--text) 3%, var(--surface));
  transform: translateY(-1px);
}

/* Brand & Header */
.theme-z-900 .z-brand { display: flex; gap: 12px; align-items: center; min-width: 0; min-height: 44px; }
.theme-z-900 .z-brand > span:last-child { min-width: 0; }
.theme-z-900 .z-brand b { display: block; font-size: 19px; letter-spacing: -.04em; line-height: 1.25; }
.theme-z-900 .z-brand small { color: var(--text-2); display: block; font-size: 12px; margin-top: 1px; }
.theme-z-900 .z-brand img { width: 42px; height: 42px; object-fit: contain; border-radius: 13px; }
.theme-z-900 .z-mark {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 13px; background: var(--text); color: var(--surface);
  font-size: 22px; font-weight: 750;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3), 0 3px 10px rgba(0,0,0,0.08);
}
.theme-z-900 .z-header {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  position: sticky; top: 0; z-index: 20; min-height: 80px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  padding: 16px max(var(--gutter), calc((100vw - 1320px)/2));
  border-bottom: 1px solid var(--z-line);
}
.theme-z-900 .z-header nav { display: flex; align-items: center; gap: 28px; flex-shrink: 0; font-size: 14px; font-weight: 550; }
.theme-z-900 .z-header nav > a { display: inline-flex; align-items: center; min-height: 44px; transition: color .18s; }
.theme-z-900 .z-header nav > a:hover { color: var(--primary); }

/* Landing / Welcome Hero */
.theme-z-900 .z-landing { max-width: 1360px; padding: 32px var(--gutter) 40px; margin: auto; }
.theme-z-900 .z-hero {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 1.05fr .95fr;
  min-height: 520px; background: #edf2f8; border: 1px solid #dfe5ef;
  border-radius: 32px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(25, 45, 85, 0.05);
}
.theme-z-900 .z-hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: var(--z-dia) center / cover no-repeat; }
.theme-z-900 .z-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(245,248,252,.95) 0%,rgba(245,248,252,.86) 34%,rgba(245,248,252,.06) 74%); }
.theme-z-900 .z-hero-copy,
.theme-z-900 .z-hero > div:first-child,
.theme-z-900 .z-landing .z-hero > div:first-child {
  padding: clamp(36px,4.5vw,68px) !important;
  padding-right: 0 !important;
  align-self: center !important;
  color: #172033 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}
.theme-z-900 .z-hero-copy::after,
.theme-z-900 .z-hero > div:first-child::after,
.theme-z-900 .z-landing .z-hero > div:first-child::after {
  display: none !important;
}
.theme-z-900 .z-hero h1 { font-size: clamp(38px,4.5vw,64px); line-height: 1.05; letter-spacing: -.055em; margin: 22px 0 20px; }
.theme-z-900 .z-lead { font-size: 16px; line-height: 1.7; color: #4b586e; max-width: 420px; margin-bottom: 28px; }
.theme-z-900 .z-hero-art { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 0 30px 65px; min-width: 0; }
.theme-z-900 .z-owner-cover { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.theme-z-900 .z-glass-note {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 22px;
  border: 1px solid rgba(255,255,255,0.85); border-radius: 22px;
  background: rgba(252,253,255,.82); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 14px 44px rgba(24,50,87,.12), inset 0 1px 0 #fff; color: #172033; transform: rotate(-3deg);
}
.theme-z-900 .z-glass-note b { display: block; font-size: 14px; }
.theme-z-900 .z-glass-note small { color: #536074; }
.theme-z-900 .z-glass-note > .z-icon { color: var(--primary); width: 18px; }
.theme-z-900 .z-mini-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #eaf0ff; color: var(--primary); }
.theme-z-900 .z-art-caption { position: absolute; bottom: 24px; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: #42516b; }
.theme-z-900 .z-stats { display: flex; gap: 28px; padding: 0; list-style: none; margin-top: 36px; }
.theme-z-900 .z-stats li { display: grid; gap: 3px; }
.theme-z-900 .z-stats b { font-size: 24px; letter-spacing: -.04em; }
.theme-z-900 .z-stats span { color: #536074; font-size: 12.5px; }

.theme-z-900 .z-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; padding: 36px 16px; border-bottom: 1px solid var(--z-line); }
.theme-z-900 .z-benefits > div { display: flex; align-items: center; gap: 16px; }
.theme-z-900 .z-benefits b { display: block; font-size: 14px; }
.theme-z-900 .z-benefits small { display: block; color: var(--text-2); margin-top: 3px; }
.theme-z-900 .z-icon-tile {
  display: grid; place-items: center; background: var(--surface);
  border: 1px solid var(--z-line); border-radius: 16px; width: 48px; height: 48px; flex: 0 0 48px;
  color: var(--primary); box-shadow: 0 3px 10px rgba(0,0,0,0.03), inset 0 1px 0 #fff;
}
.theme-z-900 .z-section { margin: 54px 0; }
.theme-z-900 .z-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.theme-z-900 .z-section-head > * { min-width: 0; }
.theme-z-900 .z-section-head h1, .theme-z-900 .z-section-head h2 { margin-top: 8px; }
.theme-z-900 .z-section-head p { margin-top: 10px; }
.theme-z-900 .z-section-head > .z-text-link { flex-shrink: 0; }

/* =====================================================================
   Apple Hero Cards & Page Headers
   Enmarca de forma compacta y elegante los encabezados de página
   ===================================================================== */
.theme-z-900 :is(
  .z-page-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
  .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
  .account-head, .account-header, .soporte-head, .soporte-header, .user-head, .perfil-head
),
.theme-z-900 :is(.workspace-page, .z-workspace-content, .home, .support-workspace, .store-workspace) > :is(div, header):first-child:not(main):not(section):not(aside):not(.balance-card):not(.account-cards):not(.z-dashboard-hero):not(.support-stats):not(.pl-lista):not(.z-section):not(.z-product):not(.card):not(.products):not(.workspace-products):not(.builder-sum):not(.sum-panel):not(.builder-grid):not(.builder-pick):not(.z-access):not(.z-access-panel):not(.z-access-content):not(.access-card):not(.z-hero):not(.z-hero-copy):not(.z-hero-art):not(.z-landing):not(.z-landing *):not(.z-hero *):not(.z-dashboard-hero *):not(.z-page-hero *):not(.home-head *):not(.sec-head *):not(.account-head *):not(.soporte-head *):not(.catalog-head *):not(.support-head *):not(.page-head *):not(.page-header *):not(.home-hero *):not(.home-saludo *):not(.home-header *):not(.workspace-head *):not(.workspace-header *):not(.store-head *):not(.account-header *):not(.soporte-header *):not(.user-head *):not(.perfil-head *):not(.z-section *):not(.pd-cabeza *):not(.pd-cabeza-pago *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *):not(.account-hello):not(.account-hello *):not(.hello-main):not(.hello-main *):not(.hello-txt):not(.hello-txt *),
.theme-z-900 :is(.workspace-page, .z-workspace-content, .home, .support-workspace, .store-workspace) > div:first-child > :is(div, header):first-child:not(main):not(section):not(aside):not(.balance-card):not(.account-cards):not(.z-dashboard-hero):not(.support-stats):not(.pl-lista):not(.z-section):not(.z-product):not(.card):not(.products):not(.workspace-products):not(.builder-sum):not(.sum-panel):not(.builder-grid):not(.builder-pick):not(.z-access):not(.z-access-panel):not(.z-access-content):not(.access-card):has(:is(h1, h2)):not(.z-hero):not(.z-hero-copy):not(.z-hero-art):not(.z-landing):not(.z-landing *):not(.z-hero *):not(.z-dashboard-hero *):not(.z-page-hero *):not(.home-head *):not(.sec-head *):not(.account-head *):not(.soporte-head *):not(.catalog-head *):not(.support-head *):not(.page-head *):not(.page-header *):not(.home-hero *):not(.home-saludo *):not(.home-header *):not(.workspace-head *):not(.workspace-header *):not(.store-head *):not(.account-header *):not(.soporte-header *):not(.user-head *):not(.perfil-head *):not(.z-section *):not(.pd-cabeza *):not(.pd-cabeza-pago *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *):not(.account-hello):not(.account-hello *):not(.hello-main):not(.hello-main *):not(.hello-txt):not(.hello-txt *),
.theme-z-900 :is(div, header):has(> :where(div, .sec-head-titles) > :is(h1, h2)):has(:where(.btn, button, a.btn)):not(main):not(section):not(aside):not(body):not(.workspace-main):not(.workspace-page):not(.balance-card):not(.account-cards):not(.z-dashboard-hero):not(.support-stats):not(.pl-lista):not(.z-section):not(.z-product):not(.card):not(.products):not(.workspace-products):not(.builder-sum):not(.sum-panel):not(.builder-grid):not(.builder-pick):not(.z-access):not(.z-access-panel):not(.z-access-content):not(.access-card):not(.z-hero):not(.z-hero-copy):not(.z-hero-art):not(.z-landing):not(.z-landing *):not(.z-hero *):not(.z-dashboard-hero *):not(.z-page-hero *):not(.home-head *):not(.sec-head *):not(.account-head *):not(.soporte-head *):not(.catalog-head *):not(.support-head *):not(.page-head *):not(.page-header *):not(.home-hero *):not(.home-saludo *):not(.home-header *):not(.workspace-head *):not(.workspace-header *):not(.store-head *):not(.account-header *):not(.soporte-header *):not(.user-head *):not(.perfil-head *):not(.z-section *):not(.pd-cabeza *):not(.pd-cabeza-pago *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *):not(.account-hello):not(.account-hello *):not(.hello-main):not(.hello-main *):not(.hello-txt):not(.hello-txt *),
.theme-z-900 :is(div, header):has(> :is(h1, h2:first-child)):has(> :is(p, .home-lede, .z-muted, span)):not(main):not(section):not(aside):not(body):not(.workspace-main):not(.workspace-page):not(.balance-card):not(.account-cards):not(.z-dashboard-hero):not(.support-stats):not(.pl-lista):not(.z-section):not(.z-product):not(.card):not(.products):not(.workspace-products):not(.builder-sum):not(.sum-panel):not(.builder-grid):not(.builder-pick):not(.z-access):not(.z-access-panel):not(.z-access-content):not(.access-card):not(.z-hero):not(.z-hero-copy):not(.z-hero-art):not(.z-landing):not(.z-landing *):not(.z-hero *):not(.z-dashboard-hero *):not(.z-page-hero *):not(.home-head *):not(.sec-head *):not(.account-head *):not(.soporte-head *):not(.catalog-head *):not(.support-head *):not(.page-head *):not(.page-header *):not(.home-hero *):not(.home-saludo *):not(.home-header *):not(.workspace-head *):not(.workspace-header *):not(.store-head *):not(.account-header *):not(.soporte-header *):not(.user-head *):not(.perfil-head *):not(.z-section *):not(.pd-cabeza *):not(.pd-cabeza-pago *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *):not(.account-hello):not(.account-hello *):not(.hello-main):not(.hello-main *):not(.hello-txt):not(.hello-txt *) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  height: auto !important;
  min-height: 0 !important;
  padding: 22px 26px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--primary) 4.5%, var(--surface)) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important;
  border-radius: 22px !important;
  box-shadow: 0 4px 20px rgba(25, 45, 85, 0.03), inset 0 1px 0 #ffffff !important;
  overflow: hidden;
  box-sizing: border-box;
}

/* Sutil resplandor decorativo Apple en la esquina */
.theme-z-900 :is(
  .z-page-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
  .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
  .account-head, .account-header, .soporte-head, .soporte-header
)::after,
.theme-z-900 :is(.workspace-page, .z-workspace-content, .home, .support-workspace, .store-workspace) > :is(div, header):first-child:not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-dashboard-hero *):not(.z-page-hero *):not(.home-head *):not(.sec-head *):not(.account-head *):not(.soporte-head *):not(.catalog-head *):not(.support-head *):not(.page-head *):not(.page-header *):not(.home-hero *):not(.home-saludo *):not(.home-header *):not(.workspace-head *):not(.workspace-header *):not(.store-head *):not(.account-header *):not(.soporte-header *):not(.user-head *):not(.perfil-head *):not(.z-section *):not(.pd-cabeza *):not(.pd-cabeza-pago *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *):not(.account-hello):not(.account-hello *):not(.hello-main):not(.hello-main *):not(.hello-txt):not(.hello-txt *)::after,
.theme-z-900 :is(div, header):has(> :where(div, .sec-head-titles) > :is(h1, h2)):has(:where(.btn, button, a.btn)):not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-dashboard-hero *):not(.z-page-hero *):not(.home-head *):not(.sec-head *):not(.account-head *):not(.soporte-head *):not(.catalog-head *):not(.support-head *):not(.page-head *):not(.page-header *):not(.home-hero *):not(.home-saludo *):not(.home-header *):not(.workspace-head *):not(.workspace-header *):not(.store-head *):not(.account-header *):not(.soporte-header *):not(.user-head *):not(.perfil-head *):not(.z-section *):not(.pd-cabeza *):not(.pd-cabeza-pago *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *):not(.account-hello):not(.account-hello *):not(.hello-main):not(.hello-main *):not(.hello-txt):not(.hello-txt *)::after,
.theme-z-900 :is(div, header):has(> :is(h1, h2:first-child)):has(> :is(p, .home-lede, .z-muted, span)):not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-dashboard-hero *):not(.z-page-hero *):not(.home-head *):not(.sec-head *):not(.account-head *):not(.soporte-head *):not(.catalog-head *):not(.support-head *):not(.page-head *):not(.page-header *):not(.home-hero *):not(.home-saludo *):not(.home-header *):not(.workspace-head *):not(.workspace-header *):not(.store-head *):not(.account-header *):not(.soporte-header *):not(.user-head *):not(.perfil-head *):not(.z-section *):not(.pd-cabeza *):not(.pd-cabeza-pago *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *):not(.account-hello):not(.account-hello *):not(.hello-main):not(.hello-main *):not(.hello-txt):not(.hello-txt *)::after {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 10%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

/* Reseteo del contenedor interno de títulos para evitar "tarjeta dentro de tarjeta" o alturas parásitas */
.theme-z-900 :is(
  .z-page-hero, .z-dashboard-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
  .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
  .account-head, .account-header, .soporte-head, .soporte-header, .user-head, .perfil-head
) > div,
.theme-z-900 .pd-cabeza > div:not(.pd-cabeza-pago),
.theme-z-900 :is(
  .z-page-hero, .z-dashboard-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
  .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
  .account-head, .account-header, .soporte-head, .soporte-header, .user-head, .perfil-head
) > .sec-head-titles,
.theme-z-900 :is(
  .z-page-hero, .z-dashboard-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
  .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
  .account-head, .account-header, .soporte-head, .soporte-header, .user-head, .perfil-head
) > .z-page-hero-copy {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.theme-z-900 :is(
  .z-page-hero, .z-dashboard-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
  .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
  .account-head, .account-header, .soporte-head, .soporte-header, .user-head, .perfil-head
) > div::after,
.theme-z-900 :is(
  .z-page-hero, .z-dashboard-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
  .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
  .account-head, .account-header, .soporte-head, .soporte-header, .user-head, .perfil-head
) > .sec-head-titles::after,
.theme-z-900 :is(
  .z-page-hero, .z-dashboard-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
  .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
  .account-head, .account-header, .soporte-head, .soporte-header, .user-head, .perfil-head
) > .z-page-hero-copy::after {
  content: none !important;
  display: none !important;
}

/* Distribución horizontal simétrica en escritorio cuando hay botón o contador */
@media (min-width: 601px) {
  .theme-z-900 :is(
    .z-page-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
    .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
    .account-head, .account-header, .soporte-head, .soporte-header
  ):has(:where(.btn, button, a.btn, .z-catalog-count)) {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .theme-z-900 :is(
    .z-page-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
    .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
    .account-head, .account-header, .soporte-head, .soporte-header
  ) > :where(div, .sec-head-titles, .z-page-hero-copy) {
    flex: 1 1 300px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .theme-z-900 :is(
    .z-page-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
    .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
    .account-head, .account-header, .soporte-head, .soporte-header
  ) :where(.btn, button, a.btn, .z-catalog-count) {
    margin-top: 0 !important;
    align-self: center !important;
  }
}

.theme-z-900 :is(
  .z-page-hero, .sec-head, .support-head, .catalog-head, .page-head, .page-header,
  .home-hero, .home-header, .workspace-head, .workspace-header, .store-head,
  .soporte-head, .soporte-header
) :where(h1, h2),
.theme-z-900 :is(.workspace-page, .z-workspace-content, .home, .support-workspace, .store-workspace) > :is(div, header):first-child:not(main):not(section):not(aside):not(body):not(.workspace-main):not(.workspace-page):not(.z-workspace-content):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.home-head):not(.account-head):not(.user-head):not(.home-saludo):not(.account-header):not(.home-head *):not(.account-head *):not(.user-head *):not(.home-saludo *):not(.account-header *) :where(h1, h2),
.theme-z-900 :is(div, header):has(> :where(div, .sec-head-titles) > :is(h1, h2)):has(:where(.btn, button, a.btn)):not(main):not(section):not(aside):not(body):not(.workspace-main):not(.workspace-page):not(.z-workspace-content):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.home-head):not(.account-head):not(.user-head):not(.home-saludo):not(.account-header):not(.home-head *):not(.account-head *):not(.user-head *):not(.home-saludo *):not(.account-header *) :where(h1, h2),
.theme-z-900 :is(div, header):has(> :is(h1, h2:first-child)):has(> :is(p, .home-lede, .z-muted, span)):not(main):not(section):not(aside):not(body):not(.workspace-main):not(.workspace-page):not(.z-workspace-content):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.home-head):not(.account-head):not(.user-head):not(.home-saludo):not(.account-header):not(.home-head *):not(.account-head *):not(.user-head *):not(.home-saludo *):not(.account-header *) :where(h1, h2) {
  font-size: clamp(24px, 3vw, 32px) !important;
  font-weight: 750 !important;
  letter-spacing: -.035em !important;
  color: var(--text) !important;
  margin: 2px 0 0 !important;
  line-height: 1.15 !important;
}

.theme-z-900 :is(
  .z-page-hero, .sec-head, .support-head, .catalog-head, .page-head, .page-header,
  .home-hero, .home-header, .workspace-head, .workspace-header, .store-head,
  .soporte-head, .soporte-header
) :is(p, .home-lede, .z-muted),
.theme-z-900 :is(.workspace-page, .z-workspace-content, .home, .support-workspace, .store-workspace) > :is(div, header):first-child:not(main):not(section):not(aside):not(body):not(.workspace-main):not(.workspace-page):not(.z-workspace-content):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.home-head):not(.account-head):not(.user-head):not(.home-saludo):not(.account-header):not(.home-head *):not(.account-head *):not(.user-head *):not(.home-saludo *):not(.account-header *) :is(p, .home-lede, .z-muted),
.theme-z-900 :is(div, header):has(> :where(div, .sec-head-titles) > :is(h1, h2)):has(:where(.btn, button, a.btn)):not(main):not(section):not(aside):not(body):not(.workspace-main):not(.workspace-page):not(.z-workspace-content):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.home-head):not(.account-head):not(.user-head):not(.home-saludo):not(.account-header):not(.home-head *):not(.account-head *):not(.user-head *):not(.home-saludo *):not(.account-header *) :is(p, .home-lede, .z-muted),
.theme-z-900 :is(div, header):has(> :is(h1, h2:first-child)):has(> :is(p, .home-lede, .z-muted, span)):not(main):not(section):not(aside):not(body):not(.workspace-main):not(.workspace-page):not(.z-workspace-content):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.home-head):not(.account-head):not(.user-head):not(.home-saludo):not(.account-header):not(.home-head *):not(.account-head *):not(.user-head *):not(.home-saludo *):not(.account-header *) :is(p, .home-lede, .z-muted) {
  color: var(--text-2) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin: 4px 0 0 !important;
  max-width: 680px !important;
}

/* Botones dentro de la cabecera (Mis datos, + Crear un reporte, Nuevo caso, etc.) */
.theme-z-900 :is(
  .z-page-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
  .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
  .account-head, .account-header, .soporte-head, .soporte-header
) :where(.btn, a.btn, button.btn, button.btn-primary, button:not(.z-reveal):not([class*="toggle"]):not([class*="close"])),
.theme-z-900 :is(.workspace-page, .z-workspace-content, .home, .support-workspace, .store-workspace) > :is(div, header):first-child:not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *) :where(.btn, a.btn, button.btn, button.btn-primary, button:not(.z-reveal):not([class*="toggle"]):not([class*="close"])),
.theme-z-900 :is(div, header):has(> :where(div, .sec-head-titles) > :is(h1, h2)):has(:where(.btn, button, a.btn)):not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *) :where(.btn, a.btn, button.btn, button.btn-primary, button:not(.z-reveal):not([class*="toggle"]):not([class*="close"])),
.theme-z-900 :is(div, header):has(> :is(h1, h2:first-child)):has(> :is(p, .home-lede, .z-muted, span)):not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *) :where(.btn, a.btn, button.btn, button.btn-primary, button:not(.z-reveal):not([class*="toggle"]):not([class*="close"])) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  margin-top: 8px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.theme-z-900 :is(
  .z-page-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
  .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
  .account-head, .account-header, .soporte-head, .soporte-header
) :where(.btn-primary, button.btn-primary, button:not(.z-reveal):not([class*="toggle"]):not([class*="close"]):not(.btn)),
.theme-z-900 :is(.workspace-page, .z-workspace-content, .home, .support-workspace, .store-workspace) > :is(div, header):first-child:not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *) :where(.btn-primary, button.btn-primary, button:not(.z-reveal):not([class*="toggle"]):not([class*="close"]):not(.btn)),
.theme-z-900 :is(div, header):has(> :where(div, .sec-head-titles) > :is(h1, h2)):has(:where(.btn, button, a.btn)):not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *) :where(.btn-primary, button.btn-primary, button:not(.z-reveal):not([class*="toggle"]):not([class*="close"]):not(.btn)) {
  background: linear-gradient(180deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 88%, #000) 100%) !important;
  color: #ffffff !important;
  border: 1px solid color-mix(in srgb, var(--primary) 80%, #000) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 30%, transparent) !important;
}
.theme-z-900 :is(
  .z-page-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
  .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
  .account-head, .account-header, .soporte-head, .soporte-header
) :where(.btn:not(.btn-primary):not(button), a.btn:not(.btn-primary)),
.theme-z-900 :is(.workspace-page, .z-workspace-content, .home, .support-workspace, .store-workspace) > :is(div, header):first-child:not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *) :where(.btn:not(.btn-primary):not(button), a.btn:not(.btn-primary)),
.theme-z-900 :is(div, header):has(> :where(div, .sec-head-titles) > :is(h1, h2)):has(:where(.btn, button, a.btn)):not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *) :where(.btn:not(.btn-primary):not(button), a.btn:not(.btn-primary)) {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

/* Cabecera espaciosa para Mi cuenta / Inicio del cliente (Hola, Demo / Cliente Final) */
.theme-z-900 :is(.workspace-page, .z-workspace-content) :is(.home-head, .account-head, .user-head, .home-saludo, .account-header),
.theme-z-900 :is(.home-head, .account-head, .user-head, .home-saludo, .account-header) {
  padding: 24px 28px !important;
  margin-bottom: 20px !important;
  border-radius: 24px !important;
  height: auto !important;
  min-height: 0 !important;
  flex: initial !important;
  background: radial-gradient(85% 140% at 100% 0%, color-mix(in srgb, var(--primary) 7%, transparent) 0%, transparent 65%), linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--primary) 2.5%, var(--surface)) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--z-line)) !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.035), inset 0 1px 0 #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ==========================================================================
   CABECERA /mi-cuenta: EL SALUDO Y LA TARJETA DE SOCIO (COMO TEMA-EJEMPLO)
   ========================================================================== */
.theme-z-900 .store-workspace .account-hello,
.theme-z-900 .account-hello {
  border-radius: 24px;
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
  background:
    radial-gradient(55% 140% at 100% 50%, color-mix(in srgb, var(--c, #d97706) 18%, transparent), transparent 70%),
    radial-gradient(45% 120% at 0% 0%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 62%),
    var(--surface);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.035), inset 0 1px 0 #ffffff;
}

/* Ocultar la cuadrícula tosca de fondo */
.theme-z-900 .account-hello::before,
.theme-z-900 .store-workspace .account-hello::before {
  display: none !important;
  content: none !important;
}

/* RESET TOTAL de .hello-txt para evitar caja interior */
.theme-z-900 .account-hello .hello-txt,
.theme-z-900 .account-hello div.hello-txt,
.theme-z-900 .store-workspace .account-hello div.hello-txt,
.theme-z-900 .hello-txt,
.theme-z-900 div.hello-txt {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.theme-z-900 .account-hello .hello-txt::after,
.theme-z-900 .hello-txt::after,
.theme-z-900 .account-hello .hello-txt::before,
.theme-z-900 .hello-txt::before {
  display: none !important;
  content: none !important;
}

/* Alineación de avatar y texto horizontal en escritorio */
@media (min-width: 601px) {
  .theme-z-900 .hello-main {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 22px !important;
    min-width: 0 !important;
  }
  .theme-z-900 .account-hello .hello-txt {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
}

@media (max-width: 600px) {
  .theme-z-900 .account-hello .hello-txt {
    display: contents !important;
  }
}

/* Avatar de usuario Apple */
.theme-z-900 .hello-avatar {
  border-radius: 20px;
  font-family: inherit;
}

/* Kicker de Mi cuenta */
.theme-z-900 .hello-kicker {
  letter-spacing: .12em;
}

/* Tipografía de Hola, {nombre} y subtítulo */
.theme-z-900 .account-hello h1 {
  letter-spacing: -.035em;
  font-weight: 750;
  margin: 0 0 4px;
}

.theme-z-900 .account-hello p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 650px;
  margin: 0;
}

/* Chips de metadatos */
.theme-z-900 .hello-chip {
  border-radius: 999px;
}
.theme-z-900 a.hello-chip:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
}

/* Tarjeta de socio: normal con la base (idéntico a tema-ejemplo) */
.theme-z-900.store-workspace .member-card,
.theme-z-900 .member-card {
  border-radius: 20px;
}
.theme-z-900.store-workspace .member-card-name,
.theme-z-900 .member-card-name {
  letter-spacing: -.035em;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .theme-z-900.store-workspace .member-card::before,
  .theme-z-900 .member-card::before {
    inset: 0;
    background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%);
    transform: translateX(-130%) skewX(-18deg);
  }
  .theme-z-900.store-workspace .member-card:hover::before,
  .theme-z-900 .member-card:hover::before {
    animation: z-brillo 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
@keyframes z-brillo {
  to { transform: translateX(130%) skewX(-18deg); }
}

@media (min-width: 601px) {
  .theme-z-900 :is(.workspace-page, .z-workspace-content) :is(.home-head, .account-head, .user-head, .home-saludo, .account-header),
  .theme-z-900 :is(.home-head, .account-head, .user-head, .home-saludo, .account-header) {
    padding: 26px 34px !important;
    gap: 20px 28px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .theme-z-900 :is(.workspace-page, .z-workspace-content) :is(.home-head, .account-head, .user-head, .home-saludo, .account-header) > :where(div, .sec-head-titles) {
    flex: 1 1 500px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

.theme-z-900 :is(.workspace-page, .z-workspace-content) :is(.home-head, .account-head, .user-head, .home-saludo, .account-header) :where(h1, h2),
.theme-z-900 :is(.home-head, .account-head, .user-head, .home-saludo, .account-header) :where(h1, h2) {
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 750 !important;
  letter-spacing: -.035em !important;
  margin: 0 0 6px !important;
  line-height: 1.18 !important;
  color: var(--text) !important;
}

.theme-z-900 :is(.workspace-page, .z-workspace-content) :is(.home-head, .account-head, .user-head, .home-saludo, .account-header) :is(p, .z-muted, .home-lede),
.theme-z-900 :is(.home-head, .account-head, .user-head, .home-saludo, .account-header) :is(p, .z-muted, .home-lede) {
  font-size: 14px !important;
  line-height: 1.55 !important;
  max-width: 780px !important;
  margin: 4px 0 0 !important;
  color: var(--text-2) !important;
}

/* Distintivo Apple Member / Nivel de Cliente ("CLIENTE FINAL") */
.theme-z-900 :is(.workspace-page, .z-workspace-content) :is(.home-head, .account-head, .user-head, .home-saludo, .account-header) :is(.badge, .tier-chip),
.theme-z-900 :is(.home-head, .account-head, .user-head, .home-saludo, .account-header) :is(.badge, .tier-chip) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  vertical-align: 0 !important;
  margin-left: 6px !important;
  padding: 3px 10px !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 8.5%, var(--surface)) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 8%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  white-space: nowrap !important;
  transition: all .2s ease !important;
}

.theme-z-900 :is(.workspace-page, .z-workspace-content) :is(.home-head, .account-head, .user-head, .home-saludo, .account-header) :is(.badge, .tier-chip)::before,
.theme-z-900 :is(.home-head, .account-head, .user-head, .home-saludo, .account-header) :is(.badge, .tier-chip)::before {
  display: none !important;
  content: none !important;
}

/* Botón "Mis datos" con estilo Apple Action Glass */
.theme-z-900 :is(.workspace-page, .z-workspace-content) :is(.home-head, .account-head, .user-head, .home-saludo, .account-header) :where(.btn, a.btn, button.btn),
.theme-z-900 :is(.home-head, .account-head, .user-head, .home-saludo, .account-header) :where(.btn, a.btn, button.btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 20px !important;
  min-height: 40px !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface)) !important;
  color: var(--primary) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent) !important;
  box-shadow: 0 2px 8px rgba(7, 91, 219, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  flex-shrink: 0 !important;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.theme-z-900 :is(.workspace-page, .z-workspace-content) :is(.home-head, .account-head, .user-head, .home-saludo, .account-header) :where(.btn, a.btn, button.btn):hover,
.theme-z-900 :is(.home-head, .account-head, .user-head, .home-saludo, .account-header) :where(.btn, a.btn, button.btn):hover {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--primary) 32%, transparent) !important;
  color: var(--primary) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(7, 91, 219, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.theme-z-900 .z-catalog-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--z-line);
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  white-space: nowrap;
}

/* Badges de estado Apple (.badge, .badge-ok, etc.) */
.theme-z-900 .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .02em;
}
.theme-z-900 .badge-ok {
  background: color-mix(in srgb, #0071e3 10%, var(--surface));
  color: #0071e3;
  border: 1px solid color-mix(in srgb, #0071e3 22%, transparent);
}
.theme-z-900 .badge-warn {
  background: color-mix(in srgb, #ff9500 12%, var(--surface));
  color: #d97706;
  border: 1px solid color-mix(in srgb, #ff9500 24%, transparent);
}
.theme-z-900 .badge-out {
  background: color-mix(in srgb, #ff3b30 10%, var(--surface));
  color: #e11d48;
  border: 1px solid color-mix(in srgb, #ff3b30 22%, transparent);
}

/* Soporte Stats nativas */
.theme-z-900 .support-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.theme-z-900 .support-stats > :where(.stat, div) {
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow: 0 4px 18px rgba(25, 45, 85, 0.03), inset 0 1px 0 #ffffff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.theme-z-900 .support-stats small {
  font-size: 12.5px;
  color: var(--text-2);
  font-weight: 550;
}
.theme-z-900 .support-stats b {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.03em;
}

/* Category Pills / Chips */
.theme-z-900 .z-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; }
.theme-z-900 .z-chips > :where(a,li) {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px;
  min-height: 42px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 999px; background: var(--surface); color: var(--text-2);
  font-size: 13.5px; font-weight: 550;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02), inset 0 1px 0 #ffffff;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-z-900 .z-chips > :where(a,li):hover {
  color: var(--text); border-color: color-mix(in srgb, var(--text) 22%, transparent);
  transform: translateY(-1px);
}
.theme-z-900 .z-chips .active {
  background: var(--text); color: var(--surface);
  border-color: var(--text); font-weight: 600;
  box-shadow: 0 4px 14px rgba(23, 32, 51, 0.18);
}
.theme-z-900 .z-chips span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2);
}
.theme-z-900 .z-chips .active span {
  background: color-mix(in srgb, var(--surface) 22%, transparent); color: var(--surface);
}

/* =====================================================================
   PRODUCT GRID & PRODUCT CARD (APPLE STYLE)
   ===================================================================== */
.theme-z-900 .z-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.theme-z-900 .z-product {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 24px; padding: 10px;
  background: var(--surface); color: var(--text);
  box-shadow: 0 4px 20px rgba(25, 45, 85, 0.035), inset 0 1px 0 #ffffff;
  overflow: hidden;
  transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .28s ease, border-color .28s ease;
}
.theme-z-900 .z-product:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 42px -10px rgba(25, 45, 85, 0.1), inset 0 1px 0 #ffffff;
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.theme-z-900 .z-product-art,
.theme-z-900 .workspace-product .product-img {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 6%, var(--bg)), color-mix(in srgb, var(--text) 3%, var(--bg))) !important;
  border-radius: 17px !important;
  isolation: isolate !important;
}
.theme-z-900 .z-product-art .product-shot,
.theme-z-900 .workspace-product .product-img > img.product-shot,
.theme-z-900 .workspace-product .product-img img,
.theme-z-900 .product-card .product-img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.theme-z-900 :is(.z-product, .workspace-product):hover .product-shot,
.theme-z-900 :is(.z-product, .workspace-product):hover .product-img img {
  transform: scale(1.05) !important;
}
.theme-z-900 .z-product-monogram {
  display: grid; place-items: center; width: 80px; height: 80px;
  border-radius: 22px; font-size: 42px; font-weight: 750;
  color: var(--primary); background: var(--surface);
  box-shadow: 0 12px 28px color-mix(in srgb,var(--primary) 14%,transparent), inset 0 1px 0 #fff;
}
.theme-z-900 .z-product-tags {
  position: absolute; top: 9px; left: 9px; right: 9px;
  display: flex; flex-wrap: wrap; gap: 6px; z-index: 2;
}
.theme-z-900 .z-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--primary); color: var(--on-primary, #fff);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent);
  line-height: 1.2;
}
.theme-z-900 .z-tag-light {
  background: rgba(255, 255, 255, 0.88);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.theme-z-900 .z-sold {
  position: absolute; bottom: 10px; padding: 5px 14px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.92);
  color: var(--text); font-size: 11.5px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.theme-z-900 .z-out .product-shot { filter: grayscale(1); opacity: .65; }

.theme-z-900 .z-product-body { display: flex; flex: 1; flex-direction: column; padding: 18px 12px 10px; }
.theme-z-900 .z-product-body .z-overline { font-size: 11px; letter-spacing: .1em; }
.theme-z-900 .z-product-name {
  font-size: 18px; line-height: 1.3; letter-spacing: -.03em; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.theme-z-900 .z-product-meta {
  display: grid; gap: 3px; font-size: 12px; color: var(--text-2);
  padding: 8px 0 16px;
}
.theme-z-900 .z-product-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--z-line);
}
.theme-z-900 .z-product-foot > span:first-child { display: flex; flex-wrap: wrap; column-gap: 8px; align-items: baseline; }
.theme-z-900 .z-product-foot b { font-size: 21px; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.theme-z-900 .z-product-foot small { flex-basis: 100%; color: var(--text-2); font-size: 11.5px; }
.theme-z-900 .z-product-foot s { color: var(--text-2); font-size: 12px; }
.theme-z-900 .z-product-arrow {
  width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center;
  border-radius: 50%; background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-z-900 .z-product:hover .z-product-arrow {
  background: var(--primary); color: var(--on-primary, #fff);
  transform: scale(1.08);
}
.theme-z-900 .z-product-arrow .z-icon { width: 17px; height: 17px; }

/* Editorial & Steps */
.theme-z-900 .z-editorial {
  display: grid; grid-template-columns: 1fr .7fr; align-items: center;
  padding: 48px 64px; border: 1px solid var(--z-line); border-radius: 28px;
  background: linear-gradient(125deg, var(--surface) 0%, color-mix(in srgb, var(--primary) 6%, var(--surface)) 100%);
  min-height: 320px; overflow: hidden;
  box-shadow: 0 10px 32px rgba(25, 45, 85, 0.04), inset 0 1px 0 #ffffff;
}
.theme-z-900 .z-editorial h2 { font-size: clamp(32px,3.6vw,48px); margin: 16px 0; }
.theme-z-900 .z-editorial p { max-width: 420px; color: var(--text-2); font-size: 14.5px; margin-bottom: 24px; line-height: 1.65; }
.theme-z-900 .z-spark-art { width: 280px; height: 280px; object-fit: contain; justify-self: center; filter: drop-shadow(0 18px 25px rgba(23,78,184,.15)); }
.theme-z-900 .z-steps ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding: 0; list-style: none; }
.theme-z-900 .z-steps li { border-top: 1px solid var(--z-line); padding-top: 22px; font-size: 14px; color: var(--text-2); line-height: 1.6; }
.theme-z-900 .z-steps li > span { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.05em; color: var(--primary); margin-bottom: 10px; }

/* Footer */
.theme-z-900 .z-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  padding: 28px var(--gutter); max-width: 1360px; margin: auto; font-size: 12.5px; color: var(--text-2);
}
.theme-z-900 .z-footer nav { display: flex; gap: 24px; }
.theme-z-900 .z-footer a { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; transition: color .18s; }
.theme-z-900 .z-footer a:hover { color: var(--text); }
.theme-z-900 .z-footer .z-icon { width: 14px; }

/* Empty & Notices */
.theme-z-900 .z-empty { grid-column: 1 / -1; text-align: center; padding: 64px 24px; border: 1px dashed var(--z-line); border-radius: 24px; background: var(--surface); }
.theme-z-900 .z-empty > .z-icon { width: 38px; height: 38px; color: var(--primary); margin-bottom: 18px; }
.theme-z-900 .z-empty h3 { font-size: 22px; margin-bottom: 10px; }
.theme-z-900 .z-empty p { color: var(--text-2); margin-bottom: 20px; }
.theme-z-900 .z-notice { padding: 16px 20px; background: var(--z-soft); border: 1px solid var(--z-line); border-radius: 16px; font-size: 14px; margin-bottom: 20px; }
.theme-z-900 .z-notice-error { background: #fff0f0; border-color: #f5bec3; color: #9b2030; }
.theme-z-900 .z-notice-success { background: #ecf8f0; border-color: #b7dfc4; color: #1b6136; }
.theme-z-900 .z-notice-warning { background: #fff8e7; border-color: #e8d39b; color: #755200; }

/* =====================================================================
   ACCESS (LOGIN / REGISTER)
   ===================================================================== */
.theme-z-900.is-access { background: var(--bg); }
.theme-z-900 .z-access { display: grid; grid-template-columns: minmax(0,.96fr) minmax(0,1.04fr); min-height: 100dvh; padding: 20px; gap: 20px; max-width: 1800px; margin: auto; }
.theme-z-900 .z-access-art {
  position: sticky; top: 20px; height: calc(100dvh - 40px); min-height: 620px; max-height: 1120px;
  border-radius: 30px; padding: 36px; display: flex; flex-direction: column; justify-content: space-between;
  color: #fff; isolation: isolate; overflow: hidden;
  background: #08172f var(--z-noche) center 28% / cover no-repeat;
  box-shadow: 0 16px 40px rgba(5, 15, 35, 0.2);
}
.theme-z-900 .z-access-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(2,8,22,.08) 20%,rgba(2,8,22,.2) 42%,rgba(2,8,22,.88)); z-index: -1; }
.theme-z-900 .z-access-art-top { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.theme-z-900 .z-glass-label { display: inline-flex; gap: 9px; align-items: center; padding: 10px 16px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 12px; border-radius: 999px; }
.theme-z-900 .z-glass-label .z-icon { width: 16px; height: 16px; }
.theme-z-900 .z-edition { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; color: #e4ecff; white-space: nowrap; }
.theme-z-900 .z-access-story { padding: 35px 12px 15px; max-width: 540px; }
.theme-z-900 .z-access-story .z-overline { color: #c1cfe8; }
.theme-z-900 .z-access-story h2 { font-size: clamp(40px,4vw,62px); margin: 20px 0; line-height: 1.05; }
.theme-z-900 .z-access-story p { color: #c1cde1; max-width: 360px; line-height: 1.7; font-size: 15px; }
.theme-z-900 .z-access-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.theme-z-900 .z-access-pills span { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); padding: 8px 14px; border-radius: 999px; font-size: 12px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.theme-z-900 .z-access-pills .z-icon { width: 15px; height: 15px; }
.theme-z-900 .z-access-panel { min-width: 0; display: flex; flex-direction: column; padding: 20px 32px 0; }
.theme-z-900 .z-access-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.theme-z-900 .z-back { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-height: 44px; color: var(--text-2); font-weight: 550; transition: color .18s; }
.theme-z-900 .z-back:hover { color: var(--primary); }
.theme-z-900 .z-back .z-icon { width: 17px; height: 17px; }
.theme-z-900 .z-access-content { width: 100%; max-width: 440px; margin: auto; padding: 36px 0 24px; }
.theme-z-900 .z-access-item { display: block; margin: 0 auto 16px; width: 88px; height: 88px; object-fit: contain; }
.theme-z-900 .z-segment { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 4px; border-radius: 14px; background: color-mix(in srgb,var(--text) 6%,var(--bg)); border: 1px solid var(--z-line); margin-bottom: 28px; }
.theme-z-900 .z-segment a { text-align: center; display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 13.5px; font-weight: 600; border-radius: 11px; color: var(--text-2); transition: all .18s; }
.theme-z-900 .z-segment [aria-current] { color: var(--text); background: var(--surface); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.theme-z-900 .z-access-content h1 { font-size: clamp(32px,2.8vw,42px); line-height: 1.15; letter-spacing: -.05em; }
.theme-z-900 .z-access-sub { color: var(--text-2); font-size: 14px; margin: 10px 0 28px; }
.theme-z-900 .z-form { display: grid; gap: 18px; }
.theme-z-900 .z-field { min-width: 0; }
.theme-z-900 .z-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.theme-z-900 .z-field label span { font-size: 12px; font-weight: 400; color: var(--text-2); margin-left: 6px; }
.theme-z-900 .z-field input {
  width: 100%; min-height: 52px; min-width: 0; padding: 12px 16px;
  color: var(--text); background: var(--surface);
  border: 1px solid color-mix(in srgb,var(--text) 18%,transparent);
  border-radius: 14px; font-size: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: all .2s ease;
}
.theme-z-900 .z-field input::placeholder { color: var(--text-2); opacity: .75; font-size: 14px; }
.theme-z-900 .z-field input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent); }
.theme-z-900 .z-password { position: relative; }
.theme-z-900 .z-password input { padding-right: 52px; }
.theme-z-900 .z-reveal {
  position: absolute; right: 4px; top: 4px; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: 10px;
  color: var(--text-2); background: transparent; transition: all .18s;
}
.theme-z-900 .z-reveal[hidden] { display: none !important; }
.theme-z-900 .z-reveal[aria-pressed="true"] { color: var(--primary); background: var(--z-soft); }
.theme-z-900 .z-form-help { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; color: var(--primary); font-size: 12.5px; font-weight: 550; margin-top: -12px; }
.theme-z-900 .z-access-alt { font-size: 13px; color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 6px; margin-top: 20px; }
.theme-z-900 .z-access-alt a { color: var(--primary); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.theme-z-900 .z-access-footnote { border-top: 1px solid var(--z-line); margin-top: 24px; padding-top: 22px; text-align: center; color: var(--text-2); font-size: 12px; }
.theme-z-900 .z-access-footnote .z-icon { width: 14px; height: 14px; margin-right: 5px; }
.theme-z-900 .z-access-panel .z-footer { width: 100%; padding: 16px 0 0; font-size: 12px; gap: 8px; }
.theme-z-900 .z-access-panel .z-footer > span { display: none; }
.theme-z-900 .z-access-panel .z-footer nav { width: 100%; justify-content: center; }
.theme-z-900 .z-access-register .z-access-content { max-width: 490px; }
.theme-z-900 .z-register-kicker { margin-bottom: 10px; color: var(--primary); }
.theme-z-900 .z-access-register .z-form { gap: 16px; }
.theme-z-900 .z-access-register .z-access-sub { margin-bottom: 24px; }
.theme-z-900 .z-form-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.theme-z-900 .z-form-terms { color: var(--text-2); font-size: 12px; line-height: 1.8; }
.theme-z-900 .z-form-terms a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 10px; }

/* =====================================================================
   WORKSPACE (SIDEBAR & TOPBAR)
   ===================================================================== */
.theme-z-900 .z-sidebar {
  display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-width); height: 100dvh; z-index: 40; padding: 28px 20px 16px;
  background: var(--surface); border-right: 1px solid var(--z-line);
}
.theme-z-900 .z-sidebar > .z-brand { padding: 0 8px 24px; flex-shrink: 0; }
.theme-z-900 :is(.sidebar-close, .z-close),
.theme-z-900 .z-sidebar :is(.sidebar-close, .z-close, button[data-close-sidebar]),
.theme-z-900 :where(.z-sidebar) button.icon-button.sidebar-close {
  display: none !important; width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  border-radius: 50%; border: 1px solid var(--z-line);
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
  color: var(--text-2); align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s ease;
}
.theme-z-900 :is(.sidebar-close, .z-close):hover {
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
  color: var(--text); border-color: var(--z-line-strong);
}
.theme-z-900 :is(.sidebar-close, .z-close):active { transform: scale(0.92); }
.theme-z-900 .z-profile {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--z-line); border-radius: 18px;
  margin-bottom: 14px; flex-shrink: 0; transition: all .18s;
}
.theme-z-900 .z-profile:hover { border-color: var(--z-line-strong); background: var(--z-soft); }
.theme-z-900 .z-avatar {
  display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 50%; color: var(--primary);
  background: color-mix(in srgb,var(--primary) 12%,var(--surface)); font-weight: 700;
}
.theme-z-900 .z-profile > span:nth-child(2) { min-width: 0; flex: 1; }
.theme-z-900 .z-profile b { display: block; font-size: 13.5px; }
.theme-z-900 .z-profile small { color: var(--text-2); font-size: 12px; }
.theme-z-900 .z-profile > .z-icon { width: 15px; }
.theme-z-900 .z-sidebar-nav {
  flex: 1; overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: none; padding: 4px;
}
.theme-z-900 .z-sidebar-nav .z-menu-link:focus-visible { outline-offset: -3px; }
.theme-z-900 .z-nav-label { color: var(--text-2); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; padding: 20px 12px 8px; }
.theme-z-900 .z-menu-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 44px; margin: 2px 0;
  border-radius: 12px; color: var(--text-2); font-size: 13.5px; font-weight: 550;
  transition: all .18s ease;
}
.theme-z-900 .z-menu-link > span:nth-child(2) { flex: 1; min-width: 0; }
.theme-z-900 .z-menu-link.active { color: var(--primary); background: var(--z-soft); font-weight: 650; }
.theme-z-900 .z-active-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 5px; }
.theme-z-900 .z-count { background: var(--primary); color: var(--on-primary); border-radius: 999px; font-size: 11.5px; font-weight: 700; min-width: 22px; text-align: center; padding: 2px 6px; }
.theme-z-900 .z-category-link .z-icon { width: 16px; height: 16px; margin: 0 2px; }
.theme-z-900 .z-sidebar-bottom { padding-top: 18px; flex-shrink: 0; }
.theme-z-900 .z-help-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--z-line); border-radius: 18px; background: var(--bg);
  transition: all .18s;
}
.theme-z-900 .z-help-card:hover { border-color: var(--z-line-strong); background: var(--surface); }
.theme-z-900 .z-help-card .z-icon-tile { width: 36px; height: 36px; flex-basis: 36px; border-radius: 12px; }
.theme-z-900 .z-help-card b { display: block; font-size: 12.5px; }
.theme-z-900 .z-help-card small { font-size: 12px; color: var(--text-2); }
.theme-z-900 .z-help-card > .z-icon { margin-left: auto; width: 13px; }
.theme-z-900 .z-sidebar-credit { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 0; color: var(--text-2); font-size: 12px; }
.theme-z-900 .z-sidebar-credit a { display: inline-flex; align-items: center; min-height: 44px; }

/* Main Workspace Layout */
.theme-z-900 .workspace-main { margin-left: var(--sidebar-width); min-width: 0; }
.theme-z-900 :is(.workspace-page, .z-workspace-content) {
  padding: 0 var(--gutter);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.theme-z-900 .workspace-page > :is(.workspace-page, .z-workspace-content),
.theme-z-900 .z-workspace-content > :is(.workspace-page, .z-workspace-content) {
  padding-inline: 0 !important;
}
.theme-z-900 :is(.workspace-topbar, .z-topbar) {
  position: sticky; top: 0; z-index: 25; min-height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px var(--gutter);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--z-line);
}
.theme-z-900 .icon-button:not(.sidebar-close):not(.z-close):not([data-close-sidebar]):not(.sidebar-toggle):not(#sidebarToggle):not([data-open-sidebar]) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0;
  border-radius: 12px; border: 1px solid var(--z-line);
  background: var(--surface); color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: all .18s ease; cursor: pointer;
}
.theme-z-900 .icon-button:not(.sidebar-close):not(.z-close):not([data-close-sidebar]):not(.sidebar-toggle):not(#sidebarToggle):not([data-open-sidebar]):hover {
  border-color: var(--z-line-strong);
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}
.theme-z-900 .icon-button:not(.sidebar-close):not(.z-close):not([data-close-sidebar]):not(.sidebar-toggle):not(#sidebarToggle):not([data-open-sidebar]):active { transform: scale(0.94); }

/* Sidebar Toggle: En PC / Escritorio (> 960px) NUNCA debe aparecer. Solo visible en móvil */
.theme-z-900 .sidebar-toggle,
.theme-z-900 #sidebarToggle,
.theme-z-900 [data-open-sidebar],
.theme-z-900 .icon-button.sidebar-toggle,
.theme-z-900 .z-topbar-title :is(.sidebar-toggle, #sidebarToggle, [data-open-sidebar]),
.theme-z-900 :is(.z-topbar, .workspace-topbar, header, nav) :is(.sidebar-toggle, #sidebarToggle, [data-open-sidebar]) {
  display: none !important;
}

.theme-z-900 .z-topbar-title { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 15px; font-weight: 600; }
.theme-z-900 .z-search {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 16px; min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 16px; background: color-mix(in srgb, var(--text) 3.5%, var(--surface));
  color: var(--text-2); box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
  transition: all .2s ease;
}
.theme-z-900 .z-search:focus-within {
  border-color: var(--primary); background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent), 0 4px 14px rgba(0,0,0,0.04);
}
.theme-z-900 .z-search input {
  min-width: 0; width: 100%; border: 0; background: transparent; color: var(--text); font-size: 14.5px; padding: 8px 0; outline: none;
}
.theme-z-900 .z-search button {
  display: grid; place-items: center; width: 38px; height: 38px; border: 0;
  background: transparent; color: var(--text-2); border-radius: 11px; flex: 0 0 38px;
  transition: all .18s;
}
.theme-z-900 .z-search button:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.theme-z-900 .workspace-search { flex: 1; max-width: 440px; }
.theme-z-900 .mobile-search { display: none; }
.theme-z-900 .z-topbar-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.theme-z-900 .z-topbar-balance {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 6px 14px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--z-line); box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: all .18s;
}
.theme-z-900 .z-topbar-balance:hover { border-color: var(--z-line-strong); transform: translateY(-1px); }
.theme-z-900 .z-topbar-balance small { display: block; font-size: 11.5px; color: var(--text-2); font-weight: 550; }
.theme-z-900 .z-topbar-balance b { font-size: 14px; font-variant-numeric: tabular-nums; }
.theme-z-900 .z-topbar-balance > .z-icon { color: var(--primary); }

.theme-z-900 .z-workspace-content {
  max-width: 1480px;
  margin: auto;
  padding-top: 32px;
  padding-inline: var(--gutter);
}
.theme-z-900 .workspace-page > .z-workspace-content {
  padding-inline: 0 !important;
}
.theme-z-900 .z-workspace-content > .z-section:first-child { margin-top: 12px; }

/* Dashboard Hero */
.theme-z-900 .z-dashboard-hero {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(32px, 4vw, 46px) clamp(28px, 3.5vw, 48px);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 28px;
  background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--primary) 5%, var(--surface)) 100%);
  box-shadow: 0 8px 30px rgba(25, 45, 85, 0.035), inset 0 1px 0 #ffffff;
  overflow: hidden;
}
.theme-z-900 .z-dashboard-hero h1 { font-size: clamp(28px,3vw,42px); margin: 16px 0 12px; }
.theme-z-900 .z-dashboard-hero p { font-size: 14.5px; color: var(--text-2); margin-bottom: 24px; }
.theme-z-900 .z-dashboard-spark { width: 200px; height: 200px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 14px 20px rgba(7, 91, 219, 0.15)); }

/* Dashboard Widgets & Wallet Card (Apple Card/Wallet Style) */
.theme-z-900 .z-dashboard-widgets { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 20px; margin-top: 20px; }
.theme-z-900 .z-wallet-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  padding: 26px 28px; border-radius: 24px;
  background: linear-gradient(135deg, #0b68f5 0%, #0546af 100%);
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 14px 34px -8px rgba(7, 91, 219, 0.38), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform .25s ease, box-shadow .25s ease;
}
.theme-z-900 .z-wallet-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.22), transparent 45%),
              radial-gradient(circle at 15% 85%, rgba(0, 0, 0, 0.15), transparent 50%);
  pointer-events: none;
}
.theme-z-900 .z-wallet-card > span { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; opacity: .9; }
.theme-z-900 .z-wallet-card > b { font-size: clamp(30px, 3.8vw, 38px); line-height: 1.15; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.theme-z-900 .z-wallet-card > span:last-child { justify-content: space-between; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
body.theme-z-900.store-workspace a.z-wallet-card:is(:hover,:focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -6px rgba(7, 91, 219, 0.48), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.theme-z-900 .z-widget {
  padding: 24px 26px; border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 24px; background: var(--surface);
  box-shadow: 0 6px 24px rgba(25, 45, 85, 0.035), inset 0 1px 0 #ffffff;
}
.theme-z-900 .z-widget h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 650; }
.theme-z-900 .z-support-widget { display: flex; gap: 20px; align-items: center; }
.theme-z-900 .z-support-widget img { width: 95px; height: 95px; object-fit: contain; }
.theme-z-900 .z-support-widget p { color: var(--text-2); font-size: 13.5px; margin-top: 8px; line-height: 1.5; }
.theme-z-900 .z-expiring { list-style: none; padding: 10px 0 12px; margin: 0; display: grid; gap: 9px; }
.theme-z-900 .z-expiring li {
  display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 13.5px;
  padding: 8px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 4%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
}
.theme-z-900 .z-expiring span {
  white-space: nowrap; color: var(--primary); font-size: 12px; font-weight: 650;
  padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.theme-z-900 .z-featured-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.theme-z-900 .z-featured {
  display: flex; align-items: center; gap: 18px; border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  background: var(--surface); border-radius: 22px; padding: 18px;
  box-shadow: 0 4px 18px rgba(25, 45, 85, 0.03), inset 0 1px 0 #ffffff;
  transition: all .2s ease;
}
.theme-z-900 .z-featured:hover {
  transform: translateY(-2px); box-shadow: 0 12px 28px rgba(25, 45, 85, 0.06);
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
}
.theme-z-900 .z-featured img, .theme-z-900 .z-featured-initial { width: 62px; height: 62px; object-fit: contain; border-radius: 16px; }
.theme-z-900 .z-featured-initial { display: grid; place-items: center; background: var(--z-soft); color: var(--primary); font-size: 28px; font-weight: 750; flex: 0 0 62px; }
.theme-z-900 .z-featured > span:nth-child(2) { display: grid; gap: 3px; flex: 1; min-width: 0; }
.theme-z-900 .z-featured small { color: var(--text-2); font-size: 12px; font-weight: 550; }
.theme-z-900 .z-featured b { font-size: 15px; line-height: 1.3; }
.theme-z-900 .z-featured > span > span { font-size: 13.5px; color: var(--primary); font-weight: 650; font-variant-numeric: tabular-nums; }
.theme-z-900 .z-featured > .z-icon { width: 15px; color: var(--text-2); }
.theme-z-900 .z-catalog-count { font-size: 12.5px; color: var(--text-2); font-weight: 550; white-space: nowrap; padding-bottom: 3px; }
.theme-z-900 .z-results { color: var(--text-2); font-size: 14px; margin-bottom: 20px; }

/* =====================================================================
   NATIVE NETWILONE SCREENS (MI CUENTA, COMPRAS, PEDIDOS, SOPORTE)
   ===================================================================== */
.theme-z-900 :where(.card, .pl-fila, .pd-item, .balance-card, .support-ticket-row, .notification-card, .combo-card) {
  background-color: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  border-radius: 22px;
  box-shadow: 0 4px 20px rgba(25, 45, 85, 0.035), inset 0 1px 0 #ffffff;
}
.theme-z-900 :where(.pd-dato, .pd-dato-v, .pd-mensaje, .notification-card, .support-message) {
  min-width: 0; overflow-wrap: anywhere;
}
.theme-z-900 :where(.account-quicklink, .product-pick, .btn) {
  border-radius: 14px; min-height: 44px;
}
.theme-z-900 .table-wrap { max-width: 100%; overflow-x: auto; }
.theme-z-900 .workspace-footer { padding-bottom: 36px; }

/* =====================================================================
   Combo Builder & Drawer (Arma tu combo)
   ===================================================================== */
/* En la pantalla del armador, ocultar el menú inferior para evitar colisión con el resumen del combo */
body:has(.builder, .builder-sum, #builderSum) .mobile-dock,
body.theme-z-900:has(.builder, .builder-sum, #builderSum) :is(.mobile-dock, .z-dock) {
  display: none !important;
}

/* Control estricto de despliegue en móvil: cerrado = oculto, abierto = visible */
@media (max-width: 940px) {
  .theme-z-900 .builder-sum:not(.is-open) .sum-panel {
    display: none !important;
  }
  .theme-z-900 .builder-sum.is-open .sum-panel {
    display: flex !important;
    flex-direction: column !important;
  }
  .theme-z-900 .builder-sum.is-open .sum-quick {
    display: none !important;
  }
  .theme-z-900 .builder-sum {
    background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
    box-shadow: 0 -16px 44px rgba(15, 25, 45, 0.16) !important;
    border-radius: 26px 26px 0 0 !important;
  }
  .theme-z-900 .sum-handle {
    border-radius: 26px 26px 0 0 !important;
    padding-top: 14px !important;
    padding-bottom: 10px !important;
    cursor: pointer !important;
  }
  .theme-z-900 .sum-panel {
    padding-inline: clamp(14px, 4vw, 20px) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  /* Telón translúcido de fondo cuando el desplegable está abierto en móvil */
  body.theme-z-900:has(.builder-sum.is-open)::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 25, 45, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 90;
    pointer-events: none;
  }
}

/* 1. Tarjeta de Saldo Nativa (.balance-card) */
.theme-z-900 .balance-card {
  position: relative; isolation: isolate;
  padding: 28px;
  background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--primary) 4%, var(--surface)) 100%);
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  border-radius: 24px;
  box-shadow: 0 8px 28px rgba(25, 45, 85, 0.04), inset 0 1px 0 #ffffff;
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 20px;
}
.theme-z-900 .balance-card small,
.theme-z-900 .balance-card .balance-label {
  font-size: 13px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-2);
}
.theme-z-900 .balance-card b,
.theme-z-900 .balance-card .balance-amount {
  font-size: clamp(34px, 5vw, 44px); font-weight: 750;
  letter-spacing: -.05em; line-height: 1.1; color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* 2. Botones Globales (.btn, .btn-primary) */
.theme-z-900 .btn,
.theme-z-900 button.btn,
.theme-z-900 a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 11px 22px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.theme-z-900 .btn:active { transform: scale(0.98); }
.theme-z-900 .btn.btn-primary,
.theme-z-900 .balance-card .btn,
.theme-z-900 .balance-card button {
  background: linear-gradient(180deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 88%, #000) 100%);
  color: var(--on-primary, #ffffff);
  border: 1px solid color-mix(in srgb, var(--primary) 80%, #000);
  box-shadow: 0 6px 18px -3px color-mix(in srgb, var(--primary) 40%, transparent), inset 0 1px 0 rgba(255,255,255,0.25);
}
.theme-z-900 .btn.btn-primary:hover,
.theme-z-900 .balance-card .btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 24px -4px color-mix(in srgb, var(--primary) 50%, transparent);
}
.theme-z-900 .btn:not(.btn-primary) {
  background: var(--surface); color: var(--text);
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
}
.theme-z-900 .btn:not(.btn-primary):hover {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
  border-color: color-mix(in srgb, var(--text) 20%, transparent);
}
.theme-z-900 .btn-sm { min-height: 38px; padding: 7px 16px; font-size: 13px; }

/* 3. Resumen de Cuenta (.account-cards) */
.theme-z-900 .account-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.theme-z-900 .account-cards > :where(div, .card) {
  padding: 22px; border-radius: 22px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow: 0 4px 18px rgba(25, 45, 85, 0.03), inset 0 1px 0 #ffffff;
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
}
.theme-z-900 .account-cards b,
.theme-z-900 .account-cards .card-num {
  font-size: 32px; font-weight: 750; letter-spacing: -.05em; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.theme-z-900 .account-cards small,
.theme-z-900 .account-cards .card-label {
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.theme-z-900 .account-cards .btn {
  width: 100%; border-radius: 14px; min-height: 40px; font-size: 13px;
}

/* 4. Accesos Rápidos (.account-quicklink) */
.theme-z-900 .account-quicklink,
.theme-z-900 a.account-quicklink {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(25, 45, 85, 0.025), inset 0 1px 0 #ffffff;
  color: var(--text); text-decoration: none;
  transition: all .2s ease;
}
.theme-z-900 .account-quicklink:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  background: color-mix(in srgb, var(--primary) 2%, var(--surface));
  transform: translateX(2px);
}
.theme-z-900 .account-quicklink-icon,
.theme-z-900 .account-quicklink > svg,
.theme-z-900 .account-quicklink > i:first-child {
  width: 36px; height: 36px; border-radius: 11px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary); display: grid; place-items: center; flex-shrink: 0;
}

/* =====================================================================
   5. Historial de Compras (.pl-lista, .pl-fila) — Rediseño Apple Wallet
   ===================================================================== */
.theme-z-900 .pl-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.theme-z-900 .pl-fila,
.theme-z-900 a.pl-fila {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 22px !important;
  border-radius: 20px !important;
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important;
  box-shadow: 0 3px 14px rgba(25, 45, 85, 0.025), inset 0 1px 0 #ffffff !important;
  color: var(--text) !important;
  text-decoration: none !important;
  transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .2s ease, border-color .2s ease, background-color .2s ease !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.theme-z-900 .pl-fila:hover,
.theme-z-900 a.pl-fila:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(7, 91, 219, 0.06), inset 0 1px 0 #ffffff !important;
  border-color: color-mix(in srgb, var(--primary) 28%, transparent) !important;
  background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--primary) 2.5%, var(--surface)) 100%) !important;
}

.theme-z-900 .pl-fila:active,
.theme-z-900 a.pl-fila:active {
  transform: scale(0.99) !important;
}

/* 5.1 Carátula del producto (.pl-caras) */
.theme-z-900 .pl-caras {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.theme-z-900 .pl-caras img,
.theme-z-900 .pl-caras span {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
  object-fit: cover !important;
  background: color-mix(in srgb, var(--primary) 4%, var(--bg)) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  flex-shrink: 0 !important;
}
.theme-z-900 .pl-caras img:not(:first-child),
.theme-z-900 .pl-caras span:not(:first-child) {
  margin-left: -16px !important;
  border: 2px solid var(--surface) !important;
}
.theme-z-900 .pl-mas {
  font-size: 11.5px !important;
  font-weight: 750 !important;
  color: var(--primary) !important;
  display: grid !important;
  place-items: center !important;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface)) !important;
}

/* 5.2 Columna Central de Información (Título + Metadatos/Fecha) */
.theme-z-900 .pl-fila > :where(div:not(.pl-caras):not(.pl-der):not(.pl-precio), .pl-info, .pl-cuerpo, .pl-body) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
  overflow: hidden !important;
}
/* Compatibilidad con contenedor anidado en vista previa */
.theme-z-900 .pl-fila > div:first-child:has(.pl-caras) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  overflow: hidden !important;
}
.theme-z-900 .pl-fila > div:first-child:has(.pl-caras) > div:last-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  overflow: hidden !important;
}

.theme-z-900 .pl-fila :where(b, strong, h3, h4, .pl-titulo, .pl-title):not(.pl-precio):not(.pl-der b):not(.pl-der strong):not(div:last-child > b) {
  font-size: 15.5px !important;
  font-weight: 750 !important;
  color: var(--text) !important;
  line-height: 1.25 !important;
  letter-spacing: -.015em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

.theme-z-900 .pl-fila :where(small, p, .pl-sub, .pl-meta, .pl-desc) {
  font-size: 12.5px !important;
  color: var(--text-2) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* 5.3 Columna Derecha (Precio + Badge de Estado) */
.theme-z-900 .pl-der,
.theme-z-900 .pl-fila > :where(.pl-der, div:last-child:not(.pl-caras)) {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  text-align: right !important;
  border: none !important;
  border-top: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.theme-z-900 .pl-fila :where(.pl-precio, .pl-der b, .pl-der strong, div:last-child:not(.pl-caras) > b:first-child) {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.15 !important;
}

/* Badges de estado Apple Pill */
.theme-z-900 .pl-tag,
.theme-z-900 .badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3.5px 9px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
  color: var(--primary) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.theme-z-900 .badge-ok {
  background: color-mix(in srgb, #10b981 12%, var(--surface)) !important;
  color: #0d8058 !important;
  border: 1px solid color-mix(in srgb, #10b981 24%, transparent) !important;
}
.theme-z-900 .badge-warn {
  background: color-mix(in srgb, #f59e0b 12%, var(--surface)) !important;
  color: #b45309 !important;
  border: 1px solid color-mix(in srgb, #f59e0b 24%, transparent) !important;
}
.theme-z-900 .badge-out {
  background: color-mix(in srgb, #ef4444 12%, var(--surface)) !important;
  color: #b91c1c !important;
  border: 1px solid color-mix(in srgb, #ef4444 24%, transparent) !important;
}

/* 6. Detalle de Pedido y Migas de Pan (.crumbs, .pd-*) */
.theme-z-900 .crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  font-size: 13px; color: var(--text-2); margin-bottom: 16px; padding: 2px 0;
}
.theme-z-900 .crumbs a {
  color: var(--primary); text-decoration: none; font-weight: 550;
  transition: opacity .18s ease;
}
.theme-z-900 .crumbs a:hover { text-decoration: underline; opacity: .85; }

/* =====================================================================
   Ficha de Producto (Product Detail Page) — Estética Apple Premium
   ===================================================================== */
.theme-z-900 .product-detail,
.theme-z-900 .store-workspace .product-detail {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 430px) !important;
  gap: clamp(24px, 3.5vw, 44px) !important;
  align-items: start !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
}

.theme-z-900 .detail-main {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 24px !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.theme-z-900 .detail-main::after,
.theme-z-900 .detail-lede::after {
  display: none !important;
}

/* Vitrina de Imagen de Producto — Escenario de Cristal Apple */
.theme-z-900 .detail-art,
.theme-z-900 .store-workspace .detail-art {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  align-self: stretch !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  max-height: 440px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: radial-gradient(120% 120% at 50% 10%, color-mix(in srgb, var(--item-accent, var(--primary)) 12%, var(--surface)) 0%, var(--surface) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  box-sizing: border-box !important;
}

/* Despliegue de fondo difuminado ambiental */
.theme-z-900 .detail-art > img.product-shot-bg {
  position: absolute !important;
  inset: -10% !important;
  width: 120% !important;
  height: 120% !important;
  object-fit: cover !important;
  filter: blur(38px) saturate(180%) !important;
  transform: scale(1.15) !important;
  opacity: 0.55 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Imagen nítida principal */
.theme-z-900 .detail-art > img.product-shot {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 24px !important;
  z-index: 1 !important;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.22)) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.theme-z-900 .detail-art:hover > img.product-shot {
  transform: scale(1.03) !important;
}

/* Encabezado y Descripción del Producto */
.theme-z-900 .detail-lede {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Pastilla de Categoría (Pill Apple) */
.theme-z-900 .detail-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 13px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  background: color-mix(in srgb, var(--primary) 9%, var(--surface)) !important;
  color: var(--primary) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent) !important;
  width: fit-content !important;
  box-sizing: border-box !important;
}

.theme-z-900 .detail-kicker::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--primary) !important;
}

.theme-z-900 .store-workspace .detail-lede h1,
.theme-z-900 .detail-lede h1 {
  margin: 0 !important;
  font-size: clamp(26px, 2.3vw, 36px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  color: var(--text) !important;
  line-height: 1.15 !important;
}

.theme-z-900 .store-workspace .detail-lede p,
.theme-z-900 .detail-desc p {
  margin: 0 !important;
  color: var(--text-2) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* Botón "Leer más" en la descripción */
.theme-z-900 .detail-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 10px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--primary) !important;
  color: var(--on-primary, #ffffff) !important;
  border: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 32%, transparent) !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.theme-z-900 .detail-more:hover {
  opacity: 0.92 !important;
  transform: translateY(-1px) !important;
}

/* Ficha Técnica (Duración, Garantía, Entrega) */
.theme-z-900 .store-workspace .detail-specs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  background: color-mix(in srgb, var(--surface) 80%, var(--bg)) !important;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important;
  border-radius: 18px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.theme-z-900 .store-workspace .detail-specs .k {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--faint) !important;
  margin-bottom: 4px !important;
}

.theme-z-900 .store-workspace .detail-specs .v {
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

/* Nota de Seguridad y Garantía */
.theme-z-900 .detail-note {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface)) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent) !important;
  color: var(--text-2) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Módulo de Compra (.buy-card) — Tarjeta Flotante Apple */
.theme-z-900 .buy-card {
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04), inset 0 1px 0 #ffffff !important;
  padding: 26px 24px !important;
}

/* Adaptación Móvil */
@media (max-width: 960px) {
  .theme-z-900 .product-detail,
  .theme-z-900 .store-workspace .product-detail {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .theme-z-900 .detail-art,
  .theme-z-900 .store-workspace .detail-art {
    aspect-ratio: 4 / 3 !important;
    max-height: 320px !important;
    border-radius: 20px !important;
  }

  .theme-z-900 .detail-art > img.product-shot {
    padding: 18px !important;
  }

  .theme-z-900 .store-workspace .detail-specs {
    padding: 14px 16px !important;
    gap: 10px !important;
  }

  .theme-z-900 .store-workspace .detail-specs .v {
    font-size: 13px !important;
  }
}

.theme-z-900 .pd-cabeza {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--primary) 3.5%, var(--surface)) 100%);
  padding: 24px 28px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(25, 45, 85, 0.03), inset 0 1px 0 #ffffff;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.theme-z-900 .pd-cabeza > div:not(.pd-cabeza-pago) {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.theme-z-900 .pd-cabeza h1 {
  font-size: clamp(22px, 3.2vw, 28px);
  margin: 0;
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--text);
}
.theme-z-900 .pd-meta {
  font-size: 13.5px;
  color: var(--text-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

/* Tarjeta / Píldora de Pago (.pd-cabeza-pago) — Estilo Transacción Apple Pay */
.theme-z-900 .pd-cabeza-pago,
.theme-z-900 .pd-cabeza .pd-cabeza-pago {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding: 14px 22px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--primary) 4.5%, var(--surface-2, #f8f9fb));
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 14px rgba(7, 91, 219, 0.04);
  box-sizing: border-box;
  text-align: right;
  margin-bottom: 0;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.theme-z-900 .pd-cabeza-pago :is(span, small, b, strong) {
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.theme-z-900 .pd-cabeza-pago > :is(span, small):first-child {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}
.theme-z-900 .pd-cabeza-pago > :is(span, small):first-child::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, #10b981 25%, transparent) !important;
  flex-shrink: 0 !important;
}
.theme-z-900 .pd-cabeza-pago > b {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  letter-spacing: -.03em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}
/* Píldora de descuento / ahorro en combos */
.theme-z-900 .pd-cabeza-pago > :is(small, span):last-child:not(:first-child) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface)) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent) !important;
  padding: 3.5px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
}
.theme-z-900 .pd-cabeza-pago > :is(small, span):last-child:not(:first-child)::before {
  display: none !important;
  content: none !important;
}

/* Tarjeta destacada "Copiar todo el pedido" (.pd-copiar) — Rediseño Apple Ultra Premium */
.theme-z-900 .pd-copiar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  margin-block: 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 4.5%, var(--surface)) 0%, color-mix(in srgb, var(--primary) 9.5%, var(--surface)) 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  box-shadow: 0 6px 24px rgba(7, 91, 219, 0.06), inset 0 1px 0 #ffffff;
  box-sizing: border-box;
  text-decoration: none;
  cursor: default;
  transition: border-color .25s ease, box-shadow .25s ease;
}

/* Sutil resplandor de luz Apple en la esquina */
.theme-z-900 .pd-copiar::after {
  content: "";
  position: absolute;
  top: -45px;
  right: -45px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Bloque contenedor de textos */
.theme-z-900 .pd-copiar > :where(div, .pd-copiar-info, .pd-copiar-body, span:not(.btn):not(button)) {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Título de la tarjeta ("Llévate todo de una vez") */
.theme-z-900 .pd-copiar :where(h2, h3, h4, strong, b, .pd-copiar-title, .pd-copiar-titulo) {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Párrafo explicativo */
.theme-z-900 .pd-copiar :where(p, small, .pd-copiar-desc, .pd-copiar-sub) {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
}

/* Botón de acción dentro de la tarjeta ("Copiar todo") */
.theme-z-900 .pd-copiar :is(button, .btn, a.btn, [type="button"], .pd-copiar-btn) {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #0b68f5 0%, #0546af 100%) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
  border: 1px solid color-mix(in srgb, var(--primary) 80%, #000) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 36%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.theme-z-900 .pd-copiar :is(button, .btn, a.btn, [type="button"], .pd-copiar-btn):hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 7px 20px color-mix(in srgb, var(--primary) 48%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.theme-z-900 .pd-copiar :is(button, .btn, a.btn, [type="button"], .pd-copiar-btn):active {
  transform: scale(0.97) !important;
}

.theme-z-900 .pd-copiar :is(button, .btn, a.btn, [type="button"], .pd-copiar-btn) :where(i, svg, .z-icon, .ui-icon) {
  font-size: 15px; width: 15px; height: 15px;
}

.theme-z-900 .pd-item {
  border-radius: 20px; border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  background: var(--surface); padding: 18px 20px; margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.025);
}

/* 7. Formularios y Tarjetas Generales (.field, .card) */
.theme-z-900 .card {
  border-radius: 24px; padding: 24px;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  background: var(--surface);
  box-shadow: 0 6px 24px rgba(25, 45, 85, 0.035), inset 0 1px 0 #ffffff;
}
.theme-z-900 .field { display: grid; gap: 8px; margin-bottom: 16px; }
.theme-z-900 .field label { font-size: 13px; font-weight: 600; color: var(--text); }
.theme-z-900 .field input,
.theme-z-900 .field select,
.theme-z-900 .field textarea,
.theme-z-900 .store-workspace input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], .pick-qty)),
.theme-z-900 .store-workspace select:where(:not([multiple])) {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border-radius: 14px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: var(--surface); color: var(--text); font-size: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
}

.theme-z-900 .field input:focus,
.theme-z-900 .field select:focus,
.theme-z-900 .field textarea:focus,
.theme-z-900 .store-workspace input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], .pick-qty)):focus,
.theme-z-900 .store-workspace select:where(:not([multiple])):focus {
  border-color: var(--primary) !important; outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent) !important;
}

/* =====================================================================
   Radios y Checkboxes / Opciones de Variante (.variant-option)
   ===================================================================== */
.theme-z-900 input[type="radio"],
.theme-z-900 input[type="checkbox"],
.theme-z-900 .store-workspace input[type="radio"],
.theme-z-900 .store-workspace input[type="checkbox"] {
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.theme-z-900 input[type="radio"]:focus,
.theme-z-900 input[type="radio"]:active,
.theme-z-900 input[type="radio"]:checked,
.theme-z-900 input[type="radio"]:focus-visible,
.theme-z-900 input[type="checkbox"]:focus,
.theme-z-900 input[type="checkbox"]:active,
.theme-z-900 input[type="checkbox"]:checked,
.theme-z-900 input[type="checkbox"]:focus-visible,
.theme-z-900 .store-workspace input[type="radio"]:focus,
.theme-z-900 .store-workspace input[type="radio"]:active,
.theme-z-900 .store-workspace input[type="radio"]:checked,
.theme-z-900 .store-workspace input[type="radio"]:focus-visible,
.theme-z-900 .store-workspace input[type="checkbox"]:focus,
.theme-z-900 .store-workspace input[type="checkbox"]:active,
.theme-z-900 .store-workspace input[type="checkbox"]:checked,
.theme-z-900 .store-workspace input[type="checkbox"]:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Opciones de Variantes / Planes (.variant-option) */
.theme-z-900 .variant-option,
.theme-z-900 .store-workspace .buy-card .variant-option {
  border-radius: 14px !important;
  border: 1.5px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
  background: var(--surface) !important;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease !important;
}

.theme-z-900 .variant-option:hover,
.theme-z-900 .store-workspace .buy-card .variant-option:hover {
  border-color: color-mix(in srgb, var(--primary) 38%, transparent) !important;
  background: color-mix(in srgb, var(--primary) 2%, var(--surface)) !important;
}

.theme-z-900 .variant-option.is-selected,
.theme-z-900 .variant-option:has(input:checked),
.theme-z-900 .store-workspace .buy-card .variant-option:has(input:checked) {
  border-color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface)) !important;
  box-shadow: 0 0 0 1px var(--primary), 0 4px 14px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

.theme-z-900 .variant-option input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--primary) !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  flex: 0 0 18px !important;
}

.theme-z-900 .variant-option input[type="radio"]:focus,
.theme-z-900 .variant-option input[type="radio"]:active,
.theme-z-900 .variant-option input[type="radio"]:checked,
.theme-z-900 .variant-option input[type="radio"]:focus-visible {
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* =====================================================================
   Selectores de Cantidad / Steppers (.qty-picker, .qty-sm) — Cápsula Apple
   ===================================================================== */
.theme-z-900 .qty-picker,
.theme-z-900 .qty-sm,
.theme-z-900 .store-workspace .qty-picker {
  display: inline-flex !important;
  align-items: center !important;
  height: 38px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface) 82%, var(--bg)) !important;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent) !important;
  padding: 3px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.theme-z-900 .qty-picker:focus-within,
.theme-z-900 .qty-sm:focus-within,
.theme-z-900 .store-workspace .qty-picker:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent) !important;
  background: var(--surface) !important;
}

/* Botones (-) y (+) dentro del stepper */
.theme-z-900 .qty-picker button,
.theme-z-900 .qty-sm button,
.theme-z-900 .store-workspace .qty-picker button {
  width: 30px !important;
  height: 30px !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease !important;
}

.theme-z-900 .qty-picker button:hover,
.theme-z-900 .qty-sm button:hover,
.theme-z-900 .store-workspace .qty-picker button:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
  color: var(--primary) !important;
}

.theme-z-900 .qty-picker button:active,
.theme-z-900 .qty-sm button:active,
.theme-z-900 .store-workspace .qty-picker button:active {
  transform: scale(0.92) !important;
}

.theme-z-900 .qty-picker button:focus-visible,
.theme-z-900 .qty-sm button:focus-visible {
  outline: none !important;
}

/* Input numérico central — Elimina el doble borde, esquinas y desfases */
.theme-z-900 .qty-picker input,
.theme-z-900 .qty-sm input,
.theme-z-900 .store-workspace .qty-picker input,
.theme-z-900 input.pick-qty {
  width: 44px !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
}

.theme-z-900 .qty-picker input:focus,
.theme-z-900 .qty-sm input:focus,
.theme-z-900 .store-workspace .qty-picker input:focus,
.theme-z-900 input.pick-qty:focus,
.theme-z-900 .qty-picker input:focus-visible,
.theme-z-900 .qty-sm input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.theme-z-900 .qty-picker input::-webkit-outer-spin-button,
.theme-z-900 .qty-picker input::-webkit-inner-spin-button,
.theme-z-900 input.pick-qty::-webkit-outer-spin-button,
.theme-z-900 input.pick-qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* =====================================================================
   Arma tu Combo (.builder) — Tarjetas, Desplegables y Filtros Apple
   ===================================================================== */

/* Filas de Servicios (.pick-row) */
.theme-z-900 .pick-row,
.theme-z-900 .store-workspace .pick-row {
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent) !important;
  border-radius: 20px !important;
  padding: 14px 18px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02) !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.theme-z-900 .pick-row:hover,
.theme-z-900 .store-workspace .pick-row:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05) !important;
}

.theme-z-900 .pick-row.is-on,
.theme-z-900 .store-workspace .pick-row.is-on {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 5%, var(--surface)) 0%, var(--surface) 60%) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 10%, transparent) !important;
}

/* Miniatura del producto (.pick-img) */
.theme-z-900 .pick-img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: radial-gradient(120% 120% at 50% 10%, var(--surface-3) 0%, var(--surface-2) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 52px !important;
  position: relative !important;
}

.theme-z-900 .pick-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  border-radius: inherit !important;
}

/* Información del servicio */
.theme-z-900 .pick-body strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  display: block !important;
}

.theme-z-900 .pick-body .pick-meta {
  font-size: 12.5px !important;
  color: var(--text-2) !important;
  margin-top: 2px !important;
  display: block !important;
}

/* Píldora de Selección de Variante (.pick-variant select) */
.theme-z-900 .pick-variant select,
.theme-z-900 .store-workspace .pick-variant select {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  background-color: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent) !important;
  color: var(--text) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 6px 34px 6px 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  cursor: pointer !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23596579' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.theme-z-900 .pick-variant select:hover {
  border-color: color-mix(in srgb, var(--primary) 50%, transparent) !important;
  background-color: color-mix(in srgb, var(--primary) 3%, var(--surface)) !important;
}

.theme-z-900 .pick-variant select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}

/* Precio en la fila (.pick-price) */
.theme-z-900 .pick-price {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Fichas / Chips de servicios elegidos (.pick-chip) */
.theme-z-900 .pick-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface)) !important;
  color: var(--primary) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent) !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.theme-z-900 .pick-chip:hover {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface)) !important;
  border-color: var(--primary) !important;
}

/* Campo de búsqueda (#pickSearch / .search-field) */
.theme-z-900 .pick-tools .search-field {
  position: relative !important;
  width: 100% !important;
}

.theme-z-900 .search-field::before {
  content: "⌕" !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--muted) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.theme-z-900 .search-field input,
.theme-z-900 #pickSearch {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 999px !important;
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--text) 13%, transparent) !important;
  padding: 10px 20px 10px 44px !important;
  font-size: 14.5px !important;
  color: var(--text) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.theme-z-900 .search-field input:focus,
.theme-z-900 #pickSearch:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent) !important;
  outline: none !important;
}

/* Píldoras de Filtro de Categoría (.filters a) */
.theme-z-900 .filters a,
.theme-z-900 #pickCats a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: var(--text-2) !important;
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
  transition: all 0.16s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.theme-z-900 .filters a:hover,
.theme-z-900 #pickCats a:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface)) !important;
  color: var(--primary) !important;
  border-color: color-mix(in srgb, var(--primary) 25%, transparent) !important;
}

.theme-z-900 .filters a.active,
.theme-z-900 #pickCats a.active {
  background: var(--primary) !important;
  color: var(--on-primary, #ffffff) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent) !important;
}

/* =====================================================================
   Avisos / Toasts Flotantes Estilo iOS (Dynamic Island / Banner No Transparente)
   ===================================================================== */
:root {
  --toast-arriba: max(16px, env(safe-area-inset-top, 16px));
  --toast-ancho: 440px;
  --toast-radio: 999px;
  --toast-sombra: 0 16px 36px rgba(15, 25, 45, 0.16), 0 3px 8px rgba(15, 25, 45, 0.04);
  --toast-duracion: 4.2s;
}

/* Pila flotante de avisos estilo iOS (Notification Banner / Dynamic Island) */
.toast-stack,
.theme-z-900 .toast-stack,
:is(.store-workspace, .app-shell) .toast-stack,
[data-nw-toasts] {
  position: fixed !important;
  top: max(16px, env(safe-area-inset-top, 16px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  width: min(440px, calc(100vw - 28px)) !important;
  pointer-events: none !important;
}

/* Tarjeta de toast estilo iOS: 100% sólida (cero transparencias que filtren texto del fondo) */
.toast-stack > *,
.theme-z-900 .toast-stack > *,
:is(.store-workspace, .app-shell) .toast-stack > *,
.z-toast,
[data-nw-toast] {
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 14px 12px 12px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  opacity: 1 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 16px 36px rgba(15, 25, 45, 0.14), 0 3px 10px rgba(15, 25, 45, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  color: #111827 !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  animation: z-toast-slide-down .34s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes z-toast-slide-down {
  from { opacity: 0; transform: translateY(-18px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* En modo oscuro, fondo sólido oscuro iOS */
:is(.theme-dark, [data-theme="dark"], .color-oscuro) .toast-stack > *,
:is(.theme-dark, [data-theme="dark"], .color-oscuro) .z-toast {
  background: #1c1c1e !important;
  color: #f3f4f6 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  border-left-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* Ícono de Estado Estilo iOS Badge (30px vector, nunca apachurado) */
.z-toast-icon {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  flex: 0 0 30px !important;
  align-self: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14) !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.z-toast-icon svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  stroke: #ffffff !important;
}

.z-toast-icon .z-icon {
  width: 14px !important;
  height: 14px !important;
  --z-icon-stroke: #ffffff;
  filter: brightness(0) invert(1) !important;
}

.z-toast-success .z-toast-icon,
.alert-success .z-toast-icon,
.alert-ok .z-toast-icon {
  background: #34C759 !important;
  box-shadow: 0 3px 10px rgba(52, 199, 89, 0.32) !important;
}

.z-toast-error .z-toast-icon,
.alert-danger .z-toast-icon,
.alert-error .z-toast-icon {
  background: #FF3B30 !important;
  box-shadow: 0 3px 10px rgba(255, 59, 48, 0.32) !important;
}

.z-toast-warning .z-toast-icon,
.alert-warning .z-toast-icon {
  background: #FF9500 !important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.32) !important;
}

.z-toast-info .z-toast-icon,
.alert-info .z-toast-icon {
  background: #007AFF !important;
  box-shadow: 0 3px 10px rgba(0, 122, 255, 0.32) !important;
}

/* Ocultar ::before si el elemento trae su propio .z-toast-icon */
.theme-z-900 .toast-stack .alert:has(.z-toast-icon)::before,
.theme-z-900 .z-toast:has(.z-toast-icon)::before {
  display: none !important;
  content: none !important;
}

/* Fallback ::before cuando el HTML es la alerta nativa de Netwil (sin .z-toast-icon) */
.theme-z-900 .toast-stack .alert:not(:has(.z-toast-icon))::before {
  content: "" !important;
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background-size: 14px 14px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  flex: 0 0 30px !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.theme-z-900 .toast-stack .alert:not(:has(.z-toast-icon)):is(.alert-success, .alert-ok)::before {
  background-color: #34C759 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5'/%3E%3C/svg%3E") !important;
  box-shadow: 0 3px 10px rgba(52, 199, 89, 0.32) !important;
}

.theme-z-900 .toast-stack .alert:not(:has(.z-toast-icon)):is(.alert-danger, .alert-error)::before {
  background-color: #FF3B30 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") !important;
  box-shadow: 0 3px 10px rgba(255, 59, 48, 0.32) !important;
}

.theme-z-900 .toast-stack .alert:not(:has(.z-toast-icon)):is(.alert-warning)::before {
  background-color: #FF9500 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8 3.5v6M8 12.5v.5'/%3E%3C/svg%3E") !important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.32) !important;
}

.theme-z-900 .toast-stack .alert:not(:has(.z-toast-icon)):is(.alert-info)::before {
  background-color: #007AFF !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8 6.5v6M8 3.5v.5'/%3E%3C/svg%3E") !important;
  box-shadow: 0 3px 10px rgba(0, 122, 255, 0.32) !important;
}

/* Evitar el borde izquierdo grueso anticuado en la tarjeta de aviso */
.theme-z-900 .toast-stack .alert,
:is(.store-workspace, .app-shell) .toast-stack .alert {
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Cuerpo y jerarquía tipográfica estilo notificación iOS */
.z-toast-body,
.toast-stack .alert > span {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
  justify-content: center !important;
}

.z-toast-title,
.toast-stack .alert strong,
.toast-stack .alert b {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: -.01em !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.z-toast-text,
.toast-stack .alert > span {
  font-size: 12.5px !important;
  color: #4b5563 !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
}

:is(.theme-dark, [data-theme="dark"], .color-oscuro) .z-toast-title,
:is(.theme-dark, [data-theme="dark"], .color-oscuro) .toast-stack .alert strong,
:is(.theme-dark, [data-theme="dark"], .color-oscuro) .toast-stack .alert b {
  color: #ffffff !important;
}

:is(.theme-dark, [data-theme="dark"], .color-oscuro) .z-toast-text,
:is(.theme-dark, [data-theme="dark"], .color-oscuro) .toast-stack .alert > span {
  color: #9ca3af !important;
}

/* Botón cerrar estilo iOS */
.alert-cerrar,
.z-toast-close,
[data-nw-cerrar] {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: rgba(0, 0, 0, 0.05) !important;
  color: #6b7280 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  margin-left: auto !important;
  flex: 0 0 24px !important;
  align-self: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  transition: all .16s ease !important;
  padding: 0 !important;
}

.alert-cerrar svg,
.z-toast-close svg {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  stroke: currentColor !important;
}

.alert-cerrar:hover,
.z-toast-close:hover,
[data-nw-cerrar]:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #111827 !important;
  transform: scale(1.06) !important;
}

:is(.theme-dark, [data-theme="dark"], .color-oscuro) .alert-cerrar,
:is(.theme-dark, [data-theme="dark"], .color-oscuro) .z-toast-close {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #d1d5db !important;
}

:is(.theme-dark, [data-theme="dark"], .color-oscuro) .alert-cerrar:hover,
:is(.theme-dark, [data-theme="dark"], .color-oscuro) .z-toast-close:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Avisos fijos (Flashes que quedan sobre el contenido, ej. errores de formulario) */
.flashes,
.z-flashes {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
  width: 100% !important;
}
.flashes .alert,
.z-flashes .alert,
.z-alert-fijo {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  font-size: 14px !important;
  color: var(--text) !important;
}
.flashes :is(.alert-danger, .alert-error) {
  border-color: color-mix(in srgb, var(--danger) 28%, transparent) !important;
  background: color-mix(in srgb, var(--danger) 6%, var(--surface)) !important;
}

/* =====================================================================
   Pantalla de Verificación de Correo (OTP) — Desktop & Móvil
   ===================================================================== */
/* Estilos para template propio z-access-verify */
.z-access-verify .z-access-content {
  max-width: 460px !important;
}

.z-verify-kicker {
  color: var(--primary) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

.z-verify-form {
  margin-top: 20px !important;
  display: grid !important;
  gap: 16px !important;
}

.z-verify-field {
  display: grid !important;
  gap: 8px !important;
  text-align: center !important;
}

.z-verify-field label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--text-2) !important;
}

/* Input de código OTP estilo Apple */
.z-verify-code,
.verify-code,
input[data-nw-codigo] {
  text-align: center !important;
  font-size: clamp(26px, 3.2vw, 32px) !important;
  font-weight: 800 !important;
  letter-spacing: .45em !important;
  padding-left: .45em !important;
  font-variant-numeric: tabular-nums !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
  height: 60px !important;
  min-height: 60px !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--surface) 90%, var(--bg)) !important;
  border: 1.5px solid color-mix(in srgb, var(--text) 14%, transparent) !important;
  color: var(--text) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
  transition: all .2s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.z-verify-code:focus,
.verify-code:focus,
input[data-nw-codigo]:focus {
  border-color: var(--primary) !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent) !important;
  outline: none !important;
}

.z-verify-code::placeholder,
.verify-code::placeholder,
input[data-nw-codigo]::placeholder {
  letter-spacing: .45em !important;
  color: color-mix(in srgb, var(--text) 24%, transparent) !important;
  font-weight: 500 !important;
}

/* Fila de reenviar código */
.z-verify-resend,
.verify-resend {
  margin-top: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 13px 16px !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--surface) 80%, var(--bg)) !important;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important;
  font-size: 13px !important;
  color: var(--text-2) !important;
}

.z-resend-btn,
.verify-resend .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 6px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--surface) !important;
  color: var(--primary) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent) !important;
  cursor: pointer !important;
  transition: all .16s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

.z-resend-btn:hover:not(:disabled),
.verify-resend .btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface)) !important;
  border-color: var(--primary) !important;
}

.z-resend-btn:disabled,
.verify-resend .btn:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--text-2) !important;
}

/* En caso de que se use la pantalla fallback (.access-split / .access-screen / .access-card) */
.access-split {
  min-height: 100dvh !important;
  display: grid !important;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr) !important;
  background: var(--bg) !important;
}

.access-screen {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 32px 24px !important;
  min-height: 100dvh !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.access-card {
  width: 100% !important;
  max-width: 460px !important;
  padding: 38px 34px !important;
  border-radius: 26px !important;
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important;
  box-shadow: 0 18px 48px rgba(15, 25, 45, 0.08), inset 0 1px 0 #ffffff !important;
  box-sizing: border-box !important;
}

.access-card h1 {
  font-size: clamp(28px, 2.5vw, 36px) !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  margin-top: 8px !important;
  margin-bottom: 6px !important;
  color: var(--text) !important;
}

.access-sub {
  color: var(--text-2) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-bottom: 24px !important;
}

.access-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  text-decoration: none !important;
  margin-bottom: 18px !important;
}

.access-brand img,
.access-brand .access-mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.access-alt {
  margin-top: 20px !important;
  font-size: 13px !important;
  color: var(--text-2) !important;
  text-align: center !important;
}

.access-alt a {
  color: var(--primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.access-back {
  margin-top: 16px !important;
  text-align: center !important;
  font-size: 13.5px !important;
}

.access-back a {
  color: var(--text-2) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color .15s ease !important;
}

.access-back a:hover {
  color: var(--text) !important;
}

/* Responsivo Móvil para verificación y toasts */
@media (max-width: 768px) {
  .access-split {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .access-aside {
    display: none !important;
  }
  .access-screen {
    padding: 20px 16px !important;
  }
  .access-card {
    padding: 28px 20px !important;
    border-radius: 22px !important;
  }
  .verify-resend,
  .z-verify-resend {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
  }
  .verify-resend .btn,
  .z-resend-btn {
    width: 100% !important;
  }
}

/* Panel Lateral "Tu Combo" (.builder-sum, .sum-panel) */
.theme-z-900 .sum-panel,
.theme-z-900 .builder-sum {
  border-radius: 24px !important;
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.05), inset 0 1px 0 #ffffff !important;
}

/* 8. Pantallas de Soporte y Garantías (.support-*) */
.theme-z-900 :where(.support-stats) {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin: 24px 0;
}
.theme-z-900 :where(.support-stats > *, .support-stat) {
  padding: 24px 22px; border-radius: 22px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow: 0 4px 18px rgba(25, 45, 85, 0.03), inset 0 1px 0 #ffffff;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
}
.theme-z-900 :where(.support-stats b, .support-stat .stat-number) {
  font-size: clamp(30px, 3.8vw, 38px); font-weight: 750;
  letter-spacing: -.05em; line-height: 1.1; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.theme-z-900 :where(.support-stats small, .support-stat .stat-label) {
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.theme-z-900 :where(.support-ticket-row, .support-workspace, .support-message) {
  border-radius: 22px; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  padding: 20px 22px; margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(25, 45, 85, 0.025), inset 0 1px 0 #ffffff;
}

/* 9. Selección Única Activa (Corrección de selección doble en Dock y Menú Lateral) */
body.theme-z-900 .z-dock > a.active:has(~ a.active) {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-2) !important;
  font-weight: 550 !important;
}

body.theme-z-900 .z-dock:has(> a:is([href*="garantias"],[href*="soporte"],[href*="notificaciones"],[href*="avisos"],[href*="distribuidor"],[href*="saldo"]).active) > a:is([href$="/mi-cuenta"],[href$="cuenta.html"],[href*="compras"]) {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-2) !important;
  font-weight: 550 !important;
}

body.theme-z-900 .z-sidebar-nav a.z-menu-link.active:has(~ a.active) {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-2) !important;
  font-weight: 550 !important;
}

body.theme-z-900 .z-sidebar-nav a.z-menu-link.active:has(~ a.active) .z-active-dot {
  display: none !important;
}

body.theme-z-900 .z-sidebar-nav:has(a:is([href*="garantias"],[href*="soporte"],[href*="notificaciones"],[href*="avisos"],[href*="datos"],[href*="perfil"]).active) a:is([href$="/mi-cuenta"],[href$="cuenta.html"]):not([href*="garantias"],[href*="soporte"],[href*="notificaciones"],[href*="avisos"],[href*="datos"],[href*="perfil"]) {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-2) !important;
  font-weight: 550 !important;
}

body.theme-z-900 .z-sidebar-nav:has(a:is([href*="garantias"],[href*="soporte"],[href*="notificaciones"],[href*="avisos"],[href*="datos"],[href*="perfil"]).active) a:is([href$="/mi-cuenta"],[href$="cuenta.html"]):not([href*="garantias"],[href*="soporte"],[href*="notificaciones"],[href*="avisos"],[href*="datos"],[href*="perfil"]) .z-active-dot {
  display: none !important;
}

/* Reduced Motion & Hover Media */
@media (prefers-reduced-motion: no-preference) {
  .theme-z-900:not(.anim-ninguna) :where(.z-button,.z-product,.z-featured,.z-menu-link,.z-chips a,.z-product-arrow,.pl-fila,.account-quicklink) {
    transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .theme-z-900:not(.anim-ninguna) .z-access-content { animation: z-appear .45s ease both; }
  @keyframes z-appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}
@media (hover: hover) and (pointer: fine) {
  .theme-z-900 .z-button:hover { filter: brightness(.97); }
  .theme-z-900 .z-menu-link:not(.active):hover, .theme-z-900 .z-chips a:not(.active):hover { background: var(--bg); color: var(--text); }
}

/* =====================================================================
   RESPONSIVE BREAKPOINTS (MATCHING NETWILONE CORE EXACTLY)
   ===================================================================== */
@media (min-width: 1700px) {
  .theme-z-900 .z-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

@media (max-width: 1300px) {
  .theme-z-900 { --sidebar-width: 244px; --gutter: 26px; }
  .theme-z-900 .z-sidebar { padding-inline: 14px; }
  .theme-z-900 .z-dashboard-spark { width: 160px; height: 180px; }
  .theme-z-900 .workspace-products.z-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .theme-z-900 .z-topbar-title > span { display: none; }
  .theme-z-900 .z-access-panel { padding-inline: 20px; }
  .theme-z-900 .z-form-pair { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 1100px) {
  .theme-z-900 .z-dashboard-widgets { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .theme-z-900 .z-support-widget { gap: 10px; }
  .theme-z-900 .z-support-widget img { width: 68px; height: 68px; }
  .theme-z-900 .z-featured-grid { grid-template-columns: minmax(0,1fr); }
  .theme-z-900 .z-access-art { padding: 26px; }
  .theme-z-900 .z-access-story { padding-inline: 0; }
}

@media (max-width: 960px) {
  .theme-z-900 { --gutter: 22px; }
  .theme-z-900 .workspace-main { margin-left: 0; }
  .theme-z-900 .z-sidebar {
    width: min(320px,calc(100vw - 44px)); transform: translateX(-100%);
    visibility: hidden; padding-top: max(22px,env(safe-area-inset-top, 22px));
    padding-bottom: max(16px,env(safe-area-inset-bottom, 16px));
    box-shadow: 0 0 50px rgba(0,0,0,0.18);
    transition: transform .32s cubic-bezier(0.16, 1, 0.3, 1), visibility .32s ease;
  }
  .theme-z-900.sidebar-open .z-sidebar { transform: translateX(0); visibility: visible; }
  .theme-z-900.sidebar-open { overflow: hidden; }
  .theme-z-900 .sidebar-scrim { display: none; }
  .theme-z-900.sidebar-open .sidebar-scrim {
    display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(15, 25, 45, 0.45);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 0; cursor: pointer;
  }
  .theme-z-900 :is(.sidebar-close, .z-close),
  .theme-z-900 .z-sidebar :is(.sidebar-close, .z-close, button[data-close-sidebar]),
  .theme-z-900 :where(.z-sidebar) button.icon-button.sidebar-close {
    display: inline-flex !important; align-items: center; justify-content: center;
    position: absolute; top: max(18px, env(safe-area-inset-top, 18px)); right: 16px; z-index: 5;
  }
  /* Sidebar Toggle: visible únicamente en móvil/tablet (<= 960px) */
  .theme-z-900 .sidebar-toggle,
  .theme-z-900 #sidebarToggle,
  .theme-z-900 [data-open-sidebar],
  .theme-z-900 .icon-button.sidebar-toggle,
  .theme-z-900 .z-topbar-title :is(.sidebar-toggle, #sidebarToggle, [data-open-sidebar]),
  .theme-z-900 :is(.z-topbar, .workspace-topbar, header, nav) :is(.sidebar-toggle, #sidebarToggle, [data-open-sidebar]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid var(--z-line) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    transition: all .18s ease !important;
    cursor: pointer !important;
  }
  .theme-z-900 .z-topbar { gap: 16px; }
  .theme-z-900 .z-header nav { gap: 18px; }
  .theme-z-900 .z-header .z-brand small { display: none; }
  .theme-z-900 .z-hero { grid-template-columns: 1.1fr .9fr; min-height: 480px; }
  .theme-z-900 .z-hero-copy,
  .theme-z-900 .z-hero > div:first-child,
  .theme-z-900 .z-landing .z-hero > div:first-child {
    padding: 36px 0 36px 30px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .theme-z-900 .z-hero h1 { font-size: 44px; }
  .theme-z-900 .z-glass-note { padding: 14px; gap: 10px; }
  .theme-z-900 .z-glass-note > .z-icon { display: none; }
  .theme-z-900 .z-art-caption { display: none; }
  .theme-z-900 .z-benefits { gap: 16px; padding-inline: 0; }
  .theme-z-900 .z-benefits > div { gap: 10px; }
  .theme-z-900 .z-benefits .z-icon-tile { width: 42px; height: 42px; flex-basis: 42px; }
  .theme-z-900 .z-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .theme-z-900 .z-editorial { padding: 36px; }
  .theme-z-900 .z-spark-art { width: 220px; height: 220px; }
  .theme-z-900 .z-access { display: block; padding: 0; position: relative; isolation: isolate; }
  .theme-z-900 .z-access-art { display: none; }
  .theme-z-900 .z-access::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 360px; z-index: -1;
    background: linear-gradient(180deg,rgba(245,246,248,.35),var(--bg)),var(--z-dia) center / cover; opacity: .8;
  }
  .theme-z-900 .z-access-panel { padding: 24px; min-height: 100dvh; }
  .theme-z-900 .z-access-content {
    background: color-mix(in srgb,var(--surface) 94%,transparent);
    border: 1px solid var(--z-line); border-radius: 26px;
    box-shadow: var(--z-shadow); padding: 30px; max-width: 490px; margin: 40px auto 24px;
  }
  .theme-z-900 .z-access-register .z-access-content { max-width: 520px; }
  .theme-z-900 .z-access-panel .z-footer { margin-top: auto; }
  .theme-z-900 .z-form-pair { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* =====================================================================
   MOBILE (MAX-WIDTH: 600PX) — RESPETANDO EL CONTRATO Y AIRE VISUAL
   ===================================================================== */
@media (max-width: 600px) {
  html:has(> body.theme-z-900) { scrollbar-gutter: auto; scrollbar-width: none; }
  html:has(> body.theme-z-900)::-webkit-scrollbar, .theme-z-900::-webkit-scrollbar { display: none; width: 0; height: 0; }
  
  .theme-z-900 {
    --gutter: 10px;
    --topbar-h: 64px;
    font-size: 14px;
  }
  
  /* Holgura y márgenes laterales seguros en móvil */
  .theme-z-900 :is(.workspace-page, .z-workspace-content),
  .theme-z-900 .demo-native {
    padding-inline: var(--gutter) !important;
    padding-bottom: calc(115px + env(safe-area-inset-bottom, 16px));
  }
  .theme-z-900 .workspace-page > :is(.workspace-page, .z-workspace-content),
  .theme-z-900 .z-workspace-content > :is(.workspace-page, .z-workspace-content) {
    padding-inline: 0 !important;
  }
  .theme-z-900 .workspace-main > :not(.workspace-topbar):not(.z-topbar):not(.mobile-dock):not(.sidebar-scrim):not(.z-sidebar):not(.workspace-footer) {
    padding-inline: var(--gutter);
  }
  
  .theme-z-900 .z-header {
    min-height: 70px;
    padding: max(10px, env(safe-area-inset-top, 10px)) var(--gutter) 10px;
    gap: 12px;
  }
  .theme-z-900 .z-header nav { gap: 10px; }
  .theme-z-900 .z-header .z-nav-catalog { display: none; }
  .theme-z-900 .z-header nav .z-button { display: none; }
  .theme-z-900 .z-header .z-nav-login { padding-inline: 16px; border: 1px solid var(--z-line); border-radius: 999px; font-size: 13px; background: var(--surface); }
  .theme-z-900 .z-brand b { font-size: 17px; }
  .theme-z-900 .z-landing { padding-top: 16px; }
  
  .theme-z-900 .z-hero { display: flex; flex-direction: column; min-height: 0; border-radius: 26px; }
  .theme-z-900 .z-hero::before { background-position: 62% bottom; background-size: auto 65%; background-repeat: no-repeat; }
  .theme-z-900 .z-hero::after { background: linear-gradient(180deg,#f4f7fb 0%,rgba(244,247,251,.97) 45%,rgba(244,247,251,.06) 76%); }
  .theme-z-900 .z-hero-copy,
  .theme-z-900 .z-hero > div:first-child,
  .theme-z-900 .z-landing .z-hero > div:first-child {
    padding: 30px 22px 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .theme-z-900 .z-eyebrow { font-size: 11px; letter-spacing: .08em; }
  .theme-z-900 .z-hero h1 { font-size: clamp(34px,9vw,44px); margin: 18px 0 14px; }
  .theme-z-900 .z-lead { font-size: 14px; line-height: 1.65; margin-bottom: 22px; }
  .theme-z-900 .z-actions { gap: 10px 16px; }
  .theme-z-900 .z-hero .z-actions .z-button { width: 100%; justify-content: space-between; }
  .theme-z-900 .z-hero .z-actions .z-text-link { margin: 0 auto; }
  .theme-z-900 .z-stats { margin-top: 22px; gap: 18px; flex-wrap: wrap; }
  .theme-z-900 .z-stats b { font-size: 20px; }
  .theme-z-900 .z-hero-art { min-height: 200px; padding: 30px 20px; justify-content: flex-end; }
  .theme-z-900 .z-glass-note { padding: 12px 15px; transform: rotate(-2.5deg); border-radius: 18px; }
  .theme-z-900 .z-glass-note b { font-size: 13px; }
  
  .theme-z-900 .z-benefits { grid-template-columns: minmax(0,1fr); gap: 18px; padding: 24px 6px; }
  .theme-z-900 .z-benefits > div { gap: 14px; }
  .theme-z-900 .z-benefits .z-icon-tile { width: 44px; height: 44px; flex-basis: 44px; border-radius: 14px; }
  .theme-z-900 .z-benefits small { font-size: 12px; }
  
  .theme-z-900 .z-section { margin: 34px 0; }
  .theme-z-900 .z-section-head { gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
  .theme-z-900 .z-section-head .z-overline { font-size: 11px; letter-spacing: .1em; }
  .theme-z-900 .z-section-head h1 { font-size: 32px; }
  .theme-z-900 .z-section-head h2 { font-size: 26px; }

  /* Encabezados / Hero cards compactos en móvil (sin vacíos ni alturas innecesarias) */
  .theme-z-900 :is(
    .z-page-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
    .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
    .account-head, .account-header, .soporte-head, .soporte-header, .user-head, .perfil-head
  ),
  .theme-z-900 :is(.workspace-page, .z-workspace-content, .home, .support-workspace, .store-workspace) > :is(div, header):first-child:not(main):not(section):not(aside):not(.balance-card):not(.account-cards):not(.z-dashboard-hero):not(.support-stats):not(.pl-lista):not(.z-section):not(.z-product):not(.card):not(.products):not(.workspace-products):not(.builder-sum):not(.sum-panel):not(.builder-grid):not(.builder-pick):not(.z-access):not(.z-access-panel):not(.z-access-content):not(.access-card):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.z-dashboard-hero *):not(.z-page-hero *):not(.home-head *):not(.sec-head *):not(.account-head *):not(.soporte-head *):not(.catalog-head *):not(.support-head *):not(.page-head *):not(.page-header *):not(.home-hero *):not(.home-saludo *):not(.home-header *):not(.workspace-head *):not(.workspace-header *):not(.store-head *):not(.account-header *):not(.soporte-header *):not(.user-head *):not(.perfil-head *):not(.z-section *):not(.pd-cabeza *):not(.pd-cabeza-pago *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *),
  .theme-z-900 :is(.workspace-page, .z-workspace-content, .home, .support-workspace, .store-workspace) > div:first-child > :is(div, header):first-child:not(main):not(section):not(aside):not(.balance-card):not(.account-cards):not(.z-dashboard-hero):not(.support-stats):not(.pl-lista):not(.z-section):not(.z-product):not(.card):not(.products):not(.workspace-products):not(.builder-sum):not(.sum-panel):not(.builder-grid):not(.builder-pick):not(.z-access):not(.z-access-panel):not(.z-access-content):not(.access-card):has(:is(h1, h2)):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.z-dashboard-hero *):not(.z-page-hero *):not(.home-head *):not(.sec-head *):not(.account-head *):not(.soporte-head *):not(.catalog-head *):not(.support-head *):not(.page-head *):not(.page-header *):not(.home-hero *):not(.home-saludo *):not(.home-header *):not(.workspace-head *):not(.workspace-header *):not(.store-head *):not(.account-header *):not(.soporte-header *):not(.user-head *):not(.perfil-head *):not(.z-section *):not(.pd-cabeza *):not(.pd-cabeza-pago *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *),
  .theme-z-900 :is(div, header):has(> :where(div, .sec-head-titles) > :is(h1, h2)):has(:where(.btn, button, a.btn)):not(main):not(section):not(aside):not(body):not(.workspace-main):not(.workspace-page):not(.balance-card):not(.account-cards):not(.z-dashboard-hero):not(.support-stats):not(.pl-lista):not(.z-section):not(.z-product):not(.card):not(.products):not(.workspace-products):not(.builder-sum):not(.sum-panel):not(.builder-grid):not(.builder-pick):not(.z-access):not(.z-access-panel):not(.z-access-content):not(.access-card):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.z-dashboard-hero *):not(.z-page-hero *):not(.home-head *):not(.sec-head *):not(.account-head *):not(.soporte-head *):not(.catalog-head *):not(.support-head *):not(.page-head *):not(.page-header *):not(.home-hero *):not(.home-saludo *):not(.home-header *):not(.workspace-head *):not(.workspace-header *):not(.store-head *):not(.account-header *):not(.soporte-header *):not(.user-head *):not(.perfil-head *):not(.z-section *):not(.pd-cabeza *):not(.pd-cabeza-pago *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *),
  .theme-z-900 :is(div, header):has(> :is(h1, h2:first-child)):has(> :is(p, .home-lede, .z-muted, span)):not(main):not(section):not(aside):not(body):not(.workspace-main):not(.workspace-page):not(.balance-card):not(.account-cards):not(.z-dashboard-hero):not(.support-stats):not(.pl-lista):not(.z-section):not(.z-product):not(.card):not(.products):not(.workspace-products):not(.builder-sum):not(.sum-panel):not(.builder-grid):not(.builder-pick):not(.z-access):not(.z-access-panel):not(.z-access-content):not(.access-card):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.z-dashboard-hero *):not(.z-page-hero *):not(.home-head *):not(.sec-head *):not(.account-head *):not(.soporte-head *):not(.catalog-head *):not(.support-head *):not(.page-head *):not(.page-header *):not(.home-hero *):not(.home-saludo *):not(.home-header *):not(.workspace-head *):not(.workspace-header *):not(.store-head *):not(.account-header *):not(.soporte-header *):not(.user-head *):not(.perfil-head *):not(.z-section *):not(.pd-cabeza *):not(.pd-cabeza-pago *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *) {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 15px 16px !important;
    border-radius: 18px !important;
    margin-bottom: 12px !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: initial !important;
    box-sizing: border-box !important;
  }
  .theme-z-900 :is(
    .z-page-hero, .z-dashboard-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
    .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
    .account-head, .account-header, .soporte-head, .soporte-header, .user-head, .perfil-head
  ) > :where(div, .sec-head-titles, .z-page-hero-copy),
  .theme-z-900 .pd-cabeza > div:not(.pd-cabeza-pago),
  .theme-z-900 :is(.workspace-page, .z-workspace-content, .home, .support-workspace, .store-workspace) > :is(div, header):first-child:not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *) > div:first-child,
  .theme-z-900 :is(div, header):has(> :where(div, .sec-head-titles) > :is(h1, h2)):has(:where(.btn, button, a.btn)):not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *) > :where(div, .sec-head-titles) {
    flex: initial !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .theme-z-900 :is(
    .z-page-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
    .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
    .account-head, .account-header, .soporte-head, .soporte-header
  ) :where(h1, h2),
  .theme-z-900 :is(.workspace-page, .z-workspace-content, .home, .support-workspace, .store-workspace) > :is(div, header):first-child:not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *) :where(h1, h2),
  .theme-z-900 :is(div, header):has(> :where(div, .sec-head-titles) > :is(h1, h2)):has(:where(.btn, button, a.btn)):not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *) :where(h1, h2),
  .theme-z-900 :is(div, header):has(> :is(h1, h2:first-child)):has(> :is(p, .home-lede, .z-muted, span)):not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *) :where(h1, h2) {
    font-size: 21px !important;
    line-height: 1.2 !important;
  }
  .theme-z-900 :is(
    .z-page-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
    .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
    .account-head, .account-header, .soporte-head, .soporte-header
  ) :is(p, .home-lede, .z-muted),
  .theme-z-900 :is(.workspace-page, .z-workspace-content, .home, .support-workspace, .store-workspace) > :is(div, header):first-child:not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *) :is(p, .home-lede, .z-muted),
  .theme-z-900 :is(div, header):has(> :where(div, .sec-head-titles) > :is(h1, h2)):has(:where(.btn, button, a.btn)):not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *) :is(p, .home-lede, .z-muted),
  .theme-z-900 :is(div, header):has(> :is(h1, h2:first-child)):has(> :is(p, .home-lede, .z-muted, span)):not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *) :is(p, .home-lede, .z-muted) {
    font-size: 13px !important;
    line-height: 1.38 !important;
  }
  .theme-z-900 :is(
    .z-page-hero, .sec-head, .home-head, .support-head, .catalog-head, .page-head, .page-header,
    .home-hero, .home-saludo, .home-header, .workspace-head, .workspace-header, .store-head,
    .account-head, .account-header, .soporte-head, .soporte-header
  ) :where(.btn, a.btn, button.btn, button.btn-primary, button:not(.z-reveal):not([class*="toggle"]):not([class*="close"])),
  .theme-z-900 :is(.workspace-page, .z-workspace-content, .home, .support-workspace, .store-workspace) > :is(div, header):first-child:not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *) :where(.btn, a.btn, button.btn, button.btn-primary, button:not(.z-reveal):not([class*="toggle"]):not([class*="close"])),
  .theme-z-900 :is(div, header):has(> :where(div, .sec-head-titles) > :is(h1, h2)):has(:where(.btn, button, a.btn)):not(aside):not(.builder-sum):not(.sum-panel):not(.z-access-content):not(.z-hero):not(.z-hero-copy):not(.z-landing *):not(.product-page):not(.product-page *):not(.product-detail):not(.product-detail *):not(.detail-main):not(.detail-main *):not(.detail-lede):not(.detail-lede *):not(.detail-art):not(.detail-art *):not(.detail-buy):not(.detail-buy *):not(.buy-card):not(.buy-card *) :where(.btn, a.btn, button.btn, button.btn-primary, button:not(.z-reveal):not([class*="toggle"]):not([class*="close"])) {
    margin-top: 4px !important;
    min-height: 36px !important;
    padding: 6px 16px !important;
    font-size: 12.5px !important;
  }
  
  /* Chips con scroll horizontal fluido y márgenes negativos para sangrado elegante */
  .theme-z-900 .z-chips {
    flex-wrap: nowrap; max-width: 100vw; overflow-x: auto;
    padding: 4px var(--gutter) 14px;
    margin-inline: calc(var(--gutter) * -1);
    margin-bottom: 18px;
    scrollbar-width: none; scroll-padding: var(--gutter);
    gap: 8px;
  }
  .theme-z-900 .z-chips > :where(a,li) {
    flex: 0 0 auto; padding: 8px 15px; min-height: 38px;
    font-size: 13px; border-radius: 999px;
  }
  
  /* Cuadrícula de Producto Móvil con Aliento Visual */
  .theme-z-900 .z-grid,
  .theme-z-900 .workspace-products.z-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }
  .theme-z-900 .z-product {
    border-radius: 18px;
    padding: 7px;
    box-shadow: 0 3px 14px rgba(25, 45, 85, 0.035), inset 0 1px 0 #ffffff;
  }
  .theme-z-900 .z-product-art,
  .theme-z-900 .workspace-product .product-img {
    aspect-ratio: 16 / 11 !important;
    border-radius: 13px !important;
  }
  .theme-z-900 .z-product-art .product-shot,
  .theme-z-900 .workspace-product .product-img > img.product-shot,
  .theme-z-900 .workspace-product .product-img img,
  .theme-z-900 .product-card .product-img img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    object-fit: cover !important;
    border-radius: inherit !important;
  }
  .theme-z-900 .z-product-monogram { width: 48px; height: 48px; border-radius: 14px; font-size: 26px; }
  .theme-z-900 .z-product-tags { top: 5px; left: 5px; right: 5px; gap: 4px; }
  .theme-z-900 .z-tag { padding: 2px 6px; font-size: 10px; border-radius: 999px; }
  .theme-z-900 .z-product-body { padding: 8px 5px 3px; }
  .theme-z-900 :is(.z-product, .workspace-product, .product-card) :is(.z-overline, .product-overline, .product-cat) {
    font-size: 10.5px !important;
    gap: 6px !important;
    letter-spacing: .07em !important;
    line-height: 1.2 !important;
  }
  .theme-z-900 :is(.z-product, .workspace-product, .product-card) :is(.z-overline, .product-overline, .product-cat)::before {
    width: 5.5px !important;
    height: 5.5px !important;
    margin-right: 5.5px !important;
  }
  .theme-z-900 .z-product-name {
    font-size: 13.5px; line-height: 1.24; font-weight: 650;
    margin-top: 2px;
    min-height: 33px;
  }
  .theme-z-900 .z-product-meta {
    padding-block: 3px 5px;
    font-size: 11px;
    line-height: 1.3;
    gap: 1px;
  }
  .theme-z-900 .z-product-foot {
    gap: 4px; align-items: center;
    padding-top: 6px; margin-top: auto;
    border-top: 1px solid var(--z-line);
  }
  .theme-z-900 .z-product-foot > span:first-child { min-width: 0; row-gap: 1px; }
  .theme-z-900 .z-product-foot b { font-size: 15.5px; line-height: 1.2; letter-spacing: -.03em; }
  .theme-z-900 .z-product-foot small { font-size: 10px; }
  .theme-z-900 .z-product-foot s { font-size: 11px; }
  .theme-z-900 .z-product-arrow { width: 26px; height: 26px; flex-basis: 26px; }
  .theme-z-900 .z-product-arrow .z-icon { width: 12px; height: 12px; }
  
  .theme-z-900 .z-editorial { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 22px 16px; border-radius: 24px; }
  .theme-z-900 .z-editorial h2 { font-size: 34px; }
  .theme-z-900 .z-editorial p { font-size: 13.5px; }
  .theme-z-900 .z-spark-art { width: 190px; height: 190px; align-self: center; margin-top: 14px; }
  .theme-z-900 .z-steps ol { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .theme-z-900 .z-steps li { display: flex; align-items: flex-start; gap: 18px; }
  .theme-z-900 .z-steps li > span { margin: 0; line-height: 1; }
  .theme-z-900 .z-footer { padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom, 16px)); gap: 8px; }
  .theme-z-900 .z-footer nav { flex-wrap: wrap; gap: 14px; }
  
  .theme-z-900 .z-access-panel { padding: max(18px,env(safe-area-inset-top)) var(--gutter) max(16px,env(safe-area-inset-bottom)); }
  .theme-z-900 .z-access-top { gap: 12px; }
  .theme-z-900 .z-access-top .z-brand small { display: none; }
  .theme-z-900 .z-access-top .z-back { background: var(--surface); border: 1px solid var(--z-line); border-radius: 999px; padding: 0 12px; }
  .theme-z-900 .z-access-content { margin-top: 24px; padding: 24px 20px 20px; border-radius: 24px; }
  .theme-z-900 .z-access-item { width: 72px; height: 72px; margin-bottom: 12px; }
  .theme-z-900 .z-access-content h1 { font-size: 32px; }
  .theme-z-900 .z-access-sub { font-size: 13.5px; margin: 8px 0 24px; }
  .theme-z-900 .z-segment { margin-bottom: 24px; }
  .theme-z-900 .z-form { gap: 16px; }
  .theme-z-900 .z-form-pair { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .theme-z-900 .z-access-register .z-access-content { padding-top: 22px; }
  .theme-z-900 .z-access-register .z-access-sub { margin-bottom: 20px; }
  .theme-z-900 .z-access-alt { font-size: 12.5px; }
  .theme-z-900 .z-access-panel .z-footer { padding-top: 0; }
  
  .theme-z-900 .z-workspace-content { padding-top: 14px; }
  .theme-z-900 :is(.workspace-topbar, .z-topbar) {
    min-height: 62px; gap: 10px;
    padding: max(10px, env(safe-area-inset-top, 10px)) var(--gutter) 10px;
  }
  .theme-z-900 .workspace-search { display: none; }
  .theme-z-900 .mobile-search { display: flex; margin-bottom: 18px; }
  .theme-z-900 .z-search input { font-size: 16px; }
  .theme-z-900 .z-search input::placeholder { font-size: 13.5px; }
  .theme-z-900 .z-topbar-actions { gap: 8px; }
  .theme-z-900 .z-topbar-balance > .z-icon { display: none; }
  .theme-z-900 .z-topbar-balance b { font-size: 13px; }
  
  /* Dashboard Hero (.z-dashboard-hero) — Organización Apple limpia y espaciosa en móvil */
  .theme-z-900 .z-dashboard-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 24px 20px 22px !important;
    border-radius: 24px !important;
    gap: 0 !important;
    background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--primary) 4.5%, var(--surface)) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important;
    box-shadow: 0 4px 20px rgba(25, 45, 85, 0.03), inset 0 1px 0 #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
  }
  .theme-z-900 .z-dashboard-spark { display: none !important; }
  
  .theme-z-900 .z-dashboard-hero > div:first-child {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .theme-z-900 .z-dashboard-hero .z-eyebrow {
    font-size: 11px !important;
    padding: 4px 12px !important;
    margin-bottom: 14px !important;
    letter-spacing: .08em !important;
    line-height: 1.3 !important;
    display: inline-flex !important;
  }
  
  .theme-z-900 .z-dashboard-hero h1 {
    font-size: clamp(22px, 5.8vw, 25px) !important;
    font-weight: 750 !important;
    line-height: 1.28 !important;
    letter-spacing: -.02em !important;
    margin: 0 0 10px 0 !important;
    color: var(--text) !important;
  }
  
  .theme-z-900 .z-dashboard-hero p {
    font-size: 13.5px !important;
    color: var(--text-2) !important;
    line-height: 1.5 !important;
    margin: 0 0 20px 0 !important;
  }
  
  .theme-z-900 .z-dashboard-hero .z-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  
  .theme-z-900 .z-dashboard-hero .z-actions .z-button {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
    justify-content: center !important;
    font-size: 14.5px !important;
    font-weight: 650 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #0b68f5 0%, #0546af 100%) !important;
    box-shadow: 0 4px 16px rgba(7, 91, 219, 0.28) !important;
    box-sizing: border-box !important;
  }
  
  .theme-z-900 .z-dashboard-hero .z-actions .z-text-link {
    width: 100% !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--primary) !important;
    text-decoration: none !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--primary) 7%, var(--surface)) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent) !important;
    box-sizing: border-box !important;
    transition: background-color .18s ease !important;
  }
  .theme-z-900 .z-dashboard-hero .z-actions .z-text-link:active {
    background: color-mix(in srgb, var(--primary) 14%, var(--surface)) !important;
  }
  .theme-z-900 .z-dashboard-widgets { grid-template-columns: minmax(0,1fr); gap: 10px; margin-top: 10px; }
  
  .theme-z-900 .z-wallet-card { padding: 20px 18px; border-radius: 20px; }
  .theme-z-900 .z-wallet-card > b { font-size: 32px; }
  .theme-z-900 .z-widget { padding: 20px 18px; border-radius: 20px; }
  .theme-z-900 .z-support-widget { gap: 14px; padding: 18px; }
  .theme-z-900 .z-support-widget img { width: 80px; height: 80px; }
  .theme-z-900 .z-widget h2 { font-size: 19px; }
  .theme-z-900 .z-featured { padding: 14px 16px; border-radius: 18px; gap: 14px; }
  .theme-z-900 .z-nav-label { font-size: 11.5px; }
  .theme-z-900 .z-sidebar-bottom { padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)); }
  
  /* Tarjeta destacada "Copiar todo el pedido" (.pd-copiar) en móvil */
  .theme-z-900 .pd-copiar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 18px 18px 20px !important;
    border-radius: 20px !important;
    gap: 14px !important;
    margin-block: 14px !important;
  }
  .theme-z-900 .pd-copiar > :where(div, .pd-copiar-info, .pd-copiar-body, span:not(.btn):not(button)) {
    width: 100% !important;
    gap: 5px !important;
  }
  .theme-z-900 .pd-copiar :where(h2, h3, h4, strong, b, .pd-copiar-title, .pd-copiar-titulo) {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }
  .theme-z-900 .pd-copiar :where(p, small, .pd-copiar-desc, .pd-copiar-sub) {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  .theme-z-900 .pd-copiar :is(button, .btn, a.btn, [type="button"], .pd-copiar-btn) {
    width: 100% !important;
    min-height: 46px !important;
    padding: 11px 20px !important;
    font-size: 14px !important;
    justify-content: center !important;
  }
  
  /* Detalle de pedido (.pd-cabeza y .pd-cabeza-pago) en móvil:
     Aprovecha todo el ancho sin vacíos innecesarios, con fila de pago tipo Apple Pay */
  .theme-z-900 .pd-cabeza {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 18px 18px 16px !important;
    border-radius: 22px !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
  }
  .theme-z-900 .pd-cabeza h1 { font-size: 21px !important; }
  .theme-z-900 .pd-meta { font-size: 12.5px !important; gap: 6px 10px !important; }
  
  .theme-z-900 .pd-cabeza-pago,
  .theme-z-900 .pd-cabeza .pd-cabeza-pago {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 8px 14px !important;
    width: 100% !important;
    padding: 13px 18px !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--primary) 4.5%, var(--bg)) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .theme-z-900 .pd-cabeza-pago :is(span, small, b, strong) {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .theme-z-900 .pd-cabeza-pago > :is(span, small):first-child {
    grid-column: 1 !important;
    justify-self: start !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--text-2) !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }
  .theme-z-900 .pd-cabeza-pago > b {
    grid-column: 2 !important;
    justify-self: end !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    letter-spacing: -.03em !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .theme-z-900 .pd-cabeza-pago > :is(small, span):last-child:not(:first-child) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 9%, var(--surface)) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent) !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    margin-top: 4px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    letter-spacing: .02em !important;
  }
  .theme-z-900 .pd-cabeza-pago > :is(small, span):last-child:not(:first-child)::before {
    display: none !important;
    content: none !important;
  }
  
  /* Dock Flotante Estilo iOS 18 / visionOS */
  .theme-z-900 .mobile-dock.z-dock {
    position: fixed; z-index: 30;
    inset: auto 10px max(10px, env(safe-area-inset-bottom, 10px));
    display: flex; align-items: stretch; gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    min-height: 66px; border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    backdrop-filter: blur(28px) saturate(190%);
    box-shadow: 0 12px 40px rgba(15, 25, 45, 0.16), 0 2px 6px rgba(15, 25, 45, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
  .theme-z-900 .z-dock > :where(a,button) {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    justify-content: center; align-items: center; gap: 3px;
    min-height: 52px; border: 0; padding: 2px; border-radius: 20px;
    background: transparent; font-size: 11px; font-weight: 550;
    color: var(--text-2); line-height: 1.2;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .theme-z-900 .z-dock > :where(a,button):active { transform: scale(0.94); }
  .theme-z-900 .z-dock > .active {
    background: color-mix(in srgb, var(--primary) 11%, transparent);
    color: var(--primary); font-weight: 650;
  }
  .theme-z-900 .z-dock-icon { display: grid; place-items: center; position: relative; height: 24px; }
  .theme-z-900 .z-dock-dot {
    position: absolute; width: 7px; height: 7px; border-radius: 50%;
    background: var(--primary); right: -5px; top: 0;
    box-shadow: 0 0 0 2px var(--surface);
  }
  
  .theme-z-900 .workspace-footer { padding-bottom: calc(85px + env(safe-area-inset-bottom, 16px)); }
  .theme-z-900 .pd-datos { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .theme-z-900 .account-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 12px !important; }
  .theme-z-900 .account-cards > :where(div, .card) { padding: 13px 14px !important; border-radius: 16px !important; gap: 8px !important; }
  .theme-z-900 .account-cards b, .theme-z-900 .account-cards .card-num { font-size: 24px !important; }
  .theme-z-900 .account-cards small, .theme-z-900 .account-cards .card-label { font-size: 11.5px !important; }
  .theme-z-900 .account-cards .btn { min-height: 34px !important; font-size: 12px !important; padding: 5px 10px !important; border-radius: 12px !important; }
  /* Compras (.pl-fila): Distribución ergonómica Apple Wallet en móvil */
  .theme-z-900 .pl-fila,
  .theme-z-900 a.pl-fila {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    margin-bottom: 8px !important;
  }
  .theme-z-900 .pl-caras img,
  .theme-z-900 .pl-caras span {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
  }
  .theme-z-900 .pl-fila :where(b, strong, h3, h4, .pl-titulo, .pl-title):not(.pl-precio):not(.pl-der b):not(.pl-der strong):not(div:last-child > b) {
    font-size: 14.5px !important;
    line-height: 1.25 !important;
  }
  .theme-z-900 .pl-fila :where(small, p, .pl-sub, .pl-meta, .pl-desc) {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  .theme-z-900 .pl-der,
  .theme-z-900 .pl-fila > :where(.pl-der, div:last-child:not(.pl-caras)) {
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 3.5px !important;
    text-align: right !important;
    border: none !important;
    border-top: none !important;
    padding: 0 !important;
  }
  .theme-z-900 .pl-fila :where(.pl-precio, .pl-der b, .pl-der strong, div:last-child:not(.pl-caras) > b:first-child) {
    font-size: 15.5px !important;
    line-height: 1.1 !important;
  }
  .theme-z-900 .pl-fila .badge {
    font-size: 10.5px !important;
    padding: 2.5px 7px !important;
  }
  .theme-z-900 .balance-card { padding: 16px 18px !important; border-radius: 18px !important; margin-bottom: 12px !important; gap: 8px !important; }
  .theme-z-900 .balance-card b, .theme-z-900 .balance-card .balance-amount { font-size: 30px !important; }
  .theme-z-900 .balance-card .btn, .theme-z-900 .balance-card button { min-height: 42px !important; font-size: 13.5px !important; }
  .theme-z-900 .account-quicklink { padding: 12px 14px !important; border-radius: 16px !important; margin-bottom: 8px !important; }
  .theme-z-900 .support-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 12px !important; }
  .theme-z-900 .support-stats > * { padding: 10px 8px !important; border-radius: 14px !important; text-align: center !important; }
  .theme-z-900 .support-stats b { font-size: 20px !important; }
  .theme-z-900 .support-stats small { font-size: 10.5px !important; line-height: 1.2 !important; }
  .theme-z-900 .demo-native { padding: 18px 16px !important; border-radius: 18px !important; margin-block: 12px !important; }

  /* Ajustes móviles para selectores de cantidad y Arma tu combo */
  .theme-z-900 .pick-row,
  .theme-z-900 .store-workspace .pick-row {
    padding: 12px 14px !important;
    border-radius: 18px !important;
    gap: 10px 12px !important;
  }

  .theme-z-900 .pick-img {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 13px !important;
  }

  .theme-z-900 .pick-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .theme-z-900 .pick-variant select,
  .theme-z-900 .store-workspace .pick-variant select {
    min-height: 42px !important;
    height: 42px !important;
    font-size: 14.5px !important;
    width: 100% !important;
  }

  .theme-z-900 .qty-picker,
  .theme-z-900 .qty-sm,
  .theme-z-900 .store-workspace .qty-picker {
    height: 40px !important;
  }

  .theme-z-900 .qty-picker button,
  .theme-z-900 .qty-sm button,
  .theme-z-900 .store-workspace .qty-picker button {
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
  }

  .theme-z-900 .qty-picker input,
  .theme-z-900 .qty-sm input,
  .theme-z-900 .store-workspace .qty-picker input,
  .theme-z-900 input.pick-qty {
    width: 48px !important;
    height: 34px !important;
    font-size: 16px !important;
  }

  .theme-z-900 .pick-price {
    font-size: 17px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-z-900 *, .theme-z-900 *::before, .theme-z-900 *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  .theme-z-900 .z-product:hover, .theme-z-900 .pl-fila:hover, .theme-z-900 .account-quicklink:hover { transform: none; }
}














































/* =====================================================================
   SELECTORES DE CANTIDAD / STEPPER CAPSULE (.qty-picker, .qty-sm)
   ===================================================================== */
:is(.theme-z-900, body.theme-z-900) :is(.qty-picker, .qty-sm) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 38px !important;
  padding: 3px 5px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface) 86%, var(--bg)) !important;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

:is(.theme-z-900, body.theme-z-900) :is(.qty-picker, .qty-sm):hover,
:is(.theme-z-900, body.theme-z-900) :is(.qty-picker, .qty-sm):focus-within,
:is(.theme-z-900, body.theme-z-900) :is(.qty-picker, .qty-sm).is-active {
  border-color: var(--primary) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 28%, transparent) !important;
}

:is(.theme-z-900, body.theme-z-900) :is(.qty-picker, .qty-sm) button {
  width: 28px !important;
  height: 28px !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--primary) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

:is(.theme-z-900, body.theme-z-900) :is(.qty-picker, .qty-sm) button:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
  color: var(--primary) !important;
  transform: scale(1.08) !important;
}

:is(.theme-z-900, body.theme-z-900) :is(.qty-picker, .qty-sm) button:active {
  transform: scale(0.9) !important;
}

:is(.theme-z-900, body.theme-z-900) :is(.qty-picker, .qty-sm) :is(input.pick-qty, input[type="number"]) {
  width: 36px !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 0 !important;
  margin: 0 2px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
}

:is(.theme-z-900, body.theme-z-900) :is(.qty-picker, .qty-sm) input::-webkit-outer-spin-button,
:is(.theme-z-900, body.theme-z-900) :is(.qty-picker, .qty-sm) input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* =====================================================================
   NOTIFICACIONES ADAPTATIVAS (BENTO PC + TABS SEGMENTADOS EN MÓVIL)
   ===================================================================== */
.z-channel-switcher,
.db-channel-switcher {
  display: none;
  align-items: center;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 999px;
  padding: 4px;
  margin: 0 auto 20px;
  max-width: 320px;
  width: 100%;
  box-sizing: border-box;
}

.z-channel-tab,
.db-channel-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s ease;
  text-align: center;
}

.z-channel-tab.is-active,
.db-channel-tab.is-active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
}

@media (min-width: 768px) {
  :is(.theme-z-900, body.theme-z-900) :is(.notifications-channels-container, .workspace-page:has(.telegram-card)) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: start !important;
  }
  .z-channel-switcher,
  .db-channel-switcher {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .z-channel-switcher,
  .db-channel-switcher {
    display: flex !important;
  }
  :is(.theme-z-900, body.theme-z-900) :is(.channel-card:not(.is-active-channel), .telegram-card:not(.is-active-channel)) {
    display: none !important;
  }
}



/* GENERATED ICONS */
.theme-z-900 .z-i-arrow { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012h16m-6-6%206%206-6%206%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-arrow-left { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2012H4m6-6-6%206%206%206%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-chevron { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%205%207%207-7%207%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-grid { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h6v6H4zM14%204h6v6h-6zM4%2014h6v6H4zM14%2014h6v6h-6z%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-home { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2010%209-7%209%207M5%209v12h5v-7h4v7h5V9%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-bag { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%207h14l1%2014H4L5%207Zm3%200V6a4%204%200%200%201%208%200v1%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-shield { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%208%203v6c0%205-8%209-8%209s-8-4-8-9V6l8-3Zm-4%209%203%203%205-5%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-wallet { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%208V5H4a2%202%200%200%200%200%204h17v11H4a2%202%200%200%201-2-2V7m19%206h-6v4h6%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-user { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%207a4%204%200%201%201-8%200%204%204%200%200%201%208%200ZM4%2021v-3a5%205%200%200%201%205-5h6a5%205%200%200%201%205%205v3%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-bell { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208a6%206%200%200%200-12%200c0%207-3%207-3%209h18c0-2-3-2-3-9ZM10%2021h4%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-layers { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%2010%205-10%205L2%208l10-5ZM2%2012l10%205%2010-5M2%2016l10%205%2010-5%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-spark { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%202%203%207%207%203-7%203-3%207-3-7-7-3%207-3%203-7Z%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-tag { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h8l10%2010-8%208L3%2011V3Zm4%204h.01%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-headset { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2014v-3a8%208%200%200%201%2016%200v3M4%2012H2v7h4v-7H4Zm16%200h2v7h-4v-7h2Zm0%207v2h-6%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-menu { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h16M4%2018h16%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-close { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%206%2012%2012M6%2018%2018%206%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-search { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2010a7%207%200%201%201-14%200%207%207%200%200%201%2014%200Zm-2%205%206%206%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-eye { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s3-7%2010-7%2010%207%2010%207-3%207-10%207S2%2012%202%2012Zm13%200a3%203%200%201%201-6%200%203%203%200%200%201%206%200Z%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-lock { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2010h14v11H5V10Zm3%200V7a4%204%200%200%201%208%200v3m-4%205v2%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-check { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2012%204%204L19%206%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-logout { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%204H3v16h6m6-13%205%205-5%205M8%2012h12%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-i-clock { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2012a10%2010%200%201%201-20%200%2010%2010%200%200%201%2020%200ZM12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E"); }

/* =====================================================================
   MÓDULO "MIS DATOS" (MI CUENTA / PERFIL) — DISEÑO PROFESIONAL 3 COLUMNAS
   Estilo Apple Porcelain & Glass para PC y Móvil
   ===================================================================== */

/* =====================================================================
   Bento Box Ultra-Premium — Mis datos (/mi-cuenta/datos)
   Cabecera Centrada de Alta Gama Estilo Apple & Grilla Simétrica Bento
   ===================================================================== */

/* =====================================================================
   Bento Box Ultra-Premium — Mis datos (/mi-cuenta/datos)
   Cabecera Centrada de Alta Gama Estilo Apple & Grilla Simétrica Bento
   ===================================================================== */

/* Contenedor y Centrado Global */
.theme-z-900 .wrap:has(form[action*="/mi-cuenta/datos"]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  max-width: 1060px !important;
  width: 100% !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

/* Píldora de Cristal Apple para Migas de Pan (100% Centrada) */
.theme-z-900 .wrap:has(form[action*="/mi-cuenta/datos"]) > p.small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin-inline: auto !important;
  margin-block: 0 14px !important;
  text-align: center !important;
  gap: 7px !important;
  background: color-mix(in srgb, var(--surface, #ffffff) 85%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
  padding: 6px 18px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-2, #64748b) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.theme-z-900 .wrap:has(form[action*="/mi-cuenta/datos"]) > p.small::before {
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563eb' stroke-width='2.2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z' /%3E%3C/svg%3E") center / contain no-repeat !important;
  display: inline-block !important;
}

.theme-z-900 .wrap:has(form[action*="/mi-cuenta/datos"]) > p.small:hover {
  background: var(--surface, #ffffff) !important;
  border-color: color-mix(in srgb, var(--text) 20%, transparent) !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07), inset 0 1px 0 #ffffff !important;
  transform: translateY(-1px) !important;
}

.theme-z-900 .wrap:has(form[action*="/mi-cuenta/datos"]) > p.small a {
  color: var(--primary, #2563eb) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: opacity 0.15s ease !important;
}

.theme-z-900 .wrap:has(form[action*="/mi-cuenta/datos"]) > p.small a:hover {
  opacity: 0.8 !important;
  text-decoration: underline !important;
}

/* Título Principal Centrado y Subtítulo Integrador */
.theme-z-900 .wrap:has(form[action*="/mi-cuenta/datos"]) > h1 {
  font-size: clamp(28px, 3.2vw, 36px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  color: var(--text, #0f172a) !important;
  text-align: center !important;
  margin: 0 0 24px 0 !important;
  line-height: 1.15 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

.theme-z-900 .wrap:has(form[action*="/mi-cuenta/datos"]) > h1::after {
  content: "Gestiona tu información personal y credenciales de acceso de forma segura" !important;
  display: block !important;
  font-size: 14.5px !important;
  font-weight: 450 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-2, #64748b) !important;
  margin-top: 8px !important;
  max-width: 520px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

/* Asegurar que la tarjeta Bento ocupe el ancho completo del contenedor */
.theme-z-900 .wrap:has(form[action*="/mi-cuenta/datos"]) > .card-lg {
  width: 100% !important;
}

/* Tarjeta Principal estilo Cristal Apple */
.theme-z-900 .card-lg:has(form[action*="/mi-cuenta/datos"]) {
  background: var(--surface, #ffffff) !important;
  border-radius: 28px !important;
  padding: clamp(24px, 4vw, 44px) !important;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Halo Ambiental Difuminado */
.theme-z-900 .card-lg:has(form[action*="/mi-cuenta/datos"])::before {
  content: "" !important;
  position: absolute !important;
  top: -80px !important;
  right: -80px !important;
  width: 380px !important;
  height: 380px !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 8%, transparent) 0%, color-mix(in srgb, var(--primary) 2%, transparent) 50%, transparent 75%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Grilla Bento del Formulario */
.theme-z-900 form[action*="/mi-cuenta/datos"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Ocultar input CSRF para no desfasar columnas */
.theme-z-900 form[action*="/mi-cuenta/datos"] input[type="hidden"] {
  display: none !important;
}

/* =====================================================================
   SECCIÓN 1: INFORMACIÓN PERSONAL (Estructura Organizada)
   ===================================================================== */
.theme-z-900 form[action*="/mi-cuenta/datos"]::before {
  content: "Información personal" !important;
  grid-column: 1 / -1 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--primary, #2563eb) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px 6px 38px !important;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563eb' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z' /%3E%3C/svg%3E") 12px center / 16px 16px no-repeat !important;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent) !important;
  border-radius: 9999px !important;
  width: fit-content !important;
  margin-bottom: 4px !important;
}

/* Separador elegante */
.theme-z-900 form[action*="/mi-cuenta/datos"] > hr {
  grid-column: 1 / -1 !important;
  border: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--text) 12%, transparent) 25%, color-mix(in srgb, var(--text) 12%, transparent) 75%, transparent 100%) !important;
  margin: 18px 0 10px 0 !important;
  width: 100% !important;
}

/* =====================================================================
   SECCIÓN 2: CAMBIAR CONTRASEÑA (Estructura Organizada)
   ===================================================================== */
.theme-z-900 form[action*="/mi-cuenta/datos"] > h3 {
  grid-column: 1 / -1 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--primary, #2563eb) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface)) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent) !important;
  border-radius: 9999px !important;
  width: fit-content !important;
  margin: 4px 0 0 0 !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] > h3::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563eb' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z' /%3E%3C/svg%3E") center / contain no-repeat !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] > p.small {
  grid-column: 1 / -1 !important;
  font-size: 13.5px !important;
  color: var(--text-2, #64748b) !important;
  margin: -10px 0 6px 0 !important;
  font-weight: 450 !important;
  text-align: left !important;
}

/* Tarjetas Bento Individuales (.field) */
.theme-z-900 form[action*="/mi-cuenta/datos"] .field {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg, #f8fafc)) !important;
  border: 1.5px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  gap: 10px !important;
  margin-bottom: 0 !important;
  min-width: 0 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] .field:hover {
  border-color: color-mix(in srgb, var(--text) 22%, transparent) !important;
  background: var(--surface, #ffffff) !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04) !important;
  transform: translateY(-1.5px) !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] .field:focus-within {
  background: var(--surface, #ffffff) !important;
  border-color: var(--primary, #2563eb) !important;
  box-shadow: 0 8px 26px color-mix(in srgb, var(--primary) 12%, transparent), 0 0 0 1px var(--primary) !important;
  transform: translateY(-1.5px) !important;
}

/* Etiqueta del Campo */
.theme-z-900 form[action*="/mi-cuenta/datos"] .field label {
  font-size: 13.5px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  color: var(--text, #1e293b) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
}

/* Inputs de Formulario con Iconos Integrados */
.theme-z-900 form[action*="/mi-cuenta/datos"] .field input {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px 0 44px !important;
  border-radius: 12px !important;
  border: 1.5px solid color-mix(in srgb, var(--text) 16%, transparent) !important;
  background-color: var(--surface, #ffffff) !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 19px 19px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--text, #0f172a) !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

/* Iconos Vectoriales SVG por Tipo de Campo */
.theme-z-900 form[action*="/mi-cuenta/datos"] input#full_name {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z' /%3E%3C/svg%3E") !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] input[type="email"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z' /%3E%3C/svg%3E") !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] input#phone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z' /%3E%3C/svg%3E") !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] input#current_password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z' /%3E%3C/svg%3E") !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] input#password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z' /%3E%3C/svg%3E") !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] input#password_confirm {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z' /%3E%3C/svg%3E") !important;
}

/* Enfoque del Input */
.theme-z-900 form[action*="/mi-cuenta/datos"] .field input:focus {
  border-color: var(--primary, #2563eb) !important;
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--primary) 18%, transparent) !important;
  background-color: var(--surface, #ffffff) !important;
}

/* Campo de Correo Deshabilitado */
.theme-z-900 form[action*="/mi-cuenta/datos"] .field input:disabled {
  background-color: color-mix(in srgb, var(--bg, #f1f5f9) 70%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--text) 10%, transparent) !important;
  color: var(--text-2, #64748b) !important;
  cursor: not-allowed !important;
  opacity: 0.9 !important;
}

/* Badge de Seguridad: Protegido con Icono SVG Vectorial (Sin Emojis) */
.theme-z-900 form[action*="/mi-cuenta/datos"] .field:has(input[disabled]) label::after {
  content: "Protegido" !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  color: var(--primary, #2563eb) !important;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563eb' stroke-width='2.2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z' /%3E%3C/svg%3E") 8px center / 11px 11px no-repeat !important;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent) !important;
  padding: 3px 9px 3px 24px !important;
  border-radius: 99px !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
}

/* Simetría Perfecta: Subtítulos de ayuda uniformes en todas las tarjetas */
.theme-z-900 form[action*="/mi-cuenta/datos"] .field:nth-of-type(1)::after {
  content: "Nombre completo para facturación" !important;
  font-size: 11.5px !important;
  color: var(--faint, #94a3b8) !important;
  margin-top: 2px !important;
  display: block !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] .field .hint,
.theme-z-900 form[action*="/mi-cuenta/datos"] .field:has(input:disabled) .hint {
  background: none transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 2px !important;
  font-size: 11.5px !important;
  color: var(--faint, #94a3b8) !important;
  line-height: 1.35 !important;
  display: block !important;
  border-radius: 0 !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] .field .hint::before {
  display: none !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] .field:nth-of-type(3)::after {
  content: "Incluye código de país (ej. 57300...)" !important;
  font-size: 11.5px !important;
  color: var(--faint, #94a3b8) !important;
  margin-top: 2px !important;
  display: block !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] .field:nth-of-type(4)::after {
  content: "Requerida si cambias contraseña" !important;
  font-size: 11.5px !important;
  color: var(--faint, #94a3b8) !important;
  margin-top: 2px !important;
  display: block !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] .field:nth-of-type(5)::after {
  content: "Usa al menos 8 caracteres seguros" !important;
  font-size: 11.5px !important;
  color: var(--faint, #94a3b8) !important;
  margin-top: 2px !important;
  display: block !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] .field:nth-of-type(6)::after {
  content: "Debe ser idéntica a la nueva" !important;
  font-size: 11.5px !important;
  color: var(--faint, #94a3b8) !important;
  margin-top: 2px !important;
  display: block !important;
}

/* Botón Guardar Cambios — Estilo Apple Azul Compacto (No estirado en PC) */
.theme-z-900 form[action*="/mi-cuenta/datos"] > button[type="submit"] {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  margin-inline: auto !important;
  width: auto !important;
  min-width: 200px !important;
  max-width: 260px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 0 32px !important;
  margin-top: 14px !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, var(--primary, #075bdb) 0%, color-mix(in srgb, var(--primary, #075bdb) 88%, #000) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--primary, #075bdb) 78%, #000) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--primary, #075bdb) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] > button[type="submit"]::after {
  content: "" !important;
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M14 5l7 7m0 0l-7 7m7-7H3' /%3E%3C/svg%3E") center / contain no-repeat !important;
  transition: transform 0.2s ease !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] > button[type="submit"]:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary, #075bdb) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] > button[type="submit"]:hover::after {
  transform: translateX(3px) !important;
}

.theme-z-900 form[action*="/mi-cuenta/datos"] > button[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary, #075bdb) 25%, transparent) !important;
}

/* =====================================================================
   ADAPTABILIDAD RESPONSIVE (TABLETS Y MÓVILES)
   ===================================================================== */

/* Tablets / Pantallas Medianas (<= 960px) */
@media (max-width: 960px) {
  .theme-z-900 .card-lg:has(form[action*="/mi-cuenta/datos"]) {
    padding: 30px 24px !important;
  }
  .theme-z-900 form[action*="/mi-cuenta/datos"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .theme-z-900 form[action*="/mi-cuenta/datos"] > .field:nth-of-type(3),
  .theme-z-900 form[action*="/mi-cuenta/datos"] > .field:nth-of-type(6) {
    grid-column: 1 / -1 !important;
  }
}

/* Pantallas Móviles (<= 640px) — Rediseño iOS Organizado */
@media (max-width: 640px) {
  /* Contenedor sin desbordes y con márgenes laterales */
  .theme-z-900 .wrap:has(form[action*="/mi-cuenta/datos"]) {
    padding-inline: 14px !important;
    width: 100% !important;
  }

  /* Píldora de ruta estrictamente centrada */
  .theme-z-900 .wrap:has(form[action*="/mi-cuenta/datos"]) > p.small {
    margin-inline: auto !important;
    align-self: center !important;
    font-size: 12px !important;
    padding: 5px 14px !important;
    margin-bottom: 10px !important;
  }

  /* Título y subtítulo proporcionados para móvil */
  .theme-z-900 .wrap:has(form[action*="/mi-cuenta/datos"]) > h1 {
    font-size: 26px !important;
    margin-bottom: 18px !important;
  }

  .theme-z-900 .wrap:has(form[action*="/mi-cuenta/datos"]) > h1::after {
    font-size: 13px !important;
    line-height: 1.4 !important;
    max-width: 310px !important;
    margin-top: 6px !important;
  }

  /* Tarjeta contenedora estilo iOS Grouped Sheet */
  .theme-z-900 .card-lg:has(form[action*="/mi-cuenta/datos"]) {
    padding: 22px 16px !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
  }

  /* Formulario a 1 columna limpia y bien espaciada */
  .theme-z-900 form[action*="/mi-cuenta/datos"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .theme-z-900 form[action*="/mi-cuenta/datos"] > .field:nth-of-type(3),
  .theme-z-900 form[action*="/mi-cuenta/datos"] > .field:nth-of-type(6) {
    grid-column: auto !important;
  }

  /* Badges de encabezado de sección proporcionales en móvil */
  .theme-z-900 form[action*="/mi-cuenta/datos"]::before,
  .theme-z-900 form[action*="/mi-cuenta/datos"] > h3 {
    font-size: 13.5px !important;
    padding: 5px 14px 5px 34px !important;
    margin-top: 4px !important;
    margin-bottom: 2px !important;
  }
  .theme-z-900 form[action*="/mi-cuenta/datos"] > h3 {
    padding: 5px 14px !important;
  }

  /* Tarjetas de campo individuales en móvil */
  .theme-z-900 form[action*="/mi-cuenta/datos"] .field {
    padding: 15px 16px !important;
    border-radius: 16px !important;
    gap: 7px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
  }

  .theme-z-900 form[action*="/mi-cuenta/datos"] .field label {
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }

  .theme-z-900 form[action*="/mi-cuenta/datos"] .field input {
    height: 48px !important;
    font-size: 16px !important; /* Previene auto-zoom molesto en iOS Safari */
    padding: 0 14px 0 42px !important;
    border-radius: 12px !important;
    border: 1.5px solid #cbd5e1 !important;
  }

  /* Subtítulos de ayuda en móvil */
  .theme-z-900 form[action*="/mi-cuenta/datos"] .field::after,
  .theme-z-900 form[action*="/mi-cuenta/datos"] .field .hint {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
    line-height: 1.3 !important;
  }

  /* Separador de sección en móvil */
  .theme-z-900 form[action*="/mi-cuenta/datos"] > hr {
    margin: 16px 0 8px 0 !important;
  }

  /* Botón de acción principal al 100% de ancho para fácil toque con pulgar */
  .theme-z-900 form[action*="/mi-cuenta/datos"] > button[type="submit"] {
    width: 100% !important;
    justify-self: stretch !important;
    min-height: 52px !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    margin-top: 14px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22) !important;
  }
}

/* ---- El carrito en el menu de abajo (NetwilOne 3.39.2) ----------------- */
/* El icono "cart" y el contador de unidades que llega en item.carrito. */
.theme-z-900 .z-i-cart { --z-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204h2l2.4%2011.2a2%202%200%200%200%202%201.6h7.7a2%202%200%200%200%202-1.5L21%208H6.2%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2220%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2220%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.theme-z-900 .z-dock-icon { position: relative; }
.theme-z-900 .z-dock-count {
    position: absolute; top: 0; right: 2px; z-index: 1;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: grid; place-items: center; border-radius: 999px;
    background: var(--primary); color: var(--on-primary, #fff);
    border: 2px solid var(--surface);
    font-size: 10px; font-weight: 800; line-height: 1; font-style: normal;
}
.theme-z-900 .z-dock-count[hidden] { display: none; }