/* =====================================================================
   CAJA (pedido.html) · compartida
   Sale del diseño del menú de Make it Easy: filas del pedido, bloques
   de entrega, resumen y pago, proceso y comprobante. Los colores los
   pone el tema de cada cafetería.
   ===================================================================== */

:root { --mp: #0A7DB4; }
.caja { position: relative; z-index: 2; padding-bottom: 40px; }
.vista { display: none; }
.vista.is-on { display: block; animation: vista-entra 380ms var(--ease) both; }
@keyframes vista-entra { from { opacity: 0; transform: translateY(10px); } }
.caja-hoja { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.caja-cabeza { padding: 34px 0 20px; }
.caja-cabeza h1 { font-size: clamp(34px, 6vw, 52px); }
.caja-cabeza p { margin-top: 10px; font-size: 15px; color: var(--texto-2); }

/* ---------- Filas del pedido ---------- */
.lista { margin-top: 6px; display: grid; gap: 10px; }
.fila {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; overflow: hidden;
  background: var(--caja-papel, var(--fondo-2)); border: 1px solid var(--linea); border-radius: var(--radio-fila, 16px);
  animation: fila-entra 520ms var(--ease) both;
}
@keyframes fila-entra { from { opacity: 0; transform: translateY(14px); } }
.fila.saliendo { animation: fila-sale 320ms var(--ease) forwards; }
@keyframes fila-sale { to { opacity: 0; transform: translateX(-40px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -10px; border-width: 0; } }
.mini { width: 60px; height: 60px; flex: none; border-radius: 12px; overflow: hidden; background: var(--fondo-3); display: grid; place-items: center; color: var(--texto-3); }
.mini img { width: 100%; height: 100%; object-fit: var(--mini-ajuste, cover); }
.fila .txt { min-width: 0; flex: 1; }
.fila .txt b { display: block; font-weight: 800; font-size: 15px; line-height: 1.25; color: var(--titulo); }
.fila .txt span { display: block; font-size: 13px; color: var(--texto-3); margin-top: 2px; }
.fila .txt em { display: block; font-style: normal; font-size: 13.5px; color: var(--acento-texto, var(--acento)); font-weight: 800; margin-top: 4px; }
.fila .cantidad button { width: 34px; height: 34px; }
.borrar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--texto-3); transition: background-color .2s, color .2s; }
.borrar:hover { background: var(--peligro-suave); color: var(--peligro); }
.borrar .ico { width: 18px; height: 18px; }

.vacio { text-align: center; padding: 50px 20px 40px; display: grid; justify-items: center; gap: 10px; }
.vacio__ico { width: 74px; height: 74px; border-radius: 50%; background: var(--fondo-3); display: grid; place-items: center; color: var(--acento-texto, var(--acento)); margin-bottom: 8px; }
.vacio__ico .ico { width: 32px; height: 32px; }
.vacio h2 { font-size: 20px; color: var(--titulo); }
.vacio p { color: var(--texto-2); font-size: 15px; margin-bottom: 10px; }

/* ---------- Bloques: entrega, resumen, pago ---------- */
.bloque { background: var(--caja-papel, var(--fondo-2)); border: 1px solid var(--linea); border-radius: var(--radio-bloque, 18px); padding: 20px; margin-top: 16px; }
.bloque > .t { font: 700 11.5px/1 var(--f-etiqueta, var(--f-texto)); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 14px; }
.modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.modo {
  display: grid; gap: 4px; align-content: start; text-align: left; background: var(--fondo); border: 1.5px solid var(--linea);
  border-radius: 14px; padding: 14px; transition: border-color .2s, background-color .2s, color .2s;
}
.modo .ico { width: 22px; height: 22px; color: var(--acento-texto, var(--acento)); margin-bottom: 4px; }
.modo:hover { border-color: var(--acento); }
.modo b { font-size: 15px; font-weight: 800; color: var(--titulo); }
.modo span { font-size: 12.8px; color: var(--texto-3); line-height: 1.4; }
.modo.is-on { background: var(--titulo); border-color: var(--titulo); }
.modo.is-on b, .modo.is-on .ico { color: var(--fondo); }
.modo.is-on span { color: var(--fondo); opacity: .75; }
.datos { display: grid; gap: 14px; margin-top: 16px; }
.datos .campo small { font-weight: 500; }

.linea { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 15px; color: var(--texto-2); }
.linea b { color: var(--titulo); font-weight: 700; text-align: right; white-space: nowrap; }
.linea.total { border-top: 1px solid var(--linea); margin-top: 8px; padding-top: 15px; font-size: 17px; }
.linea.total b { font-size: 26px; font-weight: 800; color: var(--acento-texto, var(--acento)); }
.tic { animation: tic 300ms var(--ease-rebote); display: inline-block; }
@keyframes tic { 45% { transform: scale(1.3); } }

.pago { display: flex; align-items: center; gap: 14px; background: var(--fondo); border: 1.5px solid var(--mp); border-radius: 14px; padding: 14px 16px; }
.pago .mp { width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--mp); color: #fff; display: grid; place-items: center; }
.pago .mp .ico { width: 26px; height: 26px; }
.pago .tx b, .forma .tx b { display: block; font-size: 15px; font-weight: 800; color: var(--titulo); }
.pago .tx span, .forma .tx span { display: block; font-size: 13px; color: var(--texto-3); margin-top: 2px; }
.pago .chk { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--mp); color: #fff; display: grid; place-items: center; flex: none; }
.pago .chk .ico { width: 15px; height: 15px; stroke-width: 3.2; }
.pago-nota { margin-top: 12px; font-size: 13px; color: var(--texto-3); }

.pagar {
  display: block; width: 100%; margin-top: 16px; min-height: 56px; border-radius: 99px; padding: 16px 20px;
  background: var(--mp); color: #fff; font-weight: 800; font-size: 16px; text-decoration: none; text-align: center;
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .45); transition: transform .2s var(--ease-rebote), box-shadow .24s;
}
.pagar:hover { transform: translateY(-2px); box-shadow: 0 20px 32px -16px rgba(0, 0, 0, .5); }
.pagar:active { transform: scale(.985); }
.demo-tag {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font: 700 10.5px/1 var(--f-etiqueta, var(--f-texto));
  letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); background: var(--fondo-3); border-radius: 99px; padding: 7px 12px;
}
.caja-pie { padding: 26px 0 10px; text-align: center; font-size: 13px; color: var(--texto-3); line-height: 1.7; }

