/* ============================================================
   storefront.css — Portada, catálogo, configurador y carrito.
   Usa los tokens de /css/tokens.css. Las clases que pinta
   shop.js (card, cat-btn, dlg-*, cart-*, sw, chip…) viven aquí.
   ============================================================ */

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { overflow-x: hidden; }
body a { color: var(--primary); }
body h1, body h2, body h3 { margin: 0; line-height: 1.12; text-wrap: balance; }
body h1 { font: 700 clamp(2rem, 4.6vw, 3.25rem)/1.08 var(--font-display); letter-spacing: -.015em; }
body h2 { font: 500 clamp(1.5rem, 3.2vw, 2.1rem)/1.15 var(--font-display); letter-spacing: -.01em; }
body h3 { font-size: 1.125rem; font-weight: 600; }
body p { margin: 0; }

body .wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
body .skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--primary); color: var(--primary-foreground); padding: 10px 14px; border-radius: var(--radius); font-weight: 600; }
body .skip:focus { top: 12px; }

/* ---------- botones ---------- */
body .btn {
  font: 600 1rem/1 var(--font-sans); min-height: 48px; padding: 0 22px;
  border-radius: var(--radius); border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; cursor: pointer;
  background: var(--primary); color: var(--primary-foreground);
  transition: filter .15s, background .15s, transform .15s var(--ease);
}
body .btn:hover { filter: brightness(1.08); }
body .btn:active { transform: translateY(1px); }
body .btn:disabled, body .btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; transform: none; }
body .btn svg { width: 18px; height: 18px; }
body .btn-primary { background: var(--primary); color: var(--primary-foreground); }
body .btn-outline, body .btn.ghost, body .btn-ghost {
  background: transparent; color: var(--foreground); border: 1px solid var(--input);
}
body .btn-outline:hover, body .btn.ghost:hover, body .btn-ghost:hover { background: var(--muted); filter: none; }
body .btn-sm { min-height: 40px; padding: 0 14px; font-size: .92rem; }

/* ---------- barra superior ---------- */
body header.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--background) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
body .top .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
body .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--foreground); font: 700 .98rem/1 var(--font-display); letter-spacing: .02em; white-space: nowrap; }
body .logo .sep { color: var(--primary); }
body .logo-text { white-space: nowrap; }
body .logo-mark { width: 30px; height: 30px; color: var(--primary); }
body .top-nav { display: flex; gap: 4px; margin-left: 8px; }
body .top-nav a { color: var(--muted-foreground); text-decoration: none; font-weight: 500; font-size: .95rem; padding: 8px 12px; border-radius: var(--radius-sm); }
body .top-nav a:hover { color: var(--foreground); background: var(--muted); }
body .top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
body .icon-btn { position: relative; width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center; background: none; border: 1px solid var(--border); color: var(--foreground); cursor: pointer; }
body .icon-btn:hover { background: var(--muted); }
body .icon-btn svg { width: 20px; height: 20px; }
body .icon-btn .count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font: 600 .7rem/20px var(--font-mono); text-align: center; }

/* ---------- hero: rejilla de cama de impresión ---------- */
body .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
body .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 45%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 72% 45%, #000 30%, transparent 75%);
}
body .hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; padding-block: 64px 72px; }
body .hero-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
body .badge-loc { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font: 600 .78rem/1 var(--font-sans); color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; background: var(--card); }
body .badge-loc i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
body .hero h1 em { font-style: normal; color: var(--primary); }
body .hero h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
body .hero .lead { font-size: 1.15rem; color: var(--muted-foreground); max-width: 50ch; }
body .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
body .facts { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; font-size: .92rem; color: var(--muted-foreground); }
body .facts li { display: flex; align-items: center; gap: 8px; }
body .facts svg { width: 16px; height: 16px; color: var(--success); flex: none; }

