/* Las tipografías se cargan con un <link> en partials/mt-head (en paralelo, no encadenadas a este archivo) */

/* =====================================================================
   Multitienda — sistema de diseño
   Generado desde el artifact "Multitienda" (Design System).
   1) Tokens  2) Componentes. No editar valores sueltos: cambiar tokens.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
/* Paleta "Filamento": naranja de PLA + grafito cálido. Pensada para tiendas de impresión 3D. */
:root,
[data-theme="light"] {
  --surface: #faf7f3;
  --surface-raised: #ffffff;
  --surface-sunken: #f3eee8;
  --line: #e7e0d7;
  --line-strong: #968c80;
  --ink: #1f1c1a;
  --ink-muted: #685f56;
  --brand: #f26a1b;
  --brand-hover: #e05a0e;
  --brand-ink: #b5440a;
  --on-brand: #1f1c1a;
  --brand-soft: #fdeadc;
  --graphite: #1f1c1a;
  --on-graphite: #ffffff;
  --focus: var(--brand-ink);
  --neutral: #4f4a44;
  --neutral-soft: #ece7e0;
  --info: #1d5fa8;
  --info-soft: #e3eefb;
  --teal: #0f766e;
  --teal-soft: #e0f2ef;
  --warning: #8a5300;
  --warning-soft: #fbefd9;
  --success: #24723a;
  --success-soft: #e2f3e5;
  --danger: #b42318;
  --danger-ink: #b42318;
  --danger-soft: #fde8e6;
  --shipped: var(--teal);
  --star: #f5a623;
  --layer-line: rgba(31,28,26,.045);
  --shadow-sm: 0 1px 2px rgba(31,28,26,0.06);
  --shadow-md: 0 8px 24px -8px rgba(31,28,26,0.16);
  --shadow-lg: 0 24px 48px -12px rgba(31,28,26,0.24);
  --shadow-brand: 0 6px 18px -6px rgba(242,106,27,0.55);
}

[data-theme="dark"] {
  --surface: #161412;
  --surface-raised: #201d1a;
  --surface-sunken: #0f0d0c;
  --line: #34302b;
  --line-strong: #7a7267;
  --ink: #f4efe9;
  --ink-muted: #a89f94;
  --brand: #ff7a2e;
  --brand-hover: #ff8c47;
  --brand-ink: #ffa064;
  --on-brand: #1a0f08;
  --brand-soft: #3a1f0e;
  --graphite: #0f0d0c;
  --on-graphite: #f4efe9;
  --focus: var(--brand-ink);
  --neutral: #d4cdc3;
  --neutral-soft: #2e2a26;
  --info: #8cbcf2;
  --info-soft: #16263a;
  --teal: #5ec9bd;
  --teal-soft: #11302c;
  --warning: #f0bd6a;
  --warning-soft: #33240d;
  --success: #86cf97;
  --success-soft: #15301c;
  --danger: #f5978d;
  --danger-ink: #f5978d;
  --danger-soft: #3a1714;
  --shipped: var(--teal);
  --star: #f7b84b;
  --layer-line: rgba(255,255,255,.035);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.6);
  --shadow-lg: 0 24px 48px -12px rgba(0,0,0,0.7);
  --shadow-brand: 0 6px 18px -6px rgba(255,122,46,0.45);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --z-sticky: 10;
  --z-sidebar: 40;
  --z-modal: 100;
  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

:root {
  /* Defaults del tema de cada tienda. La vitrina los sobreescribe con Store::cssVariables(). No dependen del tema claro/oscuro. */
  --store-top: #1f1c1a;
  --store-on-top: #ffffff;
  --store-accent: #f26a1b;
  --store-on-accent: #1f1c1a;
}

/* ---------- 2. Componentes ---------- */
/* Multitienda — componentes. Prefijo mt-. Lee los tokens de tokens.css. */

.mt, .mt * { box-sizing: border-box; }
.mt { font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; }
.mt a { text-decoration: none; }
.mt a:not([class]), .mt .mt-link { color: var(--brand-ink); text-decoration: none; }
.mt a:not([class]):hover, .mt .mt-link:hover { text-decoration: underline; }
.mt :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mt-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mt-muted { color: var(--ink-muted); }
.mt-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.mt-stack { display: flex; flex-direction: column; gap: var(--space-3); }

/* Button */
.mt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); font: 600 14px/20px var(--font-sans); cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, box-shadow .15s; text-decoration: none !important; }
.mt-btn--primary { background: var(--brand); color: var(--on-brand); }
.mt-btn--primary:hover { box-shadow: inset 0 0 0 999px rgba(0,0,0,.08); }
.mt-btn--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.mt-btn--secondary:hover { background: var(--surface-sunken); }
.mt-btn--ghost { background: transparent; color: var(--ink); }
.mt-btn--ghost:hover { background: var(--surface-sunken); }
.mt-btn--danger { background: var(--danger); color: var(--surface-raised); }
.mt-btn--store { background: var(--store-accent); color: var(--store-on-accent); }
.mt-btn--store:hover { box-shadow: inset 0 0 0 999px rgba(0,0,0,.08); }
.mt-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; }
.mt-btn--lg { height: 48px; padding: 0 var(--space-5); font-size: 15px; }
.mt-btn--block { width: 100%; }
.mt-btn[disabled], .mt-btn.is-disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Badge */
.mt-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-sm); font: 600 12px/18px var(--font-sans); white-space: nowrap; }
.mt-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mt-badge--plain::before { display: none; }
.mt-badge--neutral { color: var(--neutral); background: var(--neutral-soft); }
.mt-badge--info { color: var(--info); background: var(--info-soft); }
.mt-badge--warning { color: var(--warning); background: var(--warning-soft); }
.mt-badge--success { color: var(--success); background: var(--success-soft); }
.mt-badge--danger { color: var(--danger); background: var(--danger-soft); }
.mt-badge--brand { color: var(--brand-ink); background: var(--brand-soft); }
.mt-badge--plan { border-radius: var(--radius-pill); color: var(--brand-ink); background: var(--brand-soft); }
.mt-badge--plan::before { display: none; }
.mt-count { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--danger); color: var(--surface-raised); font: 700 11px/1 var(--font-sans); }

/* Field */
.mt-field { display: flex; flex-direction: column; gap: 6px; }
.mt-label { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.mt-label .req { color: var(--danger); }
.mt-input, .mt-select, .mt-textarea { width: 100%; height: 40px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: 400 15px/22px var(--font-sans); }
.mt-textarea { height: auto; min-height: 88px; padding: 10px var(--space-3); resize: vertical; }
.mt-input::placeholder, .mt-textarea::placeholder { color: var(--ink-muted); }
.mt-input:focus, .mt-select:focus, .mt-textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.mt-input[disabled] { background: var(--surface-sunken); color: var(--ink-muted); }
.mt-hint { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.mt-field.is-invalid .mt-input { border-color: var(--danger); }
.mt-field.is-invalid .mt-hint { color: var(--danger); }
.mt-color { display: flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); font: 500 14px/20px var(--font-mono); }
.mt-color i { width: 24px; height: 24px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }

/* Toggle */
.mt-toggle { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font: 500 14px/20px var(--font-sans); }
.mt-toggle input { appearance: none; width: 40px; height: 24px; margin: 0; border-radius: var(--radius-pill); background: var(--line-strong); position: relative; cursor: pointer; transition: background .15s; }
.mt-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-raised); transition: transform .15s; }
.mt-toggle input:checked { background: var(--brand-ink); }
.mt-toggle input:checked::after { transform: translateX(16px); }

/* Card */
.mt-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.mt-card__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.mt-card__title { margin: 0; font: 650 17px/24px var(--font-display); }
.mt-card__head .mt-btn { margin-left: auto; }
.mt-card__body { padding: var(--space-5); }
.mt-card__foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); background: var(--surface-sunken); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Alert (trial / past_due / suspended) */
.mt-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font: 400 14px/20px var(--font-sans); color: var(--ink); }
.mt-alert__icon { flex: none; width: 20px; text-align: center; padding-top: 1px; }
.mt-alert__body { flex: 1; }
.mt-alert__body strong { font-weight: 700; }
.mt-alert .mt-btn { flex: none; margin-left: auto; align-self: center; }
.mt-alert--info { background: var(--info-soft); } .mt-alert--info .mt-alert__icon { color: var(--info); }
.mt-alert--warning { background: var(--warning-soft); } .mt-alert--warning .mt-alert__icon { color: var(--warning); }
.mt-alert--danger { background: var(--danger-soft); } .mt-alert--danger .mt-alert__icon { color: var(--danger); }
.mt-alert--success { background: var(--success-soft); } .mt-alert--success .mt-alert__icon { color: var(--success); }

/* Sidebar (panel de tienda y superadmin) */
.mt-sidebar { width: 248px; background: var(--surface-sunken); border-right: 1px solid var(--line); padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.mt-sidebar__store { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); margin-bottom: var(--space-2); }
.mt-sidebar__store img, .mt-sidebar__logo { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--line); object-fit: contain; padding: 4px; }
.mt-sidebar__name { font: 650 15px/20px var(--font-display); }
.mt-sidebar__group { margin: var(--space-4) var(--space-3) var(--space-1); font: 700 11px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.mt-nav { display: flex; align-items: center; gap: var(--space-3); height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--ink) !important; font: 500 14px/20px var(--font-sans); text-decoration: none !important; }
.mt-nav i { width: 18px; text-align: center; color: var(--ink-muted); }
.mt-nav:hover { background: var(--surface-raised); }
.mt-nav.is-active { background: var(--brand-soft); color: var(--brand-ink) !important; font-weight: 650; }
.mt-nav.is-active i { color: var(--brand-ink); }
.mt-nav .mt-count, .mt-nav .mt-nav__lock { margin-left: auto; }
.mt-nav.is-locked { color: var(--ink-muted) !important; }
.mt-nav__lock { font-size: 11px; color: var(--ink-muted); }

/* Topbar del panel */
.mt-topbar { display: flex; align-items: center; gap: var(--space-4); height: 60px; padding: 0 var(--space-5); background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.mt-topbar__search { flex: 1; max-width: 360px; }

/* StatTile */
.mt-stat { padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-1); }
.mt-stat__label { font: 600 13px/18px var(--font-sans); color: var(--ink-muted); display: flex; align-items: center; gap: var(--space-2); }
.mt-stat { min-width: 0; }
.mt-stat__value { white-space: nowrap; font: 600 clamp(20px, 5.4vw, 28px)/1.2 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 420px) { .mt-stat { padding: var(--space-4); } .mt-stat__value { white-space: normal; } }
.mt-stat__value small { font-size: 15px; color: var(--ink-muted); font-weight: 500; }
.mt-stat__delta { font: 600 13px/18px var(--font-sans); }
.mt-stat__delta.up { color: var(--success); } .mt-stat__delta.down { color: var(--danger); }
.mt-stat__link { color: var(--brand-ink); margin-top: var(--space-2); font: 600 13px/18px var(--font-sans); }
.mt-meter { height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; margin-top: var(--space-2); }
.mt-meter > span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }

/* Table */
.mt-table-wrap { position: relative; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; }
.mt-table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font-sans); }
.mt-table th { text-align: left; padding: var(--space-3) var(--space-4); background: var(--surface-sunken); color: var(--ink-muted); font: 600 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mt-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.mt-table tr:last-child td { border-bottom: 0; }
.mt-table tbody tr:hover td { background: var(--surface); }
.mt-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mt-thumb { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-sunken); border: 1px solid var(--line); }
.mt-cell-main { display: flex; align-items: center; gap: var(--space-3); }
.mt-cell-main b { display: block; font-weight: 600; }

/* Plan & Module cards */
.mt-plan { position: relative; padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-3); }
.mt-plan.is-selected { border: 2px solid var(--brand-ink); }
.mt-plan__name { font: 650 20px/26px var(--font-display); margin: 0; }
.mt-plan__price { font: 700 32px/36px var(--font-display); letter-spacing: -.01em; }
.mt-plan__price small { font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.mt-plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: 14px; }
.mt-plan li::before { content: "✓"; color: var(--brand-ink); font-weight: 700; margin-right: var(--space-2); }
.mt-module { display: flex; gap: var(--space-3); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); align-items: flex-start; }
.mt-module.is-active { border-color: var(--brand-ink); background: var(--brand-soft); }
.mt-module__icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; }
.mt-module.is-active .mt-module__icon { background: var(--brand); color: var(--on-brand); }
.mt-module__body { flex: 1; }
.mt-module__name { font: 650 15px/20px var(--font-sans); }
.mt-module__desc { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); margin-top: 2px; }
.mt-module__price { font: 600 14px/20px var(--font-mono); white-space: nowrap; }

