.mi-lista { max-width: 720px; margin: 0 auto; padding: 0 var(--espacio-md) var(--espacio-xl); }

.mi-lista__titulo {
  background: var(--color-primario);
  color: #fff;
  padding: var(--espacio-md);
  margin: 0 calc(var(--espacio-md) * -1) var(--espacio-md);
  text-align: center;
}

.mi-lista__vacio { text-align: center; color: var(--color-texto-secundario); padding: var(--espacio-xl) 0; }

.mi-lista__items { display: flex; flex-direction: column; }

.mi-lista__item {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  align-items: center;
  gap: var(--espacio-sm);
  padding: var(--espacio-md) 0;
  border-bottom: 1px dashed var(--color-borde);
}
.mi-lista__item:last-child {
  border-bottom: none;
}
.mi-lista__item--finalizada {
  grid-template-columns: 1fr auto;
  opacity: 0.6;
}

.mi-lista__item-foto { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: var(--radio-sm); }

.mi-lista__item-info { display: ruby; gap: 6px; min-width: 0; }
.mi-lista__item-nombre { font-size: var(--fs-sm); font-weight: 700; }
.mi-lista__item-combo { font-size: var(--fs-xs); color: var(--color-texto-secundario); }

.mi-lista__item-subtotal { color: var(--color-primario); font-size: var(--fs-md); font-weight: 800; white-space: nowrap; }

.mi-lista__quitar { color: var(--color-primario-oscuro); padding: var(--espacio-xs); }
.mi-lista__quitar svg { width: 1.15rem; height: 1.15rem; display: block; }

.mi-lista__resumen { border-top: 2px solid var(--color-primario); margin-top: var(--espacio-md); padding-top: var(--espacio-md); }
.mi-lista__total { display: flex; align-items: center; gap: var(--espacio-sm); font-weight: 700; }
.mi-lista__total-info { display: flex; gap: var(--espacio-sm); flex: 1; }
.mi-lista__total strong { font-size: var(--fs-lg); color: var(--color-primario); white-space: nowrap; }

.mi-lista__vaciar { color: var(--color-primario-oscuro); padding: var(--espacio-xs); }
.mi-lista__vaciar svg { width: 1.15rem; height: 1.15rem; display: block; }

.mi-lista__acciones { display: flex; flex-direction: column; gap: var(--espacio-sm); margin-top: var(--espacio-lg); }
.mi-lista__acciones .boton { width: 100%; }

@media (min-width: 768px) {
  .mi-lista__acciones { flex-direction: row; justify-content: flex-end; }
  .mi-lista__acciones .boton { width: auto; }
}