/* ---------- mini editor de la portada ---------- */
body .bed { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; box-shadow: var(--shadow-pop); }
body .bed-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); font: 500 .78rem var(--font-mono); color: var(--muted-foreground); }
body .dots { display: flex; gap: 6px; }
body .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
body .bed-tabs { display: flex; gap: 4px; padding: 10px 12px 0; overflow-x: auto; scrollbar-width: none; }
body .bed-tabs::-webkit-scrollbar { display: none; }
body .bed-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted-foreground); font: 600 .88rem var(--font-sans); cursor: pointer; white-space: nowrap; }
body .bed-tab:hover { color: var(--foreground); background: var(--muted); }
body .bed-tab[aria-selected="true"] { border-color: var(--primary); color: var(--foreground); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-soft); }
body .bed-tab .soon { font: 600 .62rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--warning); }
body .stage { position: relative; aspect-ratio: 5/4; max-height: 340px; width: 100%; margin-top: 10px; background: radial-gradient(ellipse at 50% 70%, var(--primary-soft), transparent 70%); cursor: grab; outline-offset: -3px; touch-action: none; }
body .stage:active { cursor: grabbing; }
body .stage canvas { display: block; width: 100% !important; height: 100% !important; }
body .stage-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted-foreground); font: .85rem var(--font-mono); }
body .stage .hint { position: absolute; left: 12px; bottom: 10px; font: .72rem var(--font-mono); color: var(--muted-foreground); pointer-events: none; }
body .stage .dim { position: absolute; right: 12px; top: 12px; font: 600 .72rem var(--font-mono); color: var(--muted-foreground); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; pointer-events: none; }
body .ctrl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 16px; border-top: 1px solid var(--border); }
body .ctrl .full { grid-column: 1 / -1; }
body .ctrl .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; margin: 0; padding: 0; }
body .ctrl .field > label, body .ctrl .field > legend { font-weight: 600; font-size: .88rem; padding: 0; }
body .ctrl .field small { color: var(--muted-foreground); font-size: .82rem; }
body .text-in { min-height: 44px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: var(--background); color: var(--foreground); font: 600 1rem var(--font-sans); padding: 0 12px; width: 100%; }
body .text-in:focus { outline: 3px solid var(--ring); outline-offset: 1px; }
body .sw-row { display: flex; gap: 6px; flex-wrap: wrap; }
body .sw-opt { position: relative; }
body .sw-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
body .sw-opt label { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); cursor: pointer; background: var(--background); }
body .sw-opt label i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(127, 127, 127, .5); }
body .sw-opt input:checked + label { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
body .sw-opt input:focus-visible + label { outline: 3px solid var(--ring); outline-offset: 3px; }
body .sw-name { font-weight: 400; color: var(--muted-foreground); }
body .ctrl .field > .file-btn { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px dashed var(--input); border-radius: var(--radius); cursor: pointer; font-weight: 600; font-size: .92rem; background: var(--background); }
body .file-btn:hover { background: var(--muted); }
body .file-btn:focus-within { outline: 3px solid var(--ring); outline-offset: 2px; }
body .file-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
body .seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
body .seg button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted-foreground); font: 600 .85rem var(--font-sans); cursor: pointer; }
body .seg button[aria-pressed="true"] { background: var(--muted); color: var(--foreground); }
body .bed-note { font-size: .85rem; color: var(--muted-foreground); }
body .bed-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--muted); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
body .bed-price { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body .bed-price b { font: 700 1.4rem/1 var(--font-display); }
body .bed-price small { font-size: .78rem; color: var(--muted-foreground); }

/* ---------- secciones ---------- */
body .sec { padding-block: 80px; display: flex; flex-direction: column; gap: 28px; }
body .sec-head { display: flex; flex-direction: column; gap: 10px; max-width: 62ch; }
body .sec-head p { color: var(--muted-foreground); }
body .row-head { max-width: none; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
body .row-head > div { display: flex; flex-direction: column; gap: 10px; }
body .row-head p { max-width: 44ch; font-size: .95rem; }
body .band { background: var(--card); border-block: 1px solid var(--border); }

/* ---------- filtro de categorías (shop.js) ---------- */
body .cat-filter { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
body .cat-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground); font: 600 .9rem var(--font-sans); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
body .cat-btn:hover { color: var(--foreground); border-color: var(--input); }
body .cat-btn.active { border-color: var(--primary); color: var(--foreground); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
body .cat-badge { font: 600 .72rem/1 var(--font-mono); padding: 4px 7px; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); }
body .cat-btn.active .cat-badge { background: var(--primary); color: var(--primary-foreground); }

/* ---------- tarjetas de producto (shop.js) ---------- */
body .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
@media (max-width: 560px) {
  body .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body #products .card { padding: 12px; gap: 8px; }
  body #products .card h3 { font-size: .98rem; }
  body #products .card p { font-size: .84rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  body #products .card .em { font-size: 2rem; padding: .5rem; }
  body #products .card .btn { min-height: 44px; padding: 0 8px; font-size: .85rem; }
}
body .empty-state { grid-column: 1 / -1; text-align: center; padding: 48px 0; color: var(--muted-foreground); }
body #products .card {
  position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: border-color .15s;
}
body #products .card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, -40%), var(--glow), transparent 60%); }
body #products .card:hover { border-color: var(--input); }
body #products .card:hover::before { opacity: 1; }
body #products .card > * { position: relative; }
body #products .card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); background: var(--muted); }
body #products .card .em { font-size: 2.8rem; text-align: center; padding: 1.5rem; background: var(--muted); border-radius: var(--radius); aspect-ratio: 4/3; display: grid; place-items: center; }
body #products .card h3 { font-size: 1.1rem; font-weight: 600; }
body #products .card p { color: var(--muted-foreground); font-size: .92rem; flex: 1; line-height: 1.45; }
body #products .card .price { font: 600 .95rem var(--font-mono); font-variant-numeric: tabular-nums; }
body #products .card .btn { width: 100%; min-height: 44px; font-size: .95rem; }
body .badge-coming-soon, body .badge-ia { align-self: flex-start; font: 600 .7rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; border: 1px solid currentColor; }
body .badge-coming-soon { color: var(--warning); }
body .badge-ia { color: var(--primary); }
body #products .card.coming-soon img, body #products .card.coming-soon .em { opacity: .6; }
body #products .card .btn-coming-soon { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); opacity: 1; }
body #products .card .btn-ia { background: transparent; color: var(--foreground); border: 1px solid var(--input); }
body #products .card .btn-ia:hover { background: var(--muted); filter: none; }

/* ---------- cómo funciona ---------- */
body .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; counter-reset: s; }
body .steps li { counter-increment: s; display: flex; flex-direction: column; gap: 10px; padding: 22px 4px 0; border-top: 2px solid var(--border); min-width: 0; }
body .steps li:first-child { border-top-color: var(--primary); }
body .steps li::before { content: "0" counter(s); font: 500 .85rem var(--font-mono); color: var(--primary); }
body .steps p { color: var(--muted-foreground); font-size: .95rem; }

/* ---------- pie ---------- */
body .foot { border-top: 1px solid var(--border); padding-block: 36px 48px; color: var(--muted-foreground); font-size: .9rem; }
body .foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
body .foot-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
body .foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
body .foot-links a { color: var(--muted-foreground); text-decoration: none; }
body .foot-links a:hover { color: var(--foreground); text-decoration: underline; }

