/* FidelizaPRO — pensado primero para el celular de la caja. */

:root{
  --negro:#12100c;
  --negro-2:#1b1813;
  --oro:#d4a24e;
  --crema:#f4efe4;
  --tenue:rgba(244,239,228,.6);
  --verde:#25D366;
  --rojo:#e8524a;
  --borde:rgba(212,162,78,.22);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--negro);color:var(--crema);font-family:var(--sans);
  font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding-bottom:40px;
}

.barra{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--borde);
  position:sticky;top:0;background:var(--negro);z-index:10;
}
.marca{font-weight:800;letter-spacing:.02em;color:var(--crema);text-decoration:none}
.marca span{color:var(--oro)}
.usuario{display:flex;gap:14px;align-items:center;font-size:14px;color:var(--tenue)}
.usuario a{color:var(--oro);text-decoration:none}

.contenido{max-width:560px;margin:0 auto;padding:18px}
.centro{text-align:center}
.serif{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.15}
.tenue{color:var(--tenue)}
.pequeno{font-size:14px}

.tarjeta{
  background:var(--negro-2);border:1px solid var(--borde);
  border-radius:16px;padding:20px;margin-bottom:14px;
}

label{display:block;font-size:14px;color:var(--tenue);margin-bottom:6px}
input[type=text],input[type=tel],input[type=number],input[type=email],input[type=password]{
  width:100%;padding:16px;font-size:19px;border-radius:12px;
  border:1px solid var(--borde);background:#0d0b08;color:var(--crema);
  margin-bottom:14px;
}
input:focus{outline:2px solid var(--oro);outline-offset:1px}

