/* ==========================================================================
   ZentrixMed Premium UI — capa visual B2B salud (Medline / Siemens tone)
   Solo presentación. No altera markup funcional ni comportamiento JS.
   Cargar DESPUÉS de store.css / app.css / login.css
   ========================================================================== */

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

:root {
  /* Brand — clinical navy + medical teal */
  --zm-navy: #002B5B;
  --zm-navy-deep: #001A38;
  --zm-navy-mid: #0A3A6B;
  --zm-teal: #30B4B4;
  --zm-teal-deep: #1F8F8F;
  --zm-teal-soft: rgba(48, 180, 180, 0.12);
  --zm-ice: #F4F7FA;
  --zm-mist: #E8EEF4;
  --zm-ink: #142033;
  --zm-ink-2: #2A3A4F;
  --zm-muted: #5C6B7E;
  --zm-line: #D5DEE8;
  --zm-white: #FFFFFF;
  --zm-heading: #002B5B;
  --zm-on-accent: #042F2F;

  --zm-radius-xs: 6px;
  --zm-radius-sm: 8px;
  --zm-radius-md: 12px;
  --zm-radius-lg: 16px;
  --zm-radius-xl: 20px;

  --zm-shadow-xs: 0 1px 2px rgba(0, 43, 91, 0.04);
  --zm-shadow-sm: 0 2px 8px rgba(0, 43, 91, 0.05), 0 1px 2px rgba(0, 43, 91, 0.03);
  --zm-shadow-md: 0 8px 24px rgba(0, 43, 91, 0.07), 0 2px 6px rgba(0, 43, 91, 0.04);
  --zm-shadow-lg: 0 16px 48px rgba(0, 43, 91, 0.1), 0 4px 12px rgba(0, 43, 91, 0.05);

  --zm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --zm-dur: 0.28s;
  --zm-dur-fast: 0.16s;

  --zm-font: 'IBM Plex Sans', 'Source Sans 3', system-ui, sans-serif;
  --zm-display: 'Sora', 'Manrope', system-ui, sans-serif;

  /* Map into existing design tokens (store + admin) */
  --brand: var(--zm-navy);
  --brand-dark: var(--zm-navy-deep);
  --brand-accent: var(--zm-teal);
  --brand-soft: var(--zm-teal-soft);
  --brand-ink: var(--zm-navy-deep);

  --primary: var(--zm-navy);
  --primary-strong: var(--zm-navy-deep);
  --primary-soft: rgba(0, 43, 91, 0.08);
  --accent: var(--zm-teal);
  --red: var(--zm-navy);

  --font: var(--zm-font);
  --font-display: var(--zm-display);
  --font-ui: var(--zm-font);
  --font-brand: var(--zm-display);

  --ink: var(--zm-ink);
  --ink-2: var(--zm-ink-2);
  --muted: var(--zm-muted);
  --text: var(--zm-ink);
  --text-2: var(--zm-ink-2);
  --text-3: var(--zm-muted);

  --bg: var(--zm-ice);
  --bg-elevated: #F8FAFC;
  --surface: var(--zm-white);
  --surface-2: #F0F4F8;
  --line: var(--zm-line);
  --border: var(--zm-line);
  --border-strong: #B8C5D4;

  --radius: var(--zm-radius-md);
  --radius-sm: var(--zm-radius-sm);
  --radius-lg: var(--zm-radius-lg);
  --shadow: var(--zm-shadow-xs);
  --shadow-sm: var(--zm-shadow-sm);
  --shadow-md: var(--zm-shadow-md);
  --shadow-lg: var(--zm-shadow-lg);
  --ring: 0 0 0 3px rgba(48, 180, 180, 0.28);

  --sidebar-bg: var(--zm-navy-deep);
  --sidebar-active: rgba(48, 180, 180, 0.18);
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-text: rgba(232, 238, 244, 0.72);
  --sidebar-text-active: #FFFFFF;

  --header-bg: rgba(255, 255, 255, 0.94);
  --header-fg: var(--zm-ink);
  --header-border: var(--zm-line);

  --container: 1200px;
  --pad-x: clamp(18px, 3.5vw, 40px);
}

/* Prefer light clinical UI for public store */
html[data-theme="light"] {
  color-scheme: light;
}