/* ImageField */
.mt-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 160px; padding: var(--space-4); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-sunken); text-align: center; color: var(--ink-muted); font-size: 13px; }
.mt-drop img { max-height: 96px; max-width: 100%; object-fit: contain; }
.mt-drop b { color: var(--brand-ink); }

/* Thread (reclamos) */
.mt-thread { display: flex; flex-direction: column; gap: var(--space-3); }
.mt-msg { max-width: 80%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: 14px; }
.mt-msg__meta { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); margin-bottom: var(--space-1); }
.mt-msg--customer { background: var(--surface-sunken); border-bottom-left-radius: var(--radius-sm); }
.mt-msg--store { margin-left: auto; background: var(--brand-soft); border-bottom-right-radius: var(--radius-sm); }

/* ---------- Vitrina (storefront). Usa las variables --store-* ---------- */
/* La vitrina se muestra siempre en tema claro: los logos y fotos de cada tienda asumen fondo claro. */
.mt-store { font-family: var(--store-font, var(--font-sans)); color: var(--ink); }
.mt-storebar { display: flex; align-items: center; gap: var(--space-4); padding: 6px var(--space-5); background: var(--store-top); color: var(--store-on-top); font: 500 13px/18px var(--font-sans); }
.mt-storebar a { color: inherit !important; }
.mt-storebar__right { margin-left: auto; display: flex; gap: var(--space-4); }
.mt-storehead { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.mt-storehead img { height: 36px; }
.mt-storehead .mt-input { max-width: 420px; flex: 1; border-radius: var(--radius-pill); }
.mt-cart { position: relative; margin-left: auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); color: var(--ink); }
.mt-cart .mt-count { position: absolute; top: -2px; right: -4px; background: var(--store-accent); color: var(--store-on-accent); }

.mt-product { color: var(--ink); text-decoration: none; display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.mt-product:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mt-product__media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface-sunken); }
.mt-product__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-product__tag { position: absolute; top: var(--space-3); left: var(--space-3); padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--store-accent); color: var(--store-on-accent); font: 700 12px/18px var(--font-sans); }
.mt-product__body { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.mt-product__cat { font: 600 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.mt-product__name { font: 600 15px/20px var(--font-sans); color: var(--ink); }
.mt-product__price { display: flex; align-items: baseline; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); font: 700 18px/24px var(--font-display); }
.mt-product__price s { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.mt-product__free { font: 600 12px/16px var(--font-sans); color: var(--success); }

.mt-hero { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--space-5); min-height: 300px; padding: var(--space-7); border-radius: var(--radius-lg); overflow: hidden; background: var(--hero-bg, var(--surface-sunken)); color: var(--hero-ink, var(--ink)); }
.mt-hero__eyebrow { font: 700 12px/16px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.mt-hero__title { margin: var(--space-2) 0; font: 700 44px/48px var(--store-font-display, var(--font-display)); letter-spacing: -.02em; }
.mt-hero__text { margin: 0 0 var(--space-5); font-size: 17px; line-height: 26px; opacity: .85; max-width: 40ch; }
.mt-hero img { max-height: 260px; max-width: 100%; justify-self: center; object-fit: contain; }
.mt-hero.is-right { grid-template-columns: 1fr 1.1fr; }
.mt-hero.is-right .mt-hero__copy { order: 2; text-align: right; }

@media (max-width: 720px) {
  .mt-hero, .mt-hero.is-right { grid-template-columns: 1fr; padding: var(--space-5); }
  .mt-hero__title { font-size: 30px; line-height: 34px; }
  .mt-hero.is-right .mt-hero__copy { order: 0; text-align: left; }
  .mt-sidebar { width: 100%; }
}

/* ---------- Estructura de panel ---------- */
.mt-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: var(--surface); }
.mt-shell__main { min-width: 0; display: flex; flex-direction: column; }
.mt-shell__content { padding: var(--space-6) var(--space-7); max-width: 1280px; width: 100%; display: flex; flex-direction: column; gap: var(--space-5); }
.mt-topbar__user { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); font: 600 14px/20px var(--font-sans); }
.mt-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 var(--font-sans); }
.mt-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.mt-pagehead__title { margin: 0; font: 650 28px/34px var(--font-display); letter-spacing: -.01em; }
.mt-pagehead__actions { margin-left: auto; display: flex; gap: var(--space-2); }
.mt-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-1); padding: 0; list-style: none; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.mt-crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line-strong); }
.mt-crumbs a { color: var(--ink-muted) !important; }
.mt-crumbs [aria-current] { color: var(--ink); }

/* Tabs (filtros de estado) */
.mt-tabs { position: relative; display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); overflow-x: auto; }
.mt-tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-muted) !important; font: 600 14px/20px var(--font-sans); white-space: nowrap; text-decoration: none !important; }
.mt-tab:hover { color: var(--ink) !important; }
.mt-tab.is-active { color: var(--brand-ink) !important; border-bottom-color: var(--brand-ink); }
.mt-tab small { font: 600 12px/16px var(--font-mono); color: var(--ink-muted); background: var(--surface-sunken); padding: 0 6px; border-radius: var(--radius-pill); }

/* Pagination */
.mt-pager { display: flex; align-items: center; gap: var(--space-1); font: 600 14px/20px var(--font-sans); }
.mt-pager a, .mt-pager span { min-width: 36px; height: 36px; padding: 0 var(--space-2); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--ink) !important; text-decoration: none !important; }
.mt-pager a:hover { background: var(--surface-sunken); }
.mt-pager .is-current { background: var(--brand-soft); color: var(--brand-ink) !important; }
.mt-pager .is-disabled { color: var(--ink-muted) !important; opacity: .5; }
.mt-pager__info { margin-right: auto; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }

/* EmptyState */
.mt-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); }
.mt-empty__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--surface-sunken); color: var(--ink-muted); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: var(--space-2); }
.mt-empty__title { margin: 0; font: 650 20px/26px var(--font-display); }
.mt-empty__text { margin: 0 0 var(--space-3); max-width: 44ch; color: var(--ink-muted); }
.mt-empty__code { font: 700 64px/1 var(--font-display); color: var(--brand-ink); letter-spacing: -.03em; }

/* Modal */
.mt-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(16,14,13,.5); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.mt-modal { width: 100%; max-width: 440px; background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.mt-modal__icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--danger-soft); color: var(--danger); }
.mt-modal__title { margin: 0; font: 650 20px/26px var(--font-display); }
.mt-modal__text { margin: 0; color: var(--ink-muted); }
.mt-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* Toast */
.mt-toasts { position: fixed; top: var(--space-4); right: var(--space-4); z-index: var(--z-modal); display: flex; flex-direction: column; gap: var(--space-2); }
.mt-toast { display: flex; align-items: center; gap: var(--space-3); min-width: 300px; max-width: 420px; padding: var(--space-3) var(--space-4); background: var(--ink); color: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font: 500 14px/20px var(--font-sans); }
.mt-toast__icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.mt-toast--success .mt-toast__icon { background: var(--success-soft); color: var(--success); }
.mt-toast--danger .mt-toast__icon { background: var(--danger-soft); color: var(--danger); }
.mt-toast--warning .mt-toast__icon { background: var(--warning-soft); color: var(--warning); }
.mt-toast__close { margin-left: auto; background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; font-size: 16px; }

/* AuthCard */
.mt-auth { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); background: var(--surface); }
.mt-auth__card { width: 100%; max-width: 400px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.mt-auth__logo { display: flex; justify-content: center; }
.mt-auth__logo img { max-height: 48px; max-width: 220px; }
.mt-auth__wordmark { font: 700 24px/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.mt-auth__title { margin: 0; text-align: center; font: 650 22px/28px var(--font-display); }
.mt-auth__sub { margin: -8px 0 0; text-align: center; color: var(--ink-muted); font-size: 14px; }
.mt-auth__foot { text-align: center; font-size: 14px; color: var(--ink-muted); }
.mt-check { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 14px/20px var(--font-sans); cursor: pointer; }
.mt-check input { width: 18px; height: 18px; accent-color: var(--brand-ink); margin: 0; }
.mt-input-addon { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); overflow: hidden; }
.mt-input-addon .mt-input { border: 0; border-radius: 0; }
.mt-input-addon .mt-input:focus { outline: none; }
.mt-input-addon:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.mt-input-addon span { padding: 0 var(--space-3); color: var(--ink-muted); font: 500 14px/40px var(--font-mono); background: var(--surface-sunken); border-left: 1px solid var(--line); white-space: nowrap; }

/* OrderTimeline */
.mt-steps { display: flex; list-style: none; margin: 0; padding: 0; }
.mt-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; font: 600 13px/18px var(--font-sans); color: var(--ink-muted); }
.mt-step::before { content: ""; position: absolute; top: 13px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.mt-step:first-child::before { display: none; }
.mt-step__dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-raised); border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.mt-step.is-done { color: var(--ink); }
.mt-step.is-done::before, .mt-step.is-current::before { background: var(--brand-ink); }
.mt-step.is-done .mt-step__dot { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--surface-raised); }
.mt-step.is-current { color: var(--brand-ink); }
.mt-step.is-current .mt-step__dot { border-color: var(--brand-ink); box-shadow: 0 0 0 4px var(--brand-soft); }
.mt-step__date { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }

/* ---------- Vitrina: compra ---------- */
.mt-crumbs--store { margin-bottom: var(--space-4); }
.mt-buy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
.mt-gallery__main { aspect-ratio: 1; border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; background: var(--surface-sunken); }
.mt-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-gallery__thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.mt-gallery__thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; }
.mt-gallery__thumbs img.is-active { border-color: var(--store-accent); }
.mt-buy__info { display: flex; flex-direction: column; gap: var(--space-3); }
.mt-buy__title { margin: 0; font: 700 32px/38px var(--store-font-display, var(--font-display)); letter-spacing: -.01em; }
.mt-buy__meta { display: flex; align-items: center; gap: var(--space-2); font: 500 13px/18px var(--font-mono); color: var(--ink-muted); }
.mt-buy__price { display: flex; align-items: baseline; gap: var(--space-3); font: 700 32px/38px var(--font-display); }
.mt-buy__price s { font: 500 17px/24px var(--font-sans); color: var(--ink-muted); }
.mt-buy__desc { color: var(--ink-muted); white-space: pre-line; border-top: 1px solid var(--line); padding-top: var(--space-4); }
.mt-variants { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mt-variant { position: relative; }
.mt-variant input { position: absolute; opacity: 0; pointer-events: none; }
.mt-variant span { display: inline-flex; align-items: center; min-width: 48px; height: 40px; padding: 0 var(--space-3); justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); font: 600 14px/20px var(--font-sans); cursor: pointer; }
.mt-variant input:checked + span { border: 2px solid var(--ink); }
.mt-variant input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.mt-variant input:disabled + span { color: var(--ink-muted); background: var(--surface-sunken); text-decoration: line-through; cursor: not-allowed; }
.mt-qty { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); }
.mt-qty button { width: 40px; height: 100%; border: 0; background: none; font-size: 18px; color: var(--ink); cursor: pointer; }
.mt-qty input { width: 40px; border: 0; text-align: center; font: 600 15px/1 var(--font-mono); background: none; color: var(--ink); -moz-appearance: textfield; }
.mt-qty--sm { height: 36px; }
.mt-qty--sm button { width: 32px; }
.mt-stock { font: 600 13px/18px var(--font-sans); color: var(--success); }
.mt-stock.is-low { color: var(--warning); }
.mt-stock.is-out { color: var(--danger); }