.boton{
  display:block;width:100%;padding:18px;border:0;border-radius:14px;
  background:var(--oro);color:#1a1409;font-size:18px;font-weight:800;
  text-align:center;text-decoration:none;cursor:pointer;
}
.boton--wa{background:var(--verde);color:#04220f}
.boton--fantasma{background:transparent;border:1px solid var(--borde);color:var(--crema)}
.boton + .boton{margin-top:10px}

.aviso{padding:14px 18px;font-size:15px;text-align:center}
.aviso--exito{background:rgba(37,211,102,.14);color:#8fe0a8}
.aviso--error{background:rgba(232,82,74,.14);color:#e8907c}

/* Progreso de una tarjeta de sellos */
.progreso{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0;align-items:center}
.punto{width:26px;height:26px;border-radius:50%;border:2px dashed var(--borde);flex:none}
.punto--lleno{background:var(--oro);border-style:solid;border-color:var(--oro)}

/*
 * El sello que trae bonificacion.
 *
 * Va mas grande y con un regalo encima para que se vea de un vistazo donde
 * esta el premio intermedio: si el cliente no distingue ese sello de los
 * otros nueve, la bonificacion no lo hace volver, que es su unico proposito.
 * El anillo exterior lo separa de sus vecinos sin mover la fila de sitio.
 */
.punto--bono{
  width:38px;height:38px;border-style:solid;border-color:var(--oro);
  box-shadow:0 0 0 3px rgba(240,194,104,.22);
  position:relative;
}
.punto--bono::after{
  content:'🎁';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;line-height:1;
}
.punto--bono.punto--lleno::after{
  /* Ya la gano: el regalo se apaga sobre el dorado para no competir con el. */
  opacity:.55;filter:grayscale(1) brightness(.4);
}

.nota-bono{
  margin-top:8px;font-size:13px;color:var(--oro);
  background:rgba(240,194,104,.10);border:1px solid rgba(240,194,104,.28);
  border-radius:10px;padding:8px 10px;
}

/* Premio disponible: tiene que ser lo primero que vea el cajero */
.premio{
  background:linear-gradient(140deg,#f0c268,#d4a24e);color:#1a1409;
  border-radius:16px;padding:18px;margin-bottom:12px;
}
/*
 * El codigo va sobre el dorado del premio, asi que necesita color propio.
 *
 * Sin esto heredaba la regla generica de `.codigo`, escrita despues para el
 * panel oscuro: texto dorado sobre fondo dorado, practicamente ilegible. Y es
 * justo el dato que el cliente le tiene que mostrar al cajero.
 */
.premio .codigo{
  display:block;
  margin:10px auto 0;
  padding:12px 16px;
  font-size:30px;font-weight:800;letter-spacing:.14em;
  font-family:ui-monospace,monospace;
  color:#1a1409;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(26,20,9,.22);
  border-radius:12px;
}

.lista{list-style:none}
.lista li{
  padding:12px 0;border-bottom:1px solid var(--borde);
  display:flex;justify-content:space-between;gap:12px;
}
.lista a{color:var(--crema);text-decoration:none;display:block}

.mensaje-previo{
  white-space:pre-wrap;background:#0d0b08;border:1px solid var(--borde);
  border-radius:12px;padding:14px;font-size:15px;color:var(--tenue);
  margin-bottom:14px;
}

/* Lista de clientes de la caja: nombre, premios y progreso de un vistazo */
.lista--clientes li{display:block}
.fila-nombre{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:4px;
}
.chip-premio{
  flex:0 0 auto;
  background:linear-gradient(140deg,#f0c268,#d4a24e);color:#1a1409;
  font-size:12px;font-weight:800;letter-spacing:.02em;
  padding:4px 10px;border-radius:40px;white-space:nowrap;
}
/* Las estrellas se achican para que los diez quepan en una linea de celular */
.estrellas{
  font-size:14px;letter-spacing:1px;line-height:1.4;
  margin:2px 0 4px;
}

/* ─── Panel de administracion ─────────────────────────────────────── */
.cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.cifra{
  background:var(--negro-2);border:1px solid var(--borde);border-radius:14px;
  padding:14px;text-align:center;
}
.cifra__n{display:block;font-size:30px;font-weight:800;color:var(--oro);line-height:1.1}
.cifra__n--alerta{color:#e8b04b}
.cifra__t{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--tenue);margin-top:4px}

.mini-tabla div{
  display:flex;justify-content:space-between;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--borde);font-size:14px;
}
.mini-tabla div:last-child{border-bottom:0}

.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--tenue);font-weight:700;padding:6px 4px;border-bottom:1px solid var(--borde);
}
.tabla td{padding:8px 4px;border-bottom:1px solid var(--borde);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.alerta{color:#e8907c}

/* Grafica de barras sin librerias: son catorce numeros */
.barras{display:flex;align-items:flex-end;gap:4px;height:110px;margin-top:10px}
.barra{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.barra__relleno{background:linear-gradient(180deg,#e8b04b,#8a6a2c);border-radius:3px 3px 0 0}
.barra__dia{font-size:10px;color:var(--tenue);text-align:center;margin-top:3px}

.variables{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.variables code,.codigo{
  background:rgba(212,162,78,.12);border:1px solid rgba(212,162,78,.3);
  color:var(--oro);padding:2px 7px;border-radius:6px;font-size:12px;
}
textarea{
  width:100%;background:#0d0b08;color:var(--crema);
  border:1px solid var(--borde);border-radius:10px;padding:12px;
  font:14px/1.5 ui-monospace,monospace;resize:vertical;
}
.tarjeta--premio{border-color:rgba(212,162,78,.5);background:rgba(212,162,78,.07)}
.premio-fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0}
.estrellas--grande{font-size:20px;letter-spacing:2px}
.ajuste summary{cursor:pointer;color:var(--tenue);font-size:13px;margin-top:10px}
.aviso--alerta{border-color:rgba(232,144,124,.4);background:rgba(232,144,124,.1)}

.menu{
  display:flex;gap:4px;overflow-x:auto;
  padding:8px 14px;border-bottom:1px solid var(--borde);background:var(--negro-2);
}
.menu a{
  flex:0 0 auto;padding:7px 14px;border-radius:40px;
  font-size:13px;font-weight:600;color:var(--tenue);text-decoration:none;
  border:1px solid transparent;
}
.menu a:hover{color:var(--oro);border-color:rgba(212,162,78,.35)}

.ajuste-rapido{display:flex;gap:8px;margin-bottom:8px}
.ajuste-rapido button{flex:1;padding:10px 8px;font-size:13px}

/* Pantalla de marca */
.vista-logo{
  background:#12100c;border:1px solid var(--borde);border-radius:12px;
  padding:16px;margin:8px 0;text-align:center;
}
.vista-logo img{max-width:100%;max-height:90px;height:auto}
.fila-color{display:flex;align-items:center;gap:10px;margin:6px 0}
.fila-color input[type=color]{
  width:56px;height:38px;padding:2px;border-radius:8px;
  border:1px solid var(--borde);background:var(--negro-2);cursor:pointer;
}