:root{
  --hpx-bg: #0b1324;
  --hpx-card: #111a2e;
  --hpx-border: #1f2940;
  --hpx-text: #e7eefc;
  --hpx-muted: #9bb1d6;
  --hpx-accent: var(--hpx-brand, #6aa2ff);
  --hpx-pill: rgba(106,162,255,.18);
  --hpx-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.woocommerce-account .entry-content .hpxc007-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media(min-width:720px){
  .woocommerce-account .entry-content .hpxc007-grid{ grid-template-columns:repeat(auto-fill,minmax(520px,1fr)); }
}

/* Ticket estilo cupón con perforación y ribete */
.hpxc007-ticket{
  display:grid;
  grid-template-columns: 1fr 1fr;
  background: var(--hpx-card);
  border:1px solid var(--hpx-border);
  border-radius:18px;
  overflow:hidden;
  box-shadow: var(--hpx-shadow);
  position:relative;
  isolation:isolate;
}
.hpxc007-ticket:before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(600px 300px at -10% -20%, rgba(106,162,255,.18), transparent 60%);
  mix-blend-mode:screen; opacity:.7;
}
.hpxc007-ticket:after{
  content:'';
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; background: repeating-linear-gradient(to bottom, transparent 0 10px, rgba(255,255,255,.12) 10px 14px, transparent 14px 24px);
  transform:translateX(-1px);
}

.hpxc007-ticket .hpxc007-ticket-left{ border-right:1px dashed rgba(255,255,255,.12) }
.hpxc007-img{ display:block; width:100%; height:auto }
.hpxc007-fallback{
  display:flex; min-height:220px; align-items:center; justify-content:center;
  color:var(--hpx-text); font-weight:700; letter-spacing:.4px;
  background: radial-gradient(1200px 600px at 0% 0%, rgba(106,162,255,.15), transparent 40%);
}

.hpxc007-ticket-right{ padding:20px; color:var(--hpx-text); display:flex; flex-direction:column; justify-content:center }
.hpxc007-brand{ display:flex; align-items:center; gap:10px; margin-bottom:6px }
.hpxc007-brand-logo{ width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.15) }
.hpxc007-brand-text{ font-weight:800; letter-spacing:.4px; color: var(--hpx-accent) }

.hpxc007-code{ font-size:12px; color:var(--hpx-muted); text-transform:uppercase; letter-spacing:.8px }
.hpxc007-code-val{ font-size:22px; font-weight:800; margin:4px 0 8px }
.hpxc007-exp{ font-size:13px; color:var(--hpx-muted) }

.hpxc007-timer.pill{
  display:inline-block; margin-top:10px; padding:8px 12px; border-radius:999px;
  background: var(--hpx-pill); color: var(--hpx-accent); font-weight:800; letter-spacing:.5px;
  border:1px solid rgba(106,162,255,.35);
  width:max-content;
}
.hpxc007-timer.expired{ background: rgba(255,99,132,.1); color:#ff6384; border-color: rgba(255,99,132,.35) }

.hpxc007-copy{
  appearance:none; border:1px solid var(--hpx-border); background:transparent; color:var(--hpx-text);
  padding:4px 10px; border-radius:10px; font-size:12px; cursor:pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.hpxc007-copy:hover{ border-color: var(--hpx-accent); background: rgba(106,162,255,.12) }
.hpxc007-copy.copied{ border-color: #4fd1c5; background: rgba(79,209,197,.18); color:#eafffb }

/* Empty state */
.hpxc007-empty{ display:flex; justify-content:center; align-items:center; padding:40px 0 }
.hpxc007-empty-card{ background:linear-gradient(135deg, rgba(17,26,46,.9), rgba(17,26,46,.7)); border:1px dashed var(--hpx-border); color:var(--hpx-text); padding:22px 26px; border-radius:16px; text-align:center }
.hpxc007-empty-emoji{ font-size:28px; margin-bottom:6px }

/* Preferencias de color del tema del sitio */
body, .woocommerce-account .entry-content{ background: #0b1324 }
.woocommerce-account .entry-content, .woocommerce-account .entry-content p, .woocommerce-account .entry-content a{ color:var(--hpx-text) }
.woocommerce-MyAccount-navigation-link--mis-cupones a{ color: var(--hpx-accent) }