.mt-cartline { display: grid; grid-template-columns: 72px 1fr auto auto auto; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.mt-cartline img { width: 72px; height: 72px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--line); }
.mt-cartline__name { font: 600 15px/20px var(--font-sans); color: var(--ink) !important; }
.mt-cartline__variant { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.mt-cartline__price { font: 600 15px/20px var(--font-mono); text-align: right; min-width: 110px; }
.mt-iconbtn { width: 36px; height: 36px; border: 0; border-radius: var(--radius-md); background: none; color: var(--ink-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mt-iconbtn:hover { background: var(--danger-soft); color: var(--danger); }

.mt-summary { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.mt-summary__title { margin: 0; font: 650 18px/24px var(--font-display); }
.mt-summary__row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 14px; }
.mt-summary__row span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mt-summary__row--discount { color: var(--success); }
.mt-summary__total { display: flex; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--line); font: 700 20px/26px var(--font-display); }
.mt-summary__items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: 14px; }
.mt-summary__items li { display: flex; gap: var(--space-3); align-items: center; }
.mt-summary__items img { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--line); }
.mt-summary__items li > span:last-child { margin-left: auto; font-family: var(--font-mono); white-space: nowrap; }
.mt-coupon { display: flex; gap: var(--space-2); }
.mt-coupon .mt-input { text-transform: uppercase; font-family: var(--font-mono); }

.mt-option { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-raised); cursor: pointer; }
.mt-option input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--ink); }
.mt-option:has(input:checked) { border: 2px solid var(--ink); padding: calc(var(--space-4) - 1px); }
.mt-option__title { font: 650 15px/20px var(--font-sans); }
.mt-option__text { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.mt-option__icon { margin-left: auto; color: var(--ink-muted); font-size: 20px; }

.mt-storefoot { background: var(--ink); color: var(--surface); }
.mt-storefoot__grid { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr; gap: var(--space-6); padding: var(--space-7) var(--space-5); }
.mt-storefoot h4 { margin: 0 0 var(--space-3); font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--surface); opacity: .7; }
.mt-storefoot ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: 14px; }
.mt-storefoot a { color: var(--surface) !important; }
.mt-storefoot__cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.mt-storefoot__bar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); background: var(--store-top); color: var(--store-on-top); font-size: 13px; }
.mt-storefoot__bar a { color: inherit !important; }
.mt-storefoot__powered { margin-left: auto; opacity: .8; }
.mt-storefoot .mt-input, .mt-storefoot .mt-textarea { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); color: var(--surface); }
.mt-storefoot .mt-input::placeholder, .mt-storefoot .mt-textarea::placeholder { color: rgba(255,255,255,.72); }

.mt-catmenu { width: 260px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-2); }
.mt-catmenu a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--ink) !important; font: 500 14px/20px var(--font-sans); text-decoration: none !important; }
.mt-catmenu a i:first-child { width: 18px; text-align: center; color: var(--ink-muted); }
.mt-catmenu a .fa-chevron-right { margin-left: auto; font-size: 11px; color: var(--ink-muted); }
.mt-catmenu a:hover, .mt-catmenu a.is-open { background: var(--surface-sunken); }
.mt-section-title { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-4); font: 700 24px/30px var(--store-font-display, var(--font-display)); letter-spacing: -.01em; }
.mt-section-title a { margin-left: auto; font: 600 14px/20px var(--font-sans); color: var(--ink) !important; }

/* ---------- Plataforma (landing) ---------- */
.mt-landing-nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); }
.mt-landing-nav__brand { font: 700 22px/1 var(--font-display); letter-spacing: -.02em; color: var(--ink) !important; text-decoration: none !important; }
.mt-landing-nav__links { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); font: 600 14px/20px var(--font-sans); }
.mt-landing-nav__links a:not(.mt-btn) { color: var(--ink) !important; }
.mt-landing-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: center; padding: var(--space-7) var(--space-6) var(--space-8); }
.mt-landing-hero__title { margin: 0 0 var(--space-4); font: 700 52px/56px var(--font-display); letter-spacing: -.025em; }
.mt-landing-hero__title em { font-style: normal; color: var(--brand-ink); }
.mt-landing-hero__text { margin: 0 0 var(--space-5); font-size: 18px; line-height: 28px; color: var(--ink-muted); max-width: 46ch; }
.mt-landing-hero__checks { display: flex; gap: var(--space-4); margin-top: var(--space-4); font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.mt-landing-hero__checks i { color: var(--brand-ink); margin-right: var(--space-1); }
.mt-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.mt-mosaic > div { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1; background: var(--surface-sunken); position: relative; }
.mt-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-mosaic .is-wide { grid-column: span 2; aspect-ratio: auto; }
.mt-mosaic__chip { position: absolute; left: var(--space-2); bottom: var(--space-2); padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--surface-raised); font: 600 12px/18px var(--font-sans); color: var(--ink); box-shadow: var(--shadow-sm); }
.mt-mosaic .b-brand { background: var(--brand); }
.mt-mosaic .b-ink { background: var(--ink); }
.mt-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.mt-feature { display: flex; flex-direction: column; gap: var(--space-2); }
.mt-feature__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.mt-feature h3 { margin: var(--space-2) 0 0; font: 650 18px/24px var(--font-display); }
.mt-feature p { margin: 0; color: var(--ink-muted); font-size: 15px; }
.mt-cta { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-7); border-radius: var(--radius-lg); background: var(--ink); color: var(--surface); }
.mt-cta h2 { margin: 0; font: 700 32px/38px var(--font-display); letter-spacing: -.02em; }
.mt-cta p { margin: var(--space-2) 0 0; opacity: .75; }
.mt-cta .mt-btn { margin-left: auto; }

@media (max-width: 900px) {
  .mt-shell { grid-template-columns: 1fr; }
  .mt-shell__content { padding: var(--space-4); }
  .mt-buy, .mt-landing-hero { grid-template-columns: 1fr; gap: var(--space-5); }
  .mt-landing-hero__title { font-size: 36px; line-height: 40px; }
  .mt-features, .mt-storefoot__grid { grid-template-columns: 1fr; }
  .mt-cartline { grid-template-columns: 64px 1fr auto; }
  .mt-cta { flex-direction: column; align-items: flex-start; }
  .mt-cta .mt-btn { margin-left: 0; }
}

/* ---------- Utilidades de layout ---------- */
.mt-grid { display: grid; gap: var(--space-5); }
.mt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mt-grid--main-aside { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.mt-grid--aside-sticky > :last-child { position: sticky; top: var(--space-5); }
.mt-span-all { grid-column: 1 / -1; }
.mt-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--space-5); }
.mt-section { padding: var(--space-7) 0; }
.mt-sticky-save { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--surface-raised); border-top: 1px solid var(--line); box-shadow: 0 -4px 12px rgba(31,28,26,.06); }
.mt-sticky-save[hidden] { display: none; }
.mt-sticky-save { align-items: center; }
.mt-mr-auto { margin-right: auto; }
.mt-text-danger { color: var(--danger, #c0392b); }
/* Filas con cambios sin guardar (Guardar todos los cambios) */
tr.is-dirty > td { background: color-mix(in srgb, var(--warning, #e8a33d) 10%, transparent); }
.mt-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1100px) { .mt-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .mt-grid--2, .mt-grid--3, .mt-grid--main-aside { grid-template-columns: 1fr; }
  .mt-grid--aside-sticky > :last-child { position: static; }
  .mt-container { padding: 0 var(--space-4); }
}
@media (max-width: 560px) { .mt-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }

/* =====================================================================
   Extensiones del sistema (agregadas al implementar en Laravel).
   Solo tokens; mismas reglas que el resto del archivo.
   ===================================================================== */

/* Base de página */
html, body { margin: 0; }
body.mt { min-height: 100vh; }
.mt img { max-width: 100%; }
.mt h1, .mt h2, .mt h3, .mt h4, .mt p { margin-top: 0; }
.mt-text-right { text-align: right; }
.mt-stack--lg { gap: var(--space-5); }
.mt-stack--sm { gap: var(--space-2); }
.mt-row--between { justify-content: space-between; }
.mt-row--end { justify-content: flex-end; }
.mt-divider { border: 0; border-top: 1px solid var(--line); margin: var(--space-2) 0; }
.mt-pre { white-space: pre-line; }
.mt-code { font-family: var(--font-mono); font-size: 13px; padding: 1px var(--space-1); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.mt-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: 14px; }
.mt-dl dt { color: var(--ink-muted); }
.mt-dl dd { margin: 0; }
.mt-list { margin: 0; padding: 0; list-style: none; }
.mt-list > li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); }
.mt-list > li:last-child { border-bottom: 0; }
.mt-list > li > :last-child { margin-left: auto; }

/* Acciones de fila */
.mt-actions { display: flex; justify-content: flex-end; gap: var(--space-1); }
.mt-actions form { margin: 0; }

/* Dialog nativo con estilo de Modal */
dialog.mt-modal { border: 0; color: var(--ink); font-family: var(--font-sans); }
dialog.mt-modal::backdrop { background: rgba(16,14,13,.5); }
dialog.mt-modal--wide { max-width: 760px; }
.mt-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--space-1); max-height: 420px; overflow-y: auto; }
.mt-icon-grid button { height: 56px; border: 0; border-radius: var(--radius-md); background: none; color: var(--ink); font-size: 20px; cursor: pointer; }
.mt-icon-grid button:hover { background: var(--surface-sunken); }

/* Panel: topbar, menú de usuario, tema y sidebar off-canvas */
.mt-topbar__menu { display: none; }
.mt-usermenu { position: relative; margin-left: auto; }
.mt-usermenu summary { list-style: none; cursor: pointer; }
.mt-usermenu summary::-webkit-details-marker { display: none; }
.mt-usermenu__panel { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: var(--z-modal); min-width: 200px; padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; }
.mt-usermenu__panel a, .mt-usermenu__panel button { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: none; color: var(--ink) !important; font: 500 14px/20px var(--font-sans); text-align: left; cursor: pointer; width: 100%; }
.mt-usermenu__panel a:hover, .mt-usermenu__panel button:hover { background: var(--surface-sunken); }
.mt-usermenu__panel i { width: 16px; color: var(--ink-muted); }
.mt-usermenu__panel form { margin: 0; }
.mt-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.mt-sidebar form { margin: 0; }
.mt-sidebar button.mt-nav { width: 100%; border: 0; background: none; cursor: pointer; }
.mt-sidebar__spacer { flex: 1; }
.mt-overlay { display: none; }
@media (max-width: 900px) {
  .mt-topbar { padding: 0 var(--space-4); gap: var(--space-2); }
  .mt-topbar__menu { display: inline-flex; }
  .mt-topbar__search { display: none; }
  .mt-shell > .mt-sidebar { position: fixed; z-index: var(--z-sidebar); top: 0; left: 0; bottom: 0; width: 280px; height: auto; transform: translateX(-100%); transition: transform .15s; box-shadow: var(--shadow-lg); }
  .mt-shell.is-open > .mt-sidebar { transform: none; }
  .mt-shell.is-open > .mt-overlay { display: block; position: fixed; inset: 0; z-index: calc(var(--z-sidebar) - 1); background: rgba(16,14,13,.5); }
  .mt-topbar__label { display: none; }
}

/* Formularios del panel */
.mt-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.mt-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mt-form-grid > .mt-span-all { grid-column: 1 / -1; }
@media (max-width: 720px) { .mt-form-grid, .mt-form-grid--3 { grid-template-columns: 1fr; } }
.mt-drop { position: relative; cursor: pointer; }
.mt-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mt-drop:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.mt-color input[type="color"] { width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; }
.mt-color input[type="text"] { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; }
.mt-color input[type="text"]:focus { outline: none; }
.mt-color:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.mt-input-addon__prefix { border-left: 0 !important; border-right: 1px solid var(--line); }
.mt-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.mt-filters .mt-input, .mt-filters .mt-select { width: auto; min-width: 200px; height: 36px; }
.mt-sticky-save { border-radius: var(--radius-lg); border: 1px solid var(--line); }
.mt-meta { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.mt-meta img { width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-2); }
.mt-meta__title { color: var(--info); font-weight: 600; }
.mt-meta__url { color: var(--success); font: 500 13px/18px var(--font-mono); word-break: break-all; }
.mt-gallery-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); }
.mt-gallery-admin > div { position: relative; }
.mt-gallery-admin img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.mt-gallery-admin form { position: absolute; top: 4px; right: 4px; }
.mt-iconbtn--solid { background: var(--surface-raised); box-shadow: var(--shadow-sm); }
.mt-table input.mt-input { height: 32px; font-size: 14px; }
.mt-chart { position: relative; height: 300px; }