/* ============================================================
   Diálogos: configurador de producto (#dlgProduct)
   ============================================================ */
body dialog {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0;
  width: min(1080px, 95vw); max-height: 90vh; overflow: hidden;
  background: var(--card); color: var(--foreground); box-shadow: var(--shadow-pop);
}
body dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(6px); }
body .dlg { padding: 0; }
body .dlg.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 0; align-items: stretch; max-height: 90vh; overflow: hidden; }

body .dlg-opts { padding: 24px; overflow-y: auto; max-height: 90vh; display: flex; flex-direction: column; gap: 14px; background: var(--card); }
body .dlg-opts h3 { font: 500 1.35rem/1.2 var(--font-display); }
body .dlg-opts .muted { margin-top: -4px; margin-bottom: 6px; }
body .dlg-opts .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
body .dlg-opts label, body #dlgCart label { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--foreground); }
body .dlg-opts .field { display: flex; flex-direction: column; gap: 8px; }

/* campos de formulario de ambos diálogos */
body dialog input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]), body dialog select, body dialog textarea {
  background: var(--background); border: 1px solid var(--input); border-radius: var(--radius-sm);
  color: var(--foreground); min-height: 44px; padding: 10px 12px; font: 500 1rem var(--font-sans);
  width: 100%; transition: border-color .15s;
}
body dialog input[type=file] { font: .9rem var(--font-sans); color: var(--muted-foreground); }
body dialog input[type=file]::file-selector-button { font: 600 .88rem var(--font-sans); border: 1px solid var(--input); background: var(--muted); color: var(--foreground); border-radius: var(--radius-sm); padding: 8px 12px; margin-right: 10px; cursor: pointer; }
body dialog input:focus-visible, body dialog select:focus-visible, body dialog textarea:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
body dialog input::placeholder, body dialog textarea::placeholder { color: var(--muted-foreground); opacity: .8; }
body dialog select {
  cursor: pointer; appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238a94a6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}

body .range-row { display: flex; align-items: center; gap: 12px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px; min-height: 44px; }
body .range-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--primary); cursor: pointer; height: 24px; }
body .range-row b { font: 600 .88rem var(--font-mono); font-variant-numeric: tabular-nums; color: var(--foreground); min-width: 52px; white-space: nowrap; text-align: right; }

body .swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
body .sw { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; position: relative; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .4); transition: transform .15s var(--ease); }
body .sw:hover { transform: scale(1.08); }
body .sw.on { border-color: var(--background); box-shadow: 0 0 0 2px var(--primary); }
body .sw.on::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }

body .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; padding: 10px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); }
body .chip { min-width: 44px; height: 52px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--muted); font-size: 1.5rem; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
body .chip:hover { border-color: var(--input); }
body .chip.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
body .chip:disabled { opacity: .3; cursor: not-allowed; }

/* columna derecha: visor, precio y acciones */
body .dlg-prev { padding: 24px; background: var(--background); border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; max-height: 90vh; }
body .preview { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: radial-gradient(ellipse at 50% 70%, var(--primary-soft), var(--card) 75%); text-align: center; }
body .preview.v3 { padding: 0; }
body .v3d { width: 100%; height: 340px; cursor: grab; touch-action: none; }
body .v3d:active { cursor: grabbing; }
body .v3d canvas { width: 100% !important; height: 100% !important; display: block; }
@media (max-width: 820px) { body .v3d { height: 220px; } }
body .v3info { padding: 10px 14px; border-top: 1px solid var(--border); background: var(--card); font-size: .82rem; color: var(--muted-foreground); display: flex; flex-direction: column; gap: 6px; align-items: center; }
body .v3info img.plain { max-width: 100%; max-height: 260px; border-radius: var(--radius); object-fit: cover; }
body .tabs { display: flex; gap: 6px; justify-content: center; }
body .tab { min-height: 32px; padding: 0 12px; border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); border-radius: 999px; font: 600 .8rem var(--font-sans); cursor: pointer; }
body .tab:hover { color: var(--foreground); }
body .tab.on { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
body .warn { font-size: .82rem; font-weight: 600; color: var(--warning); }
body .muted { color: var(--muted-foreground); font-size: .88rem; line-height: 1.45; }
body .err { color: var(--destructive); font-size: .88rem; min-height: 1.2em; }
body .ok { color: var(--success); }

body .litho-light-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; }
body .litho-light-title { font-size: .88rem; font-weight: 600; }
body .litho-light-tabs { display: flex; gap: 6px; }
body .litho-light-tabs .tab.on.light-on { background: var(--warning); border-color: var(--warning); color: var(--background); }
body .litho-light-tabs .tab.on.light-off { background: var(--muted); border-color: var(--input); color: var(--foreground); }

