/* ================================================================
   WC Virtual Try-On – Ropa & Joyería – tryon-apparel.css
================================================================ */

:root {
  --wcta-accent:  #a78bfa;      /* violeta joyería */
  --wcta-accent2: #c4b5fd;
  --wcta-gold:    #c9a84c;      /* dorado para camisas */
  --wcta-bg:      rgba(6,6,10,0.97);
  --wcta-surface: #0d0d18;
  --wcta-border:  rgba(167,139,250,0.22);
  --wcta-text:    #e8e0f0;
  --wcta-radius:  16px;
  --wcta-shadow:  0 32px 80px rgba(0,0,0,0.8);
}

/* ── Botón ──────────────────────────────────────────────────── */
#wcta-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  margin-top:      14px;
  padding:         14px 28px;
  background:      linear-gradient(135deg, #0e0a1e 0%, #1a1230 100%);
  color:           var(--wcta-accent2);
  border:          1.5px solid var(--wcta-accent);
  border-radius:   10px;
  font-size:       15px;
  font-weight:     600;
  letter-spacing:  0.04em;
  cursor:          pointer;
  transition:      transform .2s, box-shadow .2s, background .2s;
  box-shadow:      0 4px 20px rgba(167,139,250,0.15);
  font-family:     inherit;
}
#wcta-btn:hover {
  background:  linear-gradient(135deg, #1a1230 0%, #231848 100%);
  box-shadow:  0 6px 30px rgba(167,139,250,0.4);
  transform:   translateY(-2px);
}
#wcta-btn:active { transform: translateY(0); }

@keyframes wcta-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(167,139,250,0.15); }
  50%     { box-shadow: 0 4px 32px rgba(167,139,250,0.5);  }
}
.wcta-pulse { animation: wcta-pulse 2.4s ease-in-out 3; }

/* ── Modal overlay ──────────────────────────────────────────── */
#wcta-modal {
  position:        fixed;
  inset:           0;
  z-index:         999999;
  background:      rgba(0,0,0,0.92);
  backdrop-filter: blur(8px);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         12px;
  animation:       wcta-fadein .25s ease;
}
@keyframes wcta-fadein { from{opacity:0} to{opacity:1} }

/* ── Modal inner ────────────────────────────────────────────── */
#wcta-modal-inner {
  position:       relative;
  background:     var(--wcta-surface);
  border:         1px solid var(--wcta-border);
  border-radius:  var(--wcta-radius);
  box-shadow:     var(--wcta-shadow);
  padding:        20px 20px 16px;
  width:          min(860px, 100%);
  max-height:     98vh;
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  animation:      wcta-slidein .3s cubic-bezier(.22,.68,0,1.2);
}
@keyframes wcta-slidein {
  from { transform: scale(.92) translateY(24px); opacity:0 }
  to   { transform: scale(1)   translateY(0);    opacity:1 }
}
#wcta-modal-inner::before {
  content:    '';
  position:   absolute;
  top:0; left:24px; right:24px;
  height:     2px;
  background: linear-gradient(90deg, transparent, var(--wcta-accent), transparent);
  border-radius: 2px;
}

/* ── Cerrar ─────────────────────────────────────────────────── */
#wcta-close {
  position:      absolute;
  top:12px; right:14px;
  background:    transparent;
  border:        1px solid var(--wcta-border);
  color:         var(--wcta-text);
  font-size:     22px;
  width:36px; height:36px;
  border-radius: 50%;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background .15s, color .15s;
  z-index:       2;
  font-family:   inherit;
}
#wcta-close:hover {
  background: rgba(167,139,250,0.15);
  color:      var(--wcta-accent2);
}

/* ── Status ─────────────────────────────────────────────────── */
#wcta-status {
  color:          var(--wcta-accent);
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height:     18px;
  text-align:     center;
  width:          100%;
}

/* ── Video wrap ─────────────────────────────────────────────── */
#wcta-video-wrap {
  position:      relative;
  width:         100%;
  max-width:     760px;
  border-radius: 12px;
  overflow:      hidden;
  border:        1px solid var(--wcta-border);
  background:    #000;
  aspect-ratio:  4 / 3;
}

#wcta-video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  display:    block;
  object-fit: cover;
  transform:  scaleX(-1);
}

#wcta-canvas {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  transform:      scaleX(-1);
  pointer-events: none;
}

/* ── Controles ──────────────────────────────────────────────── */
#wcta-controls {
  width:         100%;
  max-width:     760px;
  background:    rgba(255,255,255,0.03);
  border:        1px solid var(--wcta-border);
  border-radius: 10px;
  padding:       10px 16px;
}

.wcta-ctrl-row {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.wcta-ctrl-label {
  font-size:      12px;
  color:          rgba(200,190,230,0.6);
  min-width:      72px;
  letter-spacing: 0.02em;
}

.wcta-ctrl-btn {
  background:      rgba(167,139,250,0.1);
  border:          1px solid var(--wcta-border);
  color:           var(--wcta-accent2);
  font-size:       16px;
  width:32px; height:32px;
  border-radius:   8px;
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background .15s;
  font-family:     inherit;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.wcta-ctrl-btn:hover  { background: rgba(167,139,250,0.22); }
.wcta-ctrl-btn:active { transform: scale(0.93); }

#wcta-offset-slider {
  flex:          1;
  appearance:    none;
  height:        4px;
  border-radius: 4px;
  background:    rgba(167,139,250,0.2);
  outline:       none;
  cursor:        pointer;
}
#wcta-offset-slider::-webkit-slider-thumb {
  appearance:    none;
  width:18px; height:18px;
  border-radius: 50%;
  background:    var(--wcta-accent);
  border:        2px solid var(--wcta-accent2);
  cursor:        pointer;
  transition:    transform .1s;
}
#wcta-offset-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
#wcta-offset-slider::-moz-range-thumb {
  width:16px; height:16px;
  border-radius: 50%;
  background:    var(--wcta-accent);
  border:        2px solid var(--wcta-accent2);
  cursor:        pointer;
}

/* ── Hint ───────────────────────────────────────────────────── */
.wcta-hint {
  color:          rgba(200,190,220,0.45);
  font-size:      11px;
  text-align:     center;
  margin:         0;
  letter-spacing: 0.03em;
  padding:        0 8px;
}

/* ── Responsive móvil ───────────────────────────────────────── */
@media (max-width: 600px) {
  #wcta-modal {
    padding:     8px;
    align-items: center;
  }
  #wcta-modal-inner {
    width:          100%;
    max-height:     96vh;
    border-radius:  16px;
    padding:        14px 10px 16px;
    gap:            7px;
  }
  #wcta-video-wrap {
    width:         100%;
    max-width:     100%;
    border-radius: 10px;
    aspect-ratio:  3 / 4;
  }
  #wcta-controls { padding: 9px 10px; }
  .wcta-ctrl-label { min-width: 62px; font-size: 11px; }
  .wcta-ctrl-btn  { width:28px; height:28px; font-size:14px; }
  #wcta-btn { width:100%; justify-content:center; }
  .wcta-hint { font-size: 10px; }
}

@media (max-width: 380px) {
  #wcta-modal-inner { padding: 12px 8px 14px; gap: 5px; }
  .wcta-ctrl-label  { display: none; }
}