:root{
  --bg:#f6f7fb;
  --card:#fff;
  --shadow:0 12px 30px rgba(0,0,0,.12);
  --pro:#ff7a18;
  --elite:#ffe34a;
  --legend:#b75cff;
  --green:#3fc172;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Helvetica;
  background:var(--bg);
}

.layout{
  max-width:1600px;                 /* un poco más ancho todo */
  margin:30px auto;
  display:grid;
  grid-template-columns:300px 1.3fr 480px; /* 👈 más aire al centro */
  gap:22px;
}

.panel{
  background:var(--card);
  border-radius:26px;
  box-shadow:var(--shadow);
  padding:20px;
}

.mini-preview{
  background:#eef1f7;
  border-radius:18px;
  padding:12px;
  margin-bottom:12px;
}

.mini-bg{
  height:110px;
  border-radius:14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.select,.btn{
  width:100%;
  border-radius:999px;
  padding:12px;
  border:1px solid #ddd;
  font-weight:700;
}

.upload-group{display:flex;flex-direction:column;gap:10px}

.colors{display:flex;flex-direction:column;gap:10px}
.color-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid #e5e5e5;
}

.center{display:flex;justify-content:center}

.mock-wrapper{display:flex;flex-direction:column;align-items:center}

.design-bar{
  width:520px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-weight:900;
}

.nav-btn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:none;
  background:white;
  box-shadow:var(--shadow);
  font-size:20px;
}

.mock-card{
  width:520px;
  background:#f2f4f8;
  border-radius:26px;
  padding:14px;
}

.mock-canvas{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  border-radius:18px;
  overflow:hidden;
  background:#f0f2f6;
}

.shadow{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:999;     /* ✅ arriba de todo */
  opacity:1;       /* ✅ sin opacidad */
  mix-blend-mode: normal; /* ✅ sin blend */
  filter:none;     /* ✅ sin filtros */
}

/* ===== ORDEN REAL DE PRENDAS ===== */

/* SHORT – SIEMPRE ATRÁS */
#layerShortBase,
#layerShortNumber {
  z-index: 5;
}

/* CAMISETA BASE */
#layerBase {
  z-index: 10;
}

/* DETALLES CAMISETA */
#layerDetail1,
#layerDetail2 {
  z-index: 12;
}

/* DROP / GRAFICA */
#layerDrop {
  z-index: 14;
}

/* NUMERO / TIPOGRAFÍA */
#layerTypo {
  z-index: 16;
}

/* MEDIAS */
#layerSocks {
  z-index: 4;
}

/* OVERLAYS */
.overlay-clip {
  z-index: 40;
}

/* SHADOW ARRIBA DE TODO */
.shadow {
  z-index: 999;
}

.layer,.overlay-clip{position:absolute;inset:0}

.layer{ position:absolute; inset:0; z-index:10; }
.overlay-clip{
  pointer-events: auto; /* 🔥 permite drag */
}
.overlay-clip > *{ pointer-events:auto; }
.crest,
.sponsor-item{
  pointer-events: none;
  cursor: default;
}

.shadow {
  z-index: 30; /* 👈 SIEMPRE arriba de todo */
}

.right-panel{
  display:flex;
  flex-direction:column;
  gap:10px;                 /* controla separación entre bloques */
}

.big{font-size:42px;font-weight:900}

