/* ---------- Lista de pedido (js/pedido.js) ---------- */

/* Barra fija abajo: solo existe a la vista cuando hay algo en la lista */
.barra-pedido {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.6rem var(--margen) max(0.6rem, env(safe-area-inset-bottom));
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-top: 2px solid var(--azul);
  background: var(--fondo-alto);
  color: var(--blanco);
  font-family: var(--f-mono);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  animation: barra-entra 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.barra-pedido[hidden] { display: none; }

.barra-pedido:active { background: var(--azul-profundo); }

@keyframes barra-entra {
  from { transform: translateY(100%); }
  to { transform: none; }
}

.barra-pedido__flecha {
  width: 0.9rem;
  flex: none;
  fill: var(--azul-claro);
}

/* Confirmación al agregar: una capa azul que sube por la barra y se desvanece */
.barra-pedido__capa {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--azul);
  transform: scaleY(0);
  transform-origin: bottom;
  opacity: 0;
}

.barra-pedido--sube .barra-pedido__capa {
  animation: barra-capa 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes barra-capa {
  0% { transform: scaleY(0); opacity: 1; }
  45% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* Con la barra a la vista, nada de la página queda debajo de ella */
html.con-pedido body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
html.con-pedido .progreso__contador { bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
html.con-pedido .aviso-flotante { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) {
  .barra-pedido,
  .barra-pedido--sube .barra-pedido__capa { animation: none; }
}

/* Hoja de producto: dos botones fijos abajo */
.hoja__pie--doble {
  display: grid;
  gap: 0.5rem;
}

.hoja__solo {
  width: 100%;
  min-height: 2.9rem;
  font-size: 0.9rem;
}

/* ---------- Hoja "Mi pedido" ---------- */
.pedido__contenido {
  padding-top: 1rem;
}

.pedido__titulo {
  font-size: clamp(1.2rem, 5.6vw, 1.6rem);
}

.pedido__titulo:focus { outline: none; }

.pedido__lista {
  display: grid;
  border-top: 1px solid var(--linea);
}

/* Cada línea, una capa: color, nombre, cantidad, subtotal */
.linea {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  grid-template-areas:
    "color info subtotal"
    "color cantidad quitar";
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linea);
}

.linea__color {
  grid-area: color;
  align-self: start;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--filamento);
  box-shadow: 0 0 0 1px var(--linea-fuerte);
}

.linea__info {
  grid-area: info;
  display: grid;
  gap: 0.1rem;
}

.linea__info b { font-weight: 600; }

.linea__info span {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.linea__subtotal {
  grid-area: subtotal;
  align-self: start;
  font-family: var(--f-mono);
  font-size: 1rem;
}

.linea__cantidad {
  grid-area: cantidad;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  border: 1px solid var(--linea-fuerte);
}

.linea__boton {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 1.2rem;
  cursor: pointer;
}

.linea__boton:active { background: rgb(255 255 255 / 0.08); }
.linea__boton:disabled { opacity: 0.35; cursor: not-allowed; }

.linea__numero {
  min-width: 2rem;
  font-family: var(--f-mono);
  font-weight: 600;
  text-align: center;
}

.linea__quitar {
  grid-area: quitar;
  min-height: 2.75rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--texto-suave);
  font-family: var(--f-mono);
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.pedido__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 0.25rem;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.pedido__total strong {
  font-size: 1.6rem;
  letter-spacing: 0;
  color: var(--blanco);
}

.pedido__total[hidden],
.pedido__vacio[hidden],
.pedido__nota[hidden] { display: none; }

.pedido__aviso {
  padding: 0.5rem 0.7rem;
  border-left: 2px solid var(--azul-claro);
}

.pedido__vacio,
.pedido__nota {
  font-size: 0.9rem;
  color: var(--texto-suave);
}

.hoja__pie .hoja__pedir[hidden] { display: none; }