/* Apariencia White/Oscuro compartida por todos los configuradores Intelix. */
:root {
  --ix-config-switch-bg: rgba(12, 4, 28, .88);
  --ix-config-switch-line: rgba(255, 255, 255, .18);
  --ix-config-switch-text: rgba(255, 255, 255, .78);
  --ix-config-switch-active-bg: #fff;
  --ix-config-switch-active-text: #34205e;
}

:root[data-config-theme="white"] {
  color-scheme: light;
  --fondo: #f8fafc;
  --fondo-2: #eef2ff;
  --texto: #251b3d;
  --suave: #6d6680;
  --borde: #dcd5eb;
  --panel: rgba(255, 255, 255, .94);
  --bg: #f8fafc;
  --bg2: #eef2ff;
  --w08: rgba(77, 14, 151, .09);
  --w05: rgba(77, 14, 151, .055);
  --w03: rgba(77, 14, 151, .035);
  --text: #251b3d;
  --muted: #6d6680;
  --line: #ded7eb;
  --ok: #047857;
  --ix-config-switch-bg: rgba(255, 255, 255, .96);
  --ix-config-switch-line: #d7d0e6;
  --ix-config-switch-text: #6d6680;
  --ix-config-switch-active-bg: linear-gradient(135deg, #4d0e97, #7c3aed);
  --ix-config-switch-active-text: #fff;
}

.ix-config-theme-switch {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 100000;
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--ix-config-switch-line);
  border-radius: 999px;
  background: var(--ix-config-switch-bg);
  box-shadow: 0 10px 30px rgba(25, 12, 53, .18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.ix-config-theme-switch button {
  min-height: 36px;
  padding: 7px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ix-config-switch-text);
  font: 700 12px/1.1 Poppins, "Encode Sans", "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.ix-config-theme-switch button:hover { transform: translateY(-1px); }
.ix-config-theme-switch button.is-active {
  background: var(--ix-config-switch-active-bg);
  color: var(--ix-config-switch-active-text);
  box-shadow: 0 4px 14px rgba(77, 14, 151, .2);
}
.ix-config-theme-switch button:focus-visible {
  outline: 3px solid #075fce;
  outline-offset: 2px;
}
.ix-config-theme-icon { font-size: 15px; line-height: 1; }

/* Fondo y superficies comunes de los configuradores Ajax y Dahua. */
:root[data-config-theme="white"] body {
  color: var(--text, var(--texto));
  background:
    radial-gradient(circle at 12% 5%, rgba(124, 58, 237, .08), transparent 27rem),
    radial-gradient(circle at 92% 10%, rgba(0, 176, 255, .06), transparent 25rem),
    linear-gradient(180deg, #fff 0%, #f8fafc 55%, #f4f1fb 100%) !important;
}
:root[data-config-theme="white"] body::before {
  background-image: radial-gradient(rgba(124, 58, 237, .12) 1px, transparent 1.3px);
}
:root[data-config-theme="white"] #bg-canvas .orb { display: none !important; }
:root[data-config-theme="white"] #bg-grid {
  opacity: .8;
  background-image:
    linear-gradient(rgba(124, 58, 237, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, .055) 1px, transparent 1px) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

:root[data-config-theme="white"] .paso h2,
:root[data-config-theme="white"] .op b,
:root[data-config-theme="white"] .cnt .fila .t b,
:root[data-config-theme="white"] .res h2,
:root[data-config-theme="white"] .linea .meta b,
:root[data-config-theme="white"] .linea .pz b,
:root[data-config-theme="white"] .total .v,
:root[data-config-theme="white"] .jorn b,
:root[data-config-theme="white"] .bloque h3,
:root[data-config-theme="white"] .aviso b,
:root[data-config-theme="white"] .sec-title,
:root[data-config-theme="white"] .dev-name,
:root[data-config-theme="white"] .r-title,
:root[data-config-theme="white"] .step h2,
:root[data-config-theme="white"] .step h3 {
  color: #251b3d !important;
}

:root[data-config-theme="white"] .op,
:root[data-config-theme="white"] .cnt,
:root[data-config-theme="white"] .linea,
:root[data-config-theme="white"] .sec,
:root[data-config-theme="white"] .dev-card,
:root[data-config-theme="white"] .prod,
:root[data-config-theme="white"] .dia-card,
:root[data-config-theme="white"] .hdd-line,
:root[data-config-theme="white"] .rec-box,
:root[data-config-theme="white"] .nvr-row,
:root[data-config-theme="white"] .sum-row,
:root[data-config-theme="white"] .r-alt,
:root[data-config-theme="white"] .step > div,
:root[data-config-theme="white"] #funnel-container [class*="bg-slate-100"] {
  background-color: rgba(255, 255, 255, .94) !important;
  border-color: #ded7eb !important;
  box-shadow: 0 10px 28px rgba(42, 25, 76, .055);
}

:root[data-config-theme="white"] .op:hover,
:root[data-config-theme="white"] .nvr-row:hover,
:root[data-config-theme="white"] .extra-toggle:hover {
  background: #f5f1ff !important;
}
:root[data-config-theme="white"] .op[aria-pressed="true"],
:root[data-config-theme="white"] .dev-card.active,
:root[data-config-theme="white"] .nvr-row.active,
:root[data-config-theme="white"] .dia-card.active,
:root[data-config-theme="white"] .chip.active {
  background: #eee8ff !important;
  border-color: #7c3aed !important;
}

:root[data-config-theme="white"] .mas,
:root[data-config-theme="white"] .menos,
:root[data-config-theme="white"] .counter button,
:root[data-config-theme="white"] .chip,
:root[data-config-theme="white"] .pick-btn,
:root[data-config-theme="white"] .btn.sec,
:root[data-config-theme="white"] .btn-ghost,
:root[data-config-theme="white"] .r-see-btn {
  background: #fff !important;
  color: #35264f !important;
  border-color: #d8d0e8 !important;
}

:root[data-config-theme="white"] .btn:not(.sec),
:root[data-config-theme="white"] .r-cta,
:root[data-config-theme="white"] .cta-carrito,
:root[data-config-theme="white"] .p-cta,
:root[data-config-theme="white"] .step-bubble.current,
:root[data-config-theme="white"] .step-bubble.done,
:root[data-config-theme="white"] .dev-chk,
:root[data-config-theme="white"] .sw-rec {
  color: #fff !important;
}

:root[data-config-theme="white"] .num,
:root[data-config-theme="white"] .btn.sec:hover,
:root[data-config-theme="white"] .cta-presu,
:root[data-config-theme="white"] .r-chip {
  color: #251b3d !important;
}

/* Los configuradores Dahua conservan algunos controles con texto blanco
   pensado para su fondo oscuro original. En Intelix White deben mantener
   contraste, incluidos los contadores y campos editables. */
:root[data-config-theme="white"] .cbox input,
:root[data-config-theme="white"] .counter input,
:root[data-config-theme="white"] input[type="number"],
:root[data-config-theme="white"] input[type="text"],
:root[data-config-theme="white"] input[type="search"],
:root[data-config-theme="white"] input[type="email"],
:root[data-config-theme="white"] input[type="tel"],
:root[data-config-theme="white"] input[type="url"],
:root[data-config-theme="white"] input[type="password"],
:root[data-config-theme="white"] select,
:root[data-config-theme="white"] textarea {
  color: #251b3d !important;
  background-color: #fff !important;
  border-color: #d8d0e8 !important;
}
:root[data-config-theme="white"] input::placeholder,
:root[data-config-theme="white"] textarea::placeholder {
  color: #786b8e !important;
  opacity: 1;
}

:root[data-config-theme="white"] .device-img,
:root[data-config-theme="white"] .prod .pimg,
:root[data-config-theme="white"] .nvr-img,
:root[data-config-theme="white"] .r-img,
:root[data-config-theme="white"] .r-alt-img {
  background: #fff !important;
  border-color: #e2ddec !important;
}

:root[data-config-theme="white"] #panel,
:root[data-config-theme="white"] #mbar,
:root[data-config-theme="white"] .result-panel,
:root[data-config-theme="white"] #step10 {
  color: #251b3d;
}

/*
 * Intelix White v2
 * ----------------
 * Los configuradores Dahua nacieron sobre fondo oscuro y varias piezas usan
 * blancos translúcidos. Cambiar únicamente el fondo dejaba textos y estados
 * bloqueados casi invisibles. Esta capa convierte el tema claro en un sistema
 * completo: superficies, jerarquía, estados, foco y contraste WCAG AA.
 */
:root[data-config-theme="white"] {
  --ix-white-canvas: #f8f9fc;
  --ix-white-surface: #ffffff;
  --ix-white-surface-soft: #f6f3fb;
  --ix-white-ink: #241735;
  --ix-white-muted: #625a70;
  --ix-white-subtle: #746b82;
  --ix-white-border: #9384a8;
  --ix-white-border-strong: #76658c;
  --ix-white-brand: #6424c7;
  --ix-white-brand-strong: #4d0e97;
  --ix-white-brand-soft: #eee7fb;
  --ix-white-info-bg: #f1ebfb;
  --ix-white-info-text: #4b2a73;
  --ix-white-disabled-bg: #efedf3;
  --ix-white-disabled-text: #625b6d;
  --ix-white-focus: #075fce;
}

/* Cabecera y navegación: la marca vuelve a ser legible sobre blanco. */
:root[data-config-theme="white"] #hdr .logo {
  box-sizing: content-box;
  max-width: min(240px, 72vw);
  height: 48px;
  padding: 9px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #211132, #4d0e97);
  box-shadow: 0 8px 24px rgba(52, 32, 94, .16);
}
:root[data-config-theme="white"] #hdr h1,
:root[data-config-theme="white"] .cab h1,
:root[data-config-theme="white"] #funnel-container .text-center h1,
:root[data-config-theme="white"] h1 .grad {
  background: linear-gradient(110deg, #3d146f 0%, #8b1f63 58%, #b74422 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
:root[data-config-theme="white"] #hdr p,
:root[data-config-theme="white"] .cab p,
:root[data-config-theme="white"] #stepTxt,
:root[data-config-theme="white"] #stepNav li,
:root[data-config-theme="white"] .step-sub,
:root[data-config-theme="white"] .sec-meta p,
:root[data-config-theme="white"] .paso .ayuda {
  color: var(--ix-white-muted) !important;
}
:root[data-config-theme="white"] .hdr-pill,
:root[data-config-theme="white"] .cab .marca {
  color: var(--ix-white-brand-strong) !important;
  background: var(--ix-white-brand-soft) !important;
  border-color: #cbb9e8 !important;
}
:root[data-config-theme="white"] #stepNav li.current,
:root[data-config-theme="white"] #stepNav li.current .sn-lbl,
:root[data-config-theme="white"] #stepNav li.done {
  color: var(--ix-white-brand-strong) !important;
}
:root[data-config-theme="white"] .sn-dot,
:root[data-config-theme="white"] .step-bubble {
  color: var(--ix-white-muted) !important;
  background: #fff !important;
  border-color: var(--ix-white-border-strong) !important;
}
:root[data-config-theme="white"] #stepNav li.current .sn-dot,
:root[data-config-theme="white"] #stepNav li.done .sn-dot,
:root[data-config-theme="white"] .step-bubble.current,
:root[data-config-theme="white"] .step-bubble.done {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ix-white-brand-strong), #7c3aed) !important;
  border-color: transparent !important;
}

