/* Tienda real (etapa 1): carrito, cuenta por juego, ventana de pago y estado del pedido.
   Usa las mismas variables y formas de tienda.css (la muestra aprobada por Paula). */

.compra .neon{top:-40px;height:300px}
[hidden]{display:none!important}

/* ---- tu cuenta ---- */
.cuenta-filas{display:grid;gap:12px}
.cuenta-dos{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:10px}
@media (max-width:520px){.cuenta-dos{grid-template-columns:minmax(0,1fr)}}
.campo-t{display:grid;gap:6px;font:700 11px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.campo-t input,.campo-t select,.ventana-pago input[type=email],.ventana-pago input[type=text]{min-width:0;width:100%;padding:13px 14px;background:var(--noche);border:1px solid var(--borde);color:var(--texto);font:600 16px/1.2 var(--body);letter-spacing:0;text-transform:none;clip-path:var(--corte)}
.campo-t input:focus,.campo-t select:focus,.ventana-pago input:focus{outline:none;border-color:var(--fucsia);background:#FF2E930f}
.campo-t input[aria-invalid="true"],.campo-t select[aria-invalid="true"]{border-color:var(--rosa)}
.campo-error{margin:0;color:var(--rosa);font-size:13px}
.sin-cuenta{margin:0;padding:12px 14px;border:1px dashed var(--borde);color:var(--suave)}

/* ---- paquetes con cantidad ---- */
.item.sin-precio{cursor:not-allowed;opacity:.55}
.item.sin-precio:hover{transform:none}
.item .en-carrito{position:absolute;top:8px;left:8px;z-index:2;min-width:28px;padding:5px 7px;background:var(--lima);color:var(--tinta);font:700 12px/1 var(--hud);text-align:center}

/* ---- boleto ---- */
.b-lineas{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px;font-size:14px}
.b-lineas li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed #e7cfe0;padding-bottom:6px}
.b-lineas li span:last-child{font:700 14px/1.3 var(--hud);white-space:nowrap}
.b-lineas li{align-items:center}
.b-lineas .vacio-b{color:#9a7a8e;justify-content:flex-start}
.paso-b{display:inline-flex;align-items:center;gap:6px;flex:none}
.paso-b button{width:28px;height:28px;border:1px solid #d9b6cc;background:#fff;color:var(--tinta);font:700 15px/1 var(--hud);cursor:pointer;display:grid;place-items:center;padding:0}
.paso-b button:hover{border-color:var(--fucsia)}
.paso-b b{min-width:16px;text-align:center;font:700 14px/1 var(--hud)}
.n-b{flex:1;min-width:0;overflow-wrap:anywhere}
.b-total span:first-child{font:700 13px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase}
.b-total span:last-child{font-family:var(--titulo)!important;font-size:22px!important}

/* ---- ventana de pago ---- */
.ventana-pago{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--borde);background:var(--panel);color:var(--texto);clip-path:var(--corte);overflow:hidden}
.ventana-pago[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.ventana-pago::backdrop{background:#0C0612cc;backdrop-filter:blur(3px)}
.pago-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--borde);margin:0}
.pago-cab h2{margin:0;font-family:var(--titulo);font-weight:400;font-size:24px;text-transform:uppercase}
.pago-cab h2 em{font-style:normal;color:var(--fucsia)}
.ventana-pago .cerrar{border:1px solid var(--borde);background:var(--noche);width:40px;height:40px;cursor:pointer;font-size:16px}
.pago-cuerpo{overflow-y:auto;padding:18px;display:grid;gap:18px;align-content:start}
.pago-bloque{display:grid;gap:10px}
.pago-bloque>h3{margin:0;font:700 13px/1 var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--rosa)}
.resumen-pago{display:grid;gap:6px;padding:14px;background:var(--noche2);border:1px solid var(--borde)}
.resumen-pago .fila{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:0;border:0}
.resumen-pago .fila+.fila{padding-top:6px;border-top:1px solid #ffffff10}
.resumen-pago .fila b{text-align:right;overflow-wrap:anywhere}
.resumen-pago .fila span:first-child{color:var(--suave)}
.monto-exacto{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px;border:2px solid var(--lima);background:#C6F43212}
.monto-exacto b{font-family:var(--titulo);font-size:28px;color:var(--lima)}
.aviso-pais{margin:0;padding:12px 14px;border-left:4px solid var(--oro);background:#FFC94A14;font-size:14px}
.medios{display:grid;gap:10px}
.medio{padding:12px 14px;border:1px solid var(--borde);background:var(--noche);display:grid;gap:8px}
.medio>b{font:700 14px/1.2 var(--hud);letter-spacing:.06em;text-transform:uppercase}
.medio .nota-medio{margin:0;color:var(--suave);font-size:13px}
.linea-pago{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.linea-pago span{color:var(--suave);font-size:13px}
.linea-pago code{font:700 15px/1.3 var(--hud);letter-spacing:.04em;overflow-wrap:anywhere;color:var(--texto)}
.copiar{border:1px solid var(--borde);background:var(--panel);padding:7px 10px;cursor:pointer;font:700 11px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase;color:var(--texto)}
.copiar:hover{border-color:var(--lima)}
.copiar.hecho{border-color:var(--menta);color:var(--menta)}
.subir{position:relative;display:grid;place-items:center;gap:6px;padding:18px;border:2px dashed var(--borde);background:var(--noche);cursor:pointer;text-align:center;color:var(--suave)}
.subir:hover,.subir:focus-within{border-color:var(--fucsia)}
.subir input{position:absolute;opacity:0;width:1px;height:1px}
.subir b{color:var(--texto)}
.vista-comp{display:flex;gap:12px;align-items:center}
.vista-comp small{color:var(--suave);overflow-wrap:anywhere}
.vista-comp img{width:84px;height:84px;object-fit:cover;border:1px solid var(--borde)}
.terminos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;font-size:14px;cursor:pointer}
.terminos input{width:20px;height:20px;margin-top:2px;accent-color:var(--fucsia)}
.reglas{margin:0;padding-left:18px;color:var(--suave);font-size:13px;display:grid;gap:4px}
.ventana-pago .error{margin:0;color:var(--rosa);font-size:14px}
.ventana-pago .comprar{margin-top:0}

/* ---- estado del pedido ---- */
.estado-pedido{max-width:760px;margin-inline:auto;display:grid;gap:16px;padding:22px;background:linear-gradient(160deg,var(--panel),var(--noche2));border:1px solid var(--borde);clip-path:var(--corte)}
.estado-pedido h2{margin:0;font-family:var(--titulo);font-weight:400;font-size:clamp(26px,4vw,36px);text-transform:uppercase}
.estado-pedido h2 em{font-style:normal;color:var(--fucsia)}
.numero-pedido{font:700 clamp(24px,5vw,34px)/1 var(--hud);letter-spacing:.12em;color:var(--lima)}
.pasos-pedido{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pasos-pedido li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;color:var(--suave)}
.pasos-pedido i{width:18px;height:18px;transform:rotate(45deg);border:2px solid var(--borde);display:block}
.pasos-pedido li.hecho{color:var(--texto)}
.pasos-pedido li.hecho i{background:var(--menta);border-color:var(--menta)}
.pasos-pedido li.ahora{color:var(--texto);font-weight:600}
.pasos-pedido li.ahora i{border-color:var(--lima);box-shadow:0 0 12px var(--lima)}
.guardar-enlace{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:12px;border:1px dashed var(--lima);background:#C6F4320d;font-size:14px}
.lista-pedidos{display:grid;gap:8px}
.lista-pedidos a{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--borde);background:var(--noche);color:inherit;text-decoration:none}
.lista-pedidos a:hover{border-color:var(--fucsia)}
.btn-sec{border:1px solid var(--borde);background:var(--noche);padding:11px 16px;cursor:pointer;font:700 12px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;color:var(--texto);text-decoration:none;display:inline-block}
.btn-sec:hover{border-color:var(--fucsia)}
.cargando{margin:0;color:var(--suave)}
.botones-pedido{display:flex;flex-wrap:wrap;gap:8px}
.btn-sec.principal-sec{border-color:var(--fucsia);background:#FF2E931f}

/* QR del medio de pago (12/oct) */
.qr-medio{display:grid;justify-items:center;gap:8px;padding-top:4px}
.qr-medio img{display:block;width:200px;max-width:100%;height:auto;border-radius:10px;background:#fff}
.qr-medio .copiar{text-decoration:none}

/* «Vas a recargar la cuenta: …» antes de pagar (13/oct): el nombre del jugador grande y «Sí, es mi cuenta» */
.confirma-cuenta{display:grid;gap:4px;margin:0 0 12px;padding:14px 16px;border-radius:14px;background:#3EE6A614;border:1px solid #3EE6A666}
.confirma-cuenta span{font-size:13px;color:var(--suave)}
.confirma-cuenta b{font:800 20px/1.2 var(--body);color:var(--menta);overflow-wrap:anywhere}
.confirma-cuenta small{font-size:13px;color:var(--suave)}
/* La lista abierta toma el fondo del campo: al tocarlo, fondo oscuro sólido (no el rosado transparente) para que se lea (13/oct) */
.campo-t select:focus{background:#22112B}