/* ====== LAYOUT GENERAL ====== */
.sw-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
  z-index:9998;
}
.sw-overlay.is-open{ opacity:1; visibility:visible; }

/* Panel */
.sw-panel{
  position:fixed; top:0; left:0; height:100vh;
  width:340px; max-width:min(92vw, 560px);
  background:#fff; color:#222;
  box-shadow:0 0 40px rgba(0,0,0,.25);
  transform:translateX(-110%); transition:transform .35s ease;
  z-index:9999; display:flex; flex-direction:column;
  font-family:inherit; box-sizing:border-box;

  /* Paleta T2P */
  --t2p-black:#0f0f10;
  --t2p-gold:#c8a04d;
  --t2p-gold-dark:#a98637;

  /* ------ Tamaño real de la rueda “height-aware” ------ */
  --sw-chrome: 360px;      /* alto reservado aprox. (logo+títulos+form) */
  --sw-wheel-min: 180px;
  --sw-wheel-max: 460px;
  --sw-wheel-size: clamp(var(--sw-wheel-min),
                        min(70vw, 62vmin, calc(100vh - var(--sw-chrome))),
                        var(--sw-wheel-max));
}
@media (min-width:900px){ .sw-panel{ width:560px; } }
.sw-panel.is-open{ transform:translateX(0); }

.sw-close{
  position:absolute; top:8px; right:10px;
  background:transparent; border:0; font-size:28px; line-height:1;
  cursor:pointer; color:#888;
}
.sw-close:hover{ color:#333; }

/* ====== HEADER ====== */
.sw-header{ padding:16px 18px 0; text-align:center; }

.sw-brand{ display:flex; justify-content:center; align-items:center; margin:2px 0 8px; }
.sw-brand img{
  max-width:clamp(96px, 26vw, 100px);
  height:auto; width:auto; object-fit:contain;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.08));
}

.sw-title{
  margin:0 16px 4px; font-size:clamp(20px, 5.2vw, 28px); font-weight:700; line-height:1.15;
}
.sw-subtitle{
  margin:8px 16px 10px; font-size:clamp(13px, 3.6vw, 18px); color:#666; line-height:1.25;
}

/* ====== BODY ====== */
.sw-body{
  flex:1 1 auto; min-height:0;
  padding:12px 18px 18px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:12px; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable both-edges;
}

/* ====== RULETA ====== */
.sw-wheel-wrap{
  position:relative; display:grid; place-items:center;
  width:var(--sw-wheel-size); height:auto; aspect-ratio:1 / 1;
  margin:6px auto 12px; flex:0 0 auto; max-width:100%;
}

/* Puntero */
.sw-pointer{
  position:absolute; top:50%; right:-6px;
  transform:translateY(-50%) rotate(-90deg);
  width:0; height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:16px solid #d32f2f;
  z-index:2;
}

/* Rueda */
.sw-wheel{
  position:relative;
  width:100%; height:auto; aspect-ratio:1 / 1;
  border-radius:50%;
  background:none;
  border:8px solid #eee;              /* <- importante: coincide con inset de labels */
  box-shadow:inset 0 0 0 2px #fff, 0 5px 15px rgba(0,0,0,.15);
  transform:rotate(0deg);
  transition:transform 4s cubic-bezier(.2,.8,.2,1);
  will-change:transform; backface-visibility:hidden;
}
.sw-wheel::before, .sw-wheel::after{ content:none; }
.sw-wheel.spinning{ pointer-events:none; }

/* Centro proporcional */
.sw-wheel-center{
  position:absolute; inset:50% auto auto 50%;
  transform:translate(-50%, -50%);
  width:clamp(38px, 10.5vmin, 60px);
  height:clamp(38px, 10.5vmin, 60px);
  border-radius:50%;
  background:#fff; border:4px solid #ddd;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}

/* Labels */
.sw-wheel-labels{
  position:absolute;
  inset:8px;                       /* <- igual que el border de .sw-wheel */
  pointer-events:none;
  text-align:center; font-weight:700; overflow:hidden;
}
.sw-label{
  position:absolute; left:50%; top:50%;
  transform-origin:50% 50%;        /* <- clave para el centrado radial */
  white-space:nowrap; line-height:1;
  font-weight:800; letter-spacing:.2px; font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  color:#111; background:rgba(255,255,255,.88);
  padding:4px 10px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.18);
}