/* Soporte de móvil: bisagras de la vista previa y casilla de nombre */
body .stand-ctrl { display: grid; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
body .stand-ctrl:empty { display: none; }
body .stand-ctrl label { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; font-weight: 600; }
body .stand-ctrl-head { display: flex; align-items: center; gap: 6px; }
body .stand-ctrl-head span { flex: 1; font-size: .88rem; font-weight: 600; }
body .dlg-opts label.check { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }
body .dlg-opts label.check input { width: 18px; height: 18px; accent-color: var(--primary); }
body .stand-club a { color: var(--primary); font-weight: 600; }
/* el visor del soporte ocupa todo el alto de la columna derecha */
body #dlgProduct .dlg-prev.stand .preview { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body #dlgProduct .dlg-prev.stand .v3d { flex: 1 1 auto; height: auto; min-height: 360px; }
@media (max-width: 820px) { body #dlgProduct .dlg-prev.stand .v3d { min-height: 300px; } }

body .support-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid currentColor; }
body .support-badge.ok { color: var(--success); }
body .support-badge.warn { color: var(--destructive); }

body .quote { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
body .quote .tot { font: 700 1.5rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
body .notice { background: color-mix(in srgb, var(--warning) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); color: var(--warning); border-radius: var(--radius); padding: 10px 14px; font-size: .88rem; font-weight: 600; text-align: center; }
body .dlg-prev .actions { display: flex; gap: 10px; margin-top: auto; }
body .dlg-prev .actions .btn { flex: 1; }

/* ============================================================
   Carrito y checkout (#dlgCart)
   ============================================================ */
body #dlgCart { width: min(740px, 96vw); max-height: 92vh; flex-direction: column; }
body #dlgCart[open] { display: flex; }
body #dlgCart #cartBody { display: flex; flex-direction: column; max-height: 92vh; height: 100%; overflow: hidden; padding: 0; }
body .cart-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
body .cart-header h3 { font: 500 1.2rem/1.2 var(--font-display); display: flex; align-items: center; gap: 10px; }
body .close-btn { width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--muted-foreground); cursor: pointer; display: grid; place-items: center; font-size: 1.05rem; }
body .close-btn:hover { color: var(--foreground); background: var(--muted); }
body .cart-scroll-area { flex: 1; overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 20px; }
body .cart-section-title { font-size: 1rem; font-weight: 600; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
body .cart-items-list { display: flex; flex-direction: column; gap: 10px; }
body .cart-item-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); }
body .cart-item-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
body .cart-item-name { font-weight: 600; font-size: .95rem; }
body .cart-item-desc { font-size: .82rem; color: var(--muted-foreground); }
body .cart-item-price { font: 600 1rem var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
body .cart-item-del { background: transparent; border: 1px solid var(--border); color: var(--destructive); border-radius: var(--radius-sm); min-height: 36px; padding: 0 10px; cursor: pointer; font-size: .85rem; }
body .cart-item-del:hover { background: var(--muted); }
body .cart-summary-box { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px; font-size: .92rem; }
body .cart-summary-row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted-foreground); }
body .cart-summary-row b { color: var(--foreground); font-variant-numeric: tabular-nums; }
body .cart-summary-total { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--border); font: 700 1.25rem var(--font-display); font-variant-numeric: tabular-nums; }
body #dlgCart .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body #dlgCart .field-full { grid-column: 1 / -1; }
body #dlgCart label span.req { color: var(--destructive); margin-left: 2px; }
@media (max-width: 600px) { body #dlgCart .form-grid { grid-template-columns: 1fr; } }
body .pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
@media (max-width: 540px) { body .pay-methods { grid-template-columns: 1fr; } }
body .pay-method-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 12px 8px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; color: var(--muted-foreground); text-align: center; }
body .pay-method-btn:hover { color: var(--foreground); border-color: var(--input); }
body .pay-method-btn.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-soft); color: var(--foreground); }
body .pay-method-btn .icon { font-size: 1.5rem; }
body .pay-method-btn .name { font-size: .88rem; font-weight: 600; }
body .pay-info-box { background: var(--muted); border-radius: var(--radius); padding: 10px 14px; font-size: .88rem; color: var(--muted-foreground); line-height: 1.45; margin-top: 8px; }
body .pay-info-box b { color: var(--foreground); }
body #dlgCart .chk-label { flex-direction: row; align-items: flex-start; gap: 10px; font-size: .9rem; font-weight: 400; cursor: pointer; line-height: 1.4; }
body #dlgCart .chk-label input[type=checkbox] { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
body #dlgCart .cart-error { color: var(--destructive); border: 1px solid currentColor; border-radius: var(--radius); padding: 12px 16px; font-size: .9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
body #dlgCart .cart-error:empty { display: none; }
body .cart-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--muted); flex-shrink: 0; }
body .cart-footer .total-pill { font: 700 1.15rem var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
body .btn-submit-order { font: 600 1rem var(--font-sans); min-height: 48px; padding: 0 22px; border-radius: var(--radius); border: 1px solid transparent; background: var(--primary); color: var(--primary-foreground); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
body .btn-submit-order:hover { filter: brightness(1.08); }
body .btn-submit-order:disabled { opacity: .55; cursor: not-allowed; filter: none; background: var(--muted); color: var(--muted-foreground); border-color: var(--border); }
body .btn-ghost { min-height: 48px; padding: 0 18px; border-radius: var(--radius); font: 600 .95rem var(--font-sans); cursor: pointer; }
@media (max-width: 580px) {
  body .cart-footer { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  body .cart-footer > div { flex-direction: column-reverse; }
  body .cart-footer .btn-submit-order, body .cart-footer .btn-ghost { width: 100%; }
}
body .callout { background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); border-radius: var(--radius); padding: 16px 18px; max-width: 520px; margin: 0 auto 24px; text-align: left; }
body .callout h4 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; }
body .callout p { font-size: .92rem; line-height: 1.5; }


/* ---------- selector de idioma, acceso pro y menú móvil ---------- */
body .lang-selector { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
body .lang-selector button { min-height: 32px; min-width: 36px; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: var(--muted-foreground); font: 600 .75rem var(--font-mono); cursor: pointer; }
body .lang-selector button:hover { color: var(--foreground); }
body .lang-selector button.active, body .lang-selector button[aria-pressed="true"] { background: var(--muted); color: var(--foreground); }
body .pro-btn { min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius); background: none; color: var(--muted-foreground); font: 500 .88rem var(--font-sans); cursor: pointer; }
body .pro-btn:hover { background: var(--muted); color: var(--foreground); }
body .menu-btn { display: none; }
body .theme-btn .i-moon { display: none; }
:root[data-theme="light"] body .theme-btn .i-sun { display: none; }
:root[data-theme="light"] body .theme-btn .i-moon { display: block; }
body .mobile-menu { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 16px; border-top: 1px solid var(--border); }
body .mobile-menu a { color: var(--foreground); text-decoration: none; font-weight: 500; padding: 12px 8px; border-radius: var(--radius-sm); }
body .mobile-menu a:hover { background: var(--muted); }
body .mobile-menu .lang-selector { display: none; align-self: flex-start; margin-top: 8px; }
body .logo-img { width: 32px; height: 32px; border-radius: var(--radius-sm); object-fit: cover; }
body .ctrl .field-label { font-weight: 600; font-size: .88rem; }
body .empty-state { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: var(--radius-lg); }

/* ---------- ventanas de personalización a pantalla casi completa ---------- */
body #dlgProduct, body #dlgShadowLamp, body #dlgAiGenerator { width: calc(100vw - 32px); max-width: none; height: calc(100dvh - 32px); max-height: none; border-radius: var(--radius-lg); }
body #dlgProduct .dlg.split, body #dlgShadowLamp .dlg.split, body #dlgAiGenerator .dlg.split { height: 100%; max-height: 100%; }
body #dlgProduct .dlg-opts, body #dlgShadowLamp .dlg-opts, body #dlgAiGenerator .dlg-opts, body #dlgProduct .dlg-prev, body #dlgShadowLamp .dlg-prev, body #dlgAiGenerator .dlg-prev { height: 100%; max-height: 100%; box-sizing: border-box; }

/* Bloques de opciones (configurador y lámpara de sombras): tarjeta con cabecera */
body .opt-block { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
body .opt-block > :first-child { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
body .opt-block > :first-child > span, body .opt-block > :first-child.text-xs { font: 600 .75rem var(--font-mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--primary) !important; }
body .dlg-opts [hidden], body .dlg-opts label[hidden], body .dlg-opts div[hidden], body .dlg-opts select[hidden] { display: none !important; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  body .hero .wrap { grid-template-columns: minmax(0, 1fr); padding-block: 40px 56px; gap: 32px; }
  body .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 820px) {
  body .top-nav, body .pro-btn { display: none; }
  body .menu-btn { display: grid; }
  body #dlgProduct, body #dlgShadowLamp, body #dlgAiGenerator { width: 100vw; height: 100dvh; border-radius: 0; }
  body #dlgShadowLamp .dlg.split, body #dlgAiGenerator .dlg.split { height: auto; max-height: none; overflow-y: auto; }
  body #dlgShadowLamp .dlg-opts, body #dlgAiGenerator .dlg-opts, body #dlgShadowLamp .dlg-prev, body #dlgAiGenerator .dlg-prev { height: auto; max-height: none; overflow: visible; }
}
@media (min-width: 821px) { body .mobile-menu { display: none !important; } }
@media (max-width: 560px) {
  body .sec { padding-block: 56px; }
  body .ctrl { grid-template-columns: minmax(0, 1fr); }
  body .steps { grid-template-columns: minmax(0, 1fr); }
  body .cta-top { display: none; }
  body .top-right > .lang-selector { display: none; }
  body .mobile-menu .lang-selector { display: inline-flex; }
  /* Lámpara de sombras: las rejillas de dos columnas no caben en un móvil */
  body #dlgShadowLamp .dlg-opts [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  body .top .wrap { gap: 12px; }
  body .logo { font-size: .85rem; }
  body .dlg-opts .row { grid-template-columns: 1fr; }
  body .dlg-opts, body .dlg-prev { padding: 18px 16px; }
}

/* Configurador en escritorio: el visor ocupa toda la altura libre de la columna derecha
   y el precio queda compacto debajo, junto a los botones. */
@media (min-width: 821px) {
  body #dlgProduct .dlg-prev .preview { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body #dlgProduct .dlg-prev .v3d { flex: 1 1 auto; height: auto; min-height: 340px; }
  body #dlgProduct .dlg-prev .v3info { flex: none; padding: 8px 14px; }
  body #dlgProduct .dlg-prev .quote { flex: none; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; padding: 12px 18px; }
  body #dlgProduct .dlg-prev .quote .tot { grid-row: span 2; }
  body #dlgProduct .dlg-prev .actions { margin-top: 0; }
}

/* Configurador en móvil: el visor queda fijo arriba y el precio y los botones al final.
   Va al final del archivo para ganar a las reglas base de .dlg-prev. */
@media (max-width: 820px) {
  body .dlg.split { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; overflow-y: auto; }
  body .dlg.split .dlg-opts { max-height: none; overflow: visible; }
  body #dlgProduct .dlg.split { height: 100%; }
  body #dlgProduct .dlg-opts, body #dlgProduct .dlg-prev { height: auto; max-height: none; }
  body #dlgProduct .dlg-prev { display: contents; }
  body .dlg-prev .preview { order: -1; position: sticky; top: 0; z-index: 4; border-radius: 0; border-width: 0 0 1px; }
  body .dlg-prev > :not(.preview) { margin-inline: 16px; }
  body .dlg-prev .err:empty { display: none; }
  body .dlg-prev .actions { margin-bottom: 16px; }
}

/* Selector de modalitat: Impressió física vs Venda d'arxiu STL/3MF */
.fulfillment-toggle-wrap { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.fulfillment-toggle-label { font-size: 0.82rem; font-weight: 700; color: var(--foreground); text-transform: uppercase; letter-spacing: 0.04em; }
.fulfillment-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: rgba(255,255,255,0.04); padding: 4px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); }
.btn-fulfillment { padding: 9px 12px; font-size: 0.82rem; font-weight: 600; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--muted-foreground); cursor: pointer; transition: all 0.2s ease; text-align: center; }
.btn-fulfillment:hover { color: #fff; background: rgba(255,255,255,0.06); }
.btn-fulfillment.active { background: #0284c7; color: #fff; border-color: #38bdf8; font-weight: 700; box-shadow: 0 2px 8px rgba(2,132,199,0.3); }

/* ==================== Crear con IA (boceto → aprobación → 3D) ==================== */
body .ai-dlg { gap: 16px; }
body .ai-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
body .ai-head h3 { font: 500 1.35rem/1.2 var(--font-display); margin: 0; }
body .ai-head p { margin: 4px 0 0; }
body .ai-head .close-btn { background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--muted-foreground); cursor: pointer; min-width: 40px; min-height: 40px; }
body .ai-steps { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: ai; font-size: .85rem; color: var(--muted-foreground); }
body .ai-steps li { counter-increment: ai; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
body .ai-steps li::before { content: counter(ai); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); font: 600 .75rem var(--font-mono); }
body .ai-steps li + li::after { order: -1; content: ''; width: 18px; height: 1px; background: var(--border); }
body .ai-steps li.on { color: var(--foreground); font-weight: 600; }
body .ai-steps li.on::before, body .ai-steps li.done::before { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
body .ai-field { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 600; }
body .ai-field textarea, body .ai-field input[type="text"], body .ai-field select { width: 100%; font: inherit; font-weight: 400; padding: 10px 12px; line-height: 1.5; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--background); color: var(--foreground); }
body .ai-note { font-size: .85rem; margin: 0; }
body .ai-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
body .ai-photo-slot { position: relative; }
body .ai-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; aspect-ratio: 1; padding: 0; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--background); color: var(--foreground); font: inherit; cursor: pointer; overflow: hidden; position: relative; }
body .ai-photo:hover, body .ai-photo.over, body .ai-photo:focus-visible { border-color: var(--primary); background: var(--primary-soft); }
body .ai-photo.has { border-style: solid; }
body .ai-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
body .ai-photo-add { font-size: 1.4rem; }
body .ai-photo small { font-size: .78rem; font-weight: 600; }
body .ai-photo.has small { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 4px; background: rgba(0, 0, 0, .55); color: #fff; text-align: center; }
body .ai-photo-del { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: .8rem; cursor: pointer; }
body .ai-field > small.muted { font-weight: 400; }
@media (max-width: 420px) { body .ai-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body .ai-rights { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: .85rem; color: var(--muted-foreground); }
body .ai-rights input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--primary); }
body .ai-rights[hidden] { display: none; }
body .ai-zoom-btn { position: absolute; left: 6px; top: 6px; z-index: 1; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: .85rem; cursor: pointer; }
body .ai-zoom-btn:hover, body .ai-zoom-btn:focus-visible { background: var(--primary); color: var(--primary-foreground); }
body .ai-zoom { padding: 0; border: 0; background: transparent; max-width: 92vw; max-height: 92vh; overflow: visible; }
body .ai-zoom::backdrop { background: rgba(0, 0, 0, .8); }
body .ai-zoom img { display: block; max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: var(--radius); background: #fff; cursor: zoom-out; }
body .ai-zoom .close-btn { position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; border-radius: 50%; background: var(--card); color: var(--foreground); border: 1px solid var(--border); cursor: pointer; }
body .ai-progress { margin-top: 10px; font-size: .9rem; }
body .ai-bar { height: 6px; border-radius: 3px; background: var(--muted); overflow: hidden; margin-top: 6px; }
body .ai-bar i { display: block; height: 100%; background: var(--primary); transition: width .4s ease; }
body .ai-opts { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
body .ai-dlg .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body .ai-dlg textarea { resize: vertical; min-height: 0; }
body .ai-hint { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 400; }
body .ai-count { flex: none; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
body .ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body .ai-dlg .ai-actions .muted, body .ai-dlg .ai-head p { margin: 4px 0 0; }
body .ai-actions[hidden], body .ai-note[hidden] { display: none; }
body .ai-brief { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
body .ai-brief small { font: 600 .72rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
body .ai-brief p { margin: 4px 0 0; font-size: .9rem; line-height: 1.45; max-height: 7.5em; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
body .ai-opts { display: flex; flex-direction: column; gap: 12px; }

/* Visor de la derecha: foto, bocetos, 4 vistas o 3D según el paso */
body #dlgAiGenerator .dlg-prev .preview { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }
body .ai-tabs { padding: 10px 10px 0; }
body .ai-source { padding: 0; justify-content: flex-start; }
body .ai-big { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px; border: 0; background: none; cursor: zoom-in; }
body .ai-big img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .12)); }
body .ai-stage { flex: 1 1 auto; height: auto; min-height: 340px; }
body .ai-info { flex: none; }
body .ai-thumbs { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 2px; }
body .ai-thumb { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 0 2px; width: 72px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--muted-foreground); font: inherit; cursor: pointer; overflow: hidden; }
body .ai-thumb img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; display: block; }
body .ai-thumb small { font-size: .7rem; font-weight: 600; }
body .ai-thumb:hover { border-color: var(--input); }
body .ai-thumb.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); color: var(--foreground); }
body .ai-placeholder { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px; text-align: center; }
body .ai-placeholder-icon { font-size: 2.4rem; }
body .ai-placeholder b { font: 500 1.15rem/1.3 var(--font-display); }
body .ai-placeholder p { max-width: 320px; margin: 0; }
body .ai-wait { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: color-mix(in srgb, var(--card) 90%, transparent); backdrop-filter: blur(4px); }
body .ai-spin { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--primary-soft); border-top-color: var(--primary); animation: ai-spin .9s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body .ai-spin { animation-duration: 3s; } }
body .ai-prev-extra { display: flex; flex-direction: column; gap: 14px; }
body .ai-prev-extra:empty { display: none; }
@media (max-width: 820px) {
  body #dlgAiGenerator .dlg-prev { display: contents; }
  body #dlgAiGenerator .dlg-prev .preview { position: relative; top: auto; }
  body #dlgAiGenerator .ai-viewer.empty:not(.busy) { display: none; }
  body .ai-big { height: 300px; flex: none; }
  body .ai-stage { min-height: 300px; height: 300px; flex: none; }
}
@media (max-width: 720px) {
  body .ai-steps li:not(.on) { font-size: 0; gap: 0; }
  body .ai-steps li + li::after { width: 12px; margin-right: 6px; }
}

