/* Fideliza — hoja de estilos de la tarjeta.
   Pensada para el móvil primero. Los ajustes de la capa "móvil nativo"
   (alturas, notch, toques, rebotes) están marcados con el comentario [móvil]. */

:root {
  /* El color del comercio lo inyecta el JavaScript. */
  --comercio: #92400E;
  --sobre-comercio: #FFFFFF;

  --fondo: #FBF6EE;
  --papel: #FFFFFF;
  --tinta: #3A2A18;
  --tinta-suave: #7A6650;
  --borde: rgba(120, 53, 15, 0.14);
  --sombra: 0 10px 30px rgba(90, 58, 26, 0.10), 0 2px 6px rgba(90, 58, 26, 0.06);
  --radio: 22px;
  --toque: 150ms;

  --fuenteTexto: "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuenteTitulo: "Playfair Display SC", ui-serif, Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #17130F;
    --papel: #221C16;
    --tinta: #F3E9DC;
    --tinta-suave: #B9A48C;
    --borde: rgba(255, 236, 210, 0.14);
    --sombra: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-tap-highlight-color: transparent;   /* [móvil] sin destello gris al tocar */
  -webkit-text-size-adjust: 100%;             /* [móvil] sin inflar letra en apaisado */
  overscroll-behavior: none;                  /* [móvil] sin recarga al tirar hacia abajo */
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuenteTexto);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.app {
  min-height: 100dvh;                          /* [móvil] altura real, no la de 100vh */
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 460px;
  margin: 0 auto;
  padding:
    calc(20px + env(safe-area-inset-top, 0px))
    calc(18px + env(safe-area-inset-right, 0px))
    calc(24px + env(safe-area-inset-bottom, 0px))
    calc(18px + env(safe-area-inset-left, 0px));
}

/* ------------------------------------------------------------- cabecera */

.cabecera { padding-top: 8px; }

.marca {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: cover;
  background: var(--papel);
  border: 1px solid var(--borde);
  flex: 0 0 auto;
}

.etiqueta {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.nombre {
  margin: 0;
  font-family: var(--fuenteTitulo);
  font-size: clamp(22px, 6vw, 27px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--tinta);
}

/* --------------------------------------------------------------- tarjeta */

.contenido {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

.tarjeta {
  position: relative;
  overflow: hidden;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 24px 20px 22px;
}

.tarjeta::before {                     /* franja superior con el color del comercio */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--comercio);
}

.sellos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 10px;
  margin: 8px 0 20px;
}

.sello {
  aspect-ratio: 1;
  width: 100%;
  max-width: 62px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px dashed var(--borde);
  display: grid;
  place-items: center;
  color: var(--tinta-suave);
  font-size: 13px;
  font-weight: 600;
  transition: border-color var(--toque) ease-out, background-color var(--toque) ease-out;
}

.sello.hecho {
  border: 2px solid var(--comercio);
  background: var(--comercio);
  color: var(--sobre-comercio);
}

.sello.hecho svg { width: 22px; height: 22px; display: block; }

/* El sello recién puesto entra con un golpe suave. */
.sello.nuevo { animation: entraSello 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }

@keyframes entraSello {
  from { transform: scale(0.55); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

.progreso {
  margin: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--tinta);
}

.progreso span { color: var(--tinta-suave); font-weight: 500; }

.premio {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--comercio) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--comercio) 22%, transparent);
}

.premioEtiqueta {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.premioTexto { margin: 0; font-size: 17px; font-weight: 600; color: var(--tinta); }

/* -------------------------------------------------------- estado completo */

.tarjeta.completa {
  border-color: color-mix(in srgb, var(--comercio) 55%, transparent);
}

.tarjeta.completa::after {
  content: "";
  position: absolute;
  inset: 6px 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--comercio), transparent);
}

.aviso {
  min-height: 22px;
  margin: 0;
  text-align: center;
  font-size: 15px;
  color: var(--tinta-suave);
}

.aviso.fuerte { color: var(--tinta); font-weight: 600; }

/* -------------------------------------------------------------- botones */

.acciones { display: flex; flex-direction: column; gap: 10px; }

.boton {
  appearance: none;
  width: 100%;
  min-height: 56px;                      /* [móvil] zona táctil cómoda */
  padding: 16px 20px;
  border: 0;
  border-radius: 16px;
  background: var(--comercio);
  color: var(--sobre-comercio);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;            /* [móvil] sin el retardo de 300 ms */
  user-select: none;                     /* [móvil] sin seleccionar el texto al mantener */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform var(--toque) ease-out, opacity var(--toque) ease-out,
              box-shadow var(--toque) ease-out;
}

.boton:active { transform: scale(0.975); }

.boton:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.boton:focus-visible,
.enlace:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--comercio);
  outline-offset: 3px;
}

.botonCanje {
  background: transparent;
  color: var(--comercio);
  border: 2px solid var(--comercio);
}

/* El ratón sí tiene hover; el dedo no. [móvil] */
@media (hover: hover) and (pointer: fine) {
  .boton:not(:disabled):hover { box-shadow: 0 6px 18px rgba(90, 58, 26, 0.22); }
  .enlace:hover { text-decoration: underline; }
}

/* --------------------------------------------------------------- detalles */

.detalles {
  border-top: 1px solid var(--borde);
  padding-top: 14px;
  color: var(--tinta-suave);
  font-size: 14px;
}

.detalles summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--tinta-suave);
  padding: 6px 0;
  touch-action: manipulation;
}

.listaDatos { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.listaDatos > div { display: flex; justify-content: space-between; gap: 12px; }
.listaDatos dt { margin: 0; }
.listaDatos dd { margin: 0; color: var(--tinta); font-weight: 600; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.enlace {
  appearance: none;
  background: none;
  border: 0;
  padding: 8px 0;
  margin-top: 4px;
  color: var(--tinta-suave);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  touch-action: manipulation;
}

/* ------------------------------------------------------------------- pie */

.pie {
  margin-top: auto;
  padding-top: 8px;
  text-align: center;
  font-size: 13px;
  color: var(--tinta-suave);
}

.pie p { margin: 0; }

/* --------------------------------------------------------------- errores */

.error {
  margin: 40px auto;
  max-width: 380px;
  text-align: center;
  color: var(--tinta);
}

/* ------------------------------------------------- respeta "sin animación" */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}