/* Superficies y texto secundario. */
:root[data-config-theme="white"] .sec,
:root[data-config-theme="white"] .step,
:root[data-config-theme="white"] #panel,
:root[data-config-theme="white"] .result-panel,
:root[data-config-theme="white"] #step10,
:root[data-config-theme="white"] #funnel-container,
:root[data-config-theme="white"] #funnel-container .funnel-shell {
  color: var(--ix-white-ink) !important;
}
:root[data-config-theme="white"] .sec,
:root[data-config-theme="white"] .step,
:root[data-config-theme="white"] #panel,
:root[data-config-theme="white"] .result-panel,
:root[data-config-theme="white"] #funnel-container [class*="bg-slate-50"],
:root[data-config-theme="white"] #funnel-container [class*="bg-white"] {
  background: rgba(255, 255, 255, .97) !important;
  border-color: var(--ix-white-border) !important;
  box-shadow: 0 12px 32px rgba(42, 25, 76, .07) !important;
}
:root[data-config-theme="white"] .sec-meta h2,
:root[data-config-theme="white"] .counter .lbl .t,
:root[data-config-theme="white"] .dev-name,
:root[data-config-theme="white"] .dia-card .t,
:root[data-config-theme="white"] .p-big,
:root[data-config-theme="white"] #panel li b,
:root[data-config-theme="white"] .porque b,
:root[data-config-theme="white"] .porque .pq-t,
:root[data-config-theme="white"] .hdd-line b,
:root[data-config-theme="white"] .total-row .v,
:root[data-config-theme="white"] .mbar-val,
:root[data-config-theme="white"] .mnt-head-name,
:root[data-config-theme="white"] .cam-card-name,
:root[data-config-theme="white"] .cam-sel-name,
:root[data-config-theme="white"] .cam-sel-n,
:root[data-config-theme="white"] .hdd-box-val,
:root[data-config-theme="white"] .rec-days,
:root[data-config-theme="white"] .nvr-name,
:root[data-config-theme="white"] .auto-name,
:root[data-config-theme="white"] .bk-val,
:root[data-config-theme="white"] .bk-tot-l,
:root[data-config-theme="white"] .p-eur-l,
:root[data-config-theme="white"] .r-title,
:root[data-config-theme="white"] .r-name,
:root[data-config-theme="white"] .r-price,
:root[data-config-theme="white"] .r-alt-name,
:root[data-config-theme="white"] .r-alt-price,
:root[data-config-theme="white"] .sum-name,
:root[data-config-theme="white"] .sum-price,
:root[data-config-theme="white"] #mbarVal {
  color: var(--ix-white-ink) !important;
}
:root[data-config-theme="white"] .dev-sub,
:root[data-config-theme="white"] .counter .lbl .d,
:root[data-config-theme="white"] .sw-lbl,
:root[data-config-theme="white"] .trust-row,
:root[data-config-theme="white"] #ctaHint,
:root[data-config-theme="white"] .res-claim,
:root[data-config-theme="white"] .p-label,
:root[data-config-theme="white"] .p-estado,
:root[data-config-theme="white"] #panel ul,
:root[data-config-theme="white"] .cart-hint,
:root[data-config-theme="white"] .r-main-lbl,
:root[data-config-theme="white"] .r-sku,
:root[data-config-theme="white"] .r-alt-sku,
:root[data-config-theme="white"] .sum-meta,
:root[data-config-theme="white"] footer.fin {
  color: var(--ix-white-muted) !important;
}