/* Farol de mensajes: el configurador sigue el tema de la página (claro u oscuro).
   Sus controles llevan clases de Tailwind con colores fijos de tema oscuro; aquí se pasan a los tokens. */
#dlgShadowLamp .bg-slate-900, #dlgShadowLamp .bg-slate-950 { background-color: var(--muted); }
#dlgShadowLamp .bg-cyan-950, #dlgShadowLamp .bg-cyan-950\/60 { background-color: var(--primary-soft); }
#dlgShadowLamp .border-slate-700, #dlgShadowLamp .border-cyan-800\/60, #dlgShadowLamp .border-cyan-500\/40 { border-color: var(--border); }
#dlgShadowLamp .text-white, #dlgShadowLamp .text-slate-200 { color: var(--foreground); }
#dlgShadowLamp .text-slate-300, #dlgShadowLamp .text-slate-400 { color: var(--muted-foreground); }
#dlgShadowLamp .text-cyan-300, #dlgShadowLamp .text-cyan-300\/80, #dlgShadowLamp .text-cyan-400\/90 { color: var(--primary); }
#dlgShadowLamp .focus\:border-cyan-400:focus { border-color: var(--ring); }
#dlgShadowLamp select option { background: var(--card); color: var(--foreground); }

HEAD
/* ==================== Magic Lightbox / Cuadro Sorpresa (Doble Imagen) ==================== */
body .lb-top-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 10px 14px;
}
body .lb-lamp-switch {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 10px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--muted);
  color: var(--foreground); cursor: pointer; text-align: left; font-family: var(--font-sans);
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
body .lb-lamp-switch:hover { border-color: var(--input); }
body .lb-lamp-switch.is-on {
  background: color-mix(in srgb, var(--warning) 16%, var(--card));
  border-color: var(--warning);
  box-shadow: 0 0 24px -4px color-mix(in srgb, var(--warning) 45%, transparent);
}
body .lb-lamp-knob {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.2rem; background: var(--background); border: 1px solid var(--border);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
body .lb-lamp-switch.is-on .lb-lamp-knob {
  background: var(--warning); color: #1c1917; border-color: var(--warning);
  transform: scale(1.06);
}
body .lb-lamp-copy { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
body .lb-lamp-copy strong { font-size: .88rem; font-weight: 700; }
body .lb-lamp-copy small { font-size: .75rem; color: var(--muted-foreground); }
body .lb-view-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

body .lb-canvas-stage {
  position: relative; width: 100%; min-height: 360px; flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  transition: background .45s var(--ease), box-shadow .45s var(--ease);
}
body .lb-canvas-stage.is-lit {
  background: radial-gradient(circle at 50% 48%, rgba(251, 191, 36, 0.25) 0%, rgba(15, 23, 42, 0.92) 78%);
}
body .lb-canvas-stage.is-off {
  background: radial-gradient(circle at 50% 35%, var(--primary-soft), var(--card) 78%);
}
body .lb-dual-canvas {
  max-width: 100%; max-height: 400px; width: auto !important; height: auto !important;
  border-radius: var(--radius-sm); cursor: grab; touch-action: none;
  transition: filter .35s var(--ease), box-shadow .35s var(--ease);
}
body .lb-dual-canvas:active { cursor: grabbing; }
body .lb-canvas-stage.is-lit .lb-dual-canvas {
  box-shadow: 0 0 42px rgba(245, 158, 11, 0.42), 0 18px 36px rgba(0, 0, 0, 0.65);
}
body .lb-canvas-stage.is-off .lb-dual-canvas {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
}
body .lb-layer-badge {
  position: absolute; top: 10px; left: 12px; pointer-events: none;
  font: 600 .72rem/1.2 var(--font-mono); padding: 5px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid var(--border); color: var(--foreground);
}

body .lb-collision-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--warning) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--border));
  color: var(--foreground);
}
body .lb-collision-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 200px; }
body .lb-collision-text strong { font-size: .85rem; color: var(--warning); }
body .lb-collision-text span { font-size: .78rem; color: var(--muted-foreground); }

