/* =========================================================
   Chopea - estilos base (mobile-first)
   ========================================================= */
:root {
  --color-primario: #0f7a6b;      /* verde-teal, distinto del verde de Groupon */
  --color-primario-dark: #0b5b50;
  --color-acento: #ff7a1a;        /* naranja cálido para CTAs y descuentos */
  --color-acento-dark: #e2650a;
  --color-calido: #ffb648;        /* dorado, acentos tipo "destello" */
  --color-texto: #1c2521;
  --color-texto-suave: #5b6b66;
  --color-fondo: #f6f8f7;
  --color-tarjeta: #ffffff;
  --color-borde: #e3e8e6;
  --color-exito: #1c8a5a;
  --color-error: #d9412f;
  --radio: 12px;
  --sombra: 0 2px 10px rgba(20, 40, 35, 0.08);
  --max-ancho: 1120px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--color-primario); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.contenedor {
  max-width: var(--max-ancho);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- Header ---------- */
.encabezado {
  background: var(--color-tarjeta);
  border-bottom: 1px solid var(--color-borde);
  position: sticky;
  top: 0;
  z-index: 50;
}
.encabezado .fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  max-width: var(--max-ancho);
  margin: 0 auto;
  flex-wrap: wrap;
}
.marca {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primario-dark);
  white-space: nowrap;
}
.marca span { color: var(--color-acento); }

.buscador {
  flex: 1 1 220px;
  min-width: 0;
}
.buscador input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  font-size: 15px;
}

.nav-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  flex-wrap: wrap;
}
.nav-usuario a, .nav-usuario button {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-borde);
  background: var(--color-tarjeta);
  cursor: pointer;
  font-size: 14px;
  color: var(--color-texto);
}
.nav-usuario a.principal, .btn, button.btn {
  background: var(--color-acento);
  color: #fff;
  border-color: var(--color-acento);
  font-weight: 600;
}
.nav-usuario a.principal:hover, .btn:hover { background: var(--color-acento-dark); text-decoration: none; }

/* ---------- Categorías ---------- */
.categorias {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 16px 14px;
  max-width: var(--max-ancho);
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}
.categorias a {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  color: var(--color-texto);
  font-size: 14px;
  white-space: nowrap;
}
.categorias a.activa {
  background: var(--color-primario);
  border-color: var(--color-primario);
  color: #fff;
}