/* ---------- Pago simulado ---------- */
.aviso-demo {
  display: flex; align-items: center; gap: 12px; margin-top: 4px; background: var(--acento-suave);
  border: 1px solid var(--acento); border-radius: 14px; padding: 12px 15px; font-size: 14px; line-height: 1.5; color: var(--acento-texto, var(--titulo));
}
.aviso-demo .ico { width: 20px; height: 20px; }
.medios { display: grid; gap: 10px; }
.forma { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: var(--fondo); border: 1.5px solid var(--linea); border-radius: 14px; padding: 13px 15px; transition: border-color .2s, background-color .2s; }
.forma:hover { border-color: var(--acento); }
.forma.is-on { border-color: var(--mp); background: var(--caja-papel, var(--fondo-2)); }
.forma .ic { width: 42px; height: 42px; flex: none; border-radius: 11px; background: var(--fondo-3); display: grid; place-items: center; color: var(--texto-2); }
.forma.is-on .ic { background: var(--mp); color: #fff; }
.forma .ic .ico { width: 21px; height: 21px; }
.forma .punto { margin-left: auto; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--linea-2); display: grid; place-items: center; }
.forma.is-on .punto { border-color: var(--mp); }
.forma.is-on .punto::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mp); }

.proceso { text-align: center; padding: 40px 0 10px; }
.rueda { width: 56px; height: 56px; margin: 0 auto 22px; border-radius: 50%; border: 3px solid rgba(0, 158, 227, .2); border-top-color: var(--mp); animation: girar 900ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.pasos { display: inline-grid; text-align: left; }
.paso { display: flex; align-items: center; gap: 11px; padding: 7px 0; font-size: 15px; color: var(--texto-3); opacity: .5; transition: opacity .3s, color .3s; }
.marca-paso { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--linea-2); display: grid; place-items: center; color: #fff; }
.marca-paso .ico { width: 12px; height: 12px; stroke-width: 3.4; opacity: 0; }
.paso.listo { opacity: 1; color: var(--titulo); }
.paso.listo .marca-paso { background: var(--ok); border-color: var(--ok); }
.paso.listo .marca-paso .ico { opacity: 1; }

/* ---------- Comprobante ---------- */
.compro { text-align: center; padding: 30px 0 0; }
.compro .tilde { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; background: var(--ok-suave); display: grid; place-items: center; }
.compro .tilde svg { width: 34px; height: 34px; stroke: var(--ok); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: tilde 560ms var(--ease) .15s forwards; }
@keyframes tilde { to { stroke-dashoffset: 0; } }
.compro h1 { font-size: clamp(32px, 6vw, 46px); }
.compro__sub { margin: 10px auto 0; max-width: 44ch; font-size: 15.5px; color: var(--texto-2); }
.ticket { margin: 22px auto 0; max-width: 440px; text-align: left; background: var(--caja-papel, var(--fondo-2)); border: 1px solid var(--linea); border-radius: 18px; padding: 20px; }
.ticket__numero { display: grid; justify-items: center; gap: 4px; background: var(--fondo); border: 1.5px dashed var(--acento); border-radius: 12px; padding: 12px; margin-bottom: 16px; }
.ticket__numero small { font: 700 11px/1 var(--f-etiqueta, var(--f-texto)); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.ticket__numero .cod { font: 800 34px/1 var(--f-numero, var(--f-texto)); letter-spacing: .06em; color: var(--acento-texto, var(--acento)); }
.seguimiento { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 0; }
.seguimiento li { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0 7px 2px; font-size: 15px; color: var(--texto-3); }
.seguimiento li span { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--linea-2); background: var(--caja-papel, var(--fondo-2)); position: relative; z-index: 1; }
.seguimiento li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 24px; bottom: -8px; width: 2px; background: var(--linea); }
.seguimiento li.hecho { color: var(--texto-2); }
.seguimiento li.hecho span { background: var(--ok); border-color: var(--ok); }
.seguimiento li.hecho::after { background: var(--ok) !important; }
.seguimiento li.ahora { color: var(--titulo); font-weight: 800; }
.seguimiento li.ahora span { border-color: var(--ok); box-shadow: 0 0 0 5px var(--ok-suave); animation: latido 1.6s ease-in-out infinite; }
.seguimiento li small { font-weight: 500; color: var(--texto-3); font-variant-numeric: tabular-nums; }
@keyframes latido { 50% { box-shadow: 0 0 0 9px transparent; } }
.fila-espera { font-size: 14px; color: var(--texto-2); background: var(--fondo-3); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.fila-espera b { color: var(--titulo); }
.probar-panel { display: flex; gap: 12px; align-items: flex-start; max-width: 440px; margin: 16px auto 0; text-align: left; font-size: 14px; color: var(--texto-2); padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--linea-2); }
.probar-panel .ico { width: 20px; height: 20px; color: var(--acento-texto, var(--acento)); margin-top: 1px; }
.probar-panel b { color: var(--titulo); }
.volver { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 440px; min-height: 52px; margin: 20px auto 0; border-radius: 99px; background: var(--titulo); color: var(--fondo); font-weight: 800; font-size: 15px; text-decoration: none; transition: transform .2s var(--ease-rebote); }
.volver:hover { transform: translateY(-2px); }

@media (max-width: 720px) {
  .caja-hoja { padding: 0 14px; }
  .caja-cabeza { padding: 24px 0 14px; }
  .fila { gap: 10px; padding: 10px 11px; }
  .mini { width: 52px; height: 52px; border-radius: 10px; }
  .fila .txt b { font-size: 14px; }
  .fila .cantidad button { width: 32px; height: 32px; }
  .borrar { width: 34px; height: 34px; }
  .bloque { padding: 16px 15px; border-radius: 15px; }
  .modos { grid-template-columns: 1fr; }
  .modo { grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
  .modo .ico { grid-row: span 2; margin: 0; }
  .linea.total b { font-size: 22px; }
}
@media (hover: none) { .pagar:hover, .volver:hover { transform: none; } }