body .lb-tpl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
}
body .lb-tpl-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--card); color: var(--foreground); cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
body .lb-tpl-card:hover { border-color: var(--input); background: var(--muted); }
body .lb-tpl-card.on {
  border-color: var(--primary); background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary);
}
body .lb-tpl-emoji { font-size: 1.45rem; flex: none; }
body .lb-tpl-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body .lb-tpl-info strong { font-size: .8rem; font-weight: 600; line-height: 1.2; }
body .lb-tpl-info small { font-size: .7rem; color: var(--muted-foreground); font-family: var(--font-mono); }

body .lb-payload-details {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); padding: 8px 12px; font-size: .82rem;
}
body .lb-payload-details summary { cursor: pointer; font-weight: 600; color: var(--primary); }
body .lb-payload-pre {
  margin: 6px 0 0; padding: 10px; border-radius: var(--radius-sm);
  background: var(--background); border: 1px solid var(--border);
  font-size: .75rem; max-height: 150px; overflow: auto; color: var(--foreground);
}

/* Aviso de idioma elegido automáticamente (i18n.js) */
.lang-notice { position: fixed; left: 16px; bottom: 24px; z-index: 9980; max-width: min(440px, calc(100vw - 32px)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); font-size: .88rem; }
.lang-notice span { flex: 1 1 160px; }
.lang-notice select, .lang-notice button { min-height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--background); color: var(--foreground); font: inherit; cursor: pointer; }
.lang-notice button { background: var(--primary); color: var(--primary-foreground); border-color: transparent; font-weight: 600; }
@media (max-width: 560px) { .lang-notice { bottom: 88px; } }