/* Consejos: fondo suave y texto violeta oscuro, no lila translúcido. */
:root[data-config-theme="white"] .tip,
:root[data-config-theme="white"] .tip-box,
:root[data-config-theme="white"] .porque {
  color: var(--ix-white-info-text) !important;
  background: var(--ix-white-info-bg) !important;
  border-color: #c9b8e4 !important;
}
:root[data-config-theme="white"] .tip-ico,
:root[data-config-theme="white"] .tip-hl,
:root[data-config-theme="white"] .tip-box strong,
:root[data-config-theme="white"] .option-card-icon {
  color: var(--ix-white-brand-strong) !important;
}

/* Selección clara y consistente. */
:root[data-config-theme="white"] .dev-ico,
:root[data-config-theme="white"] .nvr-ico,
:root[data-config-theme="white"] .trust-row svg {
  color: var(--ix-white-brand) !important;
}
:root[data-config-theme="white"] .dev-card,
:root[data-config-theme="white"] .counter,
:root[data-config-theme="white"] .option-card,
:root[data-config-theme="white"] .cam-card,
:root[data-config-theme="white"] .cam-sel-row,
:root[data-config-theme="white"] .auto-card,
:root[data-config-theme="white"] .sum-row {
  color: var(--ix-white-ink) !important;
  background: var(--ix-white-surface) !important;
  border-color: var(--ix-white-border) !important;
}
:root[data-config-theme="white"] .dev-card:hover,
:root[data-config-theme="white"] .option-card:hover,
:root[data-config-theme="white"] .cam-card:hover {
  background: #faf8ff !important;
  border-color: #9f7acf !important;
}
:root[data-config-theme="white"] .dev-card.active,
:root[data-config-theme="white"] .option-card.selected,
:root[data-config-theme="white"] .option-card.active,
:root[data-config-theme="white"] .auto-card.active {
  background: var(--ix-white-brand-soft) !important;
  border-color: var(--ix-white-brand) !important;
  box-shadow: 0 0 0 1px var(--ix-white-brand), 0 8px 22px rgba(77, 14, 151, .11) !important;
}