/* Dark: remap tokens so premium layer keeps contrast */
html[data-theme="dark"] {
  color-scheme: dark;
  --zm-ice: #0B1219;
  --zm-mist: #15202B;
  --zm-ink: #F2F6FA;
  --zm-ink-2: #D7E0EA;
  --zm-muted: #9AA8B8;
  --zm-line: rgba(255, 255, 255, 0.12);
  --zm-white: #141B24;
  --zm-heading: #E8F1FA;
  --zm-on-accent: #042F2F;
  --zm-teal-soft: rgba(48, 180, 180, 0.18);
  --zm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --zm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --zm-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --zm-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);

  --ink: #F2F6FA;
  --ink-2: #D7E0EA;
  --muted: #9AA8B8;
  --text: #F2F6FA;
  --text-2: #D7E0EA;
  --text-3: #9AA8B8;
  --bg: #0B1219;
  --bg-elevated: #101821;
  --surface: #141B24;
  --surface-2: #1A2330;
  --line: rgba(255, 255, 255, 0.12);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.2);
  --header-bg: rgba(11, 18, 25, 0.94);
  --header-fg: #F2F6FA;
  --header-border: rgba(255, 255, 255, 0.1);
  --primary-soft: rgba(48, 180, 180, 0.16);
  --ring: 0 0 0 3px rgba(48, 180, 180, 0.35);
}

/* --------------------------------------------------------------------------
   Global type & motion
   -------------------------------------------------------------------------- */