/* ---------- Móvil: cabecera que cabe, tarjetas legibles y botones flotantes que no tapan ---------- */
@media (max-width: 560px) {
  /* La cabecera no cabía en 360-412 px: el logo se montaba sobre el botón de tema */
  body .top .wrap { gap: 8px; }
  body .top-right { gap: 6px; }
  body .top .icon-btn { width: 40px; height: 40px; }
  body .logo { gap: 8px; min-width: 0; }
  body .logo-img { width: 28px; height: 28px; }
  body .uri-acc-btn { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; font-size: 1rem; border-radius: var(--radius); }
  body .uri-acc-btn .uri-acc-label { display: none; }
  /* Tarjetas: el resumen se cortaba a media línea (flex:1 estiraba la caja recortada) */
  body #products .card p { flex: none; }
  body #products .card .price { margin-top: auto; }
}
@media (max-width: 380px) {
  body .logo-text { display: none; }
}
@media (max-width: 560px) {
  /* Ayuda: solo el icono, para no tapar las tarjetas ni los botones del configurador */
  body .uri-support-fab { padding: 0; width: 52px; height: 52px; justify-content: center; gap: 0; }
  body .uri-support-fab .fab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body .uri-support-fab .pulse-dot { position: absolute; top: 6px; right: 6px; }
  .lang-notice { bottom: 84px; }
}
/* Táctil: sin efectos de ratón ni el latido continuo del punto verde (repinta sin parar) */
@media (hover: none), (prefers-reduced-motion: reduce) {
  body .uri-support-fab .pulse-dot { animation: none; }
  body #products .card::before { display: none; }
}
/* Inputs a 16 px en móvil: con menos, iOS hace zoom al tocarlos y descoloca la página */
@media (max-width: 820px) {
  body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), body select, body textarea { font-size: max(16px, 1em); }
}
/* Configurador en móvil: la vista previa fija arriba ocupaba hasta el 60 % de la pantalla
   y dejaba poco sitio para las opciones. Se limita a ~40 % y hay botón de cerrar visible. */