.qualities.vertical{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ===========================
   ✅ CAMBIO: cards de calidad
   - más anchas (por panel)
   - menos altas
   - sin texto
   - solo imagen
   =========================== */

.quality-card{
  border-radius:26px;
  padding:0;              /* ✅ sin padding porque es imagen */
  color:#000;
  height:135px;           /* ✅ menos alto */
  overflow:hidden;        /* ✅ recorte */
  background:#111;        /* fallback si falta imagen */
  display:block;
}

/* Ya no usamos fondo por color, pero no molesta si queda */
.quality-card.pro{background:var(--pro)}
.quality-card.elite{background:var(--elite)}
.quality-card.legend{background:var(--legend)}

/* Imagen full */
.quality-card img{
  width:100%;
  height:100%;
  object-fit:cover;       /* ✅ tipo banner como tu ejemplo */
  display:block;
}

.cta{
  border:none;
  border-radius:999px;
  padding:16px;
  font-weight:900;
  cursor:pointer;
}

.cta.black{background:#111;color:white}
.cta.green{background:var(--green)}

/* BAJAR EL BOTÓN NEGRO (despegarlo del Legend) */
.right-panel #sendWhatsappBtn{
  margin-top: 18px !important;  /* probá 18-30 */
}
/* ===== EMPUJAR LOS BOTONES AL FONDO DEL PANEL ===== */
#sendWhatsappBtn{
  margin-top: auto;   /* 👈 ESTA ES LA CLAVE */
}

/* Espacio entre los dos botones */
#downloadAllBtn{
  margin-top: 6px;
}
/* El panel ahora sí puede empujar contenido */
.right-panel{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Bloque de botones pegado abajo */
.cta-bottom{
  margin-top: auto;      /* 👈 CLAVE REAL */
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Centrar título del panel de calidades */
.right-panel .big{
  text-align: center;
}

.quality-card{
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
}

.quality-card.active{
  transform: scale(1.06); /* 👌 apenas */
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.9),
    0 16px 36px rgba(0,0,0,0.35);
}
.overlay-clip {
  position: absolute;
  inset: 0;
  z-index: 40;           /* 👈 por encima de las capas */
  pointer-events: none; /* el contenedor no bloquea */
}

.overlay-clip > * {
  pointer-events: auto; /* 👈 los hijos sí */
}

.crest {
  position: absolute;
  z-index: 45;
}
.crest-short{
  position: absolute;
  z-index: 50; /* arriba del short, abajo del shadow */
  pointer-events: none;
}
.shadow {
  z-index: 999;
}

.sponsor-item{
  position:absolute;
  z-index:55;
}

.sponsor-item img{
  width:100%;
  height:auto;
  display:block;
}

.shadow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  z-index: 999;

  opacity: 1;
  mix-blend-mode: normal; /* 🔥 IGUAL QUE EXPORT */
  filter: none;           /* 🔥 SIN CONTRASTE */
}

/* =====================================================
   📱 MOBILE VERSION (NO afecta Desktop)
   ===================================================== */

@media (max-width: 768px) {

  /* ===== Layout general ===== */
  .layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 12px;
  }

  .panel {
    padding: 16px;
    border-radius: 22px;
  }

  /* ===== LEFT PANEL (controles) ===== */
  .left-panel {
    order: 2;
  }

  .mini-preview {
    display: none; /* 🔥 en mobile no aporta */
  }

  .upload-group button {
    font-size: 14px;
    padding: 12px;
  }

  .color-row {
    padding: 8px 12px;
    font-size: 14px;
  }

  /* ===== CENTER (preview principal) ===== */
  .center {
    order: 1;
  }

  .design-bar {
    width: 100%;
    font-size: 16px;
  }

  .mock-card {
    width: 100%;
    padding: 10px;
  }

  .mock-wrapper {
    width: 100%;
  }

  .mock-canvas {
    width: 100%;
    aspect-ratio: 3 / 4;
  }

  /* ===== RIGHT PANEL (calidades + CTA) ===== */
  .right-panel {
    order: 3;
    padding: 18px;
  }

  .right-panel .big {
    font-size: 28px;
    text-align: center;
  }

  /* Calidades estilo banners */
  .qualities.vertical {
    gap: 14px;
  }

  .quality-card {
    height: 120px;
    border-radius: 20px;
  }

  .quality-card img {
    object-fit: cover;
  }

  /* ===== BOTONES ===== */
  .cta {
    font-size: 15px;
    padding: 14px;
  }

  .cta-bottom {
    margin-top: 16px;
    gap: 8px;
  }

  /* ===== Navegación diseño ===== */
  .nav-btn {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}