/* ---------- Rejilla de ofertas ---------- */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding: 16px 0 40px;
}
.tarjeta-oferta {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
}
.tarjeta-oferta .imagen {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #d7ece7, #eef6f2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
}
.tarjeta-oferta .cuerpo { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tarjeta-oferta .comercio { font-size: 12px; color: var(--color-texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.tarjeta-oferta h3 { font-size: 16px; margin: 0; line-height: 1.3; }
.tarjeta-oferta .precios { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.precio-oferta { font-size: 20px; font-weight: 800; color: var(--color-primario-dark); }
.precio-original { font-size: 14px; color: var(--color-texto-suave); text-decoration: line-through; }
.badge-descuento {
  position: absolute;
  margin: 10px;
  background: var(--color-acento);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 9px;
  border-radius: 999px;
}
.tarjeta-oferta .imagen-wrap { position: relative; }

/* ---------- Formularios y botones ---------- */
.tarjeta {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
  max-width: 480px;
  margin: 24px auto;
}
label { display: block; font-size: 14px; margin: 12px 0 4px; font-weight: 600; }
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}
.btn, button.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  border: none;
  background: var(--color-acento);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  width: 100%;
  margin-top: 16px;
}
.btn.secundario { background: var(--color-primario); }
.btn.contorno { background: transparent; color: var(--color-primario); border: 1.5px solid var(--color-primario); }
.btn.pequeno { width: auto; padding: 8px 16px; font-size: 14px; margin-top: 0; }
.btn.peligro { background: var(--color-error); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.alerta { padding: 12px 14px; border-radius: 8px; font-size: 14px; margin: 12px 0; }
.alerta.error { background: #fdeceA; color: var(--color-error); border: 1px solid #f6c9c1; }
.alerta.exito { background: #e7f6ee; color: var(--color-exito); border: 1px solid #b9e6cd; }
.alerta.info { background: #eaf3fb; color: #1f5e91; border: 1px solid #c6ddef; }

/* ---------- Detalle de oferta ---------- */
.detalle-oferta { display: grid; gap: 24px; padding: 24px 0 48px; }
@media (min-width: 800px) {
  .detalle-oferta { grid-template-columns: 3fr 2fr; align-items: start; }
}
.detalle-oferta .imagen-grande {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #d7ece7, #eef6f2);
  border-radius: var(--radio);
  display: flex; align-items: center; justify-content: center; font-size: 64px;
}
.panel-compra {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
  position: sticky;
  top: 90px;
}

/* ---------- Cupón / voucher con código de barras ---------- */
.voucher-tarjeta {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
}
.voucher-tarjeta .estado-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.estado-activo { background: #e7f6ee; color: var(--color-exito); }
.estado-pendiente_pago { background: #fff4e0; color: #a86a00; }
.estado-redimido { background: #eceef0; color: #59636b; }
.estado-anulado, .estado-expirado { background: #fdeceA; color: var(--color-error); }

.barcode-wrap {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  margin: 12px 0;
}
.barcode-wrap svg { width: 100% !important; height: auto !important; display: block; }
.codigo-texto { font-family: "SF Mono", Consolas, monospace; letter-spacing: 1px; font-size: 15px; text-align: center; }

/* ---------- Escáner ---------- */
#lector-camara {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: var(--radio);
  overflow: hidden;
  background: #000;
  aspect-ratio: 4/3;
  position: relative;
}
#lector-camara video, #lector-camara canvas { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Tablas admin ---------- */
table.admin { width: 100%; border-collapse: collapse; background: var(--color-tarjeta); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
table.admin th, table.admin td { padding: 10px 12px; border-bottom: 1px solid var(--color-borde); font-size: 14px; text-align: left; }
table.admin th { background: #f0f4f2; font-weight: 700; }
.tabla-scroll { overflow-x: auto; }

.pie {
  text-align: center;
  color: var(--color-texto-suave);
  font-size: 13px;
  padding: 30px 16px 50px;
}

.vacio { text-align: center; color: var(--color-texto-suave); padding: 40px 16px; }

/* =========================================================
   Landing (portada) — hero, cómo funciona, app teaser
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 182, 72, 0.16) 0%, transparent 42%),
    radial-gradient(circle at 90% 82%, rgba(255, 122, 26, 0.12) 0%, transparent 46%),
    linear-gradient(180deg, #ffffff, var(--color-fondo));
  border-bottom: 1px solid var(--color-borde);
}
.hero__carrito {
  position: absolute;
  right: -40px;
  bottom: -50px;
  width: 300px;
  height: 300px;
  opacity: 0.05;
  transform: rotate(-10deg);
  pointer-events: none;
}
.hero__contenido {
  position: relative;
  max-width: var(--max-ancho);
  margin: 0 auto;
  padding: 56px 16px 48px;
  text-align: center;
}
.hero__sparkle { display: inline-block; vertical-align: -6px; margin-left: 4px; transform: rotate(-8deg); }
.hero h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.15;
  margin: 0 0 14px;
  font-weight: 800;
}
.hero h1 .acento { color: var(--color-acento); }
.hero p.subtitulo {
  font-size: 17px;
  color: var(--color-texto-suave);
  max-width: 560px;
  margin: 0 auto 26px;
}
.hero__cta {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero__nota {
  margin-top: 18px;
  font-size: 13px;
  color: var(--color-texto-suave);
}

.como-funciona {
  max-width: var(--max-ancho);
  margin: 0 auto;
  padding: 44px 16px 8px;
}
.como-funciona h2 {
  text-align: center;
  font-size: 24px;
  margin: 0 0 32px;
}
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.paso {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 22px 20px;
  box-shadow: var(--sombra);
  text-align: center;
}
.paso__numero {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primario);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.paso h3 { font-size: 16px; margin: 0 0 8px; }
.paso p { font-size: 14px; color: var(--color-texto-suave); margin: 0; line-height: 1.5; }

.app-teaser {
  max-width: var(--max-ancho);
  margin: 44px auto 0;
  padding: 0 16px;
}
.app-teaser__caja {
  background: var(--color-primario-dark);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  color: #fff;
}
.app-teaser__icono {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--color-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  font-size: 34px;
  flex: 0 0 auto;
}
.app-teaser__icono span { color: var(--color-acento); }
.app-teaser__texto { flex: 1 1 260px; }
.app-teaser__texto h2 { font-size: 19px; margin: 0 0 6px; }
.app-teaser__texto p { font-size: 14px; margin: 0; color: rgba(255,255,255,0.82); }
.app-teaser__proximamente {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.14);
  padding: 6px 12px;
  border-radius: 999px;
}