body.store-body,
body.sp-login,
body {
  font-family: var(--zm-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .store-hero-slide-title, .store-brand-text,
.brand strong, .sp-brand h1, .kpi .num {
  font-family: var(--zm-display);
  letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus accessibility */
:focus-visible {
  outline: 2px solid var(--zm-teal);
  outline-offset: 2px;
}

/* ==========================================================================
   STOREFRONT
   ========================================================================== */

.store-body {
  background:
    linear-gradient(180deg, #FFFFFF 0%, var(--zm-ice) 42%, #EEF3F8 100%);
  color: var(--zm-ink);
}

/* Header — clinical bar */
.store-header {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid var(--zm-line) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(0, 43, 91, 0.03);
}

.store-header-inner {
  min-height: 76px;
  gap: 20px;
}

.store-brand-logo {
  max-height: none;
  height: 44px;
  width: auto;
  max-width: min(280px, 58vw);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border: 0;
}

.store-nav a {
  font-family: var(--zm-font);
  font-weight: 550;
  font-size: 0.92rem;
  color: var(--zm-ink-2);
  padding: 8px 12px;
  border-radius: var(--zm-radius-sm);
  transition: color var(--zm-dur-fast) var(--zm-ease), background var(--zm-dur-fast) var(--zm-ease);
}

.store-nav a:hover {
  color: var(--zm-heading);
  background: rgba(0, 43, 91, 0.05);
}

.store-nav a.is-active {
  color: var(--zm-heading);
  background: rgba(48, 180, 180, 0.12);
  font-weight: 650;
}

.store-lang-toggle {
  border: 1px solid var(--zm-line);
  border-radius: 999px;
  background: var(--zm-white);
  padding: 2px;
  box-shadow: var(--zm-shadow-xs);
}

.store-lang-btn {
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.store-lang-btn.is-active {
  background: var(--zm-navy);
  color: #fff;
}

.store-header-cta,
.btn-store-primary {
  border-radius: var(--zm-radius-sm) !important;
  background: var(--zm-navy) !important;
  box-shadow: 0 6px 18px rgba(0, 43, 91, 0.22) !important;
  text-transform: none;
  letter-spacing: -0.01em;
  font-family: var(--zm-font);
  font-weight: 650;
}

.btn-store-primary:hover {
  background: var(--zm-navy-mid) !important;
}

.btn-store-ghost,
.btn-store-outline {
  border-radius: var(--zm-radius-sm) !important;
  font-family: var(--zm-font);
}

.btn-store-outline {
  border-color: var(--zm-navy) !important;
  color: var(--zm-heading) !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-size: 0.92rem !important;
}

.btn-store-outline:hover {
  background: var(--zm-navy) !important;
  color: #fff !important;
  box-shadow: var(--zm-shadow-sm) !important;
}

/* Hero — full-bleed clinical */
.store-hero,
.store-hero-carousel {
  border-radius: 0 !important;
}

.store-hero-slide-kicker {
  font-family: var(--zm-display);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem) !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zm-teal) !important;
}

.store-hero-slide-kicker::before,
.store-hero-slide-kicker::after {
  display: none !important;
}

.store-hero-slide-title {
  font-family: var(--zm-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  line-height: 1.12;
  max-width: 16ch;
}

.store-hero-slide-sub,
.store-lead {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.55;
  max-width: 42ch;
}

.store-hero-carousel-btn {
  border-radius: var(--zm-radius-sm) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--zm-heading) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: var(--zm-shadow-sm);
}

.store-hero-dot.is-active {
  background: var(--zm-teal) !important;
}

/* Sections */
.store-section {
  padding-block: clamp(48px, 7vw, 88px);
}

.store-section-head h2,
.store-section h2 {
  font-family: var(--zm-display);
  font-weight: 700;
  color: var(--zm-heading);
  letter-spacing: -0.025em;
}

.store-section-head .store-lead,
.store-section-head p {
  color: var(--zm-muted);
  max-width: 52ch;
}

.store-kicker {
  color: var(--zm-teal);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* Specialty cards: estilos principales viven en store.css (.zm-spec-section) */

.store-specialty-grid > *,
.store-spec-card,
[class*="store-specialty"] .store-card,
.store-why-grid > *,
.store-audience-grid > * {
  border-radius: var(--zm-radius-md) !important;
  border: 1px solid var(--zm-line) !important;
  background: var(--zm-white) !important;
  box-shadow: var(--zm-shadow-xs);
  transition: transform var(--zm-dur) var(--zm-ease), box-shadow var(--zm-dur) var(--zm-ease), border-color var(--zm-dur-fast) var(--zm-ease);
}

.store-specialty-grid > *:hover,
.store-spec-card:hover,
.store-why-grid > *:hover,
.store-audience-grid > *:hover {
  transform: translateY(-3px);
  box-shadow: var(--zm-shadow-md);
  border-color: color-mix(in srgb, var(--zm-teal) 35%, var(--zm-line)) !important;
}

/* Product cards */
.store-product-card {
  border-radius: var(--zm-radius-md) !important;
  border: 1px solid var(--zm-line) !important;
  background: var(--zm-white) !important;
  box-shadow: var(--zm-shadow-xs) !important;
  overflow: hidden;
  transition: transform var(--zm-dur) var(--zm-ease), box-shadow var(--zm-dur) var(--zm-ease), border-color var(--zm-dur-fast) var(--zm-ease);
}

.store-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--zm-shadow-md) !important;
  border-color: color-mix(in srgb, var(--zm-navy) 22%, var(--zm-line)) !important;
}

.store-product-card h3,
.store-product-card .store-product-name {
  font-family: var(--zm-display);
  font-weight: 650;
  color: var(--zm-heading);
  letter-spacing: -0.015em;
}

.store-product-card .store-price,
.store-product-price {
  font-family: var(--zm-display);
  font-weight: 700;
  color: var(--zm-heading);
  font-variant-numeric: tabular-nums;
}

/* Catalog filters */
.store-catalog-form,
.store-catalog-filters,
.store-filters {
  background: var(--zm-white);
  border: 1px solid var(--zm-line);
  border-radius: var(--zm-radius-md);
  box-shadow: var(--zm-shadow-xs);
  padding: 16px;
}

.store-catalog-form input,
.store-catalog-form select,
.store-body input.form-control,
.store-body select.form-control,
.store-lead-field input,
.store-lead-field textarea {
  border-radius: var(--zm-radius-sm) !important;
  border: 1px solid var(--zm-line) !important;
  background: #FBFCFD !important;
  min-height: 44px;
  transition: border-color var(--zm-dur-fast) var(--zm-ease), box-shadow var(--zm-dur-fast) var(--zm-ease);
}

.store-catalog-form input:focus,
.store-catalog-form select:focus,
.store-lead-field input:focus,
.store-lead-field textarea:focus {
  border-color: var(--zm-teal) !important;
  box-shadow: var(--ring) !important;
  outline: none;
}

/* Lead modal */
.store-lead-modal-card {
  border-radius: var(--zm-radius-lg) !important;
  border: 1px solid var(--zm-line) !important;
  box-shadow: var(--zm-shadow-lg) !important;
}

.store-lead-modal-kicker {
  color: var(--zm-teal) !important;
  letter-spacing: 0.12em;
}

.store-lead-modal-head h2 {
  font-family: var(--zm-display);
  color: var(--zm-heading);
}

/* Footer */
.store-footer {
  background:
    linear-gradient(180deg, #FFFFFF 0%, #F0F5F9 100%) !important;
  border-top: 1px solid var(--zm-line);
  color: var(--zm-muted) !important;
}

.store-footer strong {
  font-family: var(--zm-display);
  color: var(--zm-heading) !important;
}

.store-footer a:hover {
  color: var(--zm-teal) !important;
}

/* ==========================================================================
   ADMIN / BACKOFFICE
   ========================================================================== */

body {
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(48, 180, 180, 0.06), transparent 55%),
    radial-gradient(700px 360px at 100% 0%, rgba(0, 43, 91, 0.05), transparent 50%),
    var(--zm-ice) !important;
}

.app .sidebar {
  background:
    linear-gradient(175deg, var(--zm-navy-deep) 0%, #001428 55%, #00101F 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.app .brand strong {
  font-family: var(--zm-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app .brand span {
  color: rgba(48, 180, 180, 0.85) !important;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.app .role-badge {
  background: rgba(48, 180, 180, 0.15) !important;
  color: #9FE8E8 !important;
  border: 1px solid rgba(48, 180, 180, 0.28);
  border-radius: var(--zm-radius-sm);
  font-weight: 650;
  letter-spacing: 0.04em;
}

.app .nav-link {
  border-radius: var(--zm-radius-sm);
  transition: background var(--zm-dur-fast) var(--zm-ease), color var(--zm-dur-fast) var(--zm-ease);
}

.app .nav-link:hover,
.app .nav-link.is-active,
.app .nav-link.active {
  background: rgba(48, 180, 180, 0.14) !important;
  color: #fff !important;
}

.app .topbar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--zm-line) !important;
  backdrop-filter: blur(12px);
  box-shadow: none;
}

.app .card,
.card {
  border-radius: var(--zm-radius-md) !important;
  border: 1px solid var(--zm-line) !important;
  box-shadow: var(--zm-shadow-xs) !important;
  background: var(--zm-white) !important;
  padding: 20px !important;
}

.app .card h2,
.app .card h3,
.card h2,
.card h3 {
  font-family: var(--zm-display);
  color: var(--zm-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app .page-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.app .page-toolbar-copy h2 {
  margin: 0 0 4px;
}

.app .page-toolbar-copy .small {
  color: var(--zm-muted);
}

.app .kpi {
  border-radius: var(--zm-radius-md);
  border: 1px solid var(--zm-line);
  background: var(--zm-white);
  box-shadow: var(--zm-shadow-xs);
}

.app .kpi .num {
  color: var(--zm-heading);
}

.app .btn,
.btn {
  border-radius: var(--zm-radius-sm) !important;
  font-family: var(--zm-font);
  font-weight: 600;
  letter-spacing: -0.01em;
  min-height: 40px;
  transition: background var(--zm-dur-fast) var(--zm-ease), border-color var(--zm-dur-fast) var(--zm-ease), box-shadow var(--zm-dur-fast) var(--zm-ease), transform var(--zm-dur-fast) var(--zm-ease);
}

.app .btn-red,
.btn-red {
  background: var(--zm-navy) !important;
  border-color: var(--zm-navy) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 43, 91, 0.18);
}

.app .btn-red:hover,
.btn-red:hover {
  background: var(--zm-navy-mid) !important;
  border-color: var(--zm-navy-mid) !important;
}

.app .btn-green,
.btn-green {
  background: var(--zm-teal) !important;
  border-color: var(--zm-teal) !important;
  color: #042F2F !important;
}

.app .btn-green:hover,
.btn-green:hover {
  background: var(--zm-teal-deep) !important;
  border-color: var(--zm-teal-deep) !important;
  color: #fff !important;
}

.app .btn-ghost,
.btn-ghost,
.app .btn-gray,
.btn-gray {
  border-radius: var(--zm-radius-sm) !important;
  border-color: var(--zm-line) !important;
  background: var(--zm-white) !important;
  color: var(--zm-ink-2) !important;
}

.app .btn-ghost:hover,
.btn-ghost:hover {
  border-color: var(--zm-teal) !important;
  color: var(--zm-heading) !important;
  background: rgba(48, 180, 180, 0.08) !important;
}

.app .form-control,
.form-control {
  border-radius: var(--zm-radius-sm) !important;
  border: 1px solid var(--zm-line) !important;
  background: #FBFCFD !important;
  min-height: 42px;
  padding: 10px 12px;
  transition: border-color var(--zm-dur-fast) var(--zm-ease), box-shadow var(--zm-dur-fast) var(--zm-ease);
}

.app .form-control:focus,
.form-control:focus {
  border-color: var(--zm-teal) !important;
  box-shadow: var(--ring) !important;
  outline: none;
}

.app label {
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--zm-ink-2);
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}

.app .table,
.table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.app .table th,
.table th {
  font-family: var(--zm-font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zm-muted);
  background: #F7FAFC !important;
  border-bottom: 1px solid var(--zm-line) !important;
  padding: 12px 14px !important;
}

.app .table td,
.table td {
  padding: 14px !important;
  border-bottom: 1px solid #EEF2F6 !important;
  vertical-align: middle;
}

.app .table tr:hover td,
.table tr:hover td {
  background: rgba(48, 180, 180, 0.04);
}

.app .filters,
.filters {
  gap: 12px;
}

.app .alert {
  border-radius: var(--zm-radius-sm);
  border: 1px solid transparent;
}

.app .alert-ok {
  background: #ECFDF8;
  color: #0F766E;
  border-color: #99F6E4;
}

.app .alert-bad {
  background: #FEF2F2;
  color: #B91C1C;
  border-color: #FECACA;
}

.app .quick-card {
  transition: transform var(--zm-dur) var(--zm-ease), box-shadow var(--zm-dur) var(--zm-ease);
}

.app .quick-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--zm-shadow-md);
}

.app .thumb,
img.thumb {
  border-radius: var(--zm-radius-sm);
  border: 1px solid var(--zm-line);
}

/* ==========================================================================
   LOGIN
   ========================================================================== */

body.sp-login {
  background:
    radial-gradient(900px 520px at 8% 0%, rgba(48, 180, 180, 0.18), transparent 55%),
    radial-gradient(700px 480px at 100% 100%, rgba(0, 43, 91, 0.55), transparent 50%),
    linear-gradient(155deg, #00101F 0%, #002B5B 48%, #0A3A6B 100%) !important;
}

.sp-login-shell {
  border-radius: var(--zm-radius-xl) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 28px 80px rgba(0, 16, 31, 0.45) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.sp-brand {
  background:
    linear-gradient(165deg, rgba(48, 180, 180, 0.22), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent) !important;
}

.sp-brand h1 {
  font-family: var(--zm-display) !important;
  letter-spacing: -0.03em;
}

.sp-brand h2 {
  color: var(--zm-teal) !important;
  font-weight: 600;
}

.sp-mark {
  background: linear-gradient(135deg, var(--zm-teal), var(--zm-navy)) !important;
  box-shadow: 0 12px 28px rgba(48, 180, 180, 0.28) !important;
  border-radius: var(--zm-radius-md) !important;
}

.sp-modules li {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--zm-radius-sm);
  background: rgba(255, 255, 255, 0.05);
}

.sp-card {
  background: rgba(255, 255, 255, 0.97) !important;
}

.sp-card-header h3 {
  font-family: var(--zm-display);
  color: var(--zm-heading);
}

.sp-submit {
  background: var(--zm-navy) !important;
  border-radius: var(--zm-radius-sm) !important;
  box-shadow: 0 8px 20px rgba(0, 43, 91, 0.25) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sp-submit:hover {
  background: var(--zm-navy-mid) !important;
}

.sp-field input {
  border-radius: var(--zm-radius-sm) !important;
  border-color: var(--zm-line) !important;
}

.sp-field input:focus {
  border-color: var(--zm-teal) !important;
  box-shadow: var(--ring) !important;
}

/* ==========================================================================
   Responsive polish
   ========================================================================== */
@media (max-width: 900px) {
  .store-header-inner {
    min-height: 68px;
  }

  .app .card,
  .card {
    padding: 16px !important;
  }

  .store-section {
    padding-block: clamp(36px, 8vw, 56px);
  }
}

@media (max-width: 640px) {
  .store-product-card:hover,
  .app .quick-card:hover {
    transform: none;
  }

  .btn-store-primary,
  .btn-store-outline,
  .btn-store-ghost {
    width: 100%;
  }
}

/* ==========================================================================
   DARK MODE — contraste legible (corrige texto perdido)
   ========================================================================== */
html[data-theme="dark"] .store-body {
  background:
    linear-gradient(180deg, #0B1219 0%, #101821 45%, #0B1219 100%) !important;
  color: var(--zm-ink) !important;
}

html[data-theme="dark"] .store-header {
  background: rgba(11, 18, 25, 0.94) !important;
  border-bottom-color: var(--zm-line) !important;
  box-shadow: none;
}

html[data-theme="dark"] .store-nav a {
  color: var(--zm-ink-2) !important;
}

html[data-theme="dark"] .store-nav a:hover,
html[data-theme="dark"] .store-nav a.is-active {
  color: #FFFFFF !important;
  background: rgba(48, 180, 180, 0.16) !important;
}

html[data-theme="dark"] .store-lang-toggle {
  background: var(--zm-white);
  border-color: var(--zm-line);
}

html[data-theme="dark"] .store-lang-btn {
  color: var(--zm-ink-2);
}

html[data-theme="dark"] .store-lang-btn.is-active {
  background: var(--zm-teal);
  color: #042F2F;
}

html[data-theme="dark"] .store-theme-toggle {
  color: var(--zm-ink) !important;
  border-color: var(--zm-line) !important;
  background: var(--zm-white) !important;
}

html[data-theme="dark"] .store-section-head h2,
html[data-theme="dark"] .store-section h2,
html[data-theme="dark"] .store-section h3,
html[data-theme="dark"] .zm-specialty h3,
html[data-theme="dark"] .store-product-card h3,
html[data-theme="dark"] .store-product-card .store-product-name,
html[data-theme="dark"] .store-product-price,
html[data-theme="dark"] .store-product-card .store-price,
html[data-theme="dark"] .store-lead-modal-head h2,
html[data-theme="dark"] .store-footer strong {
  color: var(--zm-heading) !important;
}

html[data-theme="dark"] .store-section-head .store-lead,
html[data-theme="dark"] .store-section-head p,
html[data-theme="dark"] .zm-specialty li,
html[data-theme="dark"] .store-footer,
html[data-theme="dark"] .store-footer p,
html[data-theme="dark"] .store-footer a,
html[data-theme="dark"] .store-footer small {
  color: var(--zm-muted) !important;
}

html[data-theme="dark"] .btn-store-outline {
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: #F2F6FA !important;
  background: transparent !important;
}

html[data-theme="dark"] .btn-store-outline:hover {
  background: var(--zm-teal) !important;
  border-color: var(--zm-teal) !important;
  color: #042F2F !important;
}

html[data-theme="dark"] .btn-store-ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--zm-line) !important;
  color: var(--zm-ink) !important;
}

html[data-theme="dark"] .store-hero-carousel-btn {
  background: rgba(20, 27, 36, 0.92) !important;
  color: #F2F6FA !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="dark"] .zm-specialty,
html[data-theme="dark"] .store-product-card,
html[data-theme="dark"] .store-catalog-form,
html[data-theme="dark"] .store-lead-modal-card,
html[data-theme="dark"] .store-specialty-grid > *,
html[data-theme="dark"] .store-why-grid > *,
html[data-theme="dark"] .store-audience-grid > * {
  background: var(--zm-white) !important;
  border-color: var(--zm-line) !important;
  color: var(--zm-ink) !important;
}

html[data-theme="dark"] .store-catalog-form input,
html[data-theme="dark"] .store-catalog-form select,
html[data-theme="dark"] .store-lead-field input,
html[data-theme="dark"] .store-lead-field textarea,
html[data-theme="dark"] .store-body input,
html[data-theme="dark"] .store-body select,
html[data-theme="dark"] .store-body textarea {
  background: #0F1620 !important;
  border-color: var(--zm-line) !important;
  color: var(--zm-ink) !important;
}

html[data-theme="dark"] .store-footer {
  background: linear-gradient(180deg, #101821 0%, #0B1219 100%) !important;
  border-top-color: var(--zm-line) !important;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(48, 180, 180, 0.08), transparent 55%),
    radial-gradient(700px 360px at 100% 0%, rgba(0, 43, 91, 0.35), transparent 50%),
    #0B1219 !important;
  color: var(--zm-ink) !important;
}

html[data-theme="dark"] .app .topbar {
  background: rgba(16, 24, 33, 0.94) !important;
  border-bottom-color: var(--zm-line) !important;
  color: var(--zm-ink) !important;
}

html[data-theme="dark"] .app .card,
html[data-theme="dark"] .card {
  background: var(--zm-white) !important;
  border-color: var(--zm-line) !important;
  color: var(--zm-ink) !important;
}

html[data-theme="dark"] .app .card h2,
html[data-theme="dark"] .app .card h3,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .app .kpi .num,
html[data-theme="dark"] .app .page-toolbar-copy h2 {
  color: var(--zm-heading) !important;
}

html[data-theme="dark"] .app .page-toolbar-copy .small,
html[data-theme="dark"] .app label,
html[data-theme="dark"] .small,
html[data-theme="dark"] p,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] .content,
html[data-theme="dark"] .main,
html[data-theme="dark"] .topbar {
  color: var(--zm-ink-2);
}

html[data-theme="dark"] .app .form-control,
html[data-theme="dark"] .form-control {
  background: #0F1620 !important;
  border-color: var(--zm-line) !important;
  color: var(--zm-ink) !important;
}

html[data-theme="dark"] .app .table th,
html[data-theme="dark"] .table th {
  background: #101821 !important;
  color: var(--zm-muted) !important;
  border-bottom-color: var(--zm-line) !important;
}

html[data-theme="dark"] .app .table td,
html[data-theme="dark"] .table td {
  color: var(--zm-ink) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .app .table tr:hover td,
html[data-theme="dark"] .table tr:hover td {
  background: rgba(48, 180, 180, 0.08) !important;
}

html[data-theme="dark"] .app .btn-ghost,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .app .btn-gray,
html[data-theme="dark"] .btn-gray {
  background: #15202B !important;
  border-color: var(--zm-line) !important;
  color: var(--zm-ink) !important;
}

html[data-theme="dark"] .app .btn-ghost:hover,
html[data-theme="dark"] .btn-ghost:hover {
  background: rgba(48, 180, 180, 0.14) !important;
  color: #FFFFFF !important;
  border-color: var(--zm-teal) !important;
}

html[data-theme="dark"] .app .kpi {
  background: var(--zm-white);
  border-color: var(--zm-line);
  color: var(--zm-ink);
}

html[data-theme="dark"] .alert-ok {
  background: #052e1c;
  color: #6ee7a8;
  border-color: #065f46;
}

html[data-theme="dark"] .alert-bad {
  background: #3b0a0a;
  color: #fca5a5;
  border-color: #7f1d1d;
}

/* Evitar navy oscuro sobre fondo oscuro en textos sueltos del store */
html[data-theme="dark"] .store-body {
  color: #F2F6FA !important;
}

html[data-theme="dark"] .store-body p,
html[data-theme="dark"] .store-body li,
html[data-theme="dark"] .store-body small,
html[data-theme="dark"] .store-body label {
  color: #D7E0EA !important;
}

html[data-theme="dark"] .store-body h1,
html[data-theme="dark"] .store-body h2,
html[data-theme="dark"] .store-body h3,
html[data-theme="dark"] .store-body h4 {
  color: #F2F6FA !important;
}

html[data-theme="dark"] .store-body a:not(.btn-store-primary):not(.btn-store-outline) {
  color: #B8F0F0 !important;
}

html[data-theme="dark"] .store-brand-logo {
  box-shadow: none;
}

/* Hero: kicker navy se perdía sobre foto oscura */
html[data-theme="dark"] .store-body .store-hero-slide-kicker,
html[data-theme="dark"] .store-body .store-kicker,
html[data-theme="dark"] .store-body .store-hero-accent,
html[data-theme="dark"] .store-body .store-hero-stars,
html[data-theme="dark"] .store-body .store-hero-social-icon {
  color: #7EECEC !important;
}

html[data-theme="dark"] .store-body .store-hero-slide-title,
html[data-theme="dark"] .store-body .store-hero--zentrix h1 {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .store-body .store-hero-slide-sub,
html[data-theme="dark"] .store-body .store-hero-social-proof {
  color: #E8F1FA !important;
}

html[data-theme="dark"] .store-hero--zentrix {
  background: #0B1219 !important;
}

html[data-theme="dark"] .store-hero-zentrix-bg {
  background-color: #0B1219 !important;
  opacity: 0.38;
}

html[data-theme="dark"] .store-hero-zentrix-shade {
  background:
    linear-gradient(90deg, rgba(11, 18, 25, 0.96) 0%, rgba(11, 18, 25, 0.86) 36%, rgba(11, 18, 25, 0.4) 62%, transparent 82%),
    linear-gradient(180deg, rgba(11, 18, 25, 0.5) 0%, transparent 42%, rgba(11, 18, 25, 0.55) 100%) !important;
}

html[data-theme="dark"] .store-hero--zentrix .store-lead {
  color: #C5D4E2 !important;
}

/* Especialidades / por qué / audiencia: tarjetas claras + texto claro = letras invisibles */
html[data-theme="dark"] .zm-specialty,
html[data-theme="dark"] .zm-why-card,
html[data-theme="dark"] .zm-audience-card {
  background: #141B24 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F2F6FA !important;
}

html[data-theme="dark"] .zm-why-card-head,
html[data-theme="dark"] .zm-audience-card-head {
  background: #141B24 !important;
}

html[data-theme="dark"] .zm-spec-head h2,
html[data-theme="dark"] .zm-specialty h3,
html[data-theme="dark"] .zm-why-card-head h3,
html[data-theme="dark"] .zm-audience-card-head h3,
html[data-theme="dark"] .zm-why-section .store-section-head h2,
html[data-theme="dark"] .zm-audience-section .store-section-head h2 {
  color: #F2F6FA !important;
}

html[data-theme="dark"] .zm-spec-lead,
html[data-theme="dark"] .zm-specialty li,
html[data-theme="dark"] .zm-why-card-head p,
html[data-theme="dark"] .zm-audience-card-head p {
  color: #C9D6E4 !important;
}

html[data-theme="dark"] .zm-specialty-cta {
  color: #F2F6FA !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme="dark"] .zm-why-card-icon {
  color: #7EECEC !important;
  background: rgba(48, 180, 180, 0.16) !important;
}

html[data-theme="dark"] .zm-why-feats {
  background: #0D1A28 !important;
}

html[data-theme="dark"] .zm-why-feats li {
  color: #F2F6FA !important;
}

html[data-theme="dark"] .zm-audience-feats {
  background: linear-gradient(180deg, #121C26, #0E161E) !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .zm-audience-feats li {
  color: #E0EAF4 !important;
}

html[data-theme="dark"] .store-section-more,
html[data-theme="dark"] .store-section-head > a,
html[data-theme="dark"] body.store-landing .store-section-more {
  color: #7EECEC !important;
}

html[data-theme="dark"] .store-product-card small,
html[data-theme="dark"] .store-product-body,
html[data-theme="dark"] .store-price b,
html[data-theme="dark"] .store-price {
  color: #E8F1FA !important;
}

html[data-theme="dark"] .store-product-card s {
  color: #8A97A8 !important;
}

html[data-theme="dark"] .store-header-cta-label,
html[data-theme="dark"] .store-theme-toggle-label,
html[data-theme="dark"] .store-theme-toggle {
  color: #F2F6FA !important;
}

html[data-theme="dark"] .store-cart-btn {
  color: #F2F6FA !important;
}

html[data-theme="dark"] .store-filters label,
html[data-theme="dark"] .store-catalog-layout,
html[data-theme="dark"] .store-chip {
  color: #E8F1FA !important;
}

html[data-theme="dark"] .store-body .zm-contact-cta {
  background: linear-gradient(135deg, #141B24, #101821) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #F2F6FA !important;
}

html[data-theme="dark"] .store-body .zm-contact-cta h2 {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .store-body .zm-contact-cta p,
html[data-theme="dark"] .store-body .zm-contact-cta .store-lead {
  color: #D7E0EA !important;
}

html[data-theme="dark"] .store-body .zm-contact-cta .store-interest-preview {
  background: #0C121A !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="dark"] .store-body .zm-contact-cta .store-interest-empty-hint {
  color: #F2F6FA !important;
}

/* Catálogo: panel de filtros blanco + texto claro = letras invisibles */
html[data-theme="dark"] .store-body .store-filters-panel,
html[data-theme="dark"] .store-body .store-catalog-form {
  background: #141B24 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F2F6FA !important;
}

html[data-theme="dark"] .store-body .store-filters-summary,
html[data-theme="dark"] .store-body .store-filters-panel-head strong,
html[data-theme="dark"] .store-body .store-filters-check,
html[data-theme="dark"] .store-body .store-filters-check span,
html[data-theme="dark"] .store-body .store-filters-price-inputs label,
html[data-theme="dark"] .store-body .store-filters-section,
html[data-theme="dark"] .store-body .store-filters-body {
  color: #F2F6FA !important;
}

html[data-theme="dark"] .store-body .store-filters-check em {
  color: #A8B6C6 !important;
}

html[data-theme="dark"] .store-body .store-filters-price-inputs input,
html[data-theme="dark"] .store-body .store-filters-option-search,
html[data-theme="dark"] .store-body .store-filters-toolbar input,
html[data-theme="dark"] .store-body .store-filters-toolbar select {
  background: #0F1620 !important;
  color: #F2F6FA !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="dark"] .store-body .store-filters-summary::after {
  border-color: #F2F6FA !important;
}

html[data-theme="dark"] .store-body .store-filters-clear {
  color: #D7E0EA !important;
}

html[data-theme="dark"] .store-body .store-filters-panel-foot {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
  background: #141B24 !important;
}