@media (max-width: 768px) {

  /* Ajuste fino banners de calidad */
  .quality-card {
    height: auto;                 /* 🔥 deja crecer según imagen */
    padding: 8px;                 /* aire lateral */
    background: transparent;      /* evita bordes raros */
  }

  .quality-card img {
    width: 100%;
    height: auto;                 /* 🔥 NO recorta */
    object-fit: contain;          /* 🔥 clave */
    border-radius: 4px;
    display: block;
  }

}
@media (max-width: 768px) {

  .quality-card {
    padding: 0;              /* ❌ sin marco */
    background: transparent; /* ❌ sin color atrás */
    box-shadow: none;        /* ❌ sin relieve */
  }

  .quality-card img {
    border-radius: 18px;     /* solo la imagen redondeada */
  }

}

.mini-title {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: #111;
  margin-bottom: 10px;
  padding-left: 4px;
  position: relative;
}

/* línea sutil marca DROP */
.mini-title::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  background: #3fc172; /* verde DROP */
  border-radius: 3px;
  margin-top: 6px;
}

.designer-intro {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-family: Helvetica, Arial, sans-serif;
}

.intro-card {
  background: #fff;
  border-radius: 22px;
  padding: 28px 22px 24px;
  width: 360px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.intro-badge {
  position: absolute;
  top: -12px;
  right: 16px;
  background: #5bb974;
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
}

.intro-close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: #eee;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22x;
}

.intro-card h2 {
  text-align: center;
  font-size: 26px;
  margin-bottom: 10px;
}

.intro-sub {
  text-align: center;
  color: #555;
  font-size: 14px;
  margin-bottom: 18px;
}

.intro-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.intro-steps li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 15px;
}

.intro-steps span {
  background: #6ccf8e;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.intro-steps small {
  display: block;
  font-size: 12px;
  color: #777;
}

.intro-offer {
  text-align: center;
  font-weight: bold;
  color: #4e9f6f;
  margin-bottom: 18px;
}

.intro-main-btn {
  width: 100%;
  padding: 14px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg,#6ccf8e,#3f8f61);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.intro-secondary {
  width: 100%;
  margin-top: 10px;
  background: none;
  border: none;
  color: #777;
  cursor: pointer;
}

/* Forzar modo claro SIEMPRE */
/* ===============================
   ☀️ FORZAR MODO CLARO SIEMPRE
   =============================== */

:root {
  color-scheme: light;
}

html, body {
  background-color: #f5f6f8 !important;
  color: #111 !important;

  /* Android / Chrome dark mode killer */
  -webkit-text-size-adjust: 100%;
  filter: none !important;
}

* {
  forced-color-adjust: none;
}

/* 🔒 Evita que overlays bloqueen el picker nativo */
input[type="color"] {
  position: relative;
  z-index: 10000;
}
/* ===============================
   🔒 FONDO FIJO CLARO PARA DISEÑO
   (ignora modo oscuro del sistema)
=============================== */

.mock-card {
  background: #f0f2f6 !important;
}

.mock-canvas {
  background: #f0f2f6 !important;
}

/* ===============================
   🎨 COLOR PICKER COLAPSABLE
   =============================== */

.simple-picker {
  display: none;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f2f4f8;
}

/* abrir picker */
.color-row.open + .simple-picker {
  display: block;
}

/* fila */
.color-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 16px;
}

/* barras */
.picker-preview {
  height: 22px;
  border-radius: 8px;
  border: 2px solid #ddd;
}

.picker-hue {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    red, yellow, lime, cyan, blue, magenta, red
  );
}

.picker-light {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to right, #000, #fff);
}
/* ===============================
   🎨 COLOR COMPACTO
   =============================== */

.color-advanced {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  cursor: pointer;
}

/* fila superior */
.color-advanced > span {
  font-weight: 600;
}

/* preview chico */
.color-preview {
  width: 44px;
  height: 28px;
  border-radius: 8px;
  border: 2px solid #ddd;
  align-self: flex-end;
}

/* picker colapsable */
.color-advanced .simple-picker {
  display: none;
  padding: 10px;
  border-radius: 14px;
  background: #f2f4f8;
  gap: 6px;
}

