@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  --choc-950: #051F2F;
  --choc-900: #002948;
  --choc-800: #033A31;
  --cream: #EDE6D6;
  --cream-dim: #A9A692;
  --gold: #EDE6D6;
  --gold-dim: #6F7768;
  --berry: #8C9A85;
  --berry-bright: #A2AF97;
  --ok: #93A98C;
  --danger: #C97C5D;
  --radius: 14px;
  --shadow: 0 12px 28px rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--choc-950);
  color: var(--cream);
  font-family: 'Work Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1, h2, h3, .display {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 20px 64px;
  transition: max-width 0.2s ease;
}
.wrap.wide {
  max-width: 1100px;
}

/* ---------- Header con logo ---------- */
header.brand {
  padding: 28px 0 20px;
  text-align: center;
  border-bottom: 1px solid rgba(237,230,214,0.08);
  margin-bottom: 24px;
  position: relative;
}
.logo-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: var(--shadow);
  padding: 16px;
}
.logo-circle img { width: 100%; height: 100%; object-fit: contain; }
.tagline {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: 700;
}
.userEmail {
  position: absolute;
  top: 28px;
  right: 0;
  font-size: 12px;
  color: var(--cream-dim);
}

.card {
  background: var(--choc-900);
  border: 1px solid rgba(237,230,214,0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 16px;
}

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: var(--choc-900);
  border-radius: 10px;
  padding: 4px;
  border: 1px solid rgba(237,230,214,0.08);
}

.tab {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cream-dim);
  cursor: pointer;
  user-select: none;
  border: none;
  background: transparent;
  font-family: inherit;
}

.tab.active {
  background: var(--berry-bright);
  color: var(--choc-950);
}

.panel { display: none; }
.panel.active { display: block; }

label {
  display: block;
  font-size: 13px;
  color: var(--cream-dim);
  margin: 14px 0 6px;
}

input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 9px;
  border: 1px solid rgba(237,230,214,0.14);
  background: var(--choc-950);
  color: var(--cream);
  font-family: 'Work Sans', sans-serif;
  font-size: 15px;
}

input:focus { outline: 2px solid var(--berry-bright); outline-offset: 1px; }

button.primary {
  width: 100%;
  margin-top: 20px;
  padding: 13px 16px;
  border-radius: 9px;
  border: none;
  background: var(--berry-bright);
  color: var(--choc-950);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Work Sans', sans-serif;
}

button.primary:disabled { opacity: 0.5; cursor: not-allowed; }

button.secondary {
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px;
  border-radius: 9px;
  border: 1px solid rgba(237,230,214,0.2);
  background: transparent;
  color: var(--cream);
  font-size: 14px;
  cursor: pointer;
  font-family: 'Work Sans', sans-serif;
}

.code {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 12px;
  background: var(--choc-950);
  border-radius: 9px;
  border: 1px dashed var(--berry-bright);
  color: var(--berry-bright);
  margin: 14px 0;
}

/* ---------- Tarjeta real (imagen) + overlays dinámicos ---------- */
.gc2-wrap {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  aspect-ratio: 640 / 1063;
}
.gc2-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.5));
}
.gc2-amount {
  position: absolute;
  left: 23.05%; top: 44.45%; width: 50%; height: 8%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  color: #BA8E43;
  font-size: clamp(20px, 7vw, 27px);
}
.gc2-regalo {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-style: italic;
  color: #1B342E;
  font-size: clamp(11px, 3.2vw, 14px);
}
.gc2-qr {
  position: absolute;
  left: 33.6%; top: 56.4%; width: 32.8%; height: 19.75%;
  background: #fff;
  border-radius: 4%;
  display: flex; align-items: center; justify-content: center;
  padding: 6%;
  box-sizing: border-box;
}
.gc2-qr canvas { width: 100%; height: 100%; }
.gc2-expiry {
  position: absolute;
  left: 15%; top: 80.9%; width: 70%; height: 4%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  line-height: 1.25;
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  color: #1B342E;
  background: #D7D4AB;
  font-size: clamp(8px, 2.6vw, 10px);
  letter-spacing: 0.4px;
}
.gc2-code {
  position: absolute;
  left: 15.2%; top: 85.1%; width: 66%; height: 4.66%;
  display: flex; align-items: center; justify-content: flex-end;
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  color: #F9F2C4;
  background: #BA8E43;
  font-size: clamp(13px, 4.2vw, 16px);
  letter-spacing: 1.5px;
}

.qr-box {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  margin: 14px 0;
}

.amount {
  font-family: 'Fraunces', serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--berry-bright);
  text-align: center;
}

.result {
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  margin-top: 16px;
}

.result.ok { background: rgba(147,169,140,0.16); border: 1px solid var(--ok); }
.result.fail { background: rgba(201,124,93,0.16); border: 1px solid var(--danger); }

.result .title { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.result.ok .title { color: var(--ok); }
.result.fail .title { color: var(--danger); }

.hint { color: var(--cream-dim); font-size: 13px; margin-top: 4px; }

.status-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.status-pill.activa { background: rgba(147,169,140,0.2); color: var(--ok); }
.status-pill.usada { background: rgba(201,124,93,0.2); color: var(--danger); }
.status-pill.anulada { background: rgba(169,166,146,0.2); color: var(--cream-dim); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid rgba(237,230,214,0.08); }
th { color: var(--cream-dim); font-weight: 500; font-size: 12px; }

#reader { border-radius: 12px; overflow: hidden; }

.wa-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  padding: 13px 16px;
  border-radius: 9px;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
}

.error-msg { color: var(--danger); font-size: 13px; margin-top: 8px; }

.logout {
  background: none;
  border: none;
  color: var(--cream-dim);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  display: block;
  margin: 8px auto 0;
}