/* Bloqueado no significa ilegible. La interacción queda anulada por la página,
   pero el contenido conserva contraste suficiente para explicar qué ocurrirá. */
:root[data-config-theme="white"] .sec.locked > *:not(.lock-note) {
  opacity: 1 !important;
}
:root[data-config-theme="white"] .sec.locked > .sec-head {
  opacity: 1 !important;
}
:root[data-config-theme="white"] .sec.locked .dev-card.disabled,
:root[data-config-theme="white"] .sec.locked .option-card:disabled {
  opacity: 1 !important;
  filter: none !important;
}
:root[data-config-theme="white"] .sec.locked .dev-card,
:root[data-config-theme="white"] .sec.locked .counter,
:root[data-config-theme="white"] .sec.locked .option-card,
:root[data-config-theme="white"] .sec.locked .tip {
  background: var(--ix-white-surface-soft) !important;
}
:root[data-config-theme="white"] .sec.locked .lock-note {
  color: var(--ix-white-info-text) !important;
  background: var(--ix-white-info-bg) !important;
  border-color: #a88bd0 !important;
}
:root[data-config-theme="white"] .step:not(.on) {
  opacity: 1;
  background: var(--ix-white-surface-soft) !important;
}
:root[data-config-theme="white"] .dev-card.disabled,
:root[data-config-theme="white"] .sum-row.sum-out,
:root[data-config-theme="white"] .linea.off {
  opacity: 1 !important;
  color: var(--ix-white-disabled-text) !important;
  background: var(--ix-white-disabled-bg) !important;
}

