/* Estilos de la PWA del mostrador.
 *
 * Pensada para un telefono en la mano de alguien que atiende: botones grandes,
 * contraste alto, y la tarjeta del cliente como el objeto central de la
 * pantalla. Oscuro porque se usa apuntando una camara y una pantalla blanca
 * encandila.
 *
 * El color del negocio entra por la variable --acento, que la aplica app.js
 * desde negocio.color_acento. Ningun color de negocio esta escrito aca. */

:root {
  --fondo: #0d0d0f;
  --superficie: #17171b;
  --superficie-alta: #1f1f25;
  --borde: #2c2c34;
  --texto: #f2f2f4;
  --tenue: #8b8b96;
  --acento: #b8ff2e;
  --sobre-acento: #10100c;
  --tarjeta-fondo: #17171b;
  --borde-sello: #ffffff59;
  --peligro: #ff6b5e;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

main { padding: 1rem; max-width: 30rem; margin: 0 auto; }

h1 { font-size: 1.25rem; margin: 0 0 .25rem; }

/* Etiquetas en mayusculas y monoespaciadas, como la referencia */
.etiqueta {
  display: block;
  font: 600 .6875rem/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tenue);
}

.ayuda { color: var(--tenue); font-size: .875rem; margin: .25rem 0 1rem; }

/* ---------- Cabecera ---------- */

header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 1rem;
  border-bottom: 1px solid var(--borde);
  max-width: 30rem; margin: 0 auto;
}
.marca { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.marca img { width: 2rem; height: 2rem; border-radius: .375rem; object-fit: contain; background: #fff; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.marca span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca small { color: var(--tenue); font-size: .8125rem; }

.tarjeta-logo {
  width: 2.5rem; height: 2.5rem; border-radius: .5rem;
  object-fit: contain; background: #fff; margin-right: .75rem;
}

/* ---------- Formularios ---------- */

form { display: flex; flex-direction: column; gap: .25rem; }
form label { margin-top: .75rem; font: 600 .6875rem/1.4 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }

input {
  width: 100%; padding: .875rem;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: .75rem;
  font-size: 1.0625rem; /* 16px o mas: menos y iOS hace zoom al enfocar */
}
input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

button {
  padding: .875rem 1rem; margin-top: 1rem;
  border: 1px solid var(--borde); border-radius: .75rem;
  background: var(--superficie-alta); color: var(--texto);
  font-size: 1rem; font-weight: 600; cursor: pointer;
  min-height: 3rem; /* alcanzable con el pulgar */
}
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }

button.primario { background: var(--acento); color: var(--sobre-acento); border-color: transparent; }
button.canje { background: transparent; border-color: var(--acento); color: var(--acento); }
button.enlace {
  background: none; border: none; color: var(--tenue);
  text-decoration: underline; min-height: auto; padding: .5rem;
  font-weight: 400; font-size: .875rem;
}
button.enlace.peligro { color: var(--peligro); }

.acciones { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; }
.acciones button { margin-top: 0; }

/* ---------- La tarjeta del cliente ---------- */

.tarjeta {
  background: var(--tarjeta-fondo);
  border: 1px solid var(--borde);
  border-radius: 1.25rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
  /* Sensacion de objeto fisico */
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px rgba(0,0,0,.5);
}

.tarjeta-fila { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.tarjeta-fila + .tarjeta-fila { margin-top: 1rem; }
.tarjeta-fila strong { display: block; font-size: 1.0625rem; }
.tarjeta-fila small { color: var(--tenue); font-family: var(--mono); font-size: .8125rem; }
.derecha { text-align: right; }

.contador { font: 700 1.5rem/1 var(--mono); color: var(--acento); }

/* Fila de sellos: rellenos con el icono, punteados los que faltan */
.sellos {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.25rem 0;
}
.sello {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
}
.sello.lleno { background: var(--acento); color: var(--sobre-acento); }
/* El pendiente lleva su borde bien visible —es lo que deja contar cuantos
 * faltan— y el icono atenuado. La opacidad va SOLO en el icono: puesta sobre
 * el circulo entero se llevaba tambien el borde. */
.sello.vacio { border: 2px dashed var(--borde-sello); }
.sello.vacio svg { opacity: .5; }

/* Modo puntos: una barra, porque 500 circulos no se ven */
.barra {
  height: .75rem; border-radius: .375rem;
  background: var(--superficie-alta); border: 1px solid var(--borde);
  overflow: hidden; margin: 1.25rem 0;
}
.barra > div { height: 100%; background: var(--acento); transition: width .3s; }

.codigo-barras {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px dashed var(--borde);
  text-align: center;
  font: 600 1rem/1 var(--mono); letter-spacing: .3em;
  color: var(--tenue);
}

/* ---------- Camara ---------- */

#camara-marco {
  position: relative; aspect-ratio: 1; width: 100%;
  border-radius: 1.25rem; overflow: hidden;
  background: #000; border: 1px solid var(--borde);
}
#camara { width: 100%; height: 100%; object-fit: cover; }
#camara-guia {
  position: absolute; inset: 18%;
  border: 2px solid var(--acento); border-radius: 1rem;
  opacity: .8; pointer-events: none;
}
#camara-marco[hidden] { display: none; }

/* ---------- Resultados de busqueda ---------- */

.lista { list-style: none; padding: 0; margin: 1rem 0 0; }
.lista li { margin-bottom: .5rem; }
.lista button {
  width: 100%; margin: 0; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
}
.lista small { color: var(--tenue); font-family: var(--mono); font-weight: 400; }

/* ---------- QR del pase ---------- */

#pase-caja { margin-top: 1.25rem; text-align: center; }
#pase-qr {
  width: 100%; max-width: 15rem; margin: .75rem auto 0; display: block;
  background: #fff; padding: .75rem; border-radius: .75rem;
}

/* ---------- Aviso flotante ---------- */

#aviso {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom));
  width: min(28rem, calc(100% - 2rem));
  padding: .875rem 1rem; border-radius: .75rem;
  background: var(--superficie-alta); border: 1px solid var(--borde);
  box-shadow: 0 12px 32px rgba(0,0,0,.6);
  font-size: .9375rem;
}
#aviso.error { border-color: var(--peligro); color: var(--peligro); }
#aviso.exito { border-color: var(--acento); color: var(--acento); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}