/* ============================================================
   Ticket Go — entradas.css
   Wallet / my tickets: ticket cards with live QR, accordion,
   shielded-mode warning.
   ============================================================ */

.wallet-head-sec { padding: 130px 0 30px; }
.wallet-head-sec .head-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wallet-head-sec h1 { font-size: clamp(1.9rem, 5vw, 3.2rem); }
.wallet-head-sec p { color: var(--text-secondary); margin-top: 8px; }

/* Ticket card */
.tickets { display: grid; gap: 26px; padding-bottom: 30px; }
.ticket-card {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center;
  background: var(--bg-card-elevated); border: 1px solid var(--border-mid); border-radius: 22px;
  padding: 28px 30px; box-shadow: 0 30px 70px -50px rgba(0,0,0,0.9);
}

.tk-left .tk-name { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.25rem; margin: 12px 0 14px; }
.tk-meta { display: grid; gap: 8px; margin-bottom: 16px; }
.tk-meta div { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--text-secondary); }
.tk-meta svg { width: 16px; height: 16px; stroke: var(--text-muted); flex-shrink: 0; }
.tk-holder { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 14px; }
.tk-holder b { color: var(--text-primary); font-weight: 600; }

/* Center QR */
.tk-center { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tk-qr-frame {
  position: relative; width: 260px; height: 260px; background: #fff; border-radius: 18px;
  padding: 16px; display: flex; align-items: center; justify-content: center;
}
.tk-qr-frame canvas { width: 100%; height: 100%; image-rendering: pixelated; border-radius: 6px; }
.tk-ring { position: absolute; top: -10px; right: -10px; width: 56px; height: 56px; }
.tk-ring svg { transform: rotate(-90deg); }
.tk-ring .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; color: #13131C; }
.tk-expires { font-size: 0.9rem; color: var(--green-success); font-weight: 600; }
.tk-hint { font-size: 0.78rem; color: var(--text-muted); }

/* Right actions */
.tk-right { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.tk-right .btn { justify-content: center; }
.tk-id { margin-top: 8px; font-size: 0.82rem; color: var(--text-muted); }
.tk-id b { color: var(--text-secondary); }
.tk-refresh { font-size: 0.8rem; color: var(--purple-light); }

/* Accordion */
.accordion {
  background: var(--bg-card); border: 1px solid var(--border-low); border-radius: var(--radius);
  margin: 30px 0; overflow: hidden;
}
.accordion-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px 24px; background: none; border: none; color: var(--text-primary);
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.05rem; text-align: left;
}
.accordion-head .chevron { transition: transform var(--ease); flex-shrink: 0; }
.accordion-head .chevron svg { width: 22px; height: 22px; stroke: var(--text-secondary); }
.accordion.open .accordion-head .chevron { transform: rotate(180deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height 300ms ease; }
.accordion.open .accordion-body { max-height: 400px; }
.accordion-body .inner { padding: 0 24px 24px; color: var(--text-secondary); font-size: 0.95rem; }
.accordion-body .inner p { margin-bottom: 12px; }

/* Shielded mode warning */
.shielded {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(135deg, rgba(124,58,237,0.14), rgba(124,58,237,0.04));
  border: 1px solid rgba(124,58,237,0.35); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 90px;
}
.shielded .ic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(124,58,237,0.25); display: flex; align-items: center; justify-content: center;
}
.shielded .ic svg { width: 24px; height: 24px; stroke: var(--purple-light); }
.shielded h4 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.05rem; margin-bottom: 6px; }
.shielded p { color: var(--text-secondary); font-size: 0.92rem; }

/* Used / scanned ticket */
.ticket-card.tk-usada { opacity: 0.65; }
.ticket-card.tk-usada .tk-qr-frame { filter: grayscale(1); }

/* Chip shown on used tickets */
.tk-usada-chip {
  background: rgba(248,113,113,0.12); color: #F87171;
  border: 1px solid rgba(248,113,113,0.3);
  display: inline-flex; align-items: center;
}

/* "ESCANEADO" badge */
.tk-usada-badge {
  background: rgba(248,113,113,0.12); color: #F87171;
  border: 1px solid rgba(248,113,113,0.3);
  display: inline-flex; align-items: center; gap: 5px; font-weight: 700;
}
.tk-usada-badge svg { width: 13px; height: 13px; stroke: #F87171; }

/* Overlay on top of the QR canvas for scanned tickets */
.tk-scanned-overlay {
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(0,0,0,0.62);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.tk-scanned-overlay svg {
  width: 72px; height: 72px; stroke: #34D399; stroke-width: 2.5;
  filter: drop-shadow(0 0 16px rgba(52,211,153,0.7));
}

/* Empty wallet state */
.empty-state {
  text-align: center; padding: 70px 24px; background: var(--bg-card);
  border: 1px solid var(--border-low); border-radius: var(--radius);
}
.empty-state p { color: var(--text-secondary); margin-bottom: 20px; font-size: 1.05rem; }

/* Responsive */
@media (max-width: 880px) {
  .ticket-card { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .tk-meta div { justify-content: center; }
  .tk-center { order: -1; }
  .tk-right { align-items: stretch; }
  .tk-qr-frame { width: 240px; height: 240px; }
}
@media (max-width: 480px) {
  .wallet-head-sec { padding-top: 110px; }
  .ticket-card { padding: 20px 16px; }
  .tk-qr-frame { width: 200px; height: 200px; }
  .tk-right .btn { width: 100%; justify-content: center; }
  .shielded { flex-direction: column; gap: 12px; }
}