/* Las columnas flexibles pueden contener nombres de producto largos. Sin
   min-width:0, el texto obliga a la cuadrícula a desbordarse en móvil. */
:root[data-config-theme="white"] .dev-grid > *,
:root[data-config-theme="white"] .ops > *,
:root[data-config-theme="white"] .cam-grid > * {
  min-width: 0;
}
:root[data-config-theme="white"] .dev-name,
:root[data-config-theme="white"] .dev-sub,
:root[data-config-theme="white"] .op b,
:root[data-config-theme="white"] .op span,
:root[data-config-theme="white"] .r-name,
:root[data-config-theme="white"] .r-alt-name {
  overflow-wrap: anywhere;
}
:root[data-config-theme="white"] .dev-sub,
:root[data-config-theme="white"] .counter .lbl .d,
:root[data-config-theme="white"] .tip,
:root[data-config-theme="white"] .lock-note {
  font-size: max(.78rem, 12.5px);
  line-height: 1.5;
}

/* Controles, estados deshabilitados y objetivos táctiles. */
:root[data-config-theme="white"] button,
:root[data-config-theme="white"] [role="button"],
:root[data-config-theme="white"] .dev-card,
:root[data-config-theme="white"] .option-card {
  min-height: 44px;
}
:root[data-config-theme="white"] .counter button,
:root[data-config-theme="white"] .mas,
:root[data-config-theme="white"] .menos,
:root[data-config-theme="white"] .cam-sel-btn {
  min-width: 44px;
  min-height: 44px;
}
:root[data-config-theme="white"] button:disabled,
:root[data-config-theme="white"] .r-cta[disabled],
:root[data-config-theme="white"] .p-cta.off,
:root[data-config-theme="white"] #mbar button.off {
  color: var(--ix-white-disabled-text) !important;
  background: var(--ix-white-disabled-bg) !important;
  border-color: #d0cad9 !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
