/* =========================
   Variables y base
   ========================= */
:root{
  --fs-gap:28px;
  --fs-aside:340px;
  --fs-border:#e5e7eb;
  --fs-muted:#6b7280;
  --fs-primary:#1b74d1;
}

/* =========================
   Layout principal (3 columnas)
   ========================= */
.fs-page{
  display:grid;
  grid-template-columns:minmax(280px,520px) minmax(360px,1fr) var(--fs-aside);
  gap:var(--fs-gap);
  align-items:start;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.45;
}
.fs-gallery{grid-column:1}
.fs-config{grid-column:2;display:flex;flex-direction:column;gap:14px}
.fs-aside{grid-column:3;position:sticky;top:18px}

/* Responsive */
@media (max-width:1024px){
  .fs-page{grid-template-columns:1fr}
  .fs-gallery,.fs-config,.fs-aside{grid-column:1}
  .fs-aside{position:static;margin-top:16px}
}

/* =========================
   Bloques & tipografías
   ========================= */
.fs-block{border:1px solid var(--fs-border);border-radius:10px;background:#fff;overflow:hidden}
.fs-block + .fs-block{margin-top:12px}
.fs-block__head{font-weight:700;background:#f8fafc;border-bottom:1px solid var(--fs-border);padding:10px 12px}
.fs-block__body{padding:12px}
.fs-label{margin-bottom:6px;color:#333}
.fs-small{font-weight:400;color:#666;font-size:.9em}

/* Inputs / helpers */
.fs-input{width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;background:#fff}
.fs-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.fs-help{color:#555;margin-top:6px}
.fs-error{color:#c00;margin-top:6px}

/* =========================
   Galería
   ========================= */
.fs-gallery{background:#fff;border:1px solid #eee;border-radius:8px;padding:12px}
#fs-main-img{max-width:100%;height:auto;display:block;margin:0 auto}
.fs-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.fs-thumb{border:1px solid var(--fs-border);border-radius:6px;background:#fff;cursor:pointer;padding:0}
.fs-thumb[aria-selected="true"]{outline:2px solid var(--fs-primary)}
.fs-thumb img{width:70px;height:70px;object-fit:cover;border-radius:6px}
#fs-more-rail{display:none} /* evitar rails antiguos */

/* =========================
   Variantes: swatches & tallas
   ========================= */
.fs-swatches{display:flex;gap:10px;flex-wrap:wrap}
.fs-swatch{width:24px;height:24px;border-radius:4px;border:1px solid #d1d5db;cursor:pointer;box-shadow:inset 0 0 0 2px #fff}
.fs-swatch[aria-pressed="true"]{outline:2px solid var(--fs-primary)}
.fs-sizes{display:flex;gap:8px;flex-wrap:wrap}
.fs-size{min-width:36px;padding:6px 10px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;font-weight:600;font-size:13px}
.fs-size[aria-pressed="true"]{outline:2px solid var(--fs-primary)}
.fs-size[aria-disabled="true"]{opacity:.4;cursor:not-allowed}

/* =========================
   Presupuesto (aside)
   ========================= */
.fs-quote{background:#fff;border:1px solid var(--fs-border);border-radius:10px;padding:12px}
.fs-quote__head{background:#f2f2f2;border:1px solid var(--fs-border);border-radius:6px;padding:8px 10px;font-weight:700;color:var(--fs-muted);text-transform:uppercase;margin-bottom:10px;text-align:center}
.fs-quote__actions{display:grid;gap:8px;margin-top:10px}
.fs-btn{background:#e7f3ff;border:1px solid #c7e0ff;border-radius:6px;padding:10px 12px;cursor:pointer}
.fs-btn--primary{background:var(--fs-primary);border-color:var(--fs-primary);color:#fff}

/* líneas que rellena el JS */
.fs-quote__line{display:flex;justify-content:space-between;gap:12px;margin:6px 0}
.fs-quote__line>span:first-child{color:#555}
.fs-quote-subtotal{border-top:1px solid #eee;padding-top:6px;margin-top:6px}
.fs-quote-tax{font-weight:700}

/* =========================
   Personalización: 2 columnas
   (selectores a la izquierda, preview a la derecha)
   ========================= */
.fs-b3-grid {
    display: flex
;
    grid-template-columns: 0.3fr;
    gap: 0px;
    column-count: 2;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
.fs-b3-left {width: 48%;}
.fs-b3-right {width: 48%;}
/* Columna derecha: preview posición */
.fs-pos-preview{
  border:1px solid var(--fs-border);
  border-radius:10px;
  background:#fff;
  padding:10px;
  text-align:center;
}
#fs-pos-img{max-width:100%;height:auto;display:block;margin:0 auto;border-radius:6px}
.fs-pos-meta{font-size:12px;color:#6b7280;margin-top:6px}

/* Ocultar restos de UI antigua de posiciones (botones/rail) si existieran */
#fs-pos-grid, #fs-pos-rail{display:none !important}

/* =========================
   Tabla de tarifas (compacta)
   ========================= */
.fs-tier{margin-top:12px}
.fs-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--fs-border);
  border-radius:10px;
  overflow:hidden;
  font-size:13px;
}
.fs-table th,.fs-table td{
  padding:8px 10px;
  border-bottom:1px solid #f0f2f5;
  text-align:left;
}
.fs-table th{
  background:#f8fafc;
  color:#111827;
  font-weight:700;
}
.fs-table td:last-child,.fs-table th:last-child{ text-align:right }
.fs-table tr.is-active{background:#eef6ff}
.fs-table tr:last-child td{border-bottom:0}

/* =========================
   Utilidades
   ========================= */
hr{border:0;border-top:1px solid #eee;margin:10px 0}
#fs-pos-select{text-transform: lowercase;}
/* === File input (bonito) === */
#fs-artwork.fs-input{
  padding: 10px 12px;
  border-style: dashed;
  border-color: var(--fs-border);
  background: #fafbff;
  cursor: pointer;
}
#fs-artwork::file-selector-button,
#fs-artwork::-webkit-file-upload-button{
  font: inherit;
  border: 1px solid #c7e0ff;
  background: #e7f3ff;
  padding: 8px 10px;
  border-radius: 6px;
  margin-right: 10px;
  cursor: pointer;
}
#fs-artwork:hover::file-selector-button{ filter: brightness(0.98); }

.fs-artwork-preview{
  margin-top:8px;
  display:flex;
  gap:10px;
  align-items:center;
}
.fs-artwork-preview img{
  max-width:120px;
  max-height:120px;
  border:1px solid var(--fs-border);
  border-radius:8px;
  display:block;
  object-fit:contain;
}

/* === Técnicas: altura máx. 200px === */
.fs-pos-preview img{ max-height:200px; object-fit:contain; }

/* Galería: indicar zoom */
#fs-main-img{ cursor: zoom-in; }
.wf-wrap{}