/* ====== FORM ====== */
.sw-form{ margin-top:6px; width:100%; max-width:520px; }
.sw-field{ margin-bottom:10px; }
.sw-field label{ display:block; font-size:13px; margin-bottom:6px; color:#333; }
.sw-field input[type="text"],
.sw-field input[type="email"],
.sw-field input[type="tel"]{
  display:block; width:100%; height:40px; padding:8px 12px;
  border:1px solid #ddd; border-radius:6px; outline:none; box-sizing:border-box;
}
.sw-field input:focus{ border-color:#999; }
.sw-check{ display:flex; align-items:center; gap:8px; font-size:13px; }
.sw-req{ color:#d32f2f; margin-left:6px; }
.sw-field span{ color:black; }

/* CTA */
.sw-cta{
  display:inline-block; width:100%;
  background:#2e7d32; color:#fff; border:0; border-radius:8px; padding:12px 14px;
  font-weight:700; cursor:pointer;
}
.sw-cta:disabled{ opacity:.6; cursor:not-allowed; }

.sw-error{
  margin-top:8px; color:#d32f2f; font-size:13px;
  background:#fdecea; border:1px solid #f5c2c7; padding:6px 8px; border-radius:6px;
}
.sw-field-error{ color:#d32f2f; font-size:12px; margin-top:4px; }

/* ====== RESULTADO (Cupón, Copy, Close) ====== */
.sw-result{ text-align:center; width:100%; }
.sw-result .sw-result-text{ font-size:16px; font-weight:600; }

.sw-coupon{
  display:inline-flex; align-items:center; justify-content:center;
  gap:12px; margin-top:20px; flex-wrap:wrap; vertical-align:middle;
}
.sw-code{
  background:#fff; color:var(--t2p-black); font-weight:800;
  text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(18px, 3.4vw, 28px);
  padding:10px 16px; border-radius:12px; border:2.5px dashed var(--t2p-gold);
  box-shadow:0 10px 24px rgba(0,0,0,.12), inset 0 0 0 2px #fff; /* <- quitado paréntesis sobrante */
  display:inline-block;
}
.sw-copy{
  background:#2e7d32; border:2px solid #2e7d32; color:#fff;
  padding:10px 16px; border-radius:12px; font-weight:700; cursor:pointer;
  transition:background .2s, color .2s, box-shadow .2s, transform .06s, border-color .2s;
}
.sw-copy:hover{ background:#256a2a; border-color:#256a2a; box-shadow:0 8px 18px rgba(37,106,42,.25); }
.sw-copy:active{ transform:translateY(1px); }

.sw-close-result{
  display:inline-flex; align-items:center; vertical-align:middle; margin-top:20px;
  background:var(--t2p-black); color:#fff; border:2px solid var(--t2p-black);
  padding:10px 16px; border-radius:12px; font-weight:700; cursor:pointer;
  transition:background .2s, color .2s, box-shadow .2s, transform .06s, border-color .2s;
}
.sw-close-result:hover{
  background:var(--t2p-gold); color:var(--t2p-black); border-color:var(--t2p-gold);
  box-shadow:0 8px 18px rgba(200,160,77,.25);
}
.sw-close-result:active{ transform:translateY(1px); }

/* ====== ESTADO ABIERTO ====== */
html.sw-open, body.sw-open{ overflow:hidden; }

/* ====== BREAKPOINTS “height-aware” ====== */
@media (max-width: 1366px) and (max-height: 820px){
  .sw-panel{ --sw-chrome: 340px; --sw-wheel-size: clamp(180px, min(60vw, 56vmin, calc(100vh - var(--sw-chrome))), 420px); }
}
@media (max-height: 720px){
  .sw-panel{ --sw-chrome: 340px; --sw-wheel-size: clamp(170px, min(54vw, 50vmin, calc(100vh - var(--sw-chrome))), 400px); }
  .sw-header{ padding:12px 14px 0; }
  .sw-body{ padding:10px 14px 14px; gap:10px; }
}
@media (max-width: 420px){
  .sw-panel{ --sw-chrome: 360px; }
  .sw-body{ padding:12px 14px 16px; gap:10px; }
}
@media (max-width: 360px){
  .sw-panel{ max-width:96vw; --sw-chrome: 370px; }
  .sw-wheel-wrap{ margin:4px auto 8px; }
}
/* Contenedor y botón flotante para reabrir la ruleta */
.sw-reopen {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 2147483000; /* por encima de casi todo */
  pointer-events: none; /* evita capturar clicks fuera del botón */
}

.sw-reopen[hidden] { display: none; }

.sw-reopen-btn {
  pointer-events: auto;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 9999px;
  background: #fff;
  color: #222;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}

.sw-reopen-btn:hover { transform: translateY(-1px); }
.sw-reopen-btn:active { transform: translateY(0); }

.sw-reopen-ico {
  display: block;
}

/* Tema oscuro opcional, por si tu web cambia */
@media (prefers-color-scheme: dark) {
  .sw-reopen-btn { background: #161616; color: #f3f3f3; }
}


/* Oculta el botón de reabrir sólo cuando el panel está abierto */
.sw-open #sw-reopen { display: none !important; }

/* Asegura que el [hidden] lo esconda de verdad */
#sw-reopen[hidden] { display: none; }