/* cuando está activo */
.color-advanced.open .simple-picker {
  display: flex;
  flex-direction: column;
}

/* preview grande interno */
.simple-picker .picker-preview {
  height: 28px;
  border-radius: 10px;
  border: 2px solid #ddd;
}
/* ===============================
   🎨 FUSIÓN VISUAL PICKER + ROW
   (NO rompe JS)
   =============================== */

/* el picker pasa a sentirse parte del row */
.simple-picker {
  margin-top: -6px;              /* lo sube */
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 0 0 16px 16px;
  background: #f2f4f8;
}

/* el row de arriba se redondea solo arriba */
.color-row {
  border-radius: 16px 16px 0 0;
  border-bottom: none;
}

/* preview más chico y limpio */
.simple-picker .picker-preview {
  height: 50px;
  border-radius: 8px;
}

/* sliders más finos */
.simple-picker input[type="range"] {
  height: 10px;
}

/* compactar mobile */
@media (max-width: 768px) {
  .simple-picker {
    padding: 8px 10px;
  }

  .simple-picker input[type="range"] {
    height: 8px;
  }
}
/* ===============================
   🎨 MINIMIZAR PICKER NATIVO
   =============================== */

/* Ocultamos visualmente el popup nativo */
.color-row input[type="color"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* ===============================
   🎨 COLOR PICKER COLAPSABLE
   =============================== */

/* El picker está oculto por defecto */
.simple-picker {
  display: none;
}

/* Preview chico a la derecha */
.color-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* cuadradito */
.color-row::after {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 2px solid #ddd;
  background-color: var(--swatch-color, #000); /* 👈 CLAVE */
  flex-shrink: 0;
}

/* estado abierto */
.color-row.open + .simple-picker {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f2f4f8;
}
/* =========================================
   🎨 PICKER DE COLOR – FINAL FUNCIONAL
========================================= */

/* fila de color con indicador */
.color-row {
  position: relative;
  cursor: pointer;
}

/* ⬜ cuadradito color final (VUELVE) */
.color-row::after {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 2px solid #ddd;
  background: var(--swatch-color, #ccc);
  flex-shrink: 0;
}

/* picker cerrado */
.simple-picker {
  display: none;
  margin-top: 8px;
  padding: 12px;
  border-radius: 16px;
  background: #f2f4f8;
}

/* picker abierto */
.color-row.open + .simple-picker {
  display: block;
}

/* 🎨 CUADRADO GRANDE CON PALETA REAL */
.simple-picker .picker-preview {
  position: relative;
  background:
    linear-gradient(to top, #000, rgba(0,0,0,0)),
    linear-gradient(to right, #fff, rgba(255,255,255,0)),
    linear-gradient(
      to right,
      red,
      yellow,
      lime,
      cyan,
      blue,
      magenta,
      red
    );
}

/* sliders invisibles pero activos */
.simple-picker .picker-hue,
.simple-picker .picker-light {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  height: 0;
}
/* ===============================
   🔓 FIX CLICK PICKER DEGRADADO
   =============================== */

/* El panel de colores siempre clickeable */
.left-panel {
  position: relative;
  z-index: 200;
}

/* El picker debe estar por encima de TODO */
.simple-picker {
  position: relative;
  z-index: 10001;
  pointer-events: auto;
}

/* La fila también */
.color-row {
  position: relative;
  z-index: 10000;
}

/* Las capas del diseño NO deben capturar clicks */
.mock-canvas,
.layer,
.shadow,
.overlay-clip {
  pointer-events: none;
}
/* ===============================
   🎯 CURSOR PICKER (VISIBLE)
================================ */

.picker-preview {
  position: relative;
  overflow: hidden;
}

/* círculo selector */
.picker-cursor {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* ===============================
   📱 FIX DRAG PICKER MOBILE
================================ */

.picker-preview {
  touch-action: none;          /* 🔥 CLAVE: evita scroll/zoom */
  -webkit-user-select: none;
  user-select: none;
}