:root[data-config-theme="white"] :where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid var(--ix-white-focus) !important;
  outline-offset: 3px !important;
}
:root[data-config-theme="white"] a:not(.cta-carrito):not(.p-cta):not(.r-cta):not(.btn) {
  color: #5b21b6;
  text-decoration-color: currentColor;
  text-decoration-thickness: .08em;
  text-underline-offset: .15em;
}

/* Evita que la conversión de utilidades Tailwind oscurezca el texto de CTA. */
:root[data-config-theme="white"] #funnel-container .text-slate-900 { color: var(--ix-white-ink) !important; }
:root[data-config-theme="white"] #funnel-container .text-slate-700 { color: #433b50 !important; }
:root[data-config-theme="white"] #funnel-container .text-slate-500,
:root[data-config-theme="white"] #funnel-container .text-slate-400,
:root[data-config-theme="white"] #funnel-container label { color: var(--ix-white-muted) !important; }
:root[data-config-theme="white"] #funnel-container input[type="text"],
:root[data-config-theme="white"] #funnel-container input[type="email"],
:root[data-config-theme="white"] #funnel-container input[type="tel"],
:root[data-config-theme="white"] #funnel-container input[type="url"],
:root[data-config-theme="white"] #funnel-container textarea,
:root[data-config-theme="white"] #funnel-container select {
  color: var(--ix-white-ink) !important;
  background: #fff !important;
  border-color: var(--ix-white-border) !important;
}
:root[data-config-theme="white"] #funnel-container input::placeholder,
:root[data-config-theme="white"] #funnel-container textarea::placeholder {
  color: var(--ix-white-subtle) !important;
  opacity: 1 !important;
}
:root[data-config-theme="white"] #funnel-container h3.font-bold,
:root[data-config-theme="white"] #funnel-container .step.active > div:first-child > h2,
:root[data-config-theme="white"] #funnel-container #mainCount,
:root[data-config-theme="white"] #funnel-container #rearCount,
:root[data-config-theme="white"] #funnel-container #kitTitle,
:root[data-config-theme="white"] #funnel-container #resultHeading,
:root[data-config-theme="white"] #funnel-container #totalBasePrice {
  color: var(--ix-white-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
:root[data-config-theme="white"] #funnel-container button[class*="text-white"],
:root[data-config-theme="white"] #funnel-container a[class*="text-white"],
:root[data-config-theme="white"] #funnel-container .btn-primary,
:root[data-config-theme="white"] #funnel-container [class*="bg-gradient"] {
  color: #fff !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Panel lateral y barra móvil: blancos, no una capa violeta lavada. */
:root[data-config-theme="white"] #panel {
  background: #fff !important;
  border-color: var(--ix-white-border-strong) !important;
}
:root[data-config-theme="white"] #mbar {
  background: rgba(255, 255, 255, .98) !important;
  border-color: var(--ix-white-border) !important;
  box-shadow: 0 -8px 24px rgba(42, 25, 76, .10) !important;
}
:root[data-config-theme="white"] #mbar .mbar-lbl {
  color: var(--ix-white-muted) !important;
}
:root[data-config-theme="white"] .sec-n {
  background: linear-gradient(135deg, #6d28d9, #be185d) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  opacity: .86;
}

/*
 * Fichas de producto de los recomendadores PoE/WiFi
 * -------------------------------------------------
 * La fila antigua dependía de flex-wrap: en anchos intermedios precio,
 * cantidad y enlace invadían la descripción. La cuadrícula reserva una zona
 * estable para cada dato y en móvil convierte las acciones en un pie claro.
 */
.prod {
  display: grid !important;
  grid-template-columns: auto 56px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center !important;
  gap: 8px 12px !important;
  padding: 16px !important;
  overflow: visible !important;
}
.prod > input[type="checkbox"],
.prod > span:first-child {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: 22px !important;
  min-width: 22px;
  height: 22px !important;
  margin: 0 !important;
}
.prod .pimg {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 56px !important;
  height: 56px !important;
  padding: 5px;
}
.prod .info {
  grid-column: 3;
  grid-row: 1;
  min-width: 0 !important;
}
.prod .sku {
  margin-bottom: 2px;
  color: var(--muted);
  font: 700 .68rem/1.25 "Roboto Mono", monospace;
  overflow-wrap: anywhere;
}
.prod .nom {
  color: var(--text);
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.32;
  overflow-wrap: anywhere;
}
.prod .tags {
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.prod .tags .stock { color: var(--ok); font-weight: 800; }
.prod .qty {
  grid-column: 4;
  grid-row: 1;
  display: grid !important;
  grid-template-columns: 44px minmax(34px, auto) 44px;
  align-items: center;
  gap: 4px !important;
  flex-shrink: 0;
}
.prod .qty button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--w05);
  color: var(--text);
  font: 800 1rem/1 "Encode Sans", system-ui, sans-serif;
  cursor: pointer;
}
.prod .qty button:hover { border-color: var(--purple-l); }
.prod .qty span {
  min-width: 34px;
  text-align: center;
  color: var(--text);
  font: 800 .9rem/1 "Roboto Mono", monospace;
}
.prod .pick-btn {
  grid-column: 4;
  grid-row: 1;
  min-height: 44px;
  padding: 9px 14px;
}
.prod .precio {
  grid-column: 3;
  grid-row: 2;
  justify-self: start;
  min-width: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  font-size: .94rem;
  font-weight: 900;
}
.prod .precio small {
  display: inline !important;
  margin-left: .4em;
  color: var(--muted) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: currentColor !important;
}
.prod a.ver {
  grid-column: 4;
  grid-row: 2;
  justify-self: end;
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}
:root[data-config-theme="white"] .prod .sku,
:root[data-config-theme="white"] .prod .tags,
:root[data-config-theme="white"] .prod .precio small {
  color: var(--ix-white-muted) !important;
}
:root[data-config-theme="white"] .prod .nom,
:root[data-config-theme="white"] .prod .qty span,
:root[data-config-theme="white"] .prod .qty button,
:root[data-config-theme="white"] .prod .precio {
  color: var(--ix-white-ink) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
:root[data-config-theme="white"] .prod .qty button {
  background: #fff !important;
  border-color: var(--ix-white-border) !important;
}
:root[data-config-theme="white"] .prod .pick-btn {
  color: var(--ix-white-brand-strong) !important;
  background: #fff !important;
  border-color: var(--ix-white-border-strong) !important;
}
:root[data-config-theme="white"] .prod .pick-btn:hover {
  color: #fff !important;
  background: var(--ix-white-brand-strong) !important;
}

@media (max-width: 680px) {
  .prod {
    grid-template-columns: 24px 52px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 10px !important;
    padding: 15px 13px !important;
  }
  .prod > input[type="checkbox"],
  .prod > span:first-child {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: 12px !important;
  }
  .prod .pimg {
    grid-column: 2;
    grid-row: 1;
    width: 52px !important;
    height: 52px !important;
  }
  .prod .info {
    grid-column: 3;
    grid-row: 1;
  }
  .prod .qty,
  .prod .pick-btn {
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: start;
  }
  .prod .precio {
    grid-column: 2 / 4;
    grid-row: 3;
    display: flex;
    align-items: baseline;
    gap: .4em;
  }
  .prod .precio small {
    display: inline !important;
    margin: 0;
  }
  .prod a.ver {
    grid-column: 2 / 4;
    grid-row: 4;
    justify-self: start;
  }
}

@media (max-width: 680px) {
  .ix-config-theme-switch { top: 8px; right: 8px; }
  .ix-config-theme-switch button { width: 40px; padding: 7px; }
  .ix-config-theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

@media print {
  .ix-config-theme-switch { display: none !important; }
}