/* Selector de módulos y planes (Mi plan) */
label.mt-plan, label.mt-module { cursor: pointer; }
.mt-plan input[type="radio"], .mt-module input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.mt-plan:focus-within, .mt-module:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.mt-module.is-disabled { cursor: default; }

/* Vitrina: estructura */
body.mt-store { background: var(--surface); min-height: 100vh; display: flex; flex-direction: column; }
.mt-store main { flex: 1; padding: var(--space-5) 0 var(--space-7); }
.mt-storebar__social { display: flex; gap: var(--space-3); }
.mt-storebar form { margin: 0; }
.mt-storebar button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.mt-storehead form { flex: 1; max-width: 420px; display: flex; }
.mt-storehead form .mt-input { max-width: none; }
.mt-storehead__logo img { height: 44px; max-width: 180px; object-fit: contain; }
.mt-catwrap { position: relative; }
.mt-catwrap > .mt-catmenu { position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: var(--z-modal); }
.mt-catmenu[hidden] { display: none; }
.mt-catitem { position: relative; }
.mt-catitem > .mt-catmenu { position: absolute; left: calc(100% + 4px); top: calc(-1 * var(--space-2)); width: 220px; }
@media (max-width: 720px) {
  .mt-storehead { flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .mt-storehead form { order: 3; max-width: none; flex-basis: 100%; }
  .mt-storebar { padding: 6px var(--space-4); flex-wrap: wrap; gap: var(--space-2); }
  .mt-catwrap > .mt-catmenu { position: fixed; left: var(--space-4); right: var(--space-4); width: auto; }
  .mt-catitem > .mt-catmenu { position: static; width: auto; box-shadow: none; border: 0; padding-left: var(--space-5); }
}

/* Vitrina: carrusel de slides con scroll-snap */
.mt-carousel { position: relative; }
.mt-carousel__track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: var(--radius-lg); }
.mt-carousel__track::-webkit-scrollbar { display: none; }
.mt-carousel__track > * { scroll-snap-align: start; }
.mt-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-md); cursor: pointer; }
.mt-carousel__nav--prev { left: var(--space-3); }
.mt-carousel__nav--next { right: var(--space-3); }
.mt-carousel__dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.mt-carousel__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--line-strong); cursor: pointer; }
.mt-carousel__dots button[aria-current="true"] { background: var(--ink); }
.mt-hero--image { background-size: cover; background-position: center; }
.mt-hero--bare { display: block; min-height: 0; padding: 0; }
.mt-hero--bare img { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.mt-banner { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; background-size: cover; background-position: center; min-height: 220px; }
.mt-banner__copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; padding: var(--space-6); background: linear-gradient(90deg, rgba(16,14,13,0) 20%, rgba(16,14,13,.65)); color: #ffffff; }
.mt-banner__title { margin: 0; font: 700 36px/40px var(--store-font-display, var(--font-display)); }
.mt-banner__text { margin: var(--space-2) 0 0; font-size: 17px; }
.mt-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); }
.mt-cat { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); }
.mt-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .15s; }
.mt-cat:hover img { transform: scale(1.04); }
.mt-cat__label { position: absolute; left: var(--space-2); bottom: var(--space-2); right: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: 650 14px/18px var(--font-sans); box-shadow: var(--shadow-sm); }
.mt-cat__label small { display: block; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.mt-catalog { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.mt-catalog__aside { display: flex; flex-direction: column; gap: var(--space-1); }
@media (max-width: 900px) { .mt-catalog { grid-template-columns: 1fr; } .mt-catalog__aside { flex-direction: row; flex-wrap: wrap; } }
.mt-visits { padding: var(--space-3) 0; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 13px; text-align: right; }
.mt-storefoot__map { width: 100%; height: 160px; border: 0; border-radius: var(--radius-md); margin-top: var(--space-3); }
.mt-qty input::-webkit-outer-spin-button, .mt-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mt-cartline form { margin: 0; }
.mt-auth--store { min-height: 0; background: transparent; }
.mt-order-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5) 0; }
.mt-order-head__icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.mt-order-head__icon--success { background: var(--success-soft); color: var(--success); }
.mt-order-head__icon--warning { background: var(--warning-soft); color: var(--warning); }
.mt-order-head__icon--danger { background: var(--danger-soft); color: var(--danger); }
.mt-order-head h1 { margin: 0; font: 700 28px/34px var(--font-display); }
@media (max-width: 720px) { .mt-steps { position: relative; overflow-x: auto; } .mt-step { min-width: 84px; } }

/* Plataforma */
.mt-landing { max-width: 1240px; margin: 0 auto; }
.mt-landing-foot { background: var(--surface-sunken); border-top: 1px solid var(--line); padding: var(--space-5) var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 14px; color: var(--ink-muted); }
.mt-landing-foot a { color: var(--ink-muted) !important; margin-left: auto; }
.mt-landing-section { padding: var(--space-7) var(--space-6); }
.mt-landing-section__title { margin: 0 0 var(--space-2); font: 700 32px/38px var(--font-display); letter-spacing: -.02em; text-align: center; }
.mt-landing-section__sub { margin: 0 auto var(--space-6); text-align: center; color: var(--ink-muted); max-width: 56ch; }
.mt-themebtn { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 720px) { .mt-landing-nav { padding: var(--space-4); } .mt-landing-nav__links a:not(.mt-btn) { display: none; } .mt-landing-section, .mt-landing-hero { padding-left: var(--space-4); padding-right: var(--space-4); } }
.mt-table-wrap--flush { border: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.mt-break { word-break: break-all; }
.mt-self-start { align-self: flex-start; }
.mt-small { font-size: 13px; }
.mt-nowrap { white-space: nowrap; }
.mt-mb-0 { margin-bottom: 0; }
.mt-table td.mt-td-flush { padding: 0; }
.mt-self-end { align-self: flex-end; }
.mt-grow { flex: 1; min-width: 0; }
.mt-tabs--card { padding: 0 var(--space-4); }
.mt-summary--flat { border: 0; padding: 0; background: none; }
.mt-row--loose { gap: var(--space-5); margin-top: var(--space-4); }
.mt-input--file { padding-top: 7px; }
.mt-mt-2 { margin-top: var(--space-2); }
.mt-meta p { margin: 4px 0 0; }
.mt-topbar .mt-themebtn { margin-left: auto; }
.mt-topbar .mt-themebtn + .mt-usermenu { margin-left: 0; }
.mt-topbar__user .fa-chevron-down { font-size: 11px; color: var(--ink-muted); }
.mt-ml-auto { margin-left: auto; }
dialog.mt-modal:not([open]) { display: none; }
:where(.mt) a { color: inherit; }
.mt-inline { display: inline; margin: 0; }
.mt-linkbtn { border: 0; background: none; padding: 0; color: var(--brand-ink); font: 600 12px/16px var(--font-sans); cursor: pointer; text-decoration: underline; }
.mt-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.mt-auth--page { min-height: 100vh; }
.mt [hidden] { display: none !important; }
.mt-storefoot__grid.mt-container { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.mt-auth__card--wide { max-width: 520px; }
.mt-card__actions { margin-left: auto; }
.mt-sidebar__logo--icon { display: flex; align-items: center; justify-content: center; color: var(--brand-ink); }
.mt-alert__list { margin: var(--space-1) 0 0; padding-left: 18px; }
.mt-shell__content > *, .mt-card, .mt-stack > *, .mt-grid > * { min-width: 0; }
@media (max-width: 720px) { .mt-storehead__logo img { height: 36px; max-width: 130px; } .mt-storehead .mt-catwrap .mt-btn { padding: 0 var(--space-3); } }
[data-theme="dark"] .mt-auth__logo img { background: #ffffff; padding: 6px 10px; border-radius: var(--radius-md); }

/* ==========================================================================
   Visualizador interactivo de productos
   ========================================================================== */

/* Utilidades */
.mt-items-end { align-items: flex-end; }
.mt-block { display: block; }
.mt-h3 { margin: 0 0 var(--space-1); font: 700 20px/26px var(--font-display); letter-spacing: -.01em; }
.mt-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.mt-input--sm { height: 32px; font-size: 13px; }

/* Visor en la ficha */
.mt-viewer { position: relative; min-width: 0; }
.mt-viewer .mt-gallery__main { position: relative; }
.mt-viewer__canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-viewer .mt-gallery__main img[hidden], .mt-viewer__canvas[hidden] { display: none; }
.mt-viewer__loading { position: absolute; right: var(--space-3); bottom: var(--space-3); display: none; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.85); color: #1f1c1a; }
.mt-viewer.is-loading .mt-viewer__loading { display: inline-flex; }
.mt-viewer__bar { margin-top: var(--space-2); align-items: flex-start; }
.mt-viewer__bar .mt-gallery__thumbs { margin-top: 0; flex-wrap: wrap; }
.mt-viewer__compare[hidden], .mt-viewer .mt-gallery__main[hidden] { display: none; }
.mt-compare-panel { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }

/* Variantes con color: punto delante del nombre */
.mt-variant__dot { width: 16px; height: 16px; margin-right: var(--space-2); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); flex: none; }

/* Muestras de color (zonas libres y comparador) */
.mt-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mt-swatch { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: 3px; border: 2px solid transparent; border-radius: 999px; background: none; cursor: pointer; font: 600 13px/18px var(--font-sans); color: var(--ink); }
.mt-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.mt-swatch__dot, .mt-swatch__img { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); object-fit: cover; flex: none; }
.mt-swatch__name { padding-right: var(--space-2); }
.mt-swatch:hover { border-color: var(--line-strong); }
.mt-swatch:has(input:checked), .mt-swatch[aria-pressed="true"] { border-color: var(--ink); }
.mt-swatch:has(input:focus-visible), .mt-swatch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Barra deslizante antes / después */
.mt-slider { --pos: 50%; position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-sunken); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.mt-slider--square { aspect-ratio: 1; }
.mt-slider__before, .mt-slider__after { position: absolute; inset: 0; }
.mt-slider__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.mt-slider img, .mt-slider canvas { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.mt-slider img[hidden], .mt-slider canvas[hidden] { display: none; }
.mt-slider__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mt-slider__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.35); }
.mt-slider__handle i { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff; color: #1f1c1a; box-shadow: 0 2px 10px rgba(0,0,0,.3); transition: transform .15s; }
.mt-slider.is-dragging .mt-slider__handle i { transform: scale(1.08); }
.mt-slider__label { position: absolute; top: var(--space-3); padding: 2px var(--space-2); border-radius: var(--radius-sm); background: rgba(31,28,26,.72); color: #fff; font: 600 12px/18px var(--font-sans); pointer-events: none; }
.mt-slider__label:empty { display: none; }
.mt-slider__label--before { left: var(--space-3); }
.mt-slider__label--after { right: var(--space-3); }
.mt-slider__range { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.mt-slider:has(.mt-slider__range:focus-visible) .mt-slider__handle i { outline: 3px solid var(--focus); outline-offset: 2px; }
.mt-compare-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-5); }
.mt-compare-grid figure { margin: 0; }

/* Panel: variantes con color y foto */
.mt-table--variants .mt-input { min-width: 80px; }
.mt-varcolor { display: flex; align-items: center; gap: var(--space-2); }
.mt-varcolor input[type="color"] { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: none; cursor: pointer; }
.mt-varcolor input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand-ink); }
.mt-varcolor:has(input[type="checkbox"]:not(:checked)) input[type="color"] { opacity: .35; }
.mt-varimg { display: flex; align-items: center; gap: var(--space-2); min-width: 220px; }
.mt-varimg img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); }

