/* Página de pedidos de El Tongri: el mismo sistema de la landing (fondo negro, atardecer de calor, Archivo). */
:root {
  --vacio: #000000;
  --vacio-2: #0f0f12;
  --tarjeta: #17141b;
  --violeta: #3b146b;
  --purpura: #7b208f;
  --magenta: #c9349b;
  --coral: #f87572;
  --naranja: #ff9b55;
  --oro: #ffc23d;
  --tiza: #fff6ec;
  --lila: #bba8d6;
  --linea: rgba(255, 246, 236, .12);
  --error: #ff6b6b;
  --calor: linear-gradient(90deg, var(--purpura), var(--magenta), var(--coral), var(--naranja));
}
* { box-sizing: border-box; margin: 0; }
html, body { overflow-x: hidden; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--vacio); color: var(--tiza); font: 400 16px/1.5 Archivo, system-ui, sans-serif; padding-bottom: 110px; }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
.cont { width: 100%; max-width: 560px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.gris { color: var(--lila); font-size: 14px; }
.centro { text-align: center; }
.chiquito { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--lila); }

.cabeza { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 20px; }
.logo { width: 180px; height: auto; }
.estado { font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--linea); background: rgba(255, 246, 236, .06); }
.estado.abierto::before { content: "● "; color: #3fc27a; }
.estado.cerrado::before { content: "● "; color: var(--error); }
.aviso { font-size: 14px; text-align: center; color: var(--oro); }

.titulo { margin: 22px 0 4px; display: flex; justify-content: center; }
.titulo img { width: min(320px, 80%); height: auto; }
.sub { text-align: center; color: var(--lila); font-size: 15px; margin-bottom: 18px; }
.cargando { text-align: center; color: var(--lila); padding: 40px 0; }

.categoria { margin: 22px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.bebidas { display: grid; gap: 10px; }
.bebida {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px; text-align: left; cursor: pointer;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 18px; transition: transform .15s, border-color .15s;
}
.bebida:hover { border-color: var(--magenta); }
.bebida:active { transform: scale(.98); }
.bebida[disabled] { opacity: .45; cursor: not-allowed; }
.bebida .vaso { width: 58px; height: 92px; flex-shrink: 0; }
.bebida .info { flex: 1; min-width: 0; }
.bebida .nombre { display: block; font-size: 18px; font-weight: 800; line-height: 1.15; }
.bebida .desc { display: block; color: var(--lila); font-size: 13px; margin-top: 2px; }
.bebida .precio { display: block; margin-top: 6px; font-weight: 700; color: var(--oro); }
.sellos { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.sello { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 6px; background: rgba(255, 246, 236, .1); }
.sello.mas18 { background: var(--magenta); }
.sello.agotado { background: var(--error); color: #000; }
.mas { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 99px; background: var(--calor); font-size: 24px; font-weight: 700; flex-shrink: 0; }
.legal { margin: 28px 0 0; font-size: 11px; color: var(--lila); text-align: center; }

.boton {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 18px; border: 0; cursor: pointer;
  border-radius: 14px; background: var(--calor); color: #fff; font-weight: 800; font-size: 16px;
}
.boton.grande { min-height: 56px; font-size: 17px; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }
.boton b { margin-left: auto; }
.barra-pedido { position: fixed; inset: auto 0 0; z-index: 20; padding: 12px max(16px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, #000 35%); }
.barra-pedido .boton { max-width: 528px; margin: 0 auto; }
#n-pedido { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 99px; background: #fff; color: var(--magenta); font-size: 14px; }

/* Hojas que suben desde abajo */
.hoja { width: 100%; max-width: 560px; max-height: 92svh; margin: auto auto 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: var(--vacio-2); color: var(--tiza); }
.hoja::backdrop { background: rgba(0, 0, 0, .7); }
.hoja[open] { animation: sube .25s cubic-bezier(.22, 1, .36, 1); }
@keyframes sube { from { transform: translateY(30px); opacity: 0; } }
.hoja-cuerpo { display: flex; flex-direction: column; gap: 16px; padding: 18px max(16px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-bottom)); }
.hoja-cabeza { display: flex; align-items: center; gap: 14px; }
.hoja-cabeza > div:last-of-type { flex: 1; min-width: 0; }
.hoja-cabeza h2 { font-size: 22px; font-weight: 900; line-height: 1.1; flex: 1; }
.vaso-chico svg { width: 52px; height: 84px; }
.cerrar { width: 40px; height: 40px; border-radius: 99px; border: 1px solid var(--linea); background: transparent; cursor: pointer; flex-shrink: 0; align-self: flex-start; }

#armar-opciones { display: grid; gap: 18px; }
.grupo h3 { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--lila); margin-bottom: 8px; }
.grupo h3 small { letter-spacing: 0; text-transform: none; font-weight: 600; }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chip { min-height: 48px; padding: 6px 10px; border-radius: 12px; border: 2px solid var(--linea); background: transparent; cursor: pointer; font-weight: 700; line-height: 1.15; }
.chip small { display: block; font-weight: 500; color: var(--lila); font-size: 12px; }
.chip[aria-pressed="true"] { border-color: var(--oro); background: rgba(255, 194, 61, .14); }
.chip[disabled] { opacity: .35; cursor: not-allowed; }
.cantidad { display: flex; align-items: center; justify-content: center; gap: 26px; }
#cantidad { min-width: 40px; text-align: center; font-size: 34px; font-weight: 900; }
.redondo { width: 52px; height: 52px; border-radius: 99px; border: 0; background: rgba(255, 246, 236, .1); font-size: 26px; cursor: pointer; }
.redondo[disabled] { opacity: .35; }

.lineas { list-style: none; padding: 0; display: grid; gap: 8px; }
.linea { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--tarjeta); }
.linea .vaso { width: 30px; height: 48px; flex-shrink: 0; }
.linea .que { flex: 1; min-width: 0; }
.linea .que b { display: block; line-height: 1.2; }
.linea .que small { color: var(--lila); }
.linea .redondo { width: 34px; height: 34px; font-size: 18px; }
.linea .n { min-width: 18px; text-align: center; font-weight: 800; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; border: 0; padding: 0; }
.campo legend { margin-bottom: 6px; }
.campo input { min-height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--linea); background: var(--tarjeta); font-size: 16px; font-weight: 500; }
.campo input:focus { outline: 2px solid var(--magenta); outline-offset: 1px; }
.elegir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.elegir input { position: absolute; opacity: 0; pointer-events: none; }
.elegir span { display: grid; place-items: center; min-height: 52px; padding: 6px; border-radius: 12px; border: 2px solid var(--linea); text-align: center; font-weight: 700; cursor: pointer; }
.elegir input:checked + span { border-color: var(--oro); background: rgba(255, 194, 61, .14); }
.elegir input:focus-visible + span { outline: 2px solid var(--magenta); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--magenta); flex-shrink: 0; }
.error { padding: 10px 12px; border-radius: 12px; background: rgba(255, 107, 107, .15); color: var(--error); font-weight: 600; font-size: 14px; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; }
.total b { font-size: 28px; font-weight: 900; }

.listo { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; text-align: center; overflow-y: auto; padding: 24px 0;
  background: radial-gradient(ellipse at 50% 115%, var(--purpura) 0%, var(--violeta) 30%, var(--vacio) 65%); }
.simbolo { width: 120px; height: auto; margin-bottom: 14px; }
.numero { font-size: 64px; font-weight: 900; line-height: 1; letter-spacing: .04em; }
.listo-estado { margin: 14px 0 6px; font-size: 22px; font-weight: 800; color: var(--oro); }
.listo .boton { margin-top: 26px; }