body .dlg-close-fab { display: none; }
@media (max-width: 820px) {
  body #dlgProduct .dlg-close-fab { display: grid; position: fixed; top: 10px; right: 10px; z-index: 30; background: color-mix(in srgb, var(--card) 92%, transparent); color: var(--foreground); box-shadow: var(--shadow-pop); }
  body .lb-canvas-stage { min-height: 0; max-height: 40dvh; padding: 10px; }
  body .lb-dual-canvas { max-height: calc(40dvh - 20px); }
  body #dlgProduct .dlg-prev.stand .v3d { min-height: 0; height: 38dvh; }
  body .lb-layer-badge { right: 60px; }
}
/* Farol de mensajes: el visor iba al final, debajo de todas las opciones; en móvil sube arriba y queda fijo */
body .lamp-preview { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; }
@media (max-width: 820px) {
  body #dlgShadowLamp .dlg-close-fab { display: grid; position: fixed; top: 10px; right: 10px; z-index: 30; background: color-mix(in srgb, var(--card) 92%, transparent); color: var(--foreground); box-shadow: var(--shadow-pop); }
  /* El form es quien hace scroll (como en el configurador), así la vista previa puede quedarse fija arriba */
  body #dlgShadowLamp .dlg.split { height: 100%; max-height: 100%; overflow-y: auto; }
  body #dlgShadowLamp .dlg-prev { display: contents; }
  body #dlgShadowLamp .lamp-preview { order: -1; position: sticky; top: 0; z-index: 4; background: var(--card); padding: 10px 60px 10px 12px; border-bottom: 1px solid var(--border); }
  body #dlgShadowLamp .lamp-preview > div:first-child { flex-wrap: wrap; gap: 6px; }
  body #dlgShadowLamp .lamp-preview > div:first-child select { margin-left: 0 !important; max-width: 100%; }
  body #dlgShadowLamp .lamp-preview > div:last-child { min-height: 0 !important; height: 30dvh; flex: none !important; }
  body #dlgShadowLamp .dlg-prev > :not(.lamp-preview) { margin-inline: 16px; }
}