/* Panel: paleta, zonas y comparadores */
.mt-palette-row { display: flex; align-items: center; gap: var(--space-2); }
.mt-palette-row input[type="color"] { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: none; cursor: pointer; flex: none; }
.mt-zone-list { list-style: none; margin: 0; padding: 0; }
.mt-zone-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); }
.mt-zone-list li:first-child { border-top: 0; }
.mt-zone-thumb { position: relative; width: 56px; height: 56px; flex: none; border-radius: var(--radius-sm); background-size: cover; background-position: center; overflow: hidden; }
.mt-zone-thumb span { position: absolute; inset: 0; opacity: .75; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center; mask-mode: luminance; }
.mt-compare-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.mt-compare-admin figure { margin: 0; display: grid; gap: var(--space-2); }
.mt-compare-admin__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: var(--radius-md); overflow: hidden; }
.mt-compare-admin__pair img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* Editor de zonas */
.mt-zone-editor { display: grid; }
.mt-zone-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); }
.mt-zone-toolbar__range { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 13px/18px var(--font-sans); color: var(--ink-muted); }
.mt-zone-toolbar__range[hidden] { display: none; }
.mt-zone-toolbar__range input { width: 120px; accent-color: var(--brand-ink); }
.mt-segment { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.mt-segment label { position: relative; }
.mt-segment input { position: absolute; opacity: 0; pointer-events: none; }
.mt-segment span { display: inline-flex; align-items: center; gap: var(--space-1); padding: 6px var(--space-3); border-radius: 8px; font: 600 13px/18px var(--font-sans); color: var(--ink-muted); cursor: pointer; }
.mt-segment input:checked + span { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-sm); }
.mt-segment input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.mt-zone-stage { position: relative; width: calc(100% - 2 * var(--space-4)); max-width: 720px; margin: var(--space-4) auto; background: repeating-conic-gradient(#e7e0d7 0 25%, #f6f2ec 0 50%) 0 0 / 20px 20px; border-radius: var(--radius-md); overflow: hidden; }
.mt-zone-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mt-zone-stage canvas[data-overlay-canvas] { touch-action: none; }
.mt-zone-stage__cursor { position: absolute; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.6); transform: translate(-50%, -50%); pointer-events: none; }
.mt-zone-stage__cursor[hidden] { display: none; }
.mt-zone-help { padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--line); }
.mt-zone-help kbd { padding: 0 4px; border: 1px solid var(--line-strong); border-radius: 4px; font: 600 12px/16px var(--font-mono); }

/* ==========================================================================
   Modelo 3D y realidad aumentada
   ========================================================================== */

/* Tienda: visor 3D */
.mt-viewer__3d[hidden] { display: none; }
.mt-model-view { position: relative; aspect-ratio: 1; border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; background: radial-gradient(circle at 50% 40%, #ffffff, #ece7df); }
.mt-model-view model-viewer { width: 100%; height: 100%; display: block; --poster-color: transparent; --progress-bar-color: var(--store-accent); }
.mt-model-view__loading, .mt-model-view__error { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: var(--space-2); font: 600 14px/20px var(--font-sans); color: #57524b; pointer-events: none; }
.mt-model-view.is-loading .mt-model-view__loading, .mt-model-view.is-error .mt-model-view__error { display: flex; }
.mt-model-qr { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); font: 500 14px/20px var(--font-sans); }
.mt-model-qr[hidden] { display: none; }
.mt-model-qr [data-qr] { flex: none; padding: 6px; background: #fff; border-radius: var(--radius-sm); line-height: 0; }
.mt-model-qr [data-qr] img, .mt-model-qr [data-qr] canvas { width: 132px; height: 132px; }
[data-model-light][aria-pressed="true"] { background: #ffe8b0; border-color: #e6b44c; color: #5a3d00; }
@media (max-width: 520px) { .mt-model-qr { display: none; } }

/* Panel: armado del modelo */
.mt-model-stage { position: relative; aspect-ratio: 1; max-height: 70vh; width: 100%; background: radial-gradient(circle at 50% 40%, #ffffff, #e9e4dc); }
.mt-model-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.mt-model-stage__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: #6b655d; text-align: center; padding: var(--space-5); pointer-events: none; }
.mt-model-stage__empty i { font-size: 40px; opacity: .5; }
.mt-model-stage__empty[hidden] { display: none; }
.mt-model-stage__info { position: absolute; left: var(--space-3); bottom: var(--space-3); padding: 4px var(--space-2); border-radius: var(--radius-sm); background: rgba(31,28,26,.75); color: #fff; font: 600 12px/18px var(--font-sans); }
.mt-part-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.mt-part-list:empty { display: none; }
.mt-part { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); }
.mt-part__name { overflow-wrap: anywhere; }
.mt-part__swatch { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.mt-zone-thumb--3d { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-sunken); font-size: 22px; }
[data-status].is-error { color: var(--danger-ink, #b42318); font-weight: 600; }
.mt-model-view.is-lit { background: radial-gradient(circle at 50% 35%, #6b5636, #2a241f 55%, #16130f); transition: background .4s; }

/* ==========================================================================
   Modularia: configurador de lámparas modulares
   ========================================================================== */

/* Panel */
.mt-piece-thumb { width: 56px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; display: block; }
.mt-piece-thumb--empty { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-sunken); color: var(--ink-muted); }
.mt-table--pieces td { vertical-align: middle; }
.mt-table--pieces .mt-input[name="name"] { min-width: 200px; }
.mt-table--pieces .mt-input[name="price"] { width: 120px; }
.mt-check-input { width: 18px; height: 18px; accent-color: var(--brand-ink); }
.mt-generator-log { margin: 0; padding-left: var(--space-5); max-height: 260px; overflow: auto; }
.mt-generator-log:empty { display: none; }
.mt-generator-log .is-error { color: var(--danger-ink, #b42318); }

/* Tienda: configurador */
.mt-lamp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.mt-lamp__stage { position: sticky; top: var(--space-4); display: grid; gap: var(--space-3); }
.mt-lamp__view { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; background: radial-gradient(circle at 50% 35%, #ffffff, #ebe5dc); transition: background .4s; }
.mt-lamp__view.is-lit { background: radial-gradient(circle at 50% 30%, #6b5636, #2a241f 55%, #16130f); }
.mt-lamp__view model-viewer { width: 100%; height: 100%; display: block; --poster-color: transparent; --progress-bar-color: var(--store-accent); }
.mt-lamp__status { position: absolute; left: var(--space-3); bottom: var(--space-3); padding: 4px var(--space-2); border-radius: var(--radius-sm); background: rgba(31,28,26,.75); color: #fff; font: 600 12px/18px var(--font-sans); }
.mt-lamp__status:empty { display: none; }
.mt-lamp__steps { display: grid; gap: var(--space-5); }
.mt-lamp__step { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--space-3); }
.mt-lamp__step legend { padding: 0; margin-bottom: var(--space-2); font: 700 18px/24px var(--store-font-display, var(--font-display)); }
.mt-lamp__step legend small { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); margin-left: var(--space-2); }
.mt-piece-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--space-2); }
.mt-piece { position: relative; display: grid; gap: 4px; padding: 6px; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); cursor: pointer; font: 600 13px/17px var(--font-sans); text-align: left; transition: border-color .15s, box-shadow .15s; }
.mt-piece input { position: absolute; opacity: 0; pointer-events: none; }
.mt-piece img, .mt-piece__noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--surface-sunken); }
.mt-piece__noimg { display: flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: 22px; }
.mt-piece__price { font-weight: 500; color: var(--ink-muted); }
.mt-piece:hover { border-color: var(--line-strong); }
.mt-piece:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.mt-piece:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.mt-piece--none img, .mt-piece--none .mt-piece__noimg { aspect-ratio: 4 / 3; }
.mt-lamp__colors { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mt-lamp__colors > span { font: 600 13px/18px var(--font-sans); color: var(--ink-muted); min-width: 64px; }
.mt-lamp__summary { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-md); }
.mt-lamp__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font: 700 26px/32px var(--store-font-display, var(--font-display)); }
.mt-lamp__total small { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.mt-lamp__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.mt-lamp__list li { display: flex; justify-content: space-between; gap: var(--space-3); }
.mt-lamp__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mt-lamp__actions [hidden] { display: none; }
@media (max-width: 900px) {
  .mt-lamp { grid-template-columns: 1fr; gap: var(--space-5); }
  .mt-lamp__stage { position: relative; top: 0; }
  .mt-lamp__view { aspect-ratio: 1; }
}

/* ==========================================================================
   Impresión 3D y fabricación a pedido (opcional por producto)
   ========================================================================== */

/* Utilidades de formularios */
.mt-input--xs { width: 84px; }
.mt-select--auto { width: auto; }
.mt-select--sm { height: 32px; font-size: 13px; padding-top: 0; padding-bottom: 0; }
.mt-color-input { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: none; cursor: pointer; }
.mt-table__new td { background: var(--surface-sunken); }
.mt-table--steps td { vertical-align: top; }
.mt-table--steps .mt-input[name="label"] { min-width: 180px; }

/* A pedido */
.mt-lead { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-3); border-radius: var(--radius-md); background: color-mix(in srgb, var(--store-accent, #f26a1b) 14%, transparent); font: 600 14px/20px var(--font-sans); color: var(--ink); }
.mt-summary__row--lead span:first-child { display: inline-flex; gap: var(--space-2); align-items: center; }

/* Opciones con recargo */
.mt-variant__delta { margin-left: var(--space-2); font-weight: 500; color: var(--ink-muted); }
.mt-option-group { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
.mt-option-group--new { border-style: dashed; }

/* Muestras de color con terminación */
.mt-swatch__dot--metalizado, .mt-swatch__dot--seda { background-image: linear-gradient(135deg, rgba(255,255,255,.55), transparent 50%, rgba(0,0,0,.18)); }
.mt-swatch__dot--brillante { background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), transparent 40%); }
.mt-swatch__dot--translucido { opacity: .75; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 0 8px rgba(255,255,255,.8); }

/* Estado de producción del pedido */
.mt-production { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.mt-production__label { font: 700 13px/18px var(--font-sans); color: var(--ink-muted); display: inline-flex; gap: var(--space-2); align-items: center; }
.mt-production__stages { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.mt-production__stages li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font: 600 12px/18px var(--font-sans); color: var(--ink-muted); }
.mt-production__stages li.is-done { color: var(--ink); border-color: var(--line-strong); }
.mt-production__stages li.is-current { color: #fff; background: var(--ink); border-color: var(--ink); }

/* Tablero de producción */
.mt-board { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-2); }
.mt-board__column { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-sunken); min-width: 0; }
.mt-board__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: 700 15px/20px var(--font-sans); }
.mt-board__title .mt-badge { margin-left: auto; }
.mt-board__card { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.mt-board__card.is-late { border-color: var(--danger-ink, #b42318); box-shadow: inset 3px 0 0 var(--danger-ink, #b42318); }
.mt-board__card .mt-row { justify-content: space-between; }
.mt-board__items { margin: 0; padding-left: var(--space-4); font: 500 13px/18px var(--font-sans); }
.mt-board__date { font: 600 12px/16px var(--font-sans); color: var(--ink-muted); }
.mt-board__card.is-late .mt-board__date { color: var(--danger-ink, #b42318); }
.mt-board__empty { padding: var(--space-3); text-align: center; }

/* Cotizador de STL */
.mt-quoter__view { display: grid; place-items: center; }
.mt-quoter__view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.mt-quoter__view canvas[hidden] { display: none; }
.mt-quoter__drop { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6); margin: var(--space-4); border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: rgba(255,255,255,.7); text-align: center; cursor: pointer; font: 500 14px/20px var(--font-sans); color: #3d3934; }
.mt-quoter__drop i { font-size: 34px; color: var(--store-accent, #f26a1b); }
.mt-quoter__drop.is-small { position: absolute; right: 0; bottom: 0; padding: var(--space-2) var(--space-3); grid-auto-flow: column; align-items: center; font-size: 12px; }
.mt-quoter__drop.is-small i { font-size: 16px; }
.mt-quoter__drop.is-small .mt-hint, .mt-quoter__drop.is-small strong { display: none; }
.mt-quoter__drop.is-small::after { content: "Cambiar archivo"; font-weight: 600; }
.mt-quoter__view.is-dragging { outline: 3px dashed var(--store-accent, #f26a1b); outline-offset: -8px; }
.mt-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2); }
.mt-choice { position: relative; display: grid; gap: 2px; padding: var(--space-3); border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); cursor: pointer; font: 600 14px/20px var(--font-sans); }
.mt-choice input { position: absolute; opacity: 0; pointer-events: none; }
.mt-choice:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.mt-choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
[data-quoter-message].is-error { color: var(--danger-ink, #b42318); font-weight: 600; }
@media (max-width: 900px) { .mt-board { grid-template-columns: repeat(4, minmax(220px, 80vw)); } }

.mt-table--steps select { min-width: 170px; }

/* Verificación en dos pasos (Mi perfil) */
.mt-two-factor-setup { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; }
.mt-two-factor-setup__qr { padding: var(--space-3); background: #fff; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; line-height: 0; }
.mt-two-factor-setup__secret { display: inline-block; margin-top: var(--space-2); font-size: 15px; letter-spacing: .08em; word-break: break-all; }
.mt-recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-3) 0 var(--space-4); }
.mt-recovery-codes code { display: block; padding: var(--space-2); text-align: center; font-size: 15px; background: var(--surface-sunken); border-radius: 8px; }
@media (max-width: 640px) { .mt-two-factor-setup { grid-template-columns: 1fr; justify-items: start; } }

/* Checkout: precio de cada forma de entrega */
.mt-option__price { margin-left: auto; font: 650 14px/20px var(--font-sans); white-space: nowrap; }
.mt-option[hidden] { display: none; }
.mt-provinces { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-2) var(--space-4); }

/* Textos legales y botón de arrepentimiento */
.mt-legal { max-width: 780px; margin: 0 auto; padding: var(--space-5) 0 var(--space-7); }
.mt-prose { font-size: 15px; line-height: 1.65; color: var(--ink); }
.mt-prose h2 { margin: var(--space-6) 0 var(--space-2); font: 700 18px/24px var(--font-sans); }
.mt-prose h3 { margin: var(--space-5) 0 var(--space-2); font: 650 16px/22px var(--font-sans); }
.mt-prose p, .mt-prose ul, .mt-prose ol { margin: 0 0 var(--space-3); }
.mt-prose ul, .mt-prose ol { padding-left: 1.4em; }
.mt-prose a { overflow-wrap: anywhere; }
/* Tablas de las notas: con líneas suaves; en el celular se deslizan de costado sin romper la página */
.mt-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 var(--space-4); font-size: 14px; }
.mt-prose th, .mt-prose td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.mt-prose th { font-weight: 700; border-bottom-color: var(--line-strong); white-space: nowrap; }
.mt-prose tbody tr td:first-child { font-weight: 600; }
.mt-storefoot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); padding: var(--space-4) var(--space-5); border-top: 1px solid rgba(255,255,255,.15); font-size: 13px; }
.mt-storefoot__legal .mt-storefoot__withdrawal { padding: 6px 12px; border: 1px solid currentColor; border-radius: 6px; font-weight: 650; }
.mt-storefoot__legal small { flex-basis: 100%; opacity: .7; }
.mt-textarea--code { font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mt-bank { margin-top: var(--space-2); padding: var(--space-3); background: var(--surface-raised); border-radius: 8px; font: 500 14px/1.6 var(--font-sans); color: var(--ink); }

/* Ficha: cuotas, transferencia, avisos de stock y opiniones */
.mt-pay-hints { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--ink-muted); }
.mt-pay-hints i { width: 18px; color: var(--ink); }
.mt-stock-alert { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }
.mt-stars { display: inline-flex; gap: 2px; color: var(--star); font-size: 14px; vertical-align: -1px; }
.mt-rating-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-muted) !important; text-decoration: none; }
.mt-reviews { padding: var(--space-6) 0; }
.mt-reviews__avg { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.mt-review { display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.mt-review__reply { padding: var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-md); font-size: 14px; }
.mt-rate { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; border: 0; padding: 0; margin: 0; }
.mt-rate legend { width: 100%; margin-bottom: 4px; }
.mt-rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mt-rate label { cursor: pointer; font-size: 26px; color: var(--line-strong); }
.mt-rate input:checked ~ label, .mt-rate label:hover, .mt-rate label:hover ~ label { color: var(--star); }
.mt-rate input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.mt-product__installments { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-muted); }

/* Productos: selección y edición masiva */
.mt-col-check { width: 36px; }
.mt-col-check input { width: 16px; height: 16px; accent-color: var(--ink); }
.mt-bulk { position: sticky; top: var(--space-2); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.12)); }
.mt-bulk[hidden] { display: none; }

/* Notas internas e historial de cambios */
.mt-note { display: grid; gap: 2px; padding: var(--space-3); margin-bottom: var(--space-2); background: var(--surface-sunken); border-left: 3px solid var(--warning, #e0a100); border-radius: 6px; }
.mt-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: 14px; }
.mt-activity > li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.mt-activity > li:last-child { border-bottom: 0; padding-bottom: 0; }
.mt-activity__changes { margin: 4px 0 0; padding-left: 1.2em; color: var(--ink-muted); font-size: 13px; }
.mt-bulk .mt-select, .mt-bulk .mt-input { width: auto; max-width: 100%; }
.mt-bulk > span { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.mt-bulk > span[hidden] { display: none; }

/* Buscador con sugerencias */
.mt-search { position: relative; }
.mt-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; min-width: 300px; max-height: 70vh; overflow-y: auto; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 6px; }
.mt-suggest a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; color: var(--ink) !important; text-decoration: none; }
.mt-suggest a:hover, .mt-suggest a.is-active { background: var(--surface-sunken); }
.mt-suggest__item img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }
.mt-suggest__item span:first-of-type { display: grid; min-width: 0; }
.mt-suggest__item b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-suggest__item small { color: var(--ink-muted); font-size: 12px; }
.mt-suggest__price { margin-left: auto; font-weight: 650; font-size: 13px; white-space: nowrap; }
.mt-suggest__cat { font-size: 14px; }
.mt-suggest__empty { padding: 12px; color: var(--ink-muted); font-size: 14px; }
.mt-suggest__all { width: 100%; margin-top: 4px; padding: 10px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: 600 13px var(--font-sans); cursor: pointer; text-align: left; }

/* Barra de administración en la tienda (solo con la sesión del panel abierta) */
.mt-adminbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 6px var(--space-5); background: var(--graphite); color: var(--on-graphite); border-bottom: 2px solid var(--brand); font-size: 13px; }
.mt-adminbar a { color: #fff !important; text-decoration: none; font-weight: 600; }
.mt-adminbar a:hover { text-decoration: underline; }
.mt-adminbar span { opacity: .85; margin-right: auto; }

/* ===================================================================
   Tienda: más aire entre bloques y todo alineado al mismo ancho
   =================================================================== */
/* Encabezado y barras alineados con el contenido (mismo ancho máximo de 1240px) */
.mt-store .mt-storehead,
.mt-store .mt-storebar,
.mt-store .mt-adminbar,
.mt-store .mt-storefoot__bar {
    padding-left: max(var(--space-5), calc((100% - 1240px) / 2 + var(--space-5)));
    padding-right: max(var(--space-5), calc((100% - 1240px) / 2 + var(--space-5)));
}
.mt-store .mt-storehead { padding-top: var(--space-4); padding-bottom: var(--space-4); gap: var(--space-5); }
.mt-store .mt-storehead form { max-width: 560px; }

/* Separación entre secciones de la página */
.mt-store main { padding: var(--space-6) 0 var(--space-8); }
.mt-store main > .mt-container { gap: var(--space-7); }
.mt-store .mt-crumbs--store { margin-bottom: calc(var(--space-5) * -1); }
.mt-store .mt-section-title { margin-bottom: var(--space-5); font-size: 26px; line-height: 32px; }
.mt-store .mt-carousel__dots { margin-top: var(--space-4); }

/* Grillas de productos y categorías con más espacio */
.mt-store .mt-grid--4 { gap: var(--space-6) var(--space-5); }
.mt-store .mt-cats { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-5); }
@media (min-width: 1101px) { .mt-store .mt-grid--with-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Tarjeta de producto: más respiro y el precio nunca se parte */
.mt-store .mt-product__body { padding: var(--space-4) var(--space-4) var(--space-5); gap: 6px; }
.mt-store .mt-product__name { font-size: 16px; line-height: 22px; }
.mt-store .mt-product__price { flex-wrap: wrap; column-gap: var(--space-2); row-gap: 0; padding-top: var(--space-3); }
.mt-store .mt-product__amount, .mt-store .mt-product__price s { white-space: nowrap; }
.mt-store .mt-product__price small { font: 600 13px/18px var(--font-sans); color: var(--ink-muted); align-self: center; }

/* Catálogo: menú lateral y encabezado del listado */
.mt-store .mt-catalog { gap: var(--space-7); }
.mt-store .mt-catalog__aside { gap: var(--space-2); }

/* Ficha de producto: bloques separados */
.mt-store .mt-buy { gap: var(--space-8); align-items: start; }
.mt-store .mt-buy__info { gap: var(--space-5); }
.mt-store .mt-buy__info > form { gap: var(--space-5); }
.mt-store .mt-buy__title { margin-top: calc(var(--space-2) * -1); }
.mt-store .mt-buy__desc { padding-top: var(--space-5); line-height: 1.65; }
.mt-store .mt-reviews { padding: 0; }

/* Pie: más alto y con aire */
.mt-store .mt-storefoot__grid { padding-top: var(--space-8); padding-bottom: var(--space-7); gap: var(--space-7); }
.mt-store .mt-storefoot__cats { gap: var(--space-5); }

@media (max-width: 760px) {
    .mt-store .mt-storehead, .mt-store .mt-storebar, .mt-store .mt-adminbar, .mt-store .mt-storefoot__bar { padding-left: var(--space-4); padding-right: var(--space-4); }
    .mt-store .mt-storehead { gap: var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-3); }
    .mt-store .mt-storehead form { max-width: none; }
    .mt-store main { padding: var(--space-4) 0 var(--space-7); }
    .mt-store main > .mt-container { gap: var(--space-6); }
    .mt-store .mt-crumbs--store { margin-bottom: calc(var(--space-4) * -1); }
    .mt-store .mt-section-title { font-size: 22px; line-height: 28px; margin-bottom: var(--space-4); }
    .mt-store .mt-grid--4 { gap: var(--space-4) var(--space-3); }
    .mt-store .mt-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .mt-store .mt-product__body { padding: var(--space-3); }
    .mt-store .mt-product__name { font-size: 14px; line-height: 20px; }
    .mt-store .mt-buy { gap: var(--space-5); }
    .mt-store .mt-buy__info { gap: var(--space-4); }
    .mt-store .mt-storefoot__grid { padding-top: var(--space-7); gap: var(--space-6); }
}

/* ===================================================================
   Paleta "Filamento" + mejoras de UX/UI (tienda y paneles)
   Solo tokens. Respeta prefers-reduced-motion al final.
   =================================================================== */

/* --- Base --- */
.mt ::selection { background: var(--brand-soft); color: var(--ink); }
.mt :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mt { scrollbar-color: var(--line-strong) transparent; }

/* --- Botones: hover y presión más claros --- */
.mt-btn { transition: background-color .15s, border-color .15s, box-shadow .15s, transform .08s; }
.mt-btn:active:not([disabled]) { transform: translateY(1px); }
.mt-btn--primary:hover, .mt-btn--primary:focus-visible { background: var(--brand-hover); box-shadow: var(--shadow-brand); }
.mt-btn--store:hover, .mt-btn--store:focus-visible { box-shadow: inset 0 0 0 999px rgba(0,0,0,.08), 0 6px 18px -8px var(--store-accent); }
.mt-btn--secondary:hover { border-color: var(--ink-muted); }
.mt-btn--lg { border-radius: var(--radius-md); font-weight: 700; }

/* --- Campos --- */
.mt-input, .mt-select, .mt-textarea { transition: border-color .15s, box-shadow .15s; }
.mt-input:hover:not(:focus):not([disabled]), .mt-select:hover:not(:focus), .mt-textarea:hover:not(:focus) { border-color: var(--ink-muted); }
.mt-input:focus, .mt-select:focus, .mt-textarea:focus { outline: 0; border-color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand-soft); }
.mt-check input, .mt-option input { accent-color: var(--brand-ink); }

/* ===================== Panel ===================== */
/* Sidebar: marca de la sección activa con una barra de color */
.mt-sidebar { scrollbar-width: thin; }
.mt-nav { position: relative; transition: background-color .12s, color .12s; }
.mt-nav:hover i { color: var(--ink); }
.mt-nav.is-active::before { content: ""; position: absolute; left: calc(-1 * var(--space-3)); top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.mt-sidebar__store { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }

/* Topbar fija al hacer scroll */
.mt-topbar { position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--surface-raised) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.mt-topbar__search .mt-input { border-radius: var(--radius-pill); background: var(--surface-sunken); border-color: transparent; padding-left: var(--space-4); }
.mt-topbar__search .mt-input:focus { background: var(--surface-raised); }
.mt-avatar { background: var(--brand); color: var(--on-brand); }

/* Encabezado de página */
.mt-pagehead__title { font-weight: 700; letter-spacing: -.02em; }

/* Tarjetas e indicadores */
.mt-card { transition: box-shadow .15s, border-color .15s; }
.mt-card__title { letter-spacing: -.01em; }
.mt-stat { position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; }
.mt-stat::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--brand), transparent 70%); opacity: .9; }
a.mt-stat:hover, .mt-stat:has(.mt-stat__link):hover { box-shadow: var(--shadow-md); }
.mt-stat__label i { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.mt-stat__link:hover { text-decoration: underline; }
.mt-meter { height: 8px; }
.mt-meter > span { background: repeating-linear-gradient(90deg, var(--brand) 0 10px, var(--brand-hover) 10px 12px); }

/* Tablas: encabezado fijo y filas más legibles */
.mt-table th { position: sticky; top: 0; z-index: 1; }
.mt-table tbody tr { transition: background-color .1s; }
.mt-table tbody tr:hover td { background: var(--brand-soft); background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface-raised)); }
.mt-table .num { white-space: nowrap; }

/* Pestañas y paginación */
.mt-tab.is-active { border-bottom-width: 3px; border-bottom-color: var(--brand); }
.mt-tab.is-active small { background: var(--brand-soft); color: var(--brand-ink); }
.mt-pager .is-current { background: var(--brand); color: var(--on-brand) !important; }

/* Badges con un poco más de presencia */
.mt-badge { border-radius: var(--radius-pill); padding: 2px 10px; }
.mt-badge--plain { border-radius: var(--radius-sm); }

/* Guardado fijo: separado del contenido y más visible */
.mt-sticky-save { bottom: var(--space-3); box-shadow: var(--shadow-md); background: color-mix(in srgb, var(--surface-raised) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Estados vacíos con el motivo de capas de impresión */
.mt-empty__icon { background: repeating-linear-gradient(0deg, var(--layer-line) 0 2px, transparent 2px 5px), var(--brand-soft); color: var(--brand-ink); }

/* Login */
.mt-auth { background: repeating-linear-gradient(0deg, var(--layer-line) 0 1px, transparent 1px 6px), radial-gradient(ellipse at 50% -20%, var(--brand-soft), transparent 60%), var(--surface); }
.mt-auth__card { box-shadow: var(--shadow-md); border-top: 3px solid var(--brand); }
.mt-auth--store { background: transparent; }

/* ===================== Tienda (vitrina) ===================== */
/* Cabecera fija en escritorio para tener búsqueda y carrito siempre a mano */
@media (min-width: 721px) {
  body.mt-store > header { position: sticky; top: 0; z-index: 50; }
  body.mt-store > header .mt-storehead { background: color-mix(in srgb, var(--surface-raised) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
}
.mt-storehead { box-shadow: 0 1px 0 var(--line), 0 6px 16px -14px rgba(31,28,26,.35); border-bottom: 0; }
.mt-storehead .mt-input { background: var(--surface-sunken); border-color: transparent; padding-left: var(--space-4); }
.mt-storehead .mt-input:focus { background: var(--surface-raised); border-color: var(--store-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--store-accent) 22%, transparent); }
.mt-cart { transition: background-color .15s; }
.mt-cart:hover { background: var(--surface-sunken); }
.mt-cart .mt-count { box-shadow: 0 0 0 2px var(--surface-raised); }
.mt-storebar a:hover { text-decoration: underline; }
.mt-catmenu a:hover { color: var(--ink) !important; }
.mt-catmenu a:hover i:first-child { color: var(--store-accent); }

/* Título de sección con subrayado de acento */
.mt-section-title { position: relative; padding-bottom: var(--space-2); }
.mt-section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--store-accent); }
.mt-section-title a { color: var(--ink) !important; }
.mt-section-title a:hover { text-decoration: underline; }

/* Hero sin imagen de fondo: textura de capas de impresión */
.mt-hero:not(.mt-hero--image):not(.mt-hero--bare) { background-image: repeating-linear-gradient(0deg, var(--layer-line) 0 1px, transparent 1px 6px); }
.mt-hero .mt-btn { box-shadow: var(--shadow-md); }

/* Tarjeta de producto: foto con zoom suave, foco visible y etiqueta destacada */
.mt-product { box-shadow: var(--shadow-sm); }
.mt-product__media img { transition: transform .35s ease; }
.mt-product:hover .mt-product__media img { transform: scale(1.05); }
.mt-product:hover { border-color: color-mix(in srgb, var(--store-accent) 45%, var(--line)); }
.mt-product:focus-visible { outline: 2px solid var(--store-accent); outline-offset: 3px; }
.mt-product__tag { border-radius: var(--radius-pill); padding: 2px 10px; box-shadow: var(--shadow-sm); }
.mt-product__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mt-product__media { background: repeating-linear-gradient(0deg, var(--layer-line) 0 1px, transparent 1px 5px), var(--surface-sunken); }

/* Categorías: etiqueta más legible sobre la foto */
.mt-cat { box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; }
.mt-cat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mt-cat:hover .mt-cat__label { background: var(--store-accent); color: var(--store-on-accent); }
.mt-cat:hover .mt-cat__label small { color: inherit; opacity: .8; }
.mt-cat__label { transition: background-color .15s, color .15s; }

/* Ficha: variantes y galería */
.mt-variant span { transition: border-color .12s, background-color .12s; }
.mt-variant span:hover { border-color: var(--ink-muted); }
.mt-variant input:checked + span { border-color: var(--store-accent); box-shadow: 0 0 0 1px var(--store-accent); background: color-mix(in srgb, var(--store-accent) 8%, var(--surface-raised)); }
.mt-gallery__thumbs img { transition: border-color .12s, opacity .12s; opacity: .8; }
.mt-gallery__thumbs img:hover, .mt-gallery__thumbs img.is-active { opacity: 1; }
.mt-option { transition: border-color .12s; }
.mt-option:hover { border-color: var(--ink-muted); }
.mt-option:has(input:checked) { border-color: var(--store-accent); background: color-mix(in srgb, var(--store-accent) 6%, var(--surface-raised)); }
.mt-qty button:hover { background: var(--surface-sunken); }
.mt-summary { box-shadow: var(--shadow-sm); }
.mt-summary__total span:last-child { font-variant-numeric: tabular-nums; }

/* Pie: grafito con enlaces que se iluminan con el acento */
.mt-storefoot { background: var(--graphite); color: var(--on-graphite); border-top: 4px solid var(--store-accent); }
.mt-storefoot a { color: var(--on-graphite) !important; transition: color .12s; }
.mt-storefoot ul a:hover, .mt-storefoot__legal a:hover { color: var(--store-accent) !important; }

/* Carrusel */
.mt-carousel__dots button { transition: width .2s, background-color .2s; }
.mt-carousel__dots button[aria-current="true"] { width: 24px; border-radius: var(--radius-pill); background: var(--store-accent); }
.mt-carousel__nav:hover { background: var(--store-accent); color: var(--store-on-accent); }

/* Visor 3D y configurador: fondo de estudio con el gris cálido de la paleta */
.mt-model-view, .mt-lamp__view { background: radial-gradient(circle at 50% 38%, #ffffff, #ece5dc); }

/* Accesibilidad: sin animaciones para quien lo pidió */
@media (prefers-reduced-motion: reduce) {
  .mt *, .mt *::before, .mt *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
  .mt-product:hover, .mt-cat:hover { transform: none; }
  .mt-product:hover .mt-product__media img { transform: none; }
}

/* Verificación en dos pasos: QR del servidor y pasos numerados */
.mt-two-factor-setup__qr svg { display: block; width: 200px; height: 200px; }
.mt-two-factor-steps { padding-left: 1.3em; display: grid; gap: var(--space-2); }
.mt-two-factor-setup details { font-size: 14px; }
.mt-two-factor-setup summary { cursor: pointer; color: var(--brand-ink, var(--ink)); }

/* Calculadora de costos */
.mt-calc { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: var(--space-5); align-items: start; }
.mt-calc__aside { position: sticky; top: 76px; }
.mt-calc__analyzer { display: grid; gap: var(--space-4); }
.mt-calc__viewer { position: relative; height: 320px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface-sunken); overflow: hidden; }
.mt-calc__viewer canvas { display: block; width: 100%; height: 100%; }
.mt-calc__viewer-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--space-2); padding: var(--space-4); text-align: center; color: var(--ink-muted); font-size: 13px; }
.mt-calc__viewer-empty i { font-size: 28px; }
.mt-calc__lines { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); margin: 0; font-size: 14px; }
.mt-calc__lines dt { color: var(--ink-muted); }
.mt-calc__lines dt i { width: 18px; }
.mt-calc__lines dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.mt-calc__total { padding-top: var(--space-2); border-top: 1px solid var(--line); color: var(--ink) !important; font-weight: 700; }
.mt-calc__price, .mt-calc__commission { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); }
.mt-calc__price { background: color-mix(in srgb, var(--success, #12805c) 12%, var(--surface-raised)); border: 1px solid color-mix(in srgb, var(--success, #12805c) 40%, transparent); }
.mt-calc__price span { grid-column: 1 / -1; color: var(--success, #12805c); font-weight: 700; }
.mt-calc__price output { font: 800 26px/1.2 var(--font-display); color: var(--success, #12805c); }
.mt-calc__commission { background: var(--surface-raised); border: 1px solid var(--line); border-left: 4px solid var(--brand); }
.mt-calc__commission span { color: var(--brand-ink, var(--ink)); font-weight: 650; }
.mt-calc__commission output { font: 800 20px/1.2 var(--font-display); color: var(--brand-ink, var(--ink)); }
.mt-calc__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.mt-filament-row { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); }
.mt-label--sub { font-size: 12px; color: var(--ink-muted); }
.mt-segment--sm span { padding: 4px 10px; font-size: 12px; }
.mt-calc-print { display: none; }
@media (max-width: 1100px) { .mt-calc { grid-template-columns: 1fr; } .mt-calc__aside { position: static; } }
@media (max-width: 640px) { .mt-calc__analyzer { grid-template-columns: 1fr; } }
@media print {
    body * { visibility: hidden; }
    .mt-calc-print, .mt-calc-print * { visibility: visible; }
    .mt-calc-print { display: block; position: absolute; inset: 0; padding: 24px; color: #111; background: #fff; font: 14px/1.5 Arial, sans-serif; }
    .mt-calc-print h1 { font-size: 22px; margin: 0 0 4px; }
    .mt-calc-print table { width: 100%; border-collapse: collapse; margin: 16px 0; }
    .mt-calc-print td { padding: 8px 4px; border-bottom: 1px solid #ddd; }
    .mt-calc-print td + td { text-align: right; }
    .mt-calc-print .total td { font-weight: 700; font-size: 18px; border-top: 2px solid #111; }
    .mt-calc-print .note { color: #555; font-size: 12px; }
}

/* Fotos de productos configurables y visor en grande */
.mt-photos { margin-top: var(--space-7); }
.mt-photos--flush { margin-top: 0; }
.mt-design-model { position: relative; height: min(70vh, 460px); border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(#fbfaf8, #ece8e2); overflow: hidden; touch-action: none; }
.mt-design-model canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.mt-design-model__status, .mt-design-model__hint { position: absolute; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; white-space: nowrap; pointer-events: none; }
.mt-design-model__status { top: 50%; }
.mt-design-model__hint { bottom: 10px; }

.mt-photos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.mt-photos__item { padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: #fff; cursor: zoom-in; aspect-ratio: 1; }
.mt-photos__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.mt-photos__item:hover img, .mt-photos__item:focus-visible img { transform: scale(1.04); }
.mt-lightbox { width: min(92vw, 1100px); max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius-lg); background: #111; overflow: hidden; }
.mt-lightbox::backdrop { background: rgba(0,0,0,.8); }
.mt-lightbox img { display: block; width: 100%; max-height: 92vh; object-fit: contain; }
.mt-lightbox__btn { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 18px; cursor: pointer; }
.mt-lightbox__btn:hover { background: rgba(0,0,0,.8); }
.mt-lightbox__close { top: 10px; right: 10px; }
.mt-lightbox__prev { top: 50%; left: 10px; transform: translateY(-50%); }
.mt-lightbox__next { top: 50%; right: 10px; transform: translateY(-50%); }
.mt-lightbox__count { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; }
@media (max-width: 600px) { .mt-photos__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); } }

/* WhatsApp flotante y newsletter */
.mt-whatsapp { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff !important; font-size: 30px; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .15s; }
.mt-whatsapp:hover { transform: scale(1.06); }
.mt-newsletter { width: min(440px, calc(100% - 32px)); padding: var(--space-6); border: 0; border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--ink); box-shadow: 0 24px 64px rgba(0,0,0,.3); }
.mt-newsletter::backdrop { background: rgba(0,0,0,.45); }
.mt-newsletter h2 { margin: 0 0 var(--space-2); font: 700 22px/28px var(--store-font-display, var(--font-display)); }
.mt-newsletter__close { position: absolute; top: 10px; right: 10px; }
.mt-storefoot__news-title { margin-top: var(--space-5) !important; }
.mt-storefoot__news .mt-input { min-width: 0; }
.mt-cartline__promo { font-size: 13px; color: var(--success, #12805c); font-weight: 600; }
.mt-cartline__promo--hint { color: var(--brand-ink, var(--ink)); font-weight: 500; }
.mt-giftcard-form summary { cursor: pointer; font-size: 14px; color: var(--brand-ink, var(--ink)); margin: var(--space-2) 0; }

/* Blog / novedades */
.mt-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); margin: var(--space-4) 0 var(--space-6); }
.mt-post-card { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); overflow: hidden; color: var(--ink); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.mt-post-card:hover { box-shadow: 0 8px 24px rgb(0 0 0 / .08); transform: translateY(-2px); }
.mt-post-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mt-post-card__body { padding: var(--space-4); display: grid; gap: var(--space-2); }
.mt-post-card__body h2, .mt-post-card__body h3 { margin: 0; font: 700 17px/23px var(--font-sans); }
.mt-post-card__body p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
.mt-post-card time { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.mt-post-cover { width: 100%; border-radius: var(--radius-lg, 14px); margin: var(--space-3) 0 var(--space-5); }
.mt-prose img { max-width: 100%; height: auto; border-radius: 10px; }

/* Zoom de la foto del producto */
.mt-zoomable { position: relative; cursor: zoom-in; }
.mt-zoomable.is-zoomed { cursor: zoom-out; touch-action: none; }
.mt-zoomable:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mt-zoomable img, .mt-zoomable canvas { transition: transform .25s ease; }
.mt-zoomable.is-zoomed img, .mt-zoomable.is-zoomed canvas { transform: scale(2.2); }
.mt-zoom-hint { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(255 255 255 / .9); color: var(--ink); box-shadow: 0 2px 8px rgb(0 0 0 / .15); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .mt-zoomable img, .mt-zoomable canvas { transition: none; } }

/* Favoritos */
.mt-buy__head { display: flex; align-items: flex-start; gap: var(--space-3); justify-content: space-between; }
.mt-buy__head .mt-buy__title { flex: 1; }
.mt-wish { margin: 0; }
.mt-wish__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink-muted); font-size: 18px; cursor: pointer; transition: color .15s, border-color .15s; }
.mt-wish__btn:hover, .mt-wish__btn[aria-pressed="true"] { color: #d6336c; border-color: #d6336c; }
.mt-wishlist li { display: flex; align-items: center; gap: var(--space-3); }
.mt-wishlist .mt-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); }
.mt-store .mt-legal .mt-crumbs--store { margin-bottom: var(--space-3); }

/* Cotizador: columna de material con descripción cómoda */
.mt-print-material { min-width: 320px; width: 45%; }

/* Calculadora: calibración con el laminador */
.mt-calc__calibrate { padding-top: var(--space-3); border-top: 1px dashed var(--line); }
.mt-calc__calibrate .mt-calc__unit { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-muted); }
.mt-calc__calibrate .mt-input--xs { width: 80px; }
.mt-calc__calibrate .mt-row { flex-wrap: wrap; }

/* Video de YouTube (portada y productos): miniatura liviana hasta tocar play */
.mt-home-video, .mt-product-video { margin: var(--space-7) 0; }
.mt-video { position: relative; max-width: 960px; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.mt-video--vertical { max-width: 360px; aspect-ratio: 9 / 16; }
.mt-video iframe, .mt-video__play, .mt-video__play img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mt-video__play { padding: 0; cursor: pointer; background: #000; }
.mt-video__play img { object-fit: cover; opacity: .85; transition: opacity .2s; }
.mt-video__play:hover img, .mt-video__play:focus-visible img { opacity: 1; }
.mt-video__icon { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--store-accent, #f26a1b); color: #fff; font-size: 26px; box-shadow: 0 8px 24px rgb(0 0 0 / .35); transition: transform .2s; }
.mt-video__icon i { margin-left: 4px; }
.mt-video__play:hover .mt-video__icon { transform: scale(1.08); }

/* Lo que dicen nuestros clientes */
.mt-testimonials { margin: var(--space-7) 0; }
.mt-testimonials__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); }
@media (min-width: 900px) { .mt-testimonials__track { grid-auto-columns: calc((100% - 2 * var(--space-4)) / 3); } }
.mt-testimonial { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); scroll-snap-align: start; }
.mt-testimonial blockquote { flex: 1; margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.mt-testimonial figcaption { display: flex; align-items: center; gap: var(--space-3); }
.mt-testimonial figcaption span { display: grid; }
.mt-testimonial figcaption small { color: var(--ink-muted); }
.mt-testimonial__avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-sunken); color: var(--ink-muted); font-weight: 700; font-size: 14px; }
.mt-testimonial .mt-stars { color: #f5a623; }

/* Instagram */
.mt-instagram { margin: var(--space-7) 0; }
.mt-instagram .mt-section-title { justify-content: space-between; }
.mt-instagram__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
@media (max-width: 640px) { .mt-instagram__grid { grid-template-columns: repeat(2, 1fr); } }
.mt-instagram__post { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-sunken); }
.mt-instagram__post img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.mt-instagram__post:hover img { transform: scale(1.05); }
.mt-instagram__badge { position: absolute; top: 8px; right: 8px; color: #fff; text-shadow: 0 1px 4px rgb(0 0 0 / .6); }
.mt-instagram__embeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.mt-instagram__embeds iframe { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }

/* Estrellas en las tarjetas */
.mt-product__rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #f5a623; }
.mt-product__rating small { color: var(--ink-muted); }

/* Panel: opiniones de la portada */
.mt-testimonial-form { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
.mt-testimonial-form__delete { display: flex; justify-content: flex-end; margin-top: calc(var(--space-3) * -1); }

/* Vista 360° */
.mt-spin { position: relative; aspect-ratio: 1; border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; background: var(--surface-raised); }
.mt-spin[hidden] { display: none; }
.mt-spin img { width: 100%; height: 100%; object-fit: contain; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-drag: none; }
.mt-spin.is-dragging img { cursor: grabbing; }
.mt-spin__hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 4px 12px; border-radius: var(--radius-pill); background: rgb(0 0 0 / .55); color: #fff; font-size: 12px; pointer-events: none; transition: opacity .3s; }
.mt-spin.is-dragging .mt-spin__hint { opacity: 0; }
.mt-spin__close { position: absolute; top: 10px; right: 10px; background: var(--surface-raised); }
.mt-spin-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.mt-spin-strip img { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }

/* Combos en la ficha */
.mt-bundles { margin: var(--space-7) 0; }
.mt-bundles__list { display: grid; gap: var(--space-4); }
.mt-bundle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.mt-bundle__items { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.mt-bundle__item { display: grid; justify-items: center; gap: 6px; width: 120px; color: var(--ink); text-align: center; font-size: 13px; line-height: 1.3; }
.mt-bundle__item img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-md); background: var(--surface-sunken); }
.mt-bundle__plus { font-size: 24px; font-weight: 700; color: var(--ink-muted); }
.mt-bundle__buy { display: grid; gap: var(--space-2); min-width: 220px; }
.mt-bundle__price { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mt-bundle__price s { color: var(--ink-muted); }
.mt-bundle__price strong { font-size: 22px; }

/* Puntos y dólares */
.mt-points-offer { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 14px; }
.mt-points-offer .mt-btn { justify-self: start; }
.mt-points-balance { font-size: 18px; }
.mt-points-balance i { color: #f5a623; }
.mt-usd { margin: 0; color: var(--ink-muted); font-size: 14px; }
.mt-usd--right { text-align: right; font-size: 13px; }

/* Galería del panel: foto asignada a un color */
.mt-gallery-admin:has(.mt-gallery-admin__tag) { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.mt-gallery-admin .mt-gallery-admin__tag { position: static; margin-top: 4px; }
.mt-gallery-admin__tag .mt-select { width: 100%; }

/* Variante con foto real como muestra */
.mt-variant--photo span { height: auto; min-height: 40px; padding: 4px var(--space-3) 4px 4px; gap: var(--space-2); }
.mt-variant--photo img { width: 40px; height: 40px; object-fit: cover; border-radius: calc(var(--radius-md) - 3px); }
.mt-variant.is-out span { color: var(--ink-muted); background: var(--surface-sunken); text-decoration: line-through; cursor: not-allowed; }
.mt-gallery__thumbs img[hidden] { display: none; }

/* Ingreso con Google / Facebook */
.mt-social-login { display: grid; gap: var(--space-2); }
.mt-social-login__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 46px; border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font-weight: 600; }
.mt-social-login__btn:hover { background: var(--surface-sunken); }
.mt-social-login__btn--facebook { border-color: #1877f2; background: #1877f2; color: #fff; }
.mt-social-login__btn--facebook:hover { background: #166fe5; color: #fff; }
.mt-social-login__btn--facebook i { font-size: 20px; }
.mt-social-login__or { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; color: var(--ink-muted); font-size: 13px; }
.mt-social-login__or::before, .mt-social-login__or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
/* Cotizador: colores por pieza de un 3MF */
.mt-quoter__pieces { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.mt-quoter__piece-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); max-height: 280px; overflow-y: auto; }
.mt-quoter__piece { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); background: var(--surface-raised); }
.mt-quoter__piece.is-selected { border-color: var(--store-accent, var(--brand)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--store-accent, var(--brand)) 25%, transparent); }
.mt-quoter__piece-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); }
.mt-quoter__piece-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.mt-quoter__piece select { max-width: 48%; }
/* Opinar desde el pedido: que el título no quede bajo la barra fija al llegar con #opinar */
#opinar { scroll-margin-top: 140px; }

/* Encabezado: link al blog (Novedades); en el celular queda solo el ícono */
.mt-storehead__link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; text-decoration: none; padding: 8px 10px; border-radius: var(--radius-pill); white-space: nowrap; transition: background-color .15s; }
.mt-storehead__link:hover, .mt-storehead__link.is-active { background: var(--surface-sunken); }
@media (max-width: 720px) { .mt-storehead__link span { display: none; } .mt-storehead__link { width: 40px; height: 40px; justify-content: center; padding: 0; } }
.mt-catitem--blog { border-top: 1px solid var(--line); }
.mt-catitem--blog + .mt-catitem--blog { border-top: 0; }
/* En pantallas angostas los links de la barra (Novedades, Colores) pasan al menú de Categorías */
@media (min-width: 541px) { .mt-catitem--blog { display: none; } }
@media (max-width: 540px) { .mt-storehead__link { display: none; } }

/* Colores de filamento: foto real de la muestra (al elegir el color, en la página Colores y en el panel) */
.mt-swatch-photo { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 0; }
.mt-swatch-photo img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); background: var(--surface-sunken); }
.mt-swatch-photo figcaption { font: 600 13px/18px var(--font-sans); color: var(--ink-soft, var(--ink)); }
.mt-filaments { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 var(--space-6); }
.mt-filament { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mt-filament__photo { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.mt-filament__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.mt-filament__photo:hover img { transform: scale(1.04); }
.mt-filament figcaption { display: flex; flex-direction: column; gap: 2px; }
.mt-filament.is-out { opacity: .55; }
.mt-filament-photo { min-width: 170px; }